Merge pull request #10368 from looeee/docs/shadows/update

Updated Shadow docs

docs/api/lights/PointLight.html

@@ -95,7 +95,8 @@ scene.add( light );
 
 		<h3>[property:LightShadow shadow]</h3>
 		<div>
-			A [page:LightShadow] used to calculate shadows for this light.<br />
+			A [page:LightShadow] used to calculate shadows for this light.<br /><br />
+
 			 The lightShadow's [page:LightShadow.camera camera]
 			is set to a  [page:PerspectiveCamera] with [page:PerspectiveCamera.fov fov] of 90,
 			[page:PerspectiveCamera.aspect aspect] of 1, [page:PerspectiveCamera.near near]

docs/api/lights/shadows/DirectionalLightShadow.html

@@ -12,19 +12,83 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">TODO</div>
+		<div class="desc">
+			This used internally by [page:DirectionalLight DirectionalLights] for calculating shadows.<br /><br />
 
-		<h2>Constructor</h2>
+			Unlike the other shadow classes, this uses an [page:OrthographicCamera] to calculate the shadows,
+			rather than a [page:PerspectiveCamera]. This is because light rays from a [page:DirectionalLight]
+			are parallel.
+		</div>
+
+		<h2>Example</h2>
+		<div>
+			<code>
+//Create a WebGLRenderer and turn on shadows in the renderer
+var renderer = new THREE.WebGLRenderer();
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+//Create a DirectionalLight and turn on shadows for the light
+var light = new THREE.DirectionalLight( 0xffffff, 1, 100 );
+light.position.set( 0, 1, 0 ); 			//default; light shining from top
+light.castShadow = true;            // default false
+scene.add( light );
+
+//Set up shadow properties for the light
+light.shadow.mapSize.width = 512;  // default
+light.shadow.mapSize.height = 512; // default
+light.shadow.camera.near = 0.5;       // default
+light.shadow.camera.far = 500      // default
+
+//Create a sphere that cast shadows (but does not receive them)
+var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
+var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
+var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
+var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
+var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+scene.add( plane );
 
-		The constructor creates an [page:OrthographicCamera OrthographicCamera] to manage the shadow's view of the world.
+//Create a helper for the shadow camera (optional)
+var helper = new THREE.CameraHelper( light.shadow.camera );
+scene.add( helper );
+			</code>
+		</div>
+
+		<h2>Constructor</h2>
+		<h3>[name]( [page:Integer hex], [page:Float intensity] )</h3>
+		<div>
+			Creates a new [name]. This is not intended to be called directly - it is called
+			internally by [page:DirectionalLight].
+		</div>
 
 		<h2>Properties</h2>
+		<div>
+			See the base [page:LightShadow LightShadow] class for common properties.
+		</div>
 
-		See the base [page:LightShadow LightShadow] class for common properties.
+		<h3>[property:Camera camera]</h3>
+		<div>
+			The light's view of the world. This is used to generate a depth map of the scene; objects behind
+			other objects from the light's perspective will be in shadow.<br /><br />
 
-		<h2>Methods</h2>
+			The default is an [page:OrthographicCamera] with [page:OrthographicCamera.left left] and
+			[page:OrthographicCamera.bottom bottom] set to -5,  [page:OrthographicCamera.right right]
+			and  [page:OrthographicCamera.top top] set to 5, the [page:OrthographicCamera.near near]
+			clipping plane at 0.5 and the [page:OrthographicCamera.far far] clipping plane at 500.
+		</div>
 
-		See the base [page:LightShadow LightShadow] class for common methods.
+
+		<h2>Methods</h2>
+		<div>
+			See the base [page:LightShadow LightShadow] class for common methods.
+		</div>
 
 		<h2>Source</h2>
 

docs/api/lights/shadows/LightShadow.html

@@ -11,61 +11,127 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">TODO</div>
+		<div class="desc">
+			This used internally by [page:PointLight PointLights] for calculating shadows, and also serves as
+			a base class for the other shadow classes.
+		</div>
 
-		<h2>Constructor</h2>
 
+		<h2>Example</h2>
+		<div>
+			<code>
+//Create a WebGLRenderer and turn on shadows in the renderer
+var renderer = new THREE.WebGLRenderer();
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+//Create a PointLight and turn on shadows for the light
+var light = new THREE.PointLight( 0xffffff, 1, 100 );
+light.position.set( 0, 10, 0 );
+light.castShadow = true;            // default false
+scene.add( light );
+
+//Set up shadow properties for the light
+light.shadow.mapSize.width = 512;  // default
+light.shadow.mapSize.height = 512; // default
+light.shadow.camera.near = 0.5;       // default
+light.shadow.camera.far = 500      // default
+
+//Create a sphere that cast shadows (but does not receive them)
+var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
+var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
+var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
+var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
+var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+scene.add( plane );
+
+//Create a helper for the shadow camera (optional)
+var helper = new THREE.CameraHelper( light.shadow.camera );
+scene.add( helper );
+			</code>
+		</div>
+
+		<h2>Constructor</h2>
 
 		<h3>[name]( [page:Camera camera] )</h3>
 		<div>
-		[page:Camera camera] — The shadow's view of the world.
+		[page:Camera camera] - the light's view of the world.<br /><br />
+
+		Create a new [name]. This is not intended to be called directly - it is called
+		internally by [page:PointLight] or used as a base class by other light shadows.
 		</div>
 
 		<h2>Properties</h2>
 
 		<h3>[property:Camera camera]</h3>
 		<div>
-			The shadow's view of the world.
+			The light's view of the world. This is used to generate a depth map of the scene; objects behind
+			other objects from the light's perspective will be in shadow.
 		</div>
 
 		<h3>[property:Float bias]</h3>
 		<div>
 			Shadow map bias, how much to add or subtract from the normalized depth when deciding whether a surface is in shadow.<br />
-			Default — *0*.
+			The default is 0. Very tiny adjustments here (in the order of 0.0001) may help reduce artefacts in shadows
 		</div>
 
-		<h3>[property:Float radius]</h3>
+		<h3>[property:WebGLRenderTarget map]</h3>
 		<div>
-			TODO<br />
-			Default - *0*.
+			The depth map generated using the internal camera; a location beyond a pixel's depth is
+			in shadow. Computed internally during rendering.
 		</div>
 
+
 		<h3>[property:Vector2 mapSize]</h3>
 		<div>
-			The width and height of the shadow map stored in a [page:Vector2 Vector2].<br />
-			Default — *( 512, 512 )*.
+			A [Page:Vector2] defining the width and height of the shadow map.<br /><br />
+
+			Higher values give better quality shadows at the cost of computation time. Values must be
+			powers of 2, up to the [page:WebGLRenderer.capabilities].maxTextureSize for a given device,
+			although the width and height don't have to be the same (so, for example, (512, 1024) is valid).
+			The default is *( 512, 512 )*.
 		</div>
 
-		<h3>[property:WebGLRenderTarget map]</h3>
+
+		<h3>[property:Matrix4 matrix]</h3>
 		<div>
-			The depth map generated using the internal camera; a location beyond a pixel's depth is in shadow. Computed internally during rendering.
+			Model to shadow camera space, to compute location and depth in shadow map. Stored
+			in a [page:Matrix4 Matrix4]. This is computed internally during rendering.
 		</div>
 
-		<h3>[property:Matrix4 matrix]</h3>
+		<h3>[property:Float radius]</h3>
 		<div>
-			Model to shadow camera space, to compute location and depth in shadow map. Stored in a [page:Matrix4 Matrix4]. Computed internally during rendering.
+			Setting this this to values greater than 1 will blur the edges of the shadow.<br />
+
+			High values will cause unwanted banding effects in the shadows - a greater [page:.mapSize mapSize]
+			will allow for a higher value to be used here before these effects become visible.<br /><br />
+
+			Note that this has no effect if the [page:WebGLRenderer.shadowMap.type] is set to [page:Renderer BasicShadowMap].
 		</div>
 
 
 		<h2>Methods</h2>
 		<h3>[method:LightShadow copy]( [page:LightShadow source] )</h3>
 		<div>
-		Copies value of *source* to this LightShadow object.
+		Copies value of all the properties from the [page:LightShadow source] to this
+		SpotLight.
 		</div>
 
 		<h3>[method:LightShadow clone]()</h3>
 		<div>
-		It returns a clone of LightShadow.
+		Creates a new LightShadow with the same properties as this one.
+		</div>
+
+		<h3>[method:Object toJSON]()</h3>
+		<div>
+		Serialize this LightShadow.
 		</div>
 
 		<h2>Source</h2>

docs/api/lights/shadows/SpotLightShadow.html

@@ -12,23 +12,82 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">TODO</div>
+		<div class="desc">
+			This used internally by [page:SpotLight SpotLights] for calculating shadows.
+		</div>
+
+		<h2>Example</h2>
+		<div>
+			<code>
+//Create a WebGLRenderer and turn on shadows in the renderer
+var renderer = new THREE.WebGLRenderer();
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+//Create a SpotLight and turn on shadows for the light
+var light = new THREE.SpotLight( 0xffffff );
+light.castShadow = true;            // default false
+scene.add( light );
+
+//Set up shadow properties for the light
+light.shadow.mapSize.width = 512;  // default
+light.shadow.mapSize.height = 512; // default
+light.shadow.camera.near = 0.5;       // default
+light.shadow.camera.far = 500      // default
+
+//Create a sphere that cast shadows (but does not receive them)
+var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
+var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
+var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
+var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
+var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+scene.add( plane );
+
+//Create a helper for the shadow camera (optional)
+var helper = new THREE.CameraHelper( light.shadow.camera );
+scene.add( helper );
+			</code>
+		</div>
+
 
 		<h2>Constructor</h2>
 
 		The constructor creates a [page:PerspectiveCamera PerspectiveCamera] to manage the shadow's view of the world.
 
 		<h2>Properties</h2>
-
 		See the base [page:LightShadow LightShadow] class for common properties.
 
-		<h2>Methods</h2>
 
+	 <h3>[property:Camera camera]</h3>
+	 <div>
+		 The light's view of the world. This is used to generate a depth map of the scene; objects behind
+		 other objects from the light's perspective will be in shadow.<br /><br />
+
+		 The default is a  [page:PerspectiveCamera] with [page:PerspectiveCamera.fov fov] of 90,
+	  [page:PerspectiveCamera.aspect aspect] of 1, [page:PerspectiveCamera.near near]
+		clipping plane at 0.5 and	[page:PerspectiveCamera.far far] clipping plane at 500.
+	 </div>
+
+	 <h3>[property:Boolean isSpotLightShadow]</h3>
+	 <div>
+		 Used to check whether this or derived classes are spot light shadows. Default is *true*.<br /><br />
+
+		 You should not change this, as it used internally for optimisation.
+	 </div>
+
+		<h2>Methods</h2>
 		See the base [page:LightShadow LightShadow] class for common methods.
 
 		<h3>[method:SpotLightShadow update]( [page:SpotLight light] )</h3>
 		<div>
-		Updates the internal perspective camera.
+		Updates the internal perspective [page:.camera camera] based on the passed in [page:SpotLight light].
 		</div>
 
 		<h2>Source</h2>