Merge pull request #13035 from WestLangley/dev-shadow_side

Proposal: Support material.shadowSide

docs/api/deprecated/DeprecatedList.html

@@ -540,9 +540,14 @@
 
 			WebGLRenderer.shadowMapType is now [page:WebGLRenderer.shadowMap.type].<br /><br />
 
-			WebGLRenderer.shadowMapCullFace is now [page:WebGLRenderer.shadowMap.cullFace].<br /><br />
+			WebGLRenderer.shadowMapCullFace has been removed. Set [page:Material.shadowSide] instead.<br /><br />
+
+			WebGLRenderer.shadowMap.cullFace has been removed. Set [page:Material.shadowSide] instead.<br /><br />
+
+			WebGLRenderer.shadowMap.renderReverseSided has been removed. Set [page:Material.shadowSide] instead.<br /><br />
+
+			WebGLRenderer.shadowMap.renderSingleSided has been removed. Set [page:Material.shadowSide] instead.
 
-			WebGLRenderer.shadowMap.cullFace is deprecated. Set [page:WebGLRenderer.shadowMap.renderReverseSided] to true or false instead.
 		</div>
 
 		<h3>[page:WebGLRenderTarget]</h3>

docs/api/materials/Material.html

@@ -135,6 +135,11 @@
 		When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.
 		</div>
 
+		<h3>[property:Boolean flatShading]</h3>
+		<div>
+		Define whether the material is rendered with flat shading. Default is false.
+		</div>
+
 		<h3>[property:Boolean fog]</h3>
 		<div>Whether the material is affected by fog. Default is *true*.</div>
 
@@ -191,7 +196,7 @@
 		<h3>[property:String precision]</h3>
 		<div>
 		Override the renderer's default precision for this material. Can be "*highp*", "*mediump*" or "*lowp*".
-		Defaults is *null*.
+		Default is *null*.
 		</div>
 
 		<h3>[property:Boolean premultipliedAlpha]</h3>
@@ -207,9 +212,37 @@
 		Default is *false*.
 		</div>
 
-		<h3>[property:Boolean flatShading]</h3>
-		<div>
-		Define whether the material is rendered with flat shading. Default is false.
+		<h3>[property:Integer shadowSide]</h3>
+		<div>
+		Defines which side of faces cast shadows.
+		When set, can be [page:Materials THREE.FrontSide], [page:Materials THREE.BackSide], or [page:Materials THREE.DoubleSide]. Default is *null*. <br />
+		If *null*, the side casting shadows is determined as follows: <br />
+
+		<table>
+			<thead>
+				<tr>
+					<th>[page:Material.side]</th>
+					<th>Side casting shadows</th>
+				</tr>
+			</thead>
+			<tbody>
+
+				<tr>
+					<td>THREE.FrontSide</td>
+					<td>back side</td>
+				</tr>
+				<tr>
+					<td>THREE.BackSide</td>
+					<td>front side</td>
+				</tr>
+				<tr>
+					<td>THREE.DoubleSide</td>
+					<td>both sides</td>
+				</tr>
+			</tbody>
+		</table>
+
+
 		</div>
 
 		<h3>[property:Integer side]</h3>

docs/api/renderers/WebGLRenderer.html

@@ -240,21 +240,6 @@
 		<div>Defines shadow map type (unfiltered, percentage close filtering, percentage close filtering with bilinear filtering in shader)</div>
 		<div>Options are THREE.BasicShadowMap, THREE.PCFShadowMap (default), THREE.PCFSoftShadowMap. See [page:WebGLRenderer WebGLRenderer constants] for details.</div>
 
-		<h3>[property:Boolean shadowMap.renderReverseSided]</h3>
-		<div>
-		Whether to render the opposite side as specified by the material into the shadow map.
-			When disabled, an appropriate shadow.bias must be set on the light source for surfaces that can
-			both cast and receive shadows at the same time to render correctly. Default is *true*.
-		</div>
-
-		<h3>[property:Boolean shadowMap.renderSingleSided]</h3>
-		<div>
-		Whether to treat materials specified as double-sided as if they were specified as front-sided
-		when rendering the shadow map. When disabled, an appropriate shadow.bias must be set on the light
-		source for surfaces that can both cast and receive shadows at the same time to render correctly.
-		Default is *true*.
-		</div>
-
 		<h3>[property:Boolean sortObjects]</h3>
 		<div>
 		Defines whether the renderer should sort objects. Default is *true*.<br /><br />

examples/webgl_animation_cloth.html

@@ -230,7 +230,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.shadowMap.renderSingleSided = false;
 
 				container.appendChild( renderer.domElement );
 

examples/webgl_clipping.html

@@ -106,7 +106,6 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.renderSingleSided = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_clipping_advanced.html

@@ -268,7 +268,6 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.renderSingleSided = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_lights_hemisphere.html

@@ -213,7 +213,6 @@
 				renderer.gammaOutput = true;
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.renderReverseSided = false;
 
 				// STATS
 

examples/webgl_loader_ply.html

@@ -146,7 +146,6 @@
 				renderer.gammaOutput = true;
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.renderReverseSided = false;
 
 				container.appendChild( renderer.domElement );
 
@@ -181,7 +180,7 @@
 				directionalLight.shadow.mapSize.width = 1024;
 				directionalLight.shadow.mapSize.height = 1024;
 
-				directionalLight.shadow.bias = -0.005;
+				directionalLight.shadow.bias = -0.001;
 
 			}
 

examples/webgl_loader_stl.html

@@ -180,7 +180,6 @@
 				renderer.gammaOutput = true;
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.renderReverseSided = false;
 
 				container.appendChild( renderer.domElement );
 
@@ -215,7 +214,7 @@
 				directionalLight.shadow.mapSize.width = 1024;
 				directionalLight.shadow.mapSize.height = 1024;
 
-				directionalLight.shadow.bias = -0.005;
+				directionalLight.shadow.bias = -0.002;
 
 			}
 

examples/webgl_materials_bumpmap.html

@@ -129,7 +129,6 @@
 				container.appendChild( renderer.domElement );
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.renderReverseSided = false;
 
 				//
 

examples/webgl_materials_bumpmap_skin.html

@@ -140,7 +140,6 @@
 				container.appendChild( renderer.domElement );
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.renderReverseSided = false;
 
 				renderer.autoClear = false;
 

examples/webgl_materials_cubemap_dynamic.html

@@ -184,7 +184,6 @@
 
 				// SHADOW
 
-				renderer.shadowMap.renderReverseSided = false;
 				renderer.shadowMap.enabled = true;
 
 				// STATS

examples/webgl_shadowmap_pointlight.html

@@ -131,7 +131,6 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.BasicShadowMap;
-				renderer.shadowMap.renderSingleSided = false; // must be set to false to honor double-sided materials
 				document.body.appendChild( renderer.domElement );
 
 				var controls = new THREE.OrbitControls( camera, renderer.domElement );

src/Three.Legacy.js

@@ -1368,13 +1368,13 @@ Object.defineProperties( WebGLRenderer.prototype, {
 	shadowMapCullFace: {
 		get: function () {
 
-			return this.shadowMap.cullFace;
+			console.warn( 'THREE.WebGLRenderer: .shadowMapCullFace has been removed. Set Material.shadowSide instead.' );
+			return undefined;
 
 		},
 		set: function ( value ) {
 
-			console.warn( 'THREE.WebGLRenderer: .shadowMapCullFace is now .shadowMap.cullFace.' );
-			this.shadowMap.cullFace = value;
+			console.warn( 'THREE.WebGLRenderer: .shadowMapCullFace has been removed. Set Material.shadowSide instead.' );
 
 		}
 	}
@@ -1385,14 +1385,39 @@ Object.defineProperties( WebGLShadowMap.prototype, {
 	cullFace: {
 		get: function () {
 
-			return this.renderReverseSided ? CullFaceFront : CullFaceBack;
+			console.warn( 'THREE.WebGLRenderer: .shadowMap.cullFace has been removed. Set Material.shadowSide instead.' );
+			return undefined;
 
 		},
 		set: function ( cullFace ) {
 
-			var value = ( cullFace !== CullFaceBack );
-			console.warn( "WebGLRenderer: .shadowMap.cullFace is deprecated. Set .shadowMap.renderReverseSided to " + value + "." );
-			this.renderReverseSided = value;
+			console.warn( 'THREE.WebGLRenderer: .shadowMap.cullFace has been removed. Set Material.shadowSide instead.' );
+
+		}
+	},
+	renderReverseSided: {
+		get: function () {
+
+			console.warn( 'THREE.WebGLRenderer: .shadowMap.renderReverseSided has been removed. Set Material.shadowSide instead.' );
+			return undefined;
+
+		},
+		set: function () {
+
+			console.warn( 'THREE.WebGLRenderer: .shadowMap.renderReverseSided has been removed. Set Material.shadowSide instead.' );
+
+		}
+	},
+	renderSingleSided: {
+		get: function () {
+
+			console.warn( 'THREE.WebGLRenderer: .shadowMap.renderSingleSided has been removed. Set Material.shadowSide instead.' );
+			return undefined;
+
+		},
+		set: function () {
+
+			console.warn( 'THREE.WebGLRenderer: .shadowMap.renderSingleSided has been removed. Set Material.shadowSide instead.' );
 
 		}
 	}

src/materials/Material.js

@@ -44,6 +44,8 @@ function Material() {
 	this.clipIntersection = false;
 	this.clipShadows = false;
 
+	this.shadowSide = null;
+
 	this.colorWrite = true;
 
 	this.precision = null; // override the renderer's default precision for this material
@@ -351,6 +353,8 @@ Material.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 
 		this.clippingPlanes = dstPlanes;
 
+		this.shadowSide = source.shadowSide;
+
 		return this;
 
 	},

src/renderers/webgl/WebGLShadowMap.js

@@ -34,6 +34,8 @@ function WebGLShadowMap( _renderer, _objects, maxTextureSize ) {
 
 		_materialCache = {};
 
+	var shadowSide = { 0: BackSide, 1: FrontSide, 2: DoubleSide };
+
 	var cubeDirections = [
 		new Vector3( 1, 0, 0 ), new Vector3( - 1, 0, 0 ), new Vector3( 0, 0, 1 ),
 		new Vector3( 0, 0, - 1 ), new Vector3( 0, 1, 0 ), new Vector3( 0, - 1, 0 )
@@ -91,9 +93,6 @@ function WebGLShadowMap( _renderer, _objects, maxTextureSize ) {
 
 	this.type = PCFShadowMap;
 
-	this.renderReverseSided = true;
-	this.renderSingleSided = true;
-
 	this.render = function ( lights, scene, camera ) {
 
 		if ( scope.enabled === false ) return;
@@ -350,22 +349,7 @@ function WebGLShadowMap( _renderer, _objects, maxTextureSize ) {
 		result.visible = material.visible;
 		result.wireframe = material.wireframe;
 
-		var side = material.side;
-
-		if ( scope.renderSingleSided && side == DoubleSide ) {
-
-			side = FrontSide;
-
-		}
-
-		if ( scope.renderReverseSided ) {
-
-			if ( side === FrontSide ) side = BackSide;
-			else if ( side === BackSide ) side = FrontSide;
-
-		}
-
-		result.side = side;
+		result.side = ( material.shadowSide != null ) ? material.shadowSide : shadowSide[ material.side ];
 
 		result.clipShadows = material.clipShadows;
 		result.clippingPlanes = material.clippingPlanes;