@plastic-software/three 0.167.4 → 0.174.0

package/examples/jsm/csm/CSMShadowNode.js

@@ -0,0 +1,442 @@
+import {
+	Vector2,
+	Vector3,
+	MathUtils,
+	Matrix4,
+	Box3,
+	Object3D,
+	WebGLCoordinateSystem,
+	ShadowBaseNode
+} from 'three/webgpu';
+
+import { CSMFrustum } from './CSMFrustum.js';
+import { viewZToOrthographicDepth, reference, uniform, float, vec4, vec2, If, Fn, min, renderGroup, positionView, shadow } from 'three/tsl';
+
+const _cameraToLightMatrix = new Matrix4();
+const _lightSpaceFrustum = new CSMFrustum();
+const _center = new Vector3();
+const _bbox = new Box3();
+const _uniformArray = [];
+const _logArray = [];
+const _lightDirection = new Vector3();
+const _lightOrientationMatrix = new Matrix4();
+const _lightOrientationMatrixInverse = new Matrix4();
+const _up = new Vector3( 0, 1, 0 );
+
+class LwLight extends Object3D {
+
+	constructor() {
+
+		super();
+
+		this.target = new Object3D();
+
+	}
+
+}
+
+class CSMShadowNode extends ShadowBaseNode {
+
+	constructor( light, data = {} ) {
+
+		super( light );
+
+		this.camera = null;
+		this.cascades = data.cascades || 3;
+		this.maxFar = data.maxFar || 100000;
+		this.mode = data.mode || 'practical';
+		this.lightMargin = data.lightMargin || 200;
+		this.customSplitsCallback = data.customSplitsCallback;
+
+		this.fade = false;
+
+		this.breaks = [];
+
+		this._cascades = [];
+		this.mainFrustum = null;
+		this.frustums = [];
+
+		this.lights = [];
+
+		this._shadowNodes = [];
+
+	}
+
+	init( { camera, renderer } ) {
+
+		this.camera = camera;
+
+		const data = { webGL: renderer.coordinateSystem === WebGLCoordinateSystem };
+		this.mainFrustum = new CSMFrustum( data );
+
+		const light = this.light;
+		const parent = light.parent;
+
+		for ( let i = 0; i < this.cascades; i ++ ) {
+
+			const lwLight = new LwLight();
+			lwLight.castShadow = true;
+
+			const lShadow = light.shadow.clone();
+			lShadow.bias = lShadow.bias * ( i + 1 );
+
+			this.lights.push( lwLight );
+
+			parent.add( lwLight );
+			parent.add( lwLight.target );
+
+			lwLight.shadow = lShadow;
+
+			this._shadowNodes.push( shadow( lwLight, lShadow ) );
+
+			this._cascades.push( new Vector2() );
+
+		}
+
+		this.updateFrustums();
+
+	}
+
+	initCascades() {
+
+		const camera = this.camera;
+		camera.updateProjectionMatrix();
+
+		this.mainFrustum.setFromProjectionMatrix( camera.projectionMatrix, this.maxFar );
+		this.mainFrustum.split( this.breaks, this.frustums );
+
+	}
+
+	getBreaks() {
+
+		const camera = this.camera;
+		const far = Math.min( camera.far, this.maxFar );
+
+		this.breaks.length = 0;
+
+		switch ( this.mode ) {
+
+			case 'uniform':
+				uniformSplit( this.cascades, camera.near, far, this.breaks );
+				break;
+
+			case 'logarithmic':
+				logarithmicSplit( this.cascades, camera.near, far, this.breaks );
+				break;
+
+			case 'practical':
+				practicalSplit( this.cascades, camera.near, far, 0.5, this.breaks );
+				break;
+
+			case 'custom':
+				if ( this.customSplitsCallback === undefined ) console.error( 'CSM: Custom split scheme callback not defined.' );
+				this.customSplitsCallback( this.cascades, camera.near, far, this.breaks );
+				break;
+
+		}
+
+		function uniformSplit( amount, near, far, target ) {
+
+			for ( let i = 1; i < amount; i ++ ) {
+
+				target.push( ( near + ( far - near ) * i / amount ) / far );
+
+			}
+
+			target.push( 1 );
+
+		}
+
+		function logarithmicSplit( amount, near, far, target ) {
+
+			for ( let i = 1; i < amount; i ++ ) {
+
+				target.push( ( near * ( far / near ) ** ( i / amount ) ) / far );
+
+			}
+
+			target.push( 1 );
+
+		}
+
+		function practicalSplit( amount, near, far, lambda, target ) {
+
+			_uniformArray.length = 0;
+			_logArray.length = 0;
+			logarithmicSplit( amount, near, far, _logArray );
+			uniformSplit( amount, near, far, _uniformArray );
+
+			for ( let i = 1; i < amount; i ++ ) {
+
+				target.push( MathUtils.lerp( _uniformArray[ i - 1 ], _logArray[ i - 1 ], lambda ) );
+
+			}
+
+			target.push( 1 );
+
+		}
+
+	}
+
+	setLightBreaks() {
+
+		for ( let i = 0, l = this.cascades; i < l; i ++ ) {
+
+			const amount = this.breaks[ i ];
+			const prev = this.breaks[ i - 1 ] || 0;
+
+			this._cascades[ i ].set( prev, amount );
+
+		}
+
+	}
+
+	updateShadowBounds() {
+
+		const frustums = this.frustums;
+
+		for ( let i = 0; i < frustums.length; i ++ ) {
+
+			const shadowCam = this.lights[ i ].shadow.camera;
+			const frustum = this.frustums[ i ];
+
+			// Get the two points that represent that furthest points on the frustum assuming
+			// that's either the diagonal across the far plane or the diagonal across the whole
+			// frustum itself.
+			const nearVerts = frustum.vertices.near;
+			const farVerts = frustum.vertices.far;
+			const point1 = farVerts[ 0 ];
+
+			let point2;
+
+			if ( point1.distanceTo( farVerts[ 2 ] ) > point1.distanceTo( nearVerts[ 2 ] ) ) {
+
+				point2 = farVerts[ 2 ];
+
+			} else {
+
+				point2 = nearVerts[ 2 ];
+
+			}
+
+			let squaredBBWidth = point1.distanceTo( point2 );
+
+			if ( this.fade ) {
+
+				// expand the shadow extents by the fade margin if fade is enabled.
+				const camera = this.camera;
+				const far = Math.max( camera.far, this.maxFar );
+				const linearDepth = frustum.vertices.far[ 0 ].z / ( far - camera.near );
+				const margin = 0.25 * Math.pow( linearDepth, 2.0 ) * ( far - camera.near );
+
+				squaredBBWidth += margin;
+
+			}
+
+			shadowCam.left = - squaredBBWidth / 2;
+			shadowCam.right = squaredBBWidth / 2;
+			shadowCam.top = squaredBBWidth / 2;
+			shadowCam.bottom = - squaredBBWidth / 2;
+			shadowCam.updateProjectionMatrix();
+
+		}
+
+	}
+
+	updateFrustums() {
+
+		this.getBreaks();
+		this.initCascades();
+		this.updateShadowBounds();
+		this.setLightBreaks();
+
+	}
+
+	setupFade() {
+
+		const cameraNear = reference( 'camera.near', 'float', this ).setGroup( renderGroup );
+		const cascades = reference( '_cascades', 'vec2', this ).setGroup( renderGroup ).label( 'cascades' );
+
+		const shadowFar = uniform( 'float' ).setGroup( renderGroup ).label( 'shadowFar' )
+			.onRenderUpdate( () => Math.min( this.maxFar, this.camera.far ) );
+
+		const linearDepth = viewZToOrthographicDepth( positionView.z, cameraNear, shadowFar ).toVar( 'linearDepth' );
+		const lastCascade = this.cascades - 1;
+
+		return Fn( ( builder ) => {
+
+			this.setupShadowPosition( builder );
+
+			const ret = vec4( 1, 1, 1, 1 ).toVar( 'shadowValue' );
+
+			const cascade = vec2().toVar( 'cascade' );
+			const cascadeCenter = float().toVar( 'cascadeCenter' );
+
+			const margin = float().toVar( 'margin' );
+
+			const csmX = float().toVar( 'csmX' );
+			const csmY = float().toVar( 'csmY' );
+
+			for ( let i = 0; i < this.cascades; i ++ ) {
+
+				const isLastCascade = i === lastCascade;
+
+				cascade.assign( cascades.element( i ) );
+
+				cascadeCenter.assign( cascade.x.add( cascade.y ).div( 2.0 ) );
+
+				const closestEdge = linearDepth.lessThan( cascadeCenter ).select( cascade.x, cascade.y );
+
+				margin.assign( float( 0.25 ).mul( closestEdge.pow( 2.0 ) ) );
+
+				csmX.assign( cascade.x.sub( margin.div( 2.0 ) ) );
+
+				if ( isLastCascade ) {
+
+					csmY.assign( cascade.y );
+
+				} else {
+
+					csmY.assign( cascade.y.add( margin.div( 2.0 ) ) );
+
+				}
+
+				const inRange = linearDepth.greaterThanEqual( csmX ).and( linearDepth.lessThanEqual( csmY ) );
+
+				If( inRange, () => {
+
+					const dist = min( linearDepth.sub( csmX ), csmY.sub( linearDepth ) ).toVar();
+
+					let ratio = dist.div( margin ).clamp( 0.0, 1.0 );
+
+					if ( i === 0 ) {
+
+						// don't fade at nearest edge
+						ratio = linearDepth.greaterThan( cascadeCenter ).select( ratio, 1 );
+
+					}
+
+					ret.subAssign( this._shadowNodes[ i ].oneMinus().mul( ratio ) );
+
+				} );
+
+			}
+
+			return ret;
+
+		} )();
+
+	}
+
+	setupStandard() {
+
+		const cameraNear = reference( 'camera.near', 'float', this ).setGroup( renderGroup );
+		const cascades = reference( '_cascades', 'vec2', this ).setGroup( renderGroup ).label( 'cascades' );
+
+		const shadowFar = uniform( 'float' ).setGroup( renderGroup ).label( 'shadowFar' )
+			.onRenderUpdate( () => Math.min( this.maxFar, this.camera.far ) );
+
+		const linearDepth = viewZToOrthographicDepth( positionView.z, cameraNear, shadowFar ).toVar( 'linearDepth' );
+
+		return Fn( ( builder ) => {
+
+			this.setupShadowPosition( builder );
+
+			const ret = vec4( 1, 1, 1, 1 ).toVar( 'shadowValue' );
+			const cascade = vec2().toVar( 'cascade' );
+
+			for ( let i = 0; i < this.cascades; i ++ ) {
+
+				cascade.assign( cascades.element( i ) );
+
+				If( linearDepth.greaterThanEqual( cascade.x ).and( linearDepth.lessThanEqual( cascade.y ) ), () => {
+
+					ret.assign( this._shadowNodes[ i ] );
+
+				} );
+
+			}
+
+			return ret;
+
+		} )();
+
+	}
+
+	setup( builder ) {
+
+		if ( this.camera === null ) this.init( builder );
+
+		return this.fade === true ? this.setupFade() : this.setupStandard();
+
+	}
+
+	updateBefore( /*builder*/ ) {
+
+		const light = this.light;
+		const camera = this.camera;
+		const frustums = this.frustums;
+
+		_lightDirection.subVectors( light.target.position, light.position ).normalize();
+
+		// for each frustum we need to find its min-max box aligned with the light orientation
+		// the position in _lightOrientationMatrix does not matter, as we transform there and back
+		_lightOrientationMatrix.lookAt( light.position, light.target.position, _up );
+		_lightOrientationMatrixInverse.copy( _lightOrientationMatrix ).invert();
+
+		for ( let i = 0; i < frustums.length; i ++ ) {
+
+			const lwLight = this.lights[ i ];
+			const shadow = lwLight.shadow;
+			const shadowCam = shadow.camera;
+			const texelWidth = ( shadowCam.right - shadowCam.left ) / shadow.mapSize.width;
+			const texelHeight = ( shadowCam.top - shadowCam.bottom ) / shadow.mapSize.height;
+
+			_cameraToLightMatrix.multiplyMatrices( _lightOrientationMatrixInverse, camera.matrixWorld );
+			frustums[ i ].toSpace( _cameraToLightMatrix, _lightSpaceFrustum );
+
+			const nearVerts = _lightSpaceFrustum.vertices.near;
+			const farVerts = _lightSpaceFrustum.vertices.far;
+
+			_bbox.makeEmpty();
+
+			for ( let j = 0; j < 4; j ++ ) {
+
+				_bbox.expandByPoint( nearVerts[ j ] );
+				_bbox.expandByPoint( farVerts[ j ] );
+
+			}
+
+			_bbox.getCenter( _center );
+			_center.z = _bbox.max.z + this.lightMargin;
+			_center.x = Math.floor( _center.x / texelWidth ) * texelWidth;
+			_center.y = Math.floor( _center.y / texelHeight ) * texelHeight;
+			_center.applyMatrix4( _lightOrientationMatrix );
+
+			lwLight.position.copy( _center );
+			lwLight.target.position.copy( _center );
+			lwLight.target.position.add( _lightDirection );
+
+		}
+
+	}
+
+	dispose() {
+
+		for ( let i = 0; i < this.lights.length; i ++ ) {
+
+			const light = this.lights[ i ];
+			const parent = light.parent;
+
+			parent.remove( light.target );
+			parent.remove( light );
+
+		}
+
+		super.dispose();
+
+	}
+
+}
+
+export { CSMShadowNode };

package/examples/jsm/curves/NURBSCurve.js

@@ -26,14 +26,17 @@ class NURBSCurve extends Curve {
 
 		super();
 
+		const knotsLength = knots ? knots.length - 1 : 0;
+		const pointsLength = controlPoints ? controlPoints.length : 0;
+
 		this.degree = degree;
 		this.knots = knots;
 		this.controlPoints = [];
 		// Used by periodic NURBS to remove hidden spans
 		this.startKnot = startKnot || 0;
-		this.endKnot = endKnot || ( this.knots.length - 1 );
+		this.endKnot = endKnot || knotsLength;
 
-		for ( let i = 0; i < controlPoints.length; ++ i ) {
+		for ( let i = 0; i < pointsLength; ++ i ) {
 
 			// ensure Vector4 for control points
 			const point = controlPoints[ i ];
@@ -75,6 +78,34 @@ class NURBSCurve extends Curve {
 
 	}
 
+	toJSON() {
+
+		const data = super.toJSON();
+
+		data.degree = this.degree;
+		data.knots = [ ...this.knots ];
+		data.controlPoints = this.controlPoints.map( p => p.toArray() );
+		data.startKnot = this.startKnot;
+		data.endKnot = this.endKnot;
+
+		return data;
+
+	}
+
+	fromJSON( json ) {
+
+		super.fromJSON( json );
+
+		this.degree = json.degree;
+		this.knots = [ ...json.knots ];
+		this.controlPoints = json.controlPoints.map( p => new Vector4( p[ 0 ], p[ 1 ], p[ 2 ], p[ 3 ] ) );
+		this.startKnot = json.startKnot;
+		this.endKnot = json.endKnot;
+
+		return this;
+
+	}
+
 }
 
 export { NURBSCurve };

package/examples/jsm/curves/NURBSUtils.js

@@ -513,13 +513,16 @@ function calcVolumePoint( p, q, r, U, V, W, P, u, v, w, target ) {
 		}
 
 	}
+
 	const Sw = new Vector4( 0, 0, 0, 0 );
 	for ( let m = 0; m <= r; ++ m ) {
+
 		for ( let l = 0; l <= q; ++ l ) {
 
 			Sw.add( temp[ m ][ l ].multiplyScalar( Nw[ m ] ).multiplyScalar( Nv[ l ] ) );
 
 		}
+
 	}
 
 	Sw.divideScalar( Sw.w );

package/examples/jsm/effects/AnaglyphEffect.js

@@ -1,16 +1,13 @@
 import {
 	LinearFilter,
 	Matrix3,
-	Mesh,
 	NearestFilter,
-	OrthographicCamera,
-	PlaneGeometry,
 	RGBAFormat,
-	Scene,
 	ShaderMaterial,
 	StereoCamera,
 	WebGLRenderTarget
 } from 'three';
+import { FullScreenQuad } from '../postprocessing/Pass.js';
 
 class AnaglyphEffect {
 
@@ -30,10 +27,6 @@ class AnaglyphEffect {
 			- 0.00155529, - 0.0184503, 1.2264
 		] );
 
-		const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-
-		const _scene = new Scene();
-
 		const _stereo = new StereoCamera();
 
 		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
@@ -99,8 +92,7 @@ class AnaglyphEffect {
 
 		} );
 
-		const _mesh = new Mesh( new PlaneGeometry( 2, 2 ), _material );
-		_scene.add( _mesh );
+		const _quad = new FullScreenQuad( _material );
 
 		this.setSize = function ( width, height ) {
 
@@ -132,7 +124,7 @@ class AnaglyphEffect {
 			renderer.render( scene, _stereo.cameraR );
 
 			renderer.setRenderTarget( null );
-			renderer.render( _scene, _camera );
+			_quad.render( renderer );
 
 			renderer.setRenderTarget( currentRenderTarget );
 
@@ -142,8 +134,9 @@ class AnaglyphEffect {
 
 			_renderTargetL.dispose();
 			_renderTargetR.dispose();
-			_mesh.geometry.dispose();
-			_mesh.material.dispose();
+
+			_material.dispose();
+			_quad.dispose();
 
 		};
 

package/examples/jsm/effects/OutlineEffect.js

@@ -367,7 +367,7 @@ class OutlineEffect {
 
 			let keys;
 
-			// clear originialMaterials
+			// clear originalMaterials
 			keys = Object.keys( originalMaterials );
 
 			for ( let i = 0, il = keys.length; i < il; i ++ ) {

package/examples/jsm/effects/ParallaxBarrierEffect.js

@@ -1,24 +1,17 @@
 import {
 	LinearFilter,
-	Mesh,
 	NearestFilter,
-	OrthographicCamera,
-	PlaneGeometry,
 	RGBAFormat,
-	Scene,
 	ShaderMaterial,
 	StereoCamera,
 	WebGLRenderTarget
 } from 'three';
+import { FullScreenQuad } from '../postprocessing/Pass.js';
 
 class ParallaxBarrierEffect {
 
 	constructor( renderer ) {
 
-		const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-
-		const _scene = new Scene();
-
 		const _stereo = new StereoCamera();
 
 		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
@@ -77,8 +70,7 @@ class ParallaxBarrierEffect {
 
 		} );
 
-		const mesh = new Mesh( new PlaneGeometry( 2, 2 ), _material );
-		_scene.add( mesh );
+		const _quad = new FullScreenQuad( _material );
 
 		this.setSize = function ( width, height ) {
 
@@ -93,6 +85,8 @@ class ParallaxBarrierEffect {
 
 		this.render = function ( scene, camera ) {
 
+			const currentRenderTarget = renderer.getRenderTarget();
+
 			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
 
 			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
@@ -108,7 +102,19 @@ class ParallaxBarrierEffect {
 			renderer.render( scene, _stereo.cameraR );
 
 			renderer.setRenderTarget( null );
-			renderer.render( _scene, _camera );
+			_quad.render( renderer );
+
+			renderer.setRenderTarget( currentRenderTarget );
+
+		};
+
+		this.dispose = function () {
+
+			_renderTargetL.dispose();
+			_renderTargetR.dispose();
+
+			_material.dispose();
+			_quad.dispose();
 
 		};
 

package/examples/jsm/effects/StereoEffect.js

@@ -31,9 +31,12 @@ class StereoEffect {
 
 			_stereo.update( camera );
 
+			const currentAutoClear = renderer.autoClear;
 			renderer.getSize( size );
 
-			if ( renderer.autoClear ) renderer.clear();
+			renderer.autoClear = false;
+			renderer.clear();
+
 			renderer.setScissorTest( true );
 
 			renderer.setScissor( 0, 0, size.width / 2, size.height );
@@ -46,6 +49,8 @@ class StereoEffect {
 
 			renderer.setScissorTest( false );
 
+			renderer.autoClear = currentAutoClear;
+
 		};
 
 	}

package/examples/jsm/exporters/DRACOExporter.js

@@ -1,4 +1,4 @@
-import { Color } from 'three';
+import { Color, ColorManagement, SRGBColorSpace } from 'three';
 
 /**
  * Export draco compressed files from threejs geometry objects.
@@ -227,7 +227,9 @@ function createVertexColorSRGBArray( attribute ) {
 
 	for ( let i = 0, il = count; i < il; i ++ ) {
 
-		_color.fromBufferAttribute( attribute, i ).convertLinearToSRGB();
+		_color.fromBufferAttribute( attribute, i );
+
+		ColorManagement.fromWorkingColorSpace( _color, SRGBColorSpace );
 
 		array[ i * itemSize ] = _color.r;
 		array[ i * itemSize + 1 ] = _color.g;