WebGPU Compute Rain Example: Fix RTT coord Y (#27286)

examples/webgpu_compute_particles_rain.html

@@ -46,6 +46,7 @@
 			let clock;
 
 			let collisionBox, collisionCamera, collisionPosRT, collisionPosMaterial;
+			let collisionBoxPos;
 
 			init();
 
@@ -69,14 +70,14 @@
 
 				const dirLight = new THREE.DirectionalLight( 0xffffff, .5 );
 				dirLight.castShadow = true;
-				dirLight.position.set( 3, 12, 17 );
+				dirLight.position.set( 3, 17, 17 );
 				dirLight.castShadow = true;
-				dirLight.shadow.camera.near = 5;
+				dirLight.shadow.camera.near = 1;
 				dirLight.shadow.camera.far = 50;
-				dirLight.shadow.camera.right = 10;
-				dirLight.shadow.camera.left = - 10;
-				dirLight.shadow.camera.top	= 10;
-				dirLight.shadow.camera.bottom = - 10;
+				dirLight.shadow.camera.right = 25;
+				dirLight.shadow.camera.left = - 25;
+				dirLight.shadow.camera.top = 25;
+				dirLight.shadow.camera.bottom = - 25;
 				dirLight.shadow.mapSize.width = 2048;
 				dirLight.shadow.mapSize.height = 2048;
 				dirLight.shadow.bias = - 0.01;
@@ -137,7 +138,7 @@
 
 				const computeUpdate = tslFn( () => {
 
-					const getCoord = ( pos ) => pos.add( 50 ).div( 100 );
+					const getCoord = ( pos ) => pos.add( 50 ).div( 100 ).mul( vec2( 1, - 1 ) );
 
 					const position = positionBuffer.element( instanceIndex );
 					const velocity = velocityBuffer.element( instanceIndex );
@@ -344,7 +345,10 @@
 
 				const gui = new GUI();
 
-				gui.add( collisionBox.position, 'z', - 50, 50, .001 ).name( 'position' );
+				// use lerp to smooth the movement
+				collisionBoxPos = new THREE.Vector3().copy( collisionBox.position );
+
+				gui.add( collisionBoxPos, 'z', - 50, 50, .001 ).name( 'position' );
 				gui.add( collisionBox.scale, 'x', .1, 3.5, 0.01 ).name( 'scale' );
 				gui.add( rainParticles, 'count', 200, maxParticleCount, 1 ).name( 'drop count' ).onChange( ( v ) => rippleParticles.count = v );
 
@@ -365,12 +369,16 @@
 
 				stats.update();
 
+				const delta = clock.getDelta();
+
 				if ( monkey ) {
 
-					monkey.rotation.y += clock.getDelta();
+					monkey.rotation.y += delta;
 
 				}
 
+				collisionBox.position.lerp( collisionBoxPos, 10 * delta );
+
 				// position
 
 				scene.overrideMaterial = collisionPosMaterial;