@plastic-software/three 0.183.3 → 0.184.0

package/examples/jsm/tsl/display/TRAANode.js

@@ -1,5 +1,5 @@
-import { HalfFloatType, Vector2, RenderTarget, RendererUtils, QuadMesh, NodeMaterial, TempNode, NodeUpdateType, Matrix4, DepthTexture } from 'three/webgpu';
-import { add, float, If, Fn, max, texture, uniform, uv, vec2, vec4, luminance, convertToTexture, passTexture, velocity, getViewPosition, viewZToPerspectiveDepth, struct, ivec2, mix } from 'three/tsl';
+import { HalfFloatType, Vector2, RenderTarget, RendererUtils, QuadMesh, NodeMaterial, TempNode, NodeUpdateType, Matrix4, DepthTexture, FloatType } from 'three/webgpu';
+import { add, float, If, Fn, max, texture, uniform, uv, vec2, vec4, luminance, convertToTexture, passTexture, velocity, getViewPosition, viewZToPerspectiveDepth, struct, ivec2, mix, logarithmicDepthToViewZ, viewZToOrthographicDepth } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -14,6 +14,8 @@ let _rendererState;
  * - {@link https://alextardif.com/TAA.html}
  * - {@link https://www.elopezr.com/temporal-aa-and-the-quest-for-the-holy-trail/}
  *
+ * Note: MSAA must be disabled when TRAA is in use.
+ *
  * @augments TempNode
  * @three_import import { traa } from 'three/addons/tsl/display/TRAANode.js';
  */
@@ -235,11 +237,20 @@ class TRAANode extends TempNode {
 
 		/**
 		 * Sync the post processing stack with the TRAA node.
+		 *
 		 * @private
 		 * @type {boolean}
 		 */
 		this._needsPostProcessingSync = false;
 
+		/**
+		 * The node used to render the scene's velocity.
+		 *
+		 * @private
+		 * @type {?VelocityNode}
+		 */
+		this._velocityNode = null;
+
 	}
 
 	/**
@@ -282,7 +293,7 @@ class TRAANode extends TempNode {
 		this.camera.updateProjectionMatrix();
 		this._originalProjectionMatrix.copy( this.camera.projectionMatrix );
 
-		velocity.setProjectionMatrix( this._originalProjectionMatrix );
+		this._velocityNode.setProjectionMatrix( this._originalProjectionMatrix );
 
 		//
 
@@ -318,7 +329,7 @@ class TRAANode extends TempNode {
 
 		this.camera.clearViewOffset();
 
-		velocity.setProjectionMatrix( null );
+		this._velocityNode.setProjectionMatrix( null );
 
 		// update jitter index
 
@@ -452,6 +463,30 @@ class TRAANode extends TempNode {
 
 		}
 
+		if ( builder.renderer.reversedDepthBuffer === true ) {
+
+			this._historyRenderTarget.depthTexture.type = FloatType;
+
+		}
+
+		if ( builder.context.velocity !== undefined ) {
+
+			this._velocityNode = builder.context.velocity;
+
+		} else {
+
+			this._velocityNode = velocity;
+
+		}
+
+		const logarithmicToPerspectiveDepth = ( depth ) => {
+
+			const { x: near, y: far } = this._cameraNearFar;
+			const viewZ = logarithmicDepthToViewZ( depth, near, far );
+			return viewZToPerspectiveDepth( viewZ, near, far );
+
+		};
+
 		const currentDepthStruct = struct( {
 
 			closestDepth: 'float',
@@ -472,7 +507,10 @@ class TRAANode extends TempNode {
 				for ( let y = - 1; y <= 1; ++ y ) {
 
 					const neighbor = positionTexel.add( vec2( x, y ) ).toVar();
-					const depth = this.depthNode.load( neighbor ).r.toVar();
+					let depth = this.depthNode.load( neighbor ).r;
+					if ( builder.renderer.reversedDepthBuffer ) depth = depth.oneMinus();
+					if ( builder.renderer.logarithmicDepthBuffer ) depth = logarithmicToPerspectiveDepth( depth );
+					depth = depth.toVar();
 
 					If( depth.lessThan( closestDepth ), () => {
 
@@ -498,11 +536,14 @@ class TRAANode extends TempNode {
 		// Samples a previous depth and reproject it using the current camera matrices.
 		const samplePreviousDepth = ( uv ) => {
 
-			const depth = this._previousDepthNode.sample( uv ).r;
+			let depth = this._previousDepthNode.sample( uv ).r;
+			if ( builder.renderer.logarithmicDepthBuffer ) depth = logarithmicToPerspectiveDepth( depth );
 			const positionView = getViewPosition( uv, depth, this._previousCameraProjectionMatrixInverse );
 			const positionWorld = this._previousCameraWorldMatrix.mul( vec4( positionView, 1 ) ).xyz;
 			const viewZ = this._cameraWorldMatrixInverse.mul( vec4( positionWorld, 1 ) ).z;
-			return viewZToPerspectiveDepth( viewZ, this._cameraNearFar.x, this._cameraNearFar.y );
+			return this.camera.isOrthographicCamera
+				? viewZToOrthographicDepth( viewZ, this._cameraNearFar.x, this._cameraNearFar.y )
+				: viewZToPerspectiveDepth( viewZ, this._cameraNearFar.x, this._cameraNearFar.y );
 
 		};
 

package/examples/jsm/tsl/lighting/DynamicLightsNode.js

@@ -0,0 +1,300 @@
+import { LightsNode, NodeUtils, warn } from 'three/webgpu';
+import { nodeObject } from 'three/tsl';
+
+import AmbientLightDataNode from './data/AmbientLightDataNode.js';
+import DirectionalLightDataNode from './data/DirectionalLightDataNode.js';
+import PointLightDataNode from './data/PointLightDataNode.js';
+import SpotLightDataNode from './data/SpotLightDataNode.js';
+import HemisphereLightDataNode from './data/HemisphereLightDataNode.js';
+
+const _lightNodeRef = /*@__PURE__*/ new WeakMap();
+const _hashData = [];
+
+const _lightTypeToDataNode = {
+	AmbientLight: AmbientLightDataNode,
+	DirectionalLight: DirectionalLightDataNode,
+	PointLight: PointLightDataNode,
+	SpotLight: SpotLightDataNode,
+	HemisphereLight: HemisphereLightDataNode
+};
+
+const _lightTypeToMaxProp = {
+	DirectionalLight: 'maxDirectionalLights',
+	PointLight: 'maxPointLights',
+	SpotLight: 'maxSpotLights',
+	HemisphereLight: 'maxHemisphereLights'
+};
+
+const sortLights = ( lights ) => lights.sort( ( a, b ) => a.id - b.id );
+
+const isSpecialSpotLight = ( light ) => {
+
+	return light.isSpotLight === true && ( light.map !== null || light.colorNode !== undefined );
+
+};
+
+const canBatchLight = ( light ) => {
+
+	return light.isNode !== true &&
+		light.castShadow !== true &&
+		isSpecialSpotLight( light ) === false &&
+		_lightTypeToDataNode[ light.constructor.name ] !== undefined;
+
+};
+
+const getOrCreateLightNode = ( light, nodeLibrary ) => {
+
+	const lightNodeClass = nodeLibrary.getLightNodeClass( light.constructor );
+
+	if ( lightNodeClass === null ) {
+
+		warn( `DynamicLightsNode: Light node not found for ${ light.constructor.name }.` );
+		return null;
+
+	}
+
+	if ( _lightNodeRef.has( light ) === false ) {
+
+		_lightNodeRef.set( light, new lightNodeClass( light ) );
+
+	}
+
+	return _lightNodeRef.get( light );
+
+};
+
+/**
+ * A custom version of `LightsNode` that batches supported analytic lights into
+ * uniform arrays and loops.
+ *
+ * Unsupported lights, node lights, shadow-casting lights, and projected spot
+ * lights keep the default per-light path.
+ *
+ * @augments LightsNode
+ * @three_import import { DynamicLightsNode } from 'three/addons/tsl/lighting/DynamicLightsNode.js';
+ */
+class DynamicLightsNode extends LightsNode {
+
+	static get type() {
+
+		return 'DynamicLightsNode';
+
+	}
+
+	/**
+	 * Constructs a new dynamic lights node.
+	 *
+	 * @param {Object} [options={}] - Dynamic lighting configuration.
+	 * @param {number} [options.maxDirectionalLights=8] - Maximum number of batched directional lights.
+	 * @param {number} [options.maxPointLights=16] - Maximum number of batched point lights.
+	 * @param {number} [options.maxSpotLights=16] - Maximum number of batched spot lights.
+	 * @param {number} [options.maxHemisphereLights=4] - Maximum number of batched hemisphere lights.
+	 */
+	constructor( options = {} ) {
+
+		super();
+
+		this.maxDirectionalLights = options.maxDirectionalLights !== undefined ? options.maxDirectionalLights : 8;
+		this.maxPointLights = options.maxPointLights !== undefined ? options.maxPointLights : 16;
+		this.maxSpotLights = options.maxSpotLights !== undefined ? options.maxSpotLights : 16;
+		this.maxHemisphereLights = options.maxHemisphereLights !== undefined ? options.maxHemisphereLights : 4;
+
+		this._dataNodes = new Map();
+
+	}
+
+	customCacheKey() {
+
+		const typeSet = new Set();
+
+		for ( let i = 0; i < this._lights.length; i ++ ) {
+
+			const light = this._lights[ i ];
+
+			if ( canBatchLight( light ) ) {
+
+				typeSet.add( light.constructor.name );
+
+			} else {
+
+				_hashData.push( light.id );
+				_hashData.push( light.castShadow ? 1 : 0 );
+
+				if ( light.isSpotLight === true ) {
+
+					const hashMap = light.map !== null ? light.map.id : - 1;
+					const hashColorNode = light.colorNode ? light.colorNode.getCacheKey() : - 1;
+
+					_hashData.push( hashMap, hashColorNode );
+
+				}
+
+			}
+
+		}
+
+		for ( const typeName of this._dataNodes.keys() ) {
+
+			typeSet.add( typeName );
+
+		}
+
+		for ( const typeName of [ ...typeSet ].sort() ) {
+
+			_hashData.push( NodeUtils.hashString( typeName ) );
+
+		}
+
+		const cacheKey = NodeUtils.hashArray( _hashData );
+
+		_hashData.length = 0;
+
+		return cacheKey;
+
+	}
+
+	setupLightsNode( builder ) {
+
+		const lightNodes = [];
+		const lightsByType = new Map();
+		const lights = sortLights( this._lights );
+		const nodeLibrary = builder.renderer.library;
+
+		for ( const light of lights ) {
+
+			if ( light.isNode === true ) {
+
+				lightNodes.push( nodeObject( light ) );
+				continue;
+
+			}
+
+			if ( canBatchLight( light ) ) {
+
+				const typeName = light.constructor.name;
+				const typeLights = lightsByType.get( typeName );
+
+				if ( typeLights === undefined ) {
+
+					lightsByType.set( typeName, [ light ] );
+
+				} else {
+
+					typeLights.push( light );
+
+				}
+
+				continue;
+
+			}
+
+			const lightNode = getOrCreateLightNode( light, nodeLibrary );
+
+			if ( lightNode !== null ) {
+
+				lightNodes.push( lightNode );
+
+			}
+
+		}
+
+		for ( const [ typeName, typeLights ] of lightsByType ) {
+
+			let dataNode = this._dataNodes.get( typeName );
+
+			if ( dataNode === undefined ) {
+
+				const DataNodeClass = _lightTypeToDataNode[ typeName ];
+				const maxProp = _lightTypeToMaxProp[ typeName ];
+				const maxCount = maxProp !== undefined ? this[ maxProp ] : undefined;
+
+				dataNode = maxCount !== undefined ? new DataNodeClass( maxCount ) : new DataNodeClass();
+
+				this._dataNodes.set( typeName, dataNode );
+
+			}
+
+			dataNode.setLights( typeLights );
+			lightNodes.push( dataNode );
+
+		}
+
+		for ( const [ typeName, dataNode ] of this._dataNodes ) {
+
+			if ( lightsByType.has( typeName ) === false ) {
+
+				dataNode.setLights( [] );
+				lightNodes.push( dataNode );
+
+			}
+
+		}
+
+		this._lightNodes = lightNodes;
+
+	}
+
+	setLights( lights ) {
+
+		super.setLights( lights );
+
+		if ( this._dataNodes.size > 0 ) {
+
+			this._updateDataNodeLights( lights );
+
+		}
+
+		return this;
+
+	}
+
+	_updateDataNodeLights( lights ) {
+
+		const lightsByType = new Map();
+
+		for ( const light of lights ) {
+
+			if ( canBatchLight( light ) === false ) continue;
+
+			const typeName = light.constructor.name;
+			const typeLights = lightsByType.get( typeName );
+
+			if ( typeLights === undefined ) {
+
+				lightsByType.set( typeName, [ light ] );
+
+			} else {
+
+				typeLights.push( light );
+
+			}
+
+		}
+
+		for ( const [ typeName, dataNode ] of this._dataNodes ) {
+
+			dataNode.setLights( lightsByType.get( typeName ) || [] );
+
+		}
+
+	}
+
+	get hasLights() {
+
+		return super.hasLights || this._dataNodes.size > 0;
+
+	}
+
+}
+
+export default DynamicLightsNode;
+
+/**
+ * TSL function that creates a dynamic lights node.
+ *
+ * @tsl
+ * @function
+ * @param {Object} [options={}] - Dynamic lighting configuration.
+ * @return {DynamicLightsNode} The created dynamic lights node.
+ */
+export const dynamicLights = ( options = {} ) => new DynamicLightsNode( options );

package/examples/jsm/tsl/lighting/data/AmbientLightDataNode.js

@@ -0,0 +1,61 @@
+import { Color, Node } from 'three/webgpu';
+import { NodeUpdateType, renderGroup, uniform } from 'three/tsl';
+
+/**
+ * Batched data node for ambient lights in dynamic lighting mode.
+ *
+ * @augments Node
+ */
+class AmbientLightDataNode extends Node {
+
+	static get type() {
+
+		return 'AmbientLightDataNode';
+
+	}
+
+	constructor() {
+
+		super();
+
+		this._color = new Color();
+		this._lights = [];
+
+		this.colorNode = uniform( this._color ).setGroup( renderGroup );
+		this.updateType = NodeUpdateType.RENDER;
+
+	}
+
+	setLights( lights ) {
+
+		this._lights = lights;
+
+		return this;
+
+	}
+
+	update() {
+
+		this._color.setScalar( 0 );
+
+		for ( let i = 0; i < this._lights.length; i ++ ) {
+
+			const light = this._lights[ i ];
+
+			this._color.r += light.color.r * light.intensity;
+			this._color.g += light.color.g * light.intensity;
+			this._color.b += light.color.b * light.intensity;
+
+		}
+
+	}
+
+	setup( builder ) {
+
+		builder.context.irradiance.addAssign( this.colorNode );
+
+	}
+
+}
+
+export default AmbientLightDataNode;

package/examples/jsm/tsl/lighting/data/DirectionalLightDataNode.js

@@ -0,0 +1,111 @@
+import { Color, Node, Vector3 } from 'three/webgpu';
+import { Loop, NodeUpdateType, renderGroup, uniform, uniformArray, vec3 } from 'three/tsl';
+
+const _lightPosition = /*@__PURE__*/ new Vector3();
+const _targetPosition = /*@__PURE__*/ new Vector3();
+
+const warn = ( message ) => {
+
+	console.warn( `THREE.DirectionalLightDataNode: ${ message }` );
+
+};
+
+/**
+ * Batched data node for directional lights in dynamic lighting mode.
+ *
+ * @augments Node
+ */
+class DirectionalLightDataNode extends Node {
+
+	static get type() {
+
+		return 'DirectionalLightDataNode';
+
+	}
+
+	constructor( maxCount = 8 ) {
+
+		super();
+
+		this.maxCount = maxCount;
+		this._lights = [];
+		this._colors = [];
+		this._directions = [];
+
+		for ( let i = 0; i < maxCount; i ++ ) {
+
+			this._colors.push( new Color() );
+			this._directions.push( new Vector3() );
+
+		}
+
+		this.colorsNode = uniformArray( this._colors, 'color' ).setGroup( renderGroup );
+		this.directionsNode = uniformArray( this._directions, 'vec3' ).setGroup( renderGroup );
+		this.countNode = uniform( 0, 'int' ).setGroup( renderGroup );
+		this.updateType = NodeUpdateType.RENDER;
+
+	}
+
+	setLights( lights ) {
+
+		if ( lights.length > this.maxCount ) {
+
+			warn( `${ lights.length } lights exceed the configured max of ${ this.maxCount }. Excess lights are ignored.` );
+
+		}
+
+		this._lights = lights;
+
+		return this;
+
+	}
+
+	update( { camera } ) {
+
+		const count = Math.min( this._lights.length, this.maxCount );
+
+		this.countNode.value = count;
+
+		for ( let i = 0; i < count; i ++ ) {
+
+			const light = this._lights[ i ];
+
+			this._colors[ i ].copy( light.color ).multiplyScalar( light.intensity );
+
+			_lightPosition.setFromMatrixPosition( light.matrixWorld );
+			_targetPosition.setFromMatrixPosition( light.target.matrixWorld );
+
+			this._directions[ i ].subVectors( _lightPosition, _targetPosition ).transformDirection( camera.matrixWorldInverse );
+
+		}
+
+	}
+
+	setup( builder ) {
+
+		const { lightingModel, reflectedLight } = builder.context;
+		const dynDiffuse = vec3( 0 ).toVar( 'dynDirectionalDiffuse' );
+		const dynSpecular = vec3( 0 ).toVar( 'dynDirectionalSpecular' );
+
+		Loop( this.countNode, ( { i } ) => {
+
+			const lightColor = this.colorsNode.element( i ).toVar();
+			const lightDirection = this.directionsNode.element( i ).normalize().toVar();
+
+			lightingModel.direct( {
+				lightDirection,
+				lightColor,
+				lightNode: { light: {}, shadowNode: null },
+				reflectedLight: { directDiffuse: dynDiffuse, directSpecular: dynSpecular }
+			}, builder );
+
+		} );
+
+		reflectedLight.directDiffuse.addAssign( dynDiffuse );
+		reflectedLight.directSpecular.addAssign( dynSpecular );
+
+	}
+
+}
+
+export default DirectionalLightDataNode;

package/examples/jsm/tsl/lighting/data/HemisphereLightDataNode.js

@@ -0,0 +1,99 @@
+import { Color, Node, Vector3 } from 'three/webgpu';
+import { Loop, NodeUpdateType, mix, normalWorld, renderGroup, uniform, uniformArray } from 'three/tsl';
+
+const warn = ( message ) => {
+
+	console.warn( `THREE.HemisphereLightDataNode: ${ message }` );
+
+};
+
+/**
+ * Batched data node for hemisphere lights in dynamic lighting mode.
+ *
+ * @augments Node
+ */
+class HemisphereLightDataNode extends Node {
+
+	static get type() {
+
+		return 'HemisphereLightDataNode';
+
+	}
+
+	constructor( maxCount = 4 ) {
+
+		super();
+
+		this.maxCount = maxCount;
+		this._lights = [];
+		this._skyColors = [];
+		this._groundColors = [];
+		this._directions = [];
+
+		for ( let i = 0; i < maxCount; i ++ ) {
+
+			this._skyColors.push( new Color() );
+			this._groundColors.push( new Color() );
+			this._directions.push( new Vector3() );
+
+		}
+
+		this.skyColorsNode = uniformArray( this._skyColors, 'color' ).setGroup( renderGroup );
+		this.groundColorsNode = uniformArray( this._groundColors, 'color' ).setGroup( renderGroup );
+		this.directionsNode = uniformArray( this._directions, 'vec3' ).setGroup( renderGroup );
+		this.countNode = uniform( 0, 'int' ).setGroup( renderGroup );
+		this.updateType = NodeUpdateType.RENDER;
+
+	}
+
+	setLights( lights ) {
+
+		if ( lights.length > this.maxCount ) {
+
+			warn( `${ lights.length } lights exceed the configured max of ${ this.maxCount }. Excess lights are ignored.` );
+
+		}
+
+		this._lights = lights;
+
+		return this;
+
+	}
+
+	update() {
+
+		const count = Math.min( this._lights.length, this.maxCount );
+
+		this.countNode.value = count;
+
+		for ( let i = 0; i < count; i ++ ) {
+
+			const light = this._lights[ i ];
+
+			this._skyColors[ i ].copy( light.color ).multiplyScalar( light.intensity );
+			this._groundColors[ i ].copy( light.groundColor ).multiplyScalar( light.intensity );
+			this._directions[ i ].setFromMatrixPosition( light.matrixWorld ).normalize();
+
+		}
+
+	}
+
+	setup( builder ) {
+
+		Loop( this.countNode, ( { i } ) => {
+
+			const skyColor = this.skyColorsNode.element( i );
+			const groundColor = this.groundColorsNode.element( i );
+			const lightDirection = this.directionsNode.element( i );
+			const hemiDiffuseWeight = normalWorld.dot( lightDirection ).mul( 0.5 ).add( 0.5 );
+			const irradiance = mix( groundColor, skyColor, hemiDiffuseWeight );
+
+			builder.context.irradiance.addAssign( irradiance );
+
+		} );
+
+	}
+
+}
+
+export default HemisphereLightDataNode;