Examples: Improve performance of clustered lights demo. (#33901)

examples/webgpu_lights_clustered.html

@@ -45,7 +45,6 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { SkyMesh } from 'three/addons/objects/SkyMesh.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 
@@ -79,7 +78,7 @@
 
 				}
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 200 );
 				camera.position.set( 36, 18, 36 );
 
 				scene = new THREE.Scene();
@@ -97,39 +96,11 @@
 
 				await renderer.init();
 
-				// a physical sky drives the backdrop and the image-based lighting; the
-				// sun sits just below the horizon for an almost-night mood
-
-				const sky = new SkyMesh();
-				sky.scale.setScalar( 10000 );
-				sky.turbidity.value = 10;
-				sky.rayleigh.value = 3;
-				sky.mieCoefficient.value = 0.005;
-				sky.mieDirectionalG.value = 0.7;
-
-				const sun = new THREE.Vector3().setFromSphericalCoords(
-					1,
-					THREE.MathUtils.degToRad( 92 ), // elevation: 2° below the horizon (almost night)
-					THREE.MathUtils.degToRad( 225 ) // azimuth
-				);
-				sky.sunPosition.value.copy( sun );
-
-				scene.add( sky );
-
-				// the sun sits below the horizon, so keep its disc hidden; bake the sky
-				// into an environment map for the faint ambient colour it still casts
-
-				const pmremGenerator = new THREE.PMREMGenerator( renderer );
-
-				sky.showSunDisc.value = false;
-				scene.environment = pmremGenerator.fromScene( scene ).texture;
-				scene.environmentIntensity = 0.75;
-
 				// ground
 
 				const ground = new THREE.Mesh(
 					new THREE.PlaneGeometry( 1000, 1000 ).rotateX( - Math.PI / 2 ),
-					new THREE.MeshStandardNodeMaterial( { color: 0x2a2a2a, roughness: 0.6, metalness: 0 } )
+					new THREE.MeshPhongNodeMaterial( { color: 0x2a2a2a, shininess: 80 } )
 				);
 				scene.add( ground );
 
@@ -143,7 +114,7 @@
 				];
 
 				const bigGeometry = new THREE.SphereGeometry( BIG_RADIUS, 64, 32 );
-				const bigMaterial = new THREE.MeshStandardNodeMaterial( { color: 0xdddddd, roughness: 0.5, metalness: 0 } );
+				const bigMaterial = new THREE.MeshPhongNodeMaterial( { color: 0xdddddd, shininess: 80 } );
 
 				for ( const position of bigPositions ) {
 
@@ -221,9 +192,7 @@
 				scenePass = pass( scene, camera );
 				clusterInfluence = uniform( 0 );
 
-				// the large far plane spreads the exponential z-slices out, so the orb
-				// field falls around slices 7–11; default into that range
-				debugZSliceNode = uniform( 10, 'int' );
+				debugZSliceNode = uniform( 20, 'int' );
 
 				renderPipeline = new THREE.RenderPipeline( renderer );