Improved RectAreaLight examples. (#32493)

examples/webgl_lights_rectarealight.html

@@ -33,12 +33,15 @@
 			import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js';
 
 			let renderer, scene, camera;
-			let stats, meshKnot;
+			let rectLight1, rectLight2, rectLight3;
+			let timer, stats;
 
 			init();
 
 			function init() {
 
+				timer = new THREE.Timer();
+
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -52,16 +55,16 @@
 
 				RectAreaLightUniformsLib.init();
 
-				const rectLight1 = new THREE.RectAreaLight( 0xff0000, 5, 4, 10 );
-				rectLight1.position.set( - 5, 5, 5 );
+				rectLight1 = new THREE.RectAreaLight( 0xff0000, 5, 4, 10 );
+				rectLight1.position.set( - 5, 6, 5 );
 				scene.add( rectLight1 );
 
-				const rectLight2 = new THREE.RectAreaLight( 0x00ff00, 5, 4, 10 );
-				rectLight2.position.set( 0, 5, 5 );
+				rectLight2 = new THREE.RectAreaLight( 0x00ff00, 5, 4, 10 );
+				rectLight2.position.set( 0, 6, 5 );
 				scene.add( rectLight2 );
 
-				const rectLight3 = new THREE.RectAreaLight( 0x0000ff, 5, 4, 10 );
-				rectLight3.position.set( 5, 5, 5 );
+				rectLight3 = new THREE.RectAreaLight( 0x0000ff, 5, 4, 10 );
+				rectLight3.position.set( 5, 6, 5 );
 				scene.add( rectLight3 );
 
 				scene.add( new RectAreaLightHelper( rectLight1 ) );
@@ -69,14 +72,15 @@
 				scene.add( new RectAreaLightHelper( rectLight3 ) );
 
 				const geoFloor = new THREE.BoxGeometry( 2000, 0.1, 2000 );
-				const matStdFloor = new THREE.MeshStandardMaterial( { color: 0xbcbcbc, roughness: 0.1, metalness: 0 } );
+				const matStdFloor = new THREE.MeshStandardMaterial( { color: 0x444444 } );
+				matStdFloor.roughnessMap = createCheckerTexture( 400 );
 				const mshStdFloor = new THREE.Mesh( geoFloor, matStdFloor );
 				scene.add( mshStdFloor );
 
 				const geoKnot = new THREE.TorusKnotGeometry( 1.5, 0.5, 200, 16 );
 				const matKnot = new THREE.MeshStandardMaterial( { color: 0xffffff, roughness: 0, metalness: 0 } );
-				meshKnot = new THREE.Mesh( geoKnot, matKnot );
-				meshKnot.position.set( 0, 5, 0 );
+				const meshKnot = new THREE.Mesh( geoKnot, matKnot );
+				meshKnot.position.set( 0, 5.5, 0 );
 				scene.add( meshKnot );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
@@ -92,6 +96,29 @@
 
 			}
 
+			function createCheckerTexture( repeat = 1 ) {
+
+				const canvas = document.createElement( 'canvas' );
+				canvas.width = 2;
+				canvas.height = 2;
+
+				const ctx = canvas.getContext( '2d' );
+				ctx.fillStyle = '#000';
+				ctx.fillRect( 0, 0, 2, 2 );
+				ctx.fillStyle = '#fff';
+				ctx.fillRect( 0, 0, 1, 1 );
+				ctx.fillRect( 1, 1, 1, 1 );
+
+				const texture = new THREE.CanvasTexture( canvas );
+				texture.repeat.set( repeat, repeat );
+				texture.magFilter = THREE.NearestFilter;
+				texture.wrapS = THREE.RepeatWrapping;
+				texture.wrapT = THREE.RepeatWrapping;
+
+				return texture;
+
+			}
+
 			function onWindowResize() {
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -100,9 +127,15 @@
 
 			}
 
-			function animation( time ) {
+			function animation() {
+
+				timer.update();
+
+				const delta = timer.getDelta();
 
-				meshKnot.rotation.y = time / 1000;
+				rectLight1.rotation.y += - delta;
+				rectLight2.rotation.y += delta * .5;
+				rectLight3.rotation.y += delta;
 
 				renderer.render( scene, camera );
 

examples/webgpu_lights_rectarealight.html

@@ -41,8 +41,11 @@
 			import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
 			import { RectAreaLightTexturesLib } from 'three/addons/lights/RectAreaLightTexturesLib.js';
 
+			import { checker, uv } from 'three/tsl';
+
 			let renderer, scene, camera;
-			let meshKnot;
+			let rectLight1, rectLight2, rectLight3;
+			let timer;
 
 			init();
 
@@ -50,6 +53,8 @@
 
 				THREE.RectAreaLightNode.setLTC( RectAreaLightTexturesLib.init() );
 
+				timer = new THREE.Timer();
+
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -62,16 +67,16 @@
 
 				scene = new THREE.Scene();
 
-				const rectLight1 = new THREE.RectAreaLight( 0xff0000, 5, 4, 10 );
-				rectLight1.position.set( - 5, 5, 5 );
+				rectLight1 = new THREE.RectAreaLight( 0xff0000, 5, 4, 10 );
+				rectLight1.position.set( - 5, 6, 5 );
 				scene.add( rectLight1 );
 
-				const rectLight2 = new THREE.RectAreaLight( 0x00ff00, 5, 4, 10 );
-				rectLight2.position.set( 0, 5, 5 );
+				rectLight2 = new THREE.RectAreaLight( 0x00ff00, 5, 4, 10 );
+				rectLight2.position.set( 0, 6, 5 );
 				scene.add( rectLight2 );
 
-				const rectLight3 = new THREE.RectAreaLight( 0x0000ff, 5, 4, 10 );
-				rectLight3.position.set( 5, 5, 5 );
+				rectLight3 = new THREE.RectAreaLight( 0x0000ff, 5, 4, 10 );
+				rectLight3.position.set( 5, 6, 5 );
 				scene.add( rectLight3 );
 
 				scene.add( new RectAreaLightHelper( rectLight1 ) );
@@ -79,14 +84,15 @@
 				scene.add( new RectAreaLightHelper( rectLight3 ) );
 
 				const geoFloor = new THREE.BoxGeometry( 2000, 0.1, 2000 );
-				const matStdFloor = new THREE.MeshStandardMaterial( { color: 0xbcbcbc, roughness: 0.1, metalness: 0 } );
+				const matStdFloor = new THREE.MeshStandardMaterial( { color: 0x444444 } );
+				matStdFloor.roughnessNode = checker( uv().mul( 400 ) );
 				const mshStdFloor = new THREE.Mesh( geoFloor, matStdFloor );
 				scene.add( mshStdFloor );
 
 				const geoKnot = new THREE.TorusKnotGeometry( 1.5, 0.5, 200, 16 );
 				const matKnot = new THREE.MeshStandardMaterial( { color: 0xffffff, roughness: 0, metalness: 0 } );
-				meshKnot = new THREE.Mesh( geoKnot, matKnot );
-				meshKnot.position.set( 0, 5, 0 );
+				const meshKnot = new THREE.Mesh( geoKnot, matKnot );
+				meshKnot.position.set( 0, 5.5, 0 );
 				scene.add( meshKnot );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
@@ -107,9 +113,15 @@
 
 			}
 
-			function animation( time ) {
+			function animation() {
+
+				timer.update();
+
+				const delta = timer.getDelta();
 
-				meshKnot.rotation.y = time / 1000;
+				rectLight1.rotation.y += - delta;
+				rectLight2.rotation.y += delta * .5;
+				rectLight3.rotation.y += delta;
 
 				renderer.render( scene, camera );
 

examples/webgpu_volume_lighting_rectarea.html

@@ -33,7 +33,7 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
-			import { vec3, Fn, time, texture3D, screenUV, uniform, screenCoordinate, pass } from 'three/tsl';
+			import { vec3, Fn, time, texture3D, screenUV, uniform, screenCoordinate, pass, checker, uv } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
@@ -45,9 +45,9 @@
 			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';
 
 			let renderer, scene, camera;
-			let volumetricMesh, meshKnot;
+			let volumetricMesh;
 			let rectLight1, rectLight2, rectLight3;
-			let clock;
+			let timer;
 			let postProcessing;
 
 			init();
@@ -105,7 +105,7 @@
 
 				const LAYER_VOLUMETRIC_LIGHTING = 10;
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
 
 				renderer = new THREE.WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -158,17 +158,17 @@
 
 				rectLight1 = new THREE.RectAreaLight( 0xff0000, 5, 4, 10 );
 				rectLight1.layers.enable( LAYER_VOLUMETRIC_LIGHTING );
-				rectLight1.position.set( - 5, 5, 5 );
+				rectLight1.position.set( - 5, 6, 5 );
 				scene.add( rectLight1 );
 
 				rectLight2 = new THREE.RectAreaLight( 0x00ff00, 5, 4, 10 );
 				rectLight2.layers.enable( LAYER_VOLUMETRIC_LIGHTING );
-				rectLight2.position.set( 0, 5, 5 );
+				rectLight2.position.set( 0, 6, 5 );
 				scene.add( rectLight2 );
 
 				rectLight3 = new THREE.RectAreaLight( 0x0000ff, 5, 4, 10 );
 				rectLight3.layers.enable( LAYER_VOLUMETRIC_LIGHTING );
-				rectLight3.position.set( 5, 5, 5 );
+				rectLight3.position.set( 5, 6, 5 );
 				scene.add( rectLight3 );
 
 				//
@@ -197,14 +197,15 @@
 				//
 
 				const geoFloor = new THREE.BoxGeometry( 2000, 0.1, 2000 );
-				const matStdFloor = new THREE.MeshStandardMaterial( { color: 0xbcbcbc, roughness: 0.1, metalness: 0 } );
+				const matStdFloor = new THREE.MeshStandardMaterial( { color: 0x444444 } );
+				matStdFloor.roughnessNode = checker( uv().mul( 400 ) );
 				const mshStdFloor = new THREE.Mesh( geoFloor, matStdFloor );
 				scene.add( mshStdFloor );
 
 				const geoKnot = new THREE.TorusKnotGeometry( 1.5, 0.5, 200, 16 );
 				const matKnot = new THREE.MeshStandardMaterial( { color: 0xffffff, roughness: 0, metalness: 0 } );
-				meshKnot = new THREE.Mesh( geoKnot, matKnot );
-				meshKnot.position.set( 0, 5, 0 );
+				const meshKnot = new THREE.Mesh( geoKnot, matKnot );
+				meshKnot.position.set( 0, 5.5, 0 );
 				scene.add( meshKnot );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
@@ -297,7 +298,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				rectLight1.rotation.y += - delta;
 				rectLight2.rotation.y += delta * .5;