Examples: Update `webgpu_postprocessing_sss` using pre-pass (#32345)

examples/jsm/tsl/display/SSSNode.js

@@ -90,9 +90,9 @@ class SSSNode extends TempNode {
 		 * Shadow intensity. Must be in the range `[0, 1]`.
 		 *
 		 * @type {UniformNode<float>}
-		 * @default 0.5
+		 * @default 1.0
 		 */
-		this.shadowIntensity = uniform( 0.5, 'float' );
+		this.shadowIntensity = uniform( 1.0, 'float' );
 
 		/**
 		 * This parameter controls how detailed the raymarching process works.

examples/webgpu_postprocessing_sss.html

@@ -36,7 +36,7 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
-			import { pass, vec3, vec4, mrt, output, velocity } from 'three/tsl';
+			import { pass, vec3, vec4, mrt, screenUV, velocity, context } from 'three/tsl';
 			import { sss } from 'three/addons/tsl/display/SSSNode.js';
 			import { traa } from 'three/addons/tsl/display/TRAANode.js';
 
@@ -128,33 +128,54 @@
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
+				// post-processing
+
 				postProcessing = new THREE.PostProcessing( renderer );
 
-				const scenePass = pass( scene, camera );
-				scenePass.setMRT( mrt( {
-					output: output,
-					velocity: velocity
+				// pre-pass
+
+				const prePass = pass( scene, camera );
+				prePass.name = 'Pre-Pass';
+				prePass.transparent = false;
+
+				prePass.setMRT( mrt( {
+					output: velocity
 				} ) );
 
-				const scenePassColor = scenePass.getTextureNode( 'output' );
-				const scenePassVelocity = scenePass.getTextureNode( 'velocity' );
-				const scenePassDepth = scenePass.getTextureNode( 'depth' );
+				const prePassDepth = prePass.getTextureNode( 'depth' ).toInspector( 'Depth', () => prePass.getLinearDepthNode() );
+				const prePassVelocity = prePass.getTextureNode( 'output' ).toInspector( 'Velocity' );
+
+				// scene pass
+
+				const scenePass = pass( scene, camera ).toInspector( 'Color' );
 
 				// sss
 
-				const sssPass = sss( scenePassDepth, camera, dirLight );
-				sssPass.shadowIntensity.value = 0.3;
+				const sssPass = sss( prePassDepth, camera, dirLight );
 				sssPass.maxDistance.value = 0.2;
 				sssPass.useTemporalFiltering = true;
 
-				// composite
+				// scene context
+
+				const sssSample = sssPass.getTextureNode().sample( screenUV ).r;
+
+				const sssContext = context( {
+
+					getShadow: ( light ) => {
+
+						if ( light === dirLight ) return sssSample;
+
+						return null;
+
+					}
+
+				} );
+
+				scenePass.contextNode = sssContext;
 
-				const compositePass = vec4( scenePassColor.rgb.mul( sssPass.r ), scenePassColor.a );
-				compositePass.name = 'Composite';
-			
 				// traa
 
-				const traaPass = traa( compositePass, scenePassDepth, scenePassVelocity, camera );
+				const traaPass = traa( scenePass, prePassDepth, prePassVelocity, camera );
 				postProcessing.outputNode = traaPass;
 
 				//
@@ -184,17 +205,15 @@
 
 				function updatePostprocessing() {
 
-					if ( params.output === 1 ) {
-
-						postProcessing.outputNode = scenePassColor;
+					scenePass.contextNode = params.output !== 1 ? sssContext : null;
 
-					} else if ( params.output === 2 ) {
+					if ( params.output === 2 ) {
 
 						postProcessing.outputNode = vec4( vec3( sssPass.r ), 1 );
 
 					} else {
 
-						postProcessing.outputNode = sssPass.useTemporalFiltering ? traaPass : compositePass;
+						postProcessing.outputNode = sssPass.useTemporalFiltering ? traaPass : scenePass;
 
 					}
 

src/materials/nodes/manager/NodeMaterialObserver.js

@@ -259,7 +259,7 @@ class NodeMaterialObserver {
 
 		}
 
-		if ( builder.context.modelViewMatrix || builder.context.modelNormalViewMatrix || builder.context.ao )
+		if ( builder.context.modelViewMatrix || builder.context.modelNormalViewMatrix || builder.context.ao || builder.context.getShadow )
 			return true;
 
 		return false;

src/nodes/lighting/AnalyticLightNode.js

@@ -188,6 +188,18 @@ class AnalyticLightNode extends LightingNode {
 
 		//
 
+		if ( builder.context.getShadow ) {
+
+			const shadow = builder.context.getShadow( this.light, builder );
+
+			if ( shadow ) {
+
+				shadowColorNode = shadowColorNode.mul( shadow );
+
+			}
+
+		}
+
 		this.colorNode = shadowColorNode;
 
 	}