WebGPURenderer: Add webgpu_shadowmap_opacity (#28973)

* Example: Update `webgpu_mrt_mask` imports * WebGPURenderer: Add `webgpu_shadowmap_opacity` * update imports
mrdoob · Jul 26, 2024 · 8c02ecd · 8c02ecd
1 parent 09e7621
commit 8c02ecd
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 1 deletion.
diff --git a/examples/files.json b/examples/files.json
@@ -391,6 +391,7 @@
 		"webgpu_shadertoy",
 		"webgpu_tsl_interoperability",
 		"webgpu_shadowmap",
+		"webgpu_shadowmap_opacity",
 		"webgpu_skinning",
 		"webgpu_skinning_instancing",
 		"webgpu_skinning_points",

diff --git a/examples/screenshots/webgpu_shadowmap_opacity.jpg b/examples/screenshots/webgpu_shadowmap_opacity.jpg
diff --git a/examples/webgpu_shadowmap_opacity.html b/examples/webgpu_shadowmap_opacity.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - shadowmap + opacity</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - shadowmap + opacity
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+			import { tslFn, vec4 } from 'three/tsl';
+
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+			let camera, scene, renderer;
+
+			init().then( render );
+
+			async function init() {
+
+				const container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 40 );
+				camera.position.set( - 4, 2, 6 );
+
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( render );
+				renderer.toneMapping = THREE.AgXToneMapping;
+				renderer.toneMappingExposure = 1.5;
+				container.appendChild( renderer.domElement );
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x9e9eff );
+
+				// light + shadow
+
+				const hemi = new THREE.AmbientLight( 0xffffff, .5 );
+				scene.add( hemi );
+
+				const dirLight = new THREE.DirectionalLight( 0x6666ff, 10 );
+				dirLight.position.set( 3, 5, 17 );
+				dirLight.castShadow = true;
+				dirLight.shadow.camera.near = 0.1;
+				dirLight.shadow.camera.far = 50;
+				dirLight.shadow.camera.right = 5;
+				dirLight.shadow.camera.left = - 5;
+				dirLight.shadow.camera.top	= 5;
+				dirLight.shadow.camera.bottom = - 5;
+				dirLight.shadow.mapSize.width = 2048;
+				dirLight.shadow.mapSize.height = 2048;
+				dirLight.shadow.radius = 4;
+				dirLight.shadow.bias = - 0.0005;
+				scene.add( dirLight );
+
+				//
+
+				const loader = new GLTFLoader();
+				const gltf = await loader.loadAsync( 'models/gltf/DragonAttenuation.glb' );
+				gltf.scene.position.set( 0, 0, - .5 );
+
+				const floor = gltf.scene.children[ 0 ];
+				floor.scale.x += 4;
+				floor.scale.y += 4;
+
+				const dragon = gltf.scene.children[ 1 ];
+				dragon.position.set( - 1.5, - 0.8, 1 );
+
+				const dragon2 = dragon.clone();
+				dragon2.material = dragon.material.clone();
+				dragon2.material.attenuationColor = new THREE.Color( 0xff0000 );
+				dragon2.position.x += 4;
+				gltf.scene.add( dragon2 );
+
+				// shadow node
+
+				const customShadow = tslFn( ( [ color, opacity = .8 ] ) => {
+
+					return vec4( color, opacity );
+
+				} );
+
+				// apply shadow
+
+				floor.receiveShadow = true;
+
+				dragon.castShadow = dragon2.castShadow = true;
+				dragon.receiveShadow = dragon2.receiveShadow = true;
+
+				dragon.material.shadowNode = customShadow( dragon.material.attenuationColor );
+				dragon2.material.shadowNode = customShadow( dragon2.material.attenuationColor );
+
+				//
+
+				scene.add( gltf.scene );
+
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 0.1;
+				controls.maxDistance = 10;
+				controls.target.set( 0, 0, 0 );
+				controls.update();
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			//
+
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/src/nodes/lighting/AnalyticLightNode.js b/src/nodes/lighting/AnalyticLightNode.js
@@ -222,12 +222,13 @@ class AnalyticLightNode extends LightingNode {
 
 			}
 
+			const shadowColor = texture( shadowMap.texture, shadowCoord );
 			const shadowNode = frustumTest.cond( filterFn( { depthTexture, shadowCoord, shadow } ), float( 1 ) );
 
 			this.shadowMap = shadowMap;
 
 			this.shadowNode = shadowNode;
-			this.shadowColorNode = shadowColorNode = this.colorNode.mul( mix( 1, shadowNode, shadowIntensity ) );
+			this.shadowColorNode = shadowColorNode = this.colorNode.mul( mix( 1, shadowNode.rgb.mix( shadowColor, 1 ), shadowIntensity.mul( shadowColor.a ) ) );
 
 			this.baseColorNode = this.colorNode;