Examples: Simpler atmosphere approach in `webgpu_compute_birds` (#29366)

* Examples: Simpler atmosphere approach in webgpu_compute_birds.

* no message

* Improved bird shape.

* Update webgpu_compute_birds.jpg

---------

examples/webgpu_compute_birds.html

@@ -35,7 +35,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { uniform, varyingProperty, vec4, max, sin, mat3, uint, negate, cameraProjectionMatrix, cameraViewMatrix, positionLocal, modelWorldMatrix, sqrt, attribute, property, float, storage, storageObject, Fn, If, cos, Loop, Continue, normalize, instanceIndex, length } from 'three/tsl';
+			import { uniform, varying, vec4, add, sub, max, sin, mat3, uint, negate, cameraProjectionMatrix, cameraViewMatrix, positionLocal, modelWorldMatrix, sqrt, attribute, property, float, storage, storageObject, Fn, If, cos, Loop, Continue, normalize, instanceIndex, length } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
@@ -92,21 +92,21 @@
 
 						// Body
 						verts_push(
-							0, - 0, - 20,
-							0, 4, - 20,
+							0, 0, - 20,
+							0, - 8, 10,
 							0, 0, 30
 						);
 
 						// Wings
 						verts_push(
 							0, 0, - 15,
-							- wingsSpan, 0, 0,
+							- wingsSpan, 0, 5,
 							0, 0, 15
 						);
 
 						verts_push(
 							0, 0, 15,
-							wingsSpan, 0, 0,
+							wingsSpan, 0, 5,
 							0, 0, - 15
 						);
 
@@ -134,22 +134,32 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
-				scene.fog = new THREE.Fog( 0xffffff, 500, 3000 );
+				scene.fog = new THREE.Fog( 0xffffff, 700, 3000 );
 
 				// Sky
 
-				const light = new THREE.HemisphereLight( 0x0000ff, 0xffbb00, 3 );
-				light.position.x = - 1;
-				light.position.z = - 1;
-				scene.add( light );
+				const geometry = new THREE.IcosahedronGeometry( 1, 6 );
+				const material = new THREE.MeshBasicNodeMaterial( {
+					// Use vertex positions to create atmosphere colors
+					colorNode: varying(
+						vec4(
+							sub( 0.25, positionLocal.y ),
+							sub( - 0.25, positionLocal.y ),
+							add( 1.5, positionLocal.y ),
+							1.0
+						)
+					),
+					side: THREE.BackSide
+				} );
 
-				const geometry = new THREE.IcosahedronGeometry( 1000, 6 );
-				const material = new THREE.MeshStandardMaterial( { side: THREE.BackSide } );
-				scene.add( new THREE.Mesh( geometry, material ) );
+				const mesh = new THREE.Mesh( geometry, material );
+				mesh.rotation.z = 0.75;
+				mesh.scale.setScalar( 1000 );
+				scene.add( mesh );
 
 				renderer = new THREE.WebGPURenderer( { antialiasing: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -223,7 +233,7 @@
 			
 				const birdGeometry = new BirdGeometry();
 				const birdMaterial = new THREE.NodeMaterial();
-			
+
 				// Animate bird mesh within vertex shader, then apply position offset to vertices.
 			
 				const birdVertexTSL = Fn( () => {