WebGLShadowMap: Add support for rendering shadows with alpha maps and…

… alpha test. (mrdoob#22410)

* WebGLShadowMap: Add support for rendering shadows with alpha maps and alpha test.

* WebGLShadowMap: Only use alphaMap when alphaTest > 0.

* Docs: Removed outdated customDepthMaterial use cases.

* Docs: Copy customDepthMaterial en description to zh.

* Examples: Removed unneeded customDepthMaterial usage.

docs/api/en/core/Object3D.html

@@ -41,9 +41,7 @@ <h3>[property:Object3D children]</h3>
 		<h3>[property:Material customDepthMaterial]</h3>
 		<p>
 		Custom depth material to be used when rendering to the depth map. Can only be used in context of meshes.
-		When shadow-casting with a [page:DirectionalLight] or [page:SpotLight], if you are (a) modifying vertex positions in the vertex shader,
-		(b) using a displacement map, (c) using an alpha map with alphaTest, or (d) using a transparent texture with alphaTest,
-		you must specify a customDepthMaterial for proper shadows. Default is *undefined*.
+		When shadow-casting with a [page:DirectionalLight] or [page:SpotLight], if you are modifying vertex positions in the vertex shader you must specify a customDepthMaterial for proper shadows. Default is *undefined*.
 		</p>
 
 		<h3>[property:Material customDistanceMaterial]</h3>

docs/api/zh/core/Object3D.html

@@ -39,10 +39,8 @@ <h3>[property:Object3D children]</h3>
 	<p>含有对象的子级的数组。请参阅[page:Group]来了解将手动对象进行分组的相关信息。</p>
 
 	<h3>[property:Material customDepthMaterial]</h3>
-	<p>渲染到深度贴图时此材质要使用的自定义深度材质。
-		当使用[page:DirectionalLight]或[page:SpotLight]进行阴影投射时，如果您正在（a）修改顶点着色器中的顶点位置，
-		（b）使用位移贴图，（c）alphaTest中使用alpha贴图，或（d）alphaTest中使用透明纹理，
-		您必须指定customDepthMaterial以得到合适的阴影。默认值*undefined*。
+	<p>Custom depth material to be used when rendering to the depth map. Can only be used in context of meshes.
+	When shadow-casting with a [page:DirectionalLight] or [page:SpotLight], if you are modifying vertex positions in the vertex shader you must specify a customDepthMaterial for proper shadows. Default is *undefined*.
 	</p>
 
 	<h3>[property:Material customDistanceMaterial]</h3>

examples/webgl_animation_cloth.html

@@ -459,7 +459,7 @@
 				clothTexture.anisotropy = 16;
 
 				const clothMaterial = new THREE.MeshLambertMaterial( {
-					map: clothTexture,
+					alphaMap: clothTexture,
 					side: THREE.DoubleSide,
 					alphaTest: 0.5
 				} );
@@ -475,12 +475,6 @@
 				object.castShadow = true;
 				scene.add( object );
 
-				object.customDepthMaterial = new THREE.MeshDepthMaterial( {
-					depthPacking: THREE.RGBADepthPacking,
-					map: clothTexture,
-					alphaTest: 0.5
-				} );
-
 				// sphere
 
 				const ballGeo = new THREE.SphereGeometry( ballSize, 32, 16 );

src/renderers/webgl/WebGLShadowMap.js

@@ -242,12 +242,9 @@ function WebGLShadowMap( _renderer, _objects, _capabilities ) {
 
 		}
 
-		if ( _renderer.localClippingEnabled &&
-				material.clipShadows === true &&
-				material.clippingPlanes.length !== 0 ||
-				material.displacementMap &&
-				material.displacementScale !== 0
-		) {
+		if ( ( _renderer.localClippingEnabled && material.clipShadows === true && material.clippingPlanes.length !== 0 ) ||
+			( material.displacementMap && material.displacementScale !== 0 ) ||
+			( material.alphaMap && material.alphaTest > 0 ) ) {
 
 			// in this case we need a unique material instance reflecting the
 			// appropriate state
@@ -289,6 +286,9 @@ function WebGLShadowMap( _renderer, _objects, _capabilities ) {
 
 		}
 
+		result.alphaMap = material.alphaMap;
+		result.alphaTest = material.alphaTest;
+
 		result.clipShadows = material.clipShadows;
 		result.clippingPlanes = material.clippingPlanes;
 		result.clipIntersection = material.clipIntersection;