Examples: Improved compute birds webgpu example (#29334)

* Examples: Improved compute birds webgpu example.

* update screenshots

---------

examples/webgpu_compute_birds.html

@@ -50,12 +50,12 @@
 
 			let computeVelocity, computePosition, effectController;
 
-			const BIRDS = 1024;
+			const BIRDS = 16384;
 			const SPEED_LIMIT = 9.0;
 			const BOUNDS = 800, BOUNDS_HALF = BOUNDS / 2;
 			const UPPER_BOUNDS = BOUNDS;
 
-			// Custom Geometry - using 3 triangles each. No UVs, no normals currently.
+			// Custom Geometry - using 3 triangles each. No normals currently.
 			class BirdGeometry extends THREE.BufferGeometry {
 
 				constructor() {
@@ -67,12 +67,10 @@
 					const points = triangles * 3;
 
 					const vertices = new THREE.BufferAttribute( new Float32Array( points * 3 ), 3 );
-					const birdColors = new THREE.BufferAttribute( new Float32Array( points * 3 ), 3 );
 					const references = new THREE.BufferAttribute( new Uint32Array( points ), 1 );
 					const birdVertex = new THREE.BufferAttribute( new Uint32Array( points ), 1 );
 
 					this.setAttribute( 'position', vertices );
-					this.setAttribute( 'birdColor', birdColors );
 					this.setAttribute( 'reference', references );
 					this.setAttribute( 'birdVertex', birdVertex );
 
@@ -119,15 +117,6 @@
 						const triangleIndex = ~ ~ ( v / 3 );
 						const birdIndex = ~ ~ ( triangleIndex / trianglesPerBird );
 
-						const c = new THREE.Color(
-							0x666666 +
-							~ ~ ( v / 9 ) / BIRDS * 0x666666
-						);
-
-						birdColors.array[ v * 3 + 0 ] = c.r;
-						birdColors.array[ v * 3 + 1 ] = c.g;
-						birdColors.array[ v * 3 + 2 ] = c.b;
-
 						references.array[ v ] = birdIndex;
 
 						birdVertex.array[ v ] = v % 9;
@@ -145,17 +134,28 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
-				camera.position.z = 350;
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
-				scene.fog = new THREE.Fog( 0xffffff, 100, 1000 );
+				scene.fog = new THREE.Fog( 0xffffff, 500, 3000 );
+
+				// Sky
+
+				const light = new THREE.HemisphereLight( 0x0000ff, 0xffbb00, 3 );
+				light.position.x = - 1;
+				light.position.z = - 1;
+				scene.add( light );
 
-				renderer = new THREE.WebGPURenderer();
+				const geometry = new THREE.IcosahedronGeometry( 1000, 6 );
+				const material = new THREE.MeshStandardMaterial( { side: THREE.BackSide } );
+				scene.add( new THREE.Mesh( geometry, material ) );
+
+				renderer = new THREE.WebGPURenderer( { antialiasing: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.toneMapping = THREE.NeutralToneMapping;
 				container.appendChild( renderer.domElement );
 
 				// Initialize position, velocity, and phase values
@@ -210,7 +210,7 @@
 				// Define Uniforms. Uniforms only need to be defined once rather than per shader.
 			
 				effectController = {
-					separation: uniform( 20.0 ).label( 'separation' ),
+					separation: uniform( 15.0 ).label( 'separation' ),
 					alignment: uniform( 20.0 ).label( 'alignment' ),
 					cohesion: uniform( 20.0 ).label( 'cohesion' ),
 					freedom: uniform( 0.75 ).label( 'freedom' ),
@@ -223,10 +223,6 @@
 			
 				const birdGeometry = new BirdGeometry();
 				const birdMaterial = new THREE.NodeMaterial();
-
-				// Declare varyings
-
-				const vColor = varyingProperty( 'vec4', 'vColor' );
 			
 				// Animate bird mesh within vertex shader, then apply position offset to vertices.
 			
@@ -234,7 +230,6 @@
 
 					const reference = attribute( 'reference' );
 					const birdVertex = attribute( 'birdVertex' );
-					const birdColor = attribute( 'birdColor' );
 
 					const position = positionLocal.toVar();
 					const newPhase = phaseRead.element( reference ).toVar();
@@ -275,15 +270,12 @@
 
 					const finalVert = maty.mul( matz ).mul( newPosition );
 					finalVert.addAssign( positionRead.element( reference ) );
-			
-					vColor.assign( vec4( birdColor, 1.0 ) );
 
 					return cameraProjectionMatrix.mul( cameraViewMatrix ).mul( finalVert );
 
 				} );
 
 				birdMaterial.vertexNode = birdVertexTSL();
-				birdMaterial.colorNode = vColor;
 				birdMaterial.side = THREE.DoubleSide;
 				const birdMesh = new THREE.Mesh( birdGeometry, birdMaterial );
 				birdMesh.rotation.y = Math.PI / 2;