mrdoob
diff --git a/‎examples/screenshots/webgpu_backdrop_water.jpg
-1.76 KB b/‎examples/screenshots/webgpu_backdrop_water.jpg
-1.76 KB
diff --git a/‎examples/screenshots/webgpu_compute_particles_snow.jpg
-9.68 KB b/‎examples/screenshots/webgpu_compute_particles_snow.jpg
-9.68 KB
diff --git a/‎examples/webgpu_backdrop_water.html
+13-4 b/‎examples/webgpu_backdrop_water.html
+13-4
diff --git a/‎examples/webgpu_compute_particles_snow.html
+4-3 b/‎examples/webgpu_compute_particles_snow.html
+4-3
@@ -38,9 +38,12 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			import Stats from 'three/addons/libs/stats.module.js';
+
 			let camera, scene, renderer;
 			let mixer, objects, clock;
 			let model, floor, floorPosition;
+			let stats;
 
 			init();
 
@@ -150,9 +153,8 @@
 
 				const waterLayer0 = mx_worley_noise_float( floorUV.mul( 4 ).add( timer ) );
 				const waterLayer1 = mx_worley_noise_float( floorUV.mul( 2 ).add( timer ) );
-				const waterLayer2 = mx_worley_noise_float( floorUV.mul( 3 ).add( timer ) );
 
-				const waterIntensity = waterLayer0.mul( waterLayer1 ).mul( waterLayer2 ).mul( 5 );
+				const waterIntensity = waterLayer0.mul( waterLayer1 ).mul( 1.4 );
 				const waterColor = waterIntensity.mix( color( 0x0f5e9c ), color( 0x74ccf4 ) );
 				const viewportTexture = viewportSharedTexture();
 
@@ -179,8 +181,10 @@
 				let transition = waterPosY.add( .1 ).saturate().oneMinus();
 				transition = waterPosY.lessThan( 0 ).cond( transition, normalWorld.y.mix( transition, 0 ) ).toVar();
 
-				material.colorNode = transition.mix( material.colorNode, material.colorNode.add( waterLayer0 ) );
-				floor.material.colorNode = material.colorNode;
+				const colorNode = transition.mix( material.colorNode, material.colorNode.add( waterLayer0 ) );
+
+				//material.colorNode = colorNode;
+				floor.material.colorNode = colorNode;
 
 				// renderer
 
@@ -191,6 +195,9 @@
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
 				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 1;
 				controls.maxDistance = 10;
@@ -223,6 +230,8 @@
 
 			function animate() {
 
+				stats.update();
+
 				const delta = clock.getDelta();
 
 				floor.position.y = floorPosition.y - 5;
 
@@ -8,7 +8,7 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - GPU Compute Snow - 300.000 Particles
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - GPU Compute Snow - 100.000 Particles
 		</div>
 
 		<script type="importmap">
@@ -37,7 +37,7 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			const maxParticleCount = 300000;
+			const maxParticleCount = 100000;
 
 			let camera, scene, renderer;
 			let controls, stats;
@@ -126,7 +126,7 @@
 					const randZ = instanceIndex.add( randUint() ).hash();
 
 					position.x = randX.mul( 100 ).add( - 50 );
-					position.y = randY.mul( 1000 ).add( 3 );
+					position.y = randY.mul( 500 ).add( 3 );
 					position.z = randZ.mul( 100 ).add( - 50 );
 
 					scale.xyz = instanceIndex.add( Math.random() ).hash().mul( .8 ).add( .2 );
@@ -282,6 +282,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
+
 				stats = new Stats();
 				document.body.appendChild( stats.dom );