NodeMaterial: Add `maskShadowNode` (#32598)

examples/webgpu_shadowmap.html

@@ -107,22 +107,7 @@
 			
 				const discardNode = hash( vertexIndex ).greaterThan( 0.5 );
 
-				materialCustomShadow.colorNode = Fn( () => {
-
-					discardNode.discard();
-
-					return materialColor;
-
-				} )();
-
-
-				materialCustomShadow.castShadowNode = Fn( () => {
-
-					discardNode.discard();
-
-					return materialColor;
-			
-				} )();
+				materialCustomShadow.maskNode = discardNode;
 
 				torusKnot = new THREE.Mesh( geometry, materialCustomShadow );
 				torusKnot.scale.multiplyScalar( 1 / 18 );

examples/webgpu_tsl_angular_slicing.html

@@ -113,13 +113,16 @@
 				const sliceArc = uniform( 1.25 );
 				const sliceColor = uniform( color( '#b62f58' ) );
 
-				// output
+				// mask
 
-				slicedMaterial.outputNode = Fn( () => {
+				const mask = inAngle( positionLocal.xy, sliceStart, sliceArc ).not();
+
+				slicedMaterial.maskNode = mask;
+				//slicedMaterial.maskShadowNode = mask; // optional: custom mask shadows
 
-					// discard
+				// output
 
-					inAngle( positionLocal.xy, sliceStart, sliceArc ).discard();
+				slicedMaterial.outputNode = Fn( () => {
 
 					// backface color
 
@@ -134,18 +137,6 @@
 			
 				} )();
 
-				// shadow
-
-				slicedMaterial.castShadowNode = Fn( () => {
-
-					// discard
-
-					inAngle( positionLocal.xy, sliceStart, sliceArc ).discard();
-
-					return vec4( 0, 0, 0, 1 );
-			
-				} )();
-
 				// model
 
 				const dracoLoader = new DRACOLoader();

src/materials/nodes/NodeMaterial.js

@@ -240,6 +240,14 @@ class NodeMaterial extends Material {
 		 */
 		this.maskNode = null;
 
+		/**
+		 * This node can be used to implement a shadow mask for the material.
+		 *
+		 * @type {?Node<bool>}
+		 * @default null
+		 */
+		this.maskShadowNode = null;
+
 		/**
 		 * The local vertex positions are computed based on multiple factors like the
 		 * attribute data, morphing or skinning. This node property allows to overwrite
@@ -1339,6 +1347,7 @@ class NodeMaterial extends Material {
 		this.backdropAlphaNode = source.backdropAlphaNode;
 		this.alphaTestNode = source.alphaTestNode;
 		this.maskNode = source.maskNode;
+		this.maskShadowNode = source.maskShadowNode;
 
 		this.positionNode = source.positionNode;
 		this.geometryNode = source.geometryNode;

src/renderers/common/Renderer.js

@@ -32,7 +32,7 @@ import { Vector4 } from '../../math/Vector4.js';
 import { RenderTarget } from '../../core/RenderTarget.js';
 import { DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoToneMapping, LinearFilter, HalfFloatType, RGBAFormat, PCFShadowMap } from '../../constants.js';
 
-import { float, vec3, vec4 } from '../../nodes/tsl/TSLCore.js';
+import { float, vec3, vec4, Fn } from '../../nodes/tsl/TSLCore.js';
 import { reference } from '../../nodes/accessors/ReferenceNode.js';
 import { highpModelNormalViewMatrix, highpModelViewMatrix } from '../../nodes/accessors/ModelNode.js';
 import { context } from '../../nodes/core/ContextNode.js';
@@ -3035,12 +3035,13 @@ class Renderer {
 			const hasMap = material.map !== null;
 			const hasColorNode = material.colorNode && material.colorNode.isNode;
 			const hasCastShadowNode = material.castShadowNode && material.castShadowNode.isNode;
+			const hasMaskNode = ( material.maskShadowNode && material.maskShadowNode.isNode ) || ( material.maskNode && material.maskNode.isNode );
 
 			let positionNode = null;
 			let colorNode = null;
 			let depthNode = null;
 
-			if ( hasMap || hasColorNode || hasCastShadowNode ) {
+			if ( hasMap || hasColorNode || hasCastShadowNode || hasMaskNode ) {
 
 				let shadowRGB;
 				let shadowAlpha;
@@ -3071,6 +3072,20 @@ class Renderer {
 
 				colorNode = vec4( shadowRGB, shadowAlpha );
 
+				if ( hasMaskNode ) {
+
+					const maskNode = material.maskShadowNode || material.maskNode;
+
+					colorNode = Fn( ( [ color ] ) => {
+
+						maskNode.not().discard();
+
+						return color;
+
+					} )( colorNode );
+
+				}
+
 			}
 
 			if ( material.depthNode && material.depthNode.isNode ) {