Improved webgpu reflection example (#31409)

* Improved webgpu reflection example.

* Clean up.

* Added normalMap to floor.

* Updated screenshot.

* Potential fix for code scanning alert no. 3582: Unused variable, import, function or class

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Clean up.

* Update webgpu_reflection.html

Update link.

* Update webgpu_reflection.html

Fix shadows.

* Update webgpu_reflection.html

---------

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: Michael Herzog <michael.herzog@human-interactive.org>

examples/webgpu_reflection.html

@@ -10,7 +10,7 @@
 
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - reflection<br/>
-			Based on <a href="https://web.archive.org/web/20210101053442/http://oos.moxiecode.com/js_webgl/recursive_tree_cubes/" target="_blank" rel="noopener">Recursive Tree Cubes</a>
+			Based on <a href="https://oosmoxiecode.com/archive/js_webgl/recursive_tree_cubes/" target="_blank" rel="noopener">Recursive Tree Cubes</a>
 			by <a href="https://github.com/oosmoxiecode" target="_blank" rel="noopener">oosmoxiecode</a>
 		</div>
 
@@ -29,7 +29,7 @@
 
 			import * as THREE from 'three';
 
-			import { abs, color, div, float, Fn, instancedBufferAttribute, materialColor, min, normalWorldGeometry, pass, positionGeometry, positionLocal, reflector, screenUV, sin, sub, texture, time, uniform, uv, varyingProperty } from 'three/tsl';
+			import { abs, blendOverlay, color, float, Fn, instancedBufferAttribute, materialColor, normalWorldGeometry, pass, positionGeometry, positionLocal, reflector, screenUV, sin, sub, texture, time, uniform, uv, vec3 } from 'three/tsl';
 			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -44,48 +44,55 @@
 
 			// below uniforms will be animated via TWEEN.js
 
-			const uniformLife = uniform( 0 );
 			const uniformEffector1 = uniform( - 0.2 );
 			const uniformEffector2 = uniform( - 0.2 );
 
 			init();
 
-			function init() {
+			async function init() {
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 30 );
 				camera.position.set( 4, 2, 4 );
 
 				scene = new THREE.Scene();
-				scene.fog = new THREE.Fog( 0x0487e2, 7, 25 );
-				scene.backgroundNode = normalWorldGeometry.y.mix( color( 0x0487e2 ), color( 0x0066ff ) );
+				scene.fog = new THREE.Fog( 0x4195a4, 1, 25 );
+				scene.backgroundNode = normalWorldGeometry.y.mix( color( 0x4195a4 ), color( 0x0066ff ) );
 				camera.lookAt( 0, 1, 0 );
 
-				const sunLight = new THREE.DirectionalLight( 0xFFE499, 3 );
-				sunLight.position.set( 7, 3, 7 );
-
-				const waterAmbientLight = new THREE.HemisphereLight( 0x333366, 0x74ccf4, 3 );
-				const skyAmbientLight = new THREE.HemisphereLight( 0x74ccf4, 0, 1 );
-
+				const sunLight = new THREE.DirectionalLight( 0xFFE499, 2 );
+				sunLight.position.set( 7, 5, 7 );
+				sunLight.castShadow = true;
+				sunLight.shadow.camera.zoom = 1.5;
+				sunLight.shadow.mapSize.set( 1024, 1024 );
+				sunLight.shadow.bias = - 0.0001;
 				scene.add( sunLight );
-				scene.add( skyAmbientLight );
-				scene.add( waterAmbientLight );
+
+				const backLight = new THREE.DirectionalLight( 0x0487e2, 0.5 );
+				backLight.position.set( 7, - 5, 7 );
+				scene.add( backLight );
 
 				// textures
 
 				const textureLoader = new THREE.TextureLoader();
 
-				const floorColor = textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
+				const floorColor = await textureLoader.loadAsync( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
 				floorColor.wrapS = THREE.RepeatWrapping;
 				floorColor.wrapT = THREE.RepeatWrapping;
 				floorColor.colorSpace = THREE.SRGBColorSpace;
 
-				const floorNormal = textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' );
+				const floorNormal = await textureLoader.loadAsync( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' );
 				floorNormal.wrapS = THREE.RepeatWrapping;
 				floorNormal.wrapT = THREE.RepeatWrapping;
+				floorNormal.repeat.set( 15, 15 );
+
+				const boxMap = await textureLoader.loadAsync( 'textures/edge3.jpg' );
+				boxMap.colorSpace = THREE.SRGBColorSpace;
 
 				// tree
 
-				const treeMesh = createTreeMesh();
+				const treeMesh = createTreeMesh( boxMap );
+				treeMesh.castShadow = true;
+				treeMesh.receiveShadow = true;
 				scene.add( treeMesh );
 
 				// floor
@@ -100,9 +107,11 @@
 
 				const floorMaterial = new THREE.MeshPhongNodeMaterial();
 				floorMaterial.colorNode = texture( floorColor, floorUV ).add( reflection );
+				floorMaterial.normalMap = floorNormal;
+				floorMaterial.normalScale.set( 0.2, - 0.2 );
 
 				const floor = new THREE.Mesh( new THREE.BoxGeometry( 50, .001, 50 ), floorMaterial );
-				floor.position.set( 0, 0, 0 );
+				floor.receiveShadow = true;
 				scene.add( floor );
 
 				// renderer
@@ -111,6 +120,9 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.shadowMap.enabled = true;
+				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -137,18 +149,29 @@
 				const scenePassColorBlurred = gaussianBlur( scenePassColor );
 				scenePassColorBlurred.directionNode = scenePassDepth;
 
-				const vignette = screenUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
+				const vignette = screenUV.distance( .5 ).mul( 1.25 ).clamp().oneMinus().sub( 0.2 );
 
 				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = scenePassColorBlurred.mul( vignette );
+				postProcessing.outputNode = blendOverlay( scenePassColorBlurred, vignette );
 
-				//
+				// tweens
 
-				window.addEventListener( 'resize', onWindowResize );
+				new TWEEN.Tween( uniformEffector1 )
+					.to( { value: 1.2 }, 3000 )
+					.delay( 800 )
+					.repeat( Infinity )
+					.easing( TWEEN.Easing.Sinusoidal.InOut )
+					.start();
+
+				new TWEEN.Tween( uniformEffector2 )
+					.to( { value: 1.2 }, 3000 )
+					.repeat( Infinity )
+					.easing( TWEEN.Easing.Sinusoidal.InOut )
+					.start();
 
 				//
 
-				startTweens();
+				window.addEventListener( 'resize', onWindowResize );
 
 			}
 
@@ -173,52 +196,18 @@
 
 			}
 
-			function startTweens() {
-
-				const lifeTween = new TWEEN.Tween( uniformLife )
-					.to( { value: 1 }, 5000 )
-					.easing( TWEEN.Easing.Bounce.Out );
-				lifeTween.start();
+			function random() {
 
-				const effectTween = new TWEEN.Tween( uniformEffector1 )
-					.to( { value: 1.2 }, 2500 )
-					.delay( 3000 )
-					.easing( TWEEN.Easing.Sinusoidal.InOut )
-					.onComplete( function () {
-
-						secondaryTweens();
-
-					} );
-				effectTween.start();
+				return ( Math.random() - 0.5 ) * 2.0;
 
 			}
 
-			function secondaryTweens() {
-
-				uniformEffector1.value = - 0.2;
-				uniformEffector2.value = - 0.2;
-
-				const effect2Tween = new TWEEN.Tween( uniformEffector2 )
-					.to( { value: 1.2 }, 3000 )
-					.repeat( Infinity )
-					.easing( TWEEN.Easing.Sinusoidal.InOut );
-				effect2Tween.start();
-
-				const effectTween = new TWEEN.Tween( uniformEffector1 )
-					.to( { value: 1.2 }, 3000 )
-					.delay( 800 )
-					.repeat( Infinity )
-					.easing( TWEEN.Easing.Sinusoidal.InOut );
-				effectTween.start();
 
-			}
 
-			function createTreeMesh() {
+			function createTreeMesh( boxMap ) {
 
-				const maxSteps = 6;
-				const angleLeft = Math.PI / 180 * 30;
-				const angleRight = Math.PI / 180 * 40;
-				const lengthMult = 0.88;
+				const maxSteps = 5;
+				const lengthMult = 0.8;
 
 				const positions = [];
 				const normals = [];
@@ -234,6 +223,8 @@
 
 				function createTreePart( angle, x, y, z, length, count ) {
 
+					if ( Math.random() > ( maxSteps / count ) * 0.25 ) return;
+
 					if ( count < maxSteps ) {
 
 						const newLength = length * lengthMult;
@@ -246,9 +237,9 @@
 						if ( size > 25 ) size = 25;
 						if ( size < 10 ) size = 10;
 
-						size = size / 10;
+						size = size / 100;
 
-						const subSteps = 60;
+						const subSteps = 200;
 
 						// below loop generates the instanced data for a tree part
 
@@ -270,7 +261,7 @@
 
 							positions.push( position.x, position.y, position.z );
 
-							const scale = 0.25 * Math.random();
+							const scale = Math.random();
 
 							// normal
 
@@ -279,7 +270,7 @@
 
 							// color
 
-							color.setHSL( 0.55 + Math.random() * 0.05, 1.0, 0.7 + Math.random() * 0.3 );
+							color.setHSL( ( count / maxSteps ) * 0.5 + Math.random() * 0.05, 0.75, 0.6 + Math.random() * 0.1 );
 							colors.push( color.r, color.g, color.b );
 
 							// to save vertex buffers, we store the size, time and seed in a single attribute
@@ -292,8 +283,12 @@
 
 						}
 
-						createTreePart( angle - angleRight, newX, newY, newZ, newLength, count + 1 );
-						createTreePart( angle + angleLeft, newX, newY, newZ, newLength, count + 1 );
+						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
+						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
+						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
+						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
+						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
+						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
 
 					}
 
@@ -306,7 +301,7 @@
 				createTreePart( angle, 0, 0, 0, 16, 0 );
 
 				const geometry = new THREE.BoxGeometry();
-				const material = new THREE.MeshStandardNodeMaterial();
+				const material = new THREE.MeshStandardNodeMaterial( { map: boxMap } );
 				const mesh = new THREE.Mesh( geometry, material );
 				mesh.scale.setScalar( 0.05 );
 				mesh.count = instanceCount;
@@ -321,13 +316,11 @@
 
 				// TSL
 
-				const vVisibility = varyingProperty( 'float' );
-
 				const instancePosition = instancedBufferAttribute( attributePosition );
 				const instanceNormal = instancedBufferAttribute( attributeNormal );
 				const instanceColor = instancedBufferAttribute( attributeColor );
 				const instanceData = instancedBufferAttribute( attributeData );
-
+			
 				material.positionNode = Fn( () => {
 
 					const instanceSize = instanceData.x;
@@ -342,18 +335,13 @@
 					const dif2 = abs( instanceTime.sub( uniformEffector2 ) ).toConst();
 					effect = dif2.lessThanEqual( 0.15 ).select( sub( 0.15, dif2 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), effect );
 
-					// life (controls the visibility and initial scale of the cubes)
-
-					const scale = uniformLife.greaterThan( instanceTime ).select( min( 1, div( uniformLife.sub( instanceTime ), 0 ) ) ).oneMinus();
-					vVisibility.assign( uniformLife.greaterThan( instanceTime ).select( 1, 0 ) );
-
 					// accumulate different vertex animations
 
 					let animated = positionLocal.add( instancePosition ).toVar();
 					const direction = positionGeometry.normalize().toConst();
 
 					animated = animated.add( direction.mul( effect.add( instanceSize ) ) );
-					animated = animated.sub( direction.mul( scale ) );
+					animated = animated.sub( direction.mul( effect ) );
 					animated = animated.add( instanceNormal.mul( effect.mul( 1 ) ) );
 					animated = animated.add( instanceNormal.mul( abs( sin( time.add( instanceSeed.mul( 2 ) ) ).mul( 1.5 ) ) ) );
 
@@ -363,12 +351,24 @@
 
 				material.colorNode = Fn( () => {
 
-					vVisibility.equal( 0 ).discard();
-
 					return materialColor.mul( instanceColor );
 
 				} )();
 
+				material.emissiveNode = Fn( () => {
+
+					const instanceTime = instanceData.y;
+
+					const dif1 = abs( instanceTime.sub( uniformEffector1 ) ).toConst();
+					const effect1 = dif1.lessThanEqual( 0.15 ).select( sub( 0.15, dif1 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), float( 0 ) );
+
+					const dif2 = abs( instanceTime.sub( uniformEffector2 ) ).toConst();
+					const effect2 = dif2.lessThanEqual( 0.15 ).select( sub( 0.15, dif2 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), effect1 );
+
+					return vec3( effect1, 0, effect2 ).mul( instanceColor );
+
+				} )();
+
 				return mesh;
 
 			}