[pull] dev from mrdoob:dev

examples/files.json

@@ -64,6 +64,7 @@
 		"webgl_lights_physical",
 		"webgl_lights_spotlight",
 		"webgl_lights_spotlights",
+		"webgl_lights_sunlight",
 		"webgl_lights_rectarealight",
 		"webgl_lines_colors",
 		"webgl_lines_dashed",

examples/jsm/lighting/LightProbeGridWebGL.js

@@ -1,6 +1,7 @@
 import {
 	Box3,
 	CubeCamera,
+	DirectionalLight,
 	FloatType,
 	HalfFloatType,
 	LinearFilter,
@@ -12,6 +13,7 @@ import {
 	RGBAFormat,
 	Scene,
 	ShaderMaterial,
+	Sphere,
 	Vector3,
 	Vector4,
 	WebGL3DRenderTarget,
@@ -47,6 +49,82 @@ const _position = /*@__PURE__*/ new Vector3();
 const _size = /*@__PURE__*/ new Vector3();
 const _currentViewport = /*@__PURE__*/ new Vector4();
 const _currentScissor = /*@__PURE__*/ new Vector4();
+const _casterBox = /*@__PURE__*/ new Box3();
+const _casterSphere = /*@__PURE__*/ new Sphere();
+const _sunDirection = /*@__PURE__*/ new Vector3();
+
+// SunLight shadow cascades are fitted to the active camera every render, which
+// the frozen shadow maps of a bake cannot provide: each shadow-casting SunLight
+// is swapped for an equivalent DirectionalLight fitted to the shadow casters.
+
+function _replaceSunLights( scene ) {
+
+	const sunLights = [];
+
+	scene.traverse( ( object ) => {
+
+		if ( object.isSunLight === true && object.visible === true && object.castShadow === true ) sunLights.push( object );
+
+	} );
+
+	if ( sunLights.length === 0 ) return null;
+
+	_casterBox.makeEmpty();
+
+	scene.traverse( ( object ) => {
+
+		if ( object.isMesh === true && object.castShadow === true ) _casterBox.expandByObject( object );
+
+	} );
+
+	_casterBox.getBoundingSphere( _casterSphere );
+
+	const center = _casterSphere.center;
+	const radius = Math.max( _casterSphere.radius, 1 );
+
+	const replacements = [];
+
+	for ( const sunLight of sunLights ) {
+
+		const bakeLight = new DirectionalLight( sunLight.color, sunLight.intensity );
+		bakeLight.castShadow = true;
+		bakeLight.shadow.mapSize.copy( sunLight.shadow.mapSize );
+		bakeLight.shadow.camera.left = - radius;
+		bakeLight.shadow.camera.right = radius;
+		bakeLight.shadow.camera.top = radius;
+		bakeLight.shadow.camera.bottom = - radius;
+		bakeLight.shadow.camera.near = radius * 0.5;
+		bakeLight.shadow.camera.far = radius * 3.5;
+
+		_sunDirection.setFromMatrixPosition( sunLight.matrixWorld ).normalize();
+		bakeLight.target.position.copy( center );
+		bakeLight.position.copy( center ).addScaledVector( _sunDirection, radius * 2 );
+
+		scene.add( bakeLight, bakeLight.target );
+		bakeLight.target.updateMatrixWorld();
+		bakeLight.updateMatrixWorld();
+
+		sunLight.visible = false;
+
+		replacements.push( { sunLight, bakeLight } );
+
+	}
+
+	return replacements;
+
+}
+
+function _restoreSunLights( scene, replacements ) {
+
+	for ( const { sunLight, bakeLight } of replacements ) {
+
+		scene.remove( bakeLight, bakeLight.target );
+		bakeLight.dispose();
+		sunLight.visible = true;
+
+	}
+
+}
 
 // Number of padding texels added at each boundary of every sub-volume in the atlas.
 const ATLAS_PADDING = 1;
@@ -210,6 +288,10 @@ class LightProbeGridWebGL extends Object3D {
 	 * atlas as indirect light, so a grid added to the scene before baking
 	 * accumulates one bounce per extra pass.
 	 *
+	 * Shadow-casting instances of `SunLight` are temporarily replaced with
+	 * equivalent directional lights, since their view-fitted shadow cascades
+	 * cannot be frozen across probe renders.
+	 *
 	 * @param {WebGLRenderer} renderer - The renderer.
 	 * @param {Scene} scene - The scene to render.
 	 * @param {Object} [options] - Bake options.
@@ -238,6 +320,8 @@ class LightProbeGridWebGL extends Object3D {
 		renderer.getScissor( _currentScissor );
 		const currentScissorTest = renderer.getScissorTest();
 
+		const replacedSunLights = _replaceSunLights( scene );
+
 		// Scene is static across the bake — update once and disable per-render auto updates.
 		const currentMatrixWorldAutoUpdate = scene.matrixWorldAutoUpdate;
 		if ( currentMatrixWorldAutoUpdate === true ) {
@@ -360,6 +444,8 @@ class LightProbeGridWebGL extends Object3D {
 		renderer.setScissor( _currentScissor );
 		renderer.setScissorTest( currentScissorTest );
 
+		if ( replacedSunLights !== null ) _restoreSunLights( scene, replacedSunLights );
+
 		scene.matrixWorldAutoUpdate = currentMatrixWorldAutoUpdate;
 
 		// console.log( `LightProbeGridWebGL: bake complete ${ ( performance.now() - t0 ).toFixed( 1 ) }ms` );

examples/webgl_animation_multiple.html

@@ -61,18 +61,11 @@
 				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
-				dirLight.position.set( - 3, 10, - 10 );
-				dirLight.castShadow = true;
-				dirLight.shadow.camera.top = 4;
-				dirLight.shadow.camera.bottom = - 4;
-				dirLight.shadow.camera.left = - 4;
-				dirLight.shadow.camera.right = 4;
-				dirLight.shadow.camera.near = 0.1;
-				dirLight.shadow.camera.far = 40;
-				scene.add( dirLight );
-
-				// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
+				const sunLight = new THREE.SunLight( 0xffffff, 3 );
+				sunLight.position.set( - 3, 10, - 10 );
+				sunLight.castShadow = true;
+				sunLight.shadow.camera.far = 20;
+				scene.add( sunLight );
 
 				// ground
 

examples/webgl_animation_skinning_additive_blending.html

@@ -79,16 +79,11 @@
 				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
-				dirLight.position.set( 3, 10, 10 );
-				dirLight.castShadow = true;
-				dirLight.shadow.camera.top = 2;
-				dirLight.shadow.camera.bottom = - 2;
-				dirLight.shadow.camera.left = - 2;
-				dirLight.shadow.camera.right = 2;
-				dirLight.shadow.camera.near = 0.1;
-				dirLight.shadow.camera.far = 40;
-				scene.add( dirLight );
+				const sunLight = new THREE.SunLight( 0xffffff, 3 );
+				sunLight.position.set( 3, 10, 10 );
+				sunLight.castShadow = true;
+				sunLight.shadow.camera.far = 20;
+				scene.add( sunLight );
 
 				// ground
 

examples/webgl_animation_skinning_blending.html

@@ -74,18 +74,11 @@
 				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
-				dirLight.position.set( - 3, 10, - 10 );
-				dirLight.castShadow = true;
-				dirLight.shadow.camera.top = 2;
-				dirLight.shadow.camera.bottom = - 2;
-				dirLight.shadow.camera.left = - 2;
-				dirLight.shadow.camera.right = 2;
-				dirLight.shadow.camera.near = 0.1;
-				dirLight.shadow.camera.far = 40;
-				scene.add( dirLight );
-
-				// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
+				const sunLight = new THREE.SunLight( 0xffffff, 3 );
+				sunLight.position.set( - 3, 10, - 10 );
+				sunLight.castShadow = true;
+				sunLight.shadow.camera.far = 20;
+				scene.add( sunLight );
 
 				// ground
 

examples/webgl_animation_walk.html

@@ -43,7 +43,7 @@
 			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
 
 			let scene, renderer, camera, floor, orbitControls;
-			let group, followGroup, model, skeleton, mixer, timer;
+			let group, model, skeleton, mixer, timer;
 
 			let actions;
 
@@ -91,22 +91,11 @@
 				group = new THREE.Group();
 				scene.add( group );
 
-				followGroup = new THREE.Group();
-				scene.add( followGroup );
-
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 5 );
-				dirLight.position.set( - 2, 5, - 3 );
-				dirLight.castShadow = true;
-				const cam = dirLight.shadow.camera;
-				cam.top = cam.right = 2;
-				cam.bottom = cam.left = - 2;
-				cam.near = 3;
-				cam.far = 8;
-				dirLight.shadow.mapSize.set( 1024, 1024 );
-				followGroup.add( dirLight );
-				followGroup.add( dirLight.target );
-
-				//scene.add( new THREE.CameraHelper( cam ) );
+				const sunLight = new THREE.SunLight( 0xffffff, 5 );
+				sunLight.position.set( - 2, 5, - 3 );
+				sunLight.castShadow = true;
+				sunLight.shadow.camera.far = 20;
+				scene.add( sunLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -336,7 +325,6 @@
 					group.quaternion.rotateTowards( rotate, controls.rotateSpeed );
 
 					orbitControls.target.copy( position ).add( { x: 0, y: 1, z: 0 } );
-					followGroup.position.copy( position );
 
 					// Move the floor without any limit
 					const dx = ( position.x - floor.position.x );

examples/webgl_gpgpu_water.html

@@ -216,7 +216,7 @@
 
 				scene = new THREE.Scene();
 
-				sun = new THREE.DirectionalLight( 0xFFFFFF, 4.0 );
+				sun = new THREE.SunLight( 0xFFFFFF, 4.0 );
 				sun.position.set( - 1, 2.6, 1.4 );
 				scene.add( sun );
 
@@ -444,24 +444,16 @@
 
 					renderer.shadowMap.type = THREE.VSMShadowMap;
 					const shadow = sun.shadow;
-					shadow.mapSize.width = shadow.mapSize.height = 2048;
 					shadow.radius = 2;
 					shadow.bias = - 0.0005;
-					const shadowCam = shadow.camera, s = 5;
-					shadowCam.near = 0.1;
-					shadowCam.far = 6;
-					shadowCam.right = shadowCam.top	= s;
-					shadowCam.left = shadowCam.bottom = - s;
+					shadow.camera.far = 6;
 
 				} else {
 
 					if ( sun.shadow ) sun.shadow.dispose();
 
 				}
 
-				// debug shadow
-				//scene.add(  new THREE.CameraHelper(shadowCam) );
-
 			}
 
 			// function smoothWater() {

examples/webgl_instancing_morph.html

@@ -55,25 +55,19 @@
 
 				scene.fog = new THREE.Fog( 0x99DDFF, 5000, 10000 );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.SunLight( 0xffffff, 2 );
 
 				light.position.set( 200, 1000, 50 );
 
 				light.castShadow = true;
 
-				light.shadow.camera.left = - 5000;
-				light.shadow.camera.right = 5000;
-				light.shadow.camera.top = 5000;
-				light.shadow.camera.bottom = - 5000;
-				light.shadow.camera.far = 2000;
+				light.shadow.camera.far = 10000;
 
-				light.shadow.bias = - 0.01;
-
-				light.shadow.camera.updateProjectionMatrix();
+				light.shadow.mapSize.setScalar( 2048 );
 
 				scene.add( light );
 
-				const hemi = new THREE.HemisphereLight( 0x99DDFF, 0x669933, 1 / 3 );
+				const hemi = new THREE.HemisphereLight( 0x99DDFF, 0x669933, 0.5 );
 
 				scene.add( hemi );
 
@@ -135,7 +129,6 @@
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.VSMShadowMap;
 				//
 
 				stats = new Stats();