Examples: Lights & Exposure update after decay=2 (#24981)

* lights & exposure update after decay=2

* move to physically-correct

* move to physically-correct (remaining)

examples/webgl_nodes_playground.html

@@ -74,27 +74,29 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
-				camera.position.set( 0.0, 300, 400 * 3 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.01, 100 );
+				camera.position.set( 0.0, 3, 4 * 3 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x333333 );
 
 				// Lights
 
-				const topLight = new THREE.PointLight( 0xF4F6F0, 1 );
-				topLight.position.set( 0, 1000, 1000 );
+				const topLight = new THREE.PointLight( 0xF4F6F0, 1, 100 );
+				topLight.power = 4500;
+				topLight.position.set( 0, 10, 10 );
 				scene.add( topLight );
 
-				const backLight = new THREE.PointLight( 0x0c1445, 1 );
-				backLight.position.set( - 100, 20, - 260 );
+				const backLight = new THREE.PointLight( 0x0c1445, 1, 100 );
+				backLight.power = 1000;
+				backLight.position.set( - 1, .2, - 2.6 );
 				scene.add( backLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				document.body.appendChild( renderer.domElement );
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.toneMapping = THREE.LinearToneMapping;
-				renderer.toneMappingExposure = 4000;
+				renderer.toneMappingExposure = 1;
 				renderer.physicallyCorrectLights = true;
 
 				renderer.domElement.className = 'renderer';
@@ -102,8 +104,8 @@
 				//
 
 				const controls = new OrbitControls( camera, renderer.domElement );
-				controls.minDistance = 500;
-				controls.maxDistance = 3000;
+				controls.minDistance = 5;
+				controls.maxDistance = 30;
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -145,27 +147,28 @@
 					const defaultMaterial = new Nodes.MeshBasicNodeMaterial();
 					defaultMaterial.colorNode = new Nodes.UniformNode( 0 );
 
-					const sphere = new THREE.Mesh( new THREE.SphereGeometry( 200, 32, 16 ), defaultMaterial );
+					const sphere = new THREE.Mesh( new THREE.SphereGeometry( 2, 32, 16 ), defaultMaterial );
 					sphere.name = 'Sphere';
-					sphere.position.set( 500, 0, - 500 );
+					sphere.position.set( 5, 0, - 5 );
 					scene.add( sphere );
 
-					const box = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), defaultMaterial );
+					const box = new THREE.Mesh( new THREE.BoxGeometry( 2, 2, 2 ), defaultMaterial );
 					box.name = 'Box';
-					box.position.set( - 500, 0, - 500 );
+					box.position.set( - 5, 0, - 5 );
 					scene.add( box );
 
 					const defaultPointsMaterial = new Nodes.PointsNodeMaterial();
 					defaultPointsMaterial.colorNode = new Nodes.UniformNode( 0 );
+					defaultPointsMaterial.size = 0.01;
 
-					const torusKnot = new THREE.Points( new THREE.TorusKnotGeometry( 100, 30, 100, 16 ), defaultPointsMaterial );
+					const torusKnot = new THREE.Points( new THREE.TorusKnotGeometry( 1, .3, 100, 16 ), defaultPointsMaterial );
 					torusKnot.name = 'Torus Knot ( Points )';
-					torusKnot.position.set( 0, 0, - 500 );
+					torusKnot.position.set( 0, 0, - 5 );
 					scene.add( torusKnot );
 
 					model = object.children[ 0 ];
-					model.position.set( 0, 0, 10 );
-					model.scale.setScalar( 1 );
+					model.position.set( 0, 0, .1 );
+					model.scale.setScalar( .01 );
 					model.material = defaultMaterial;
 					scene.add( model );
 

examples/webgpu_lights_selective.html

@@ -58,13 +58,13 @@
 
 				}
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.z = 70;
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
+				camera.position.z = 7;
 
 				scene = new THREE.Scene();
-				scene.fogNode = new Nodes.FogRangeNode( color( 0xFF00FF ), float( 30 ), float( 300 ) );
+				scene.fogNode = new Nodes.FogRangeNode( color( 0xFF00FF ), float( 3 ), float( 30 ) );
 
-				const sphereGeometry = new THREE.SphereGeometry( 0.5, 16, 8 );
+				const sphereGeometry = new THREE.SphereGeometry( 0.1, 16, 8 );
 
 				//textures
 
@@ -80,7 +80,7 @@
 
 				//lights
 
-				const addLight = ( hexColor, intensity = 2, distance = 1000 ) => {
+				const addLight = ( hexColor, power = 1700, distance = 100 ) => {
 
 					const material = new Nodes.MeshStandardNodeMaterial();
 					material.colorNode = color( hexColor );
@@ -88,7 +88,8 @@
 
 					const mesh = new THREE.Mesh( sphereGeometry, material );
 
-					const light = new THREE.PointLight( hexColor, intensity, distance );
+					const light = new THREE.PointLight( hexColor, 1, distance );
+					light.power = power;
 					light.add( mesh );
 
 					scene.add( light );
@@ -109,13 +110,13 @@
 
 				//models
 
-				const geometryTeapot = new TeapotGeometry( 8, 18 );
+				const geometryTeapot = new TeapotGeometry( .8, 18 );
 
 				const leftObject = new THREE.Mesh( geometryTeapot, new Nodes.MeshStandardNodeMaterial( { color: 0x555555 } ) );
 				leftObject.material.lightsNode = redLightsNode;
 				leftObject.material.roughnessNode = new Nodes.TextureNode( alphaTexture );
 				leftObject.material.metalness = 0;
-				leftObject.position.x = - 30;
+				leftObject.position.x = - 3;
 				scene.add( leftObject );
 
 				const centerObject = new THREE.Mesh( geometryTeapot, new Nodes.MeshStandardNodeMaterial( { color: 0x555555 } ) );
@@ -127,11 +128,11 @@
 				const rightObject = new THREE.Mesh( geometryTeapot, new Nodes.MeshStandardNodeMaterial( { color: 0x555555 } ) );
 				rightObject.material.lightsNode = blueLightsNode;
 				rightObject.material.metalnessNode = new Nodes.TextureNode( alphaTexture );
-				rightObject.position.x = 30;
+				rightObject.position.x = 3;
 				scene.add( rightObject );
 
 				leftObject.rotation.y = centerObject.rotation.y = rightObject.rotation.y = Math.PI * - 0.5;
-				leftObject.position.y = centerObject.position.y = rightObject.position.y = - 10;
+				leftObject.position.y = centerObject.position.y = rightObject.position.y = - 1;
 
 				//renderer
 
@@ -141,13 +142,13 @@
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 				renderer.outputEncoding = THREE.sRGBEncoding;
-				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 100 );
+				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, .2 );
 
 				//controls
 
 				controls = new OrbitControls( camera, renderer.domElement );
-				controls.minDistance = 30;
-				controls.maxDistance = 250;
+				controls.minDistance = 3;
+				controls.maxDistance = 25;
 
 				//stats
 
@@ -179,29 +180,29 @@
 				const time = performance.now() / 1000;
 				const lightTime = time * 0.5;
 
-				light1.position.x = Math.sin( lightTime * 0.7 ) * 30;
-				light1.position.y = Math.cos( lightTime * 0.5 ) * 40;
-				light1.position.z = Math.cos( lightTime * 0.3 ) * 30;
+				light1.position.x = Math.sin( lightTime * 0.7 ) * 3;
+				light1.position.y = Math.cos( lightTime * 0.5 ) * 4;
+				light1.position.z = Math.cos( lightTime * 0.3 ) * 3;
 
-				light2.position.x = Math.cos( lightTime * 0.3 ) * 30;
-				light2.position.y = Math.sin( lightTime * 0.5 ) * 40;
-				light2.position.z = Math.sin( lightTime * 0.7 ) * 30;
+				light2.position.x = Math.cos( lightTime * 0.3 ) * 3;
+				light2.position.y = Math.sin( lightTime * 0.5 ) * 4;
+				light2.position.z = Math.sin( lightTime * 0.7 ) * 3;
 
-				light3.position.x = Math.sin( lightTime * 0.7 ) * 30;
-				light3.position.y = Math.cos( lightTime * 0.3 ) * 40;
-				light3.position.z = Math.sin( lightTime * 0.5 ) * 30;
+				light3.position.x = Math.sin( lightTime * 0.7 ) * 3;
+				light3.position.y = Math.cos( lightTime * 0.3 ) * 4;
+				light3.position.z = Math.sin( lightTime * 0.5 ) * 3;
 
-				light4.position.x = Math.sin( lightTime * 0.3 ) * 30;
-				light4.position.y = Math.cos( lightTime * 0.7 ) * 40;
-				light4.position.z = Math.sin( lightTime * 0.5 ) * 30;
-	/*
+				light4.position.x = Math.sin( lightTime * 0.3 ) * 3;
+				light4.position.y = Math.cos( lightTime * 0.7 ) * 4;
+				light4.position.z = Math.sin( lightTime * 0.5 ) * 3;
+				/*
 				@TODO: Used to test scene light change ( currently unavailable )
 
 				if ( time > 2.0 && light1.parent === null ) scene.add( light1 );
 				if ( time > 2.5 && light2.parent === null ) scene.add( light2 );
 				if ( time > 3.0 && light3.parent === null ) scene.add( light3 );
 				if ( time > 3.5 && light4.parent === null ) scene.add( light4 );
-*/
+				*/
 				renderer.render( scene, camera );
 
 				stats.update();

examples/webgpu_nodes_playground.html

@@ -85,20 +85,22 @@
 
 				}
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
-				camera.position.set( 0.0, 300, 400 * 3 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.01, 100 );
+				camera.position.set( 0.0, 3, 4 * 3 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x333333 );
 
 				// Lights
 
-				const topLight = new THREE.PointLight( 0xF4F6F0, 1 );
-				topLight.position.set( 0, 1000, 1000 );
+				const topLight = new THREE.PointLight( 0xF4F6F0, 1, 100 );
+				topLight.power = 4500;
+				topLight.position.set( 0, 10, 10 );
 				scene.add( topLight );
 
-				const backLight = new THREE.PointLight( 0x0c1445, 1 );
-				backLight.position.set( - 100, 20, - 260 );
+				const backLight = new THREE.PointLight( 0x0c1445, 1, 100 );
+				backLight.power = 1000;
+				backLight.position.set( - 1, .2, - 2.6 );
 				scene.add( backLight );
 
 				renderer = new WebGPURenderer();
@@ -106,7 +108,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );
 				renderer.outputEncoding = THREE.sRGBEncoding;
-				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 4000 );
+				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 1 );
 				document.body.appendChild( renderer.domElement );
 
 				renderer.domElement.className = 'renderer';
@@ -114,8 +116,8 @@
 				//
 
 				const controls = new OrbitControls( camera, renderer.domElement );
-				controls.minDistance = 500;
-				controls.maxDistance = 3000;
+				controls.minDistance = 5;
+				controls.maxDistance = 30;
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -157,27 +159,27 @@
 					const defaultMaterial = new Nodes.MeshBasicNodeMaterial();
 					defaultMaterial.colorNode = new Nodes.UniformNode( 0 );
 
-					const sphere = new THREE.Mesh( new THREE.SphereGeometry( 200, 32, 16 ), defaultMaterial );
+					const sphere = new THREE.Mesh( new THREE.SphereGeometry( 2, 32, 16 ), defaultMaterial );
 					sphere.name = 'Sphere';
-					sphere.position.set( 500, 0, - 500 );
+					sphere.position.set( 5, 0, - 5 );
 					scene.add( sphere );
 
-					const box = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), defaultMaterial );
+					const box = new THREE.Mesh( new THREE.BoxGeometry( 2, 2, 2 ), defaultMaterial );
 					box.name = 'Box';
-					box.position.set( - 500, 0, - 500 );
+					box.position.set( - 5, 0, - 5 );
 					scene.add( box );
 
 					const defaultPointsMaterial = new Nodes.PointsNodeMaterial();
 					defaultPointsMaterial.colorNode = new Nodes.UniformNode( 0 );
 
-					const torusKnot = new THREE.Points( new THREE.TorusKnotGeometry( 100, 30, 100, 16 ), defaultPointsMaterial );
+					const torusKnot = new THREE.Points( new THREE.TorusKnotGeometry( 1, .3, 100, 16 ), defaultPointsMaterial );
 					torusKnot.name = 'Torus Knot ( Points )';
-					torusKnot.position.set( 0, 0, - 500 );
+					torusKnot.position.set( 0, 0, - 5 );
 					scene.add( torusKnot );
 
 					model = object.children[ 0 ];
-					model.position.set( 0, 0, 10 );
-					model.scale.setScalar( 1 );
+					model.position.set( 0, 0, .1 );
+					model.scale.setScalar( .01 );
 					model.material = defaultMaterial;
 					scene.add( model );
 

examples/webgpu_skinning.html

@@ -50,23 +50,26 @@
 
 				}
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 100, 200, 300 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
+				camera.position.set( 1, 2, 3 );
 
 				scene = new THREE.Scene();
-				camera.lookAt( 0, 100, 0 );
+				camera.lookAt( 0, 1, 0 );
 
 				clock = new THREE.Clock();
 
 				//lights
 
-				const light = new THREE.PointLight( 0xffffff );
+				const light = new THREE.PointLight( 0xffffff, 1, 100 );
+				light.power = 1700; // 100W
 				camera.add( light );
 				scene.add( camera );
 
 				const loader = new FBXLoader();
 				loader.load( 'models/fbx/Samba Dancing.fbx', function ( object ) {
 
+					object.scale.setScalar( .01 );
+
 					mixer = new THREE.AnimationMixer( object );
 
 					const action = mixer.clipAction( object.animations[ 0 ] );
@@ -94,7 +97,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.outputEncoding = THREE.sRGBEncoding;
-				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 800 );
+				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, .15 );
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgpu_skinning_instancing.html

@@ -52,28 +52,32 @@
 
 				}
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
-				camera.position.set( 100, 200, 300 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
+				camera.position.set( 1, 2, 3 );
 
 				scene = new THREE.Scene();
-				camera.lookAt( 0, 100, 0 );
+				camera.lookAt( 0, 1, 0 );
 
 				clock = new THREE.Clock();
 
 				//lights
 
-				const centerLight = new THREE.PointLight( 0xff9900, .8, 7000 );
-				centerLight.position.y = 450;
-				centerLight.position.z = - 200;
+				const centerLight = new THREE.PointLight( 0xff9900, 1, 100 );
+				centerLight.position.y = 4.5;
+				centerLight.position.z = - 2;
+				centerLight.power = 1700;
 				scene.add( centerLight );
 
-				const cameraLight = new THREE.PointLight( 0x0099ff, .7, 7000 );
+				const cameraLight = new THREE.PointLight( 0x0099ff, 1, 100 );
+				cameraLight.power = 1700;
 				camera.add( cameraLight );
 				scene.add( camera );
 
 				const loader = new FBXLoader();
 				loader.load( 'models/fbx/Samba Dancing.fbx', ( object ) => {
 
+					object.scale.setScalar( .01 );
+
 					mixer = new THREE.AnimationMixer( object );
 
 					const action = mixer.clipAction( object.animations[ 0 ] );
@@ -129,7 +133,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.outputEncoding = THREE.sRGBEncoding;
-				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 800 );
+				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, .17 );
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );