@plastic-software/three 0.181.3 → 0.183.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, Loop, int, Fn, min, max, clamp, nodeObject, texture, uniform, uv, vec2, vec4, luminance, convertToTexture, passTexture, velocity, getViewPosition, length } from 'three/tsl';
+import { add, float, If, Fn, max, texture, uniform, uv, vec2, vec4, luminance, convertToTexture, passTexture, velocity, getViewPosition, viewZToPerspectiveDepth, struct, ivec2, mix } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -77,60 +77,62 @@ class TRAANode extends TempNode {
 		this.velocityNode = velocityNode;
 
 		/**
-		 *  The camera the scene is rendered with.
+		 * The camera the scene is rendered with.
 		 *
 		 * @type {Camera}
 		 */
 		this.camera = camera;
 
 		/**
-		 * The jitter index selects the current camera offset value.
+		 * When the difference between the current and previous depth goes above this threshold,
+		 * the history is considered invalid.
 		 *
-		 * @private
 		 * @type {number}
-		 * @default 0
+		 * @default 0.0005
 		 */
-		this._jitterIndex = 0;
+		this.depthThreshold = 0.0005;
 
 		/**
-		 * A uniform node holding the inverse resolution value.
+		 * The depth difference within the 3×3 neighborhood to consider a pixel as an edge.
 		 *
-		 * @private
-		 * @type {UniformNode<vec2>}
+		 * @type {number}
+		 * @default 0.001
 		 */
-		this._invSize = uniform( new Vector2() );
+		this.edgeDepthDiff = 0.001;
 
 		/**
-		 * A uniform node holding the camera world matrix.
+		 * The history becomes invalid as the pixel length of the velocity approaches this value.
 		 *
-		 * @private
-		 * @type {UniformNode<mat4>}
+		 * @type {number}
+		 * @default 128
 		 */
-		this._cameraWorldMatrix = uniform( new Matrix4() );
+		this.maxVelocityLength = 128;
 
 		/**
-		 * A uniform node holding the camera projection matrix inverse.
+		 * Whether to decrease the weight on the current frame when the velocity is more subpixel.
+		 * This reduces blurriness under motion, but can introduce a square pattern artifact.
 		 *
-		 * @private
-		 * @type {UniformNode<mat4>}
+		 * @type {boolean}
+		 * @default true
 		 */
-		this._cameraProjectionMatrixInverse = uniform( new Matrix4() );
+		this.useSubpixelCorrection = true;
 
 		/**
-		 * A uniform node holding the previous frame's view matrix.
+		 * The jitter index selects the current camera offset value.
 		 *
 		 * @private
-		 * @type {UniformNode<mat4>}
+		 * @type {number}
+		 * @default 0
 		 */
-		this._previousCameraWorldMatrix = uniform( new Matrix4() );
+		this._jitterIndex = 0;
 
 		/**
-		 * A uniform node holding the previous frame's projection matrix inverse.
+		 * A uniform node holding the inverse resolution value.
 		 *
 		 * @private
-		 * @type {UniformNode<mat4>}
+		 * @type {UniformNode<vec2>}
 		 */
-		this._previousCameraProjectionMatrixInverse = uniform( new Matrix4() );
+		this._invSize = uniform( new Vector2() );
 
 		/**
 		 * The render target that represents the history of frame data.
@@ -175,6 +177,54 @@ class TRAANode extends TempNode {
 		 */
 		this._originalProjectionMatrix = new Matrix4();
 
+		/**
+		 * A uniform node holding the camera's near and far.
+		 *
+		 * @private
+		 * @type {UniformNode<vec2>}
+		 */
+		this._cameraNearFar = uniform( new Vector2() );
+
+		/**
+		 * A uniform node holding the camera world matrix.
+		 *
+		 * @private
+		 * @type {UniformNode<mat4>}
+		 */
+		this._cameraWorldMatrix = uniform( new Matrix4() );
+
+		/**
+		 * A uniform node holding the camera world matrix inverse.
+		 *
+		 * @private
+		 * @type {UniformNode<mat4>}
+		 */
+		this._cameraWorldMatrixInverse = uniform( new Matrix4() );
+
+		/**
+		 * A uniform node holding the camera projection matrix inverse.
+		 *
+		 * @private
+		 * @type {UniformNode<mat4>}
+		 */
+		this._cameraProjectionMatrixInverse = uniform( new Matrix4() );
+
+		/**
+		 * A uniform node holding the previous frame's view matrix.
+		 *
+		 * @private
+		 * @type {UniformNode<mat4>}
+		 */
+		this._previousCameraWorldMatrix = uniform( new Matrix4() );
+
+		/**
+		 * A uniform node holding the previous frame's projection matrix inverse.
+		 *
+		 * @private
+		 * @type {UniformNode<mat4>}
+		 */
+		this._previousCameraProjectionMatrixInverse = uniform( new Matrix4() );
+
 		/**
 		 * A texture node for the previous depth buffer.
 		 *
@@ -247,13 +297,13 @@ class TRAANode extends TempNode {
 
 		};
 
-		const jitterOffset = _JitterVectors[ this._jitterIndex ];
+		const jitterOffset = _haltonOffsets[ this._jitterIndex ];
 
 		this.camera.setViewOffset(
 
 			viewOffset.fullWidth, viewOffset.fullHeight,
 
-			viewOffset.offsetX + jitterOffset[ 0 ] * 0.0625, viewOffset.offsetY + jitterOffset[ 1 ] * 0.0625, // 0.0625 = 1 / 16
+			viewOffset.offsetX + jitterOffset[ 0 ] - 0.5, viewOffset.offsetY + jitterOffset[ 1 ] - 0.5,
 
 			viewOffset.width, viewOffset.height
 
@@ -273,7 +323,7 @@ class TRAANode extends TempNode {
 		// update jitter index
 
 		this._jitterIndex ++;
-		this._jitterIndex = this._jitterIndex % ( _JitterVectors.length - 1 );
+		this._jitterIndex = this._jitterIndex % ( _haltonOffsets.length - 1 );
 
 	}
 
@@ -293,7 +343,9 @@ class TRAANode extends TempNode {
 
 		// update camera matrices uniforms
 
+		this._cameraNearFar.value.set( this.camera.near, this.camera.far );
 		this._cameraWorldMatrix.value.copy( this.camera.matrixWorld );
+		this._cameraWorldMatrixInverse.value.copy( this.camera.matrixWorldInverse );
 		this._cameraProjectionMatrixInverse.value.copy( this.camera.projectionMatrixInverse );
 
 		// keep the TRAA in sync with the dimensions of the beauty node
@@ -324,13 +376,10 @@ class TRAANode extends TempNode {
 
 		if ( needsRestart === true ) {
 
-			// bind and clear render target to make sure they are initialized after the resize which triggers a dispose()
+			// make sure render targets are initialized after the resize which triggers a dispose()
 
-			renderer.setRenderTarget( this._historyRenderTarget );
-			renderer.clear();
-
-			renderer.setRenderTarget( this._resolveRenderTarget );
-			renderer.clear();
+			renderer.initRenderTarget( this._historyRenderTarget );
+			renderer.initRenderTarget( this._resolveRenderTarget );
 
 			// make sure to reset the history with the contents of the beauty buffer otherwise subsequent frames after the
 			// resize will fade from a darker color to the correct one because the history was cleared with black.
@@ -382,20 +431,20 @@ class TRAANode extends TempNode {
 	 */
 	setup( builder ) {
 
-		const postProcessing = builder.context.postProcessing;
+		const renderPipeline = builder.context.renderPipeline;
 
-		if ( postProcessing ) {
+		if ( renderPipeline ) {
 
 			this._needsPostProcessingSync = true;
 
-			postProcessing.context.onBeforePostProcessing = () => {
+			renderPipeline.context.onBeforeRenderPipeline = () => {
 
 				const size = builder.renderer.getDrawingBufferSize( _size );
 				this.setViewOffset( size.width, size.height );
 
 			};
 
-			postProcessing.context.onAfterPostProcessing = () => {
+			renderPipeline.context.onAfterRenderPipeline = () => {
 
 				this.clearViewOffset();
 
@@ -403,123 +452,217 @@ class TRAANode extends TempNode {
 
 		}
 
-		const historyTexture = texture( this._historyRenderTarget.texture );
-		const sampleTexture = this.beautyNode;
-		const depthTexture = this.depthNode;
-		const velocityTexture = this.velocityNode;
+		const currentDepthStruct = struct( {
 
-		const resolve = Fn( () => {
+			closestDepth: 'float',
+			closestPositionTexel: 'vec2',
+			farthestDepth: 'float',
 
-			const uvNode = uv();
+		} );
 
-			const minColor = vec4( 10000 ).toVar();
-			const maxColor = vec4( - 10000 ).toVar();
-			const closestDepth = float( 1 ).toVar();
-			const farthestDepth = float( 0 ).toVar();
-			const closestDepthPixelPosition = vec2( 0 ).toVar();
+		// Samples 3×3 neighborhood pixels and returns the closest and farthest depths.
+		const sampleCurrentDepth = Fn( ( [ positionTexel ] ) => {
 
-			// sample a 3x3 neighborhood to create a box in color space
-			// clamping the history color with the resulting min/max colors mitigates ghosting
+			const closestDepth = float( 2 ).toVar();
+			const closestPositionTexel = vec2( 0 ).toVar();
+			const farthestDepth = float( - 1 ).toVar();
 
-			Loop( { start: int( - 1 ), end: int( 1 ), type: 'int', condition: '<=', name: 'x' }, ( { x } ) => {
+			for ( let x = - 1; x <= 1; ++ x ) {
 
-				Loop( { start: int( - 1 ), end: int( 1 ), type: 'int', condition: '<=', name: 'y' }, ( { y } ) => {
+				for ( let y = - 1; y <= 1; ++ y ) {
 
-					const uvNeighbor = uvNode.add( vec2( float( x ), float( y ) ).mul( this._invSize ) ).toVar();
-					const colorNeighbor = max( vec4( 0 ), sampleTexture.sample( uvNeighbor ) ).toVar(); // use max() to avoid propagate garbage values
+					const neighbor = positionTexel.add( vec2( x, y ) ).toVar();
+					const depth = this.depthNode.load( neighbor ).r.toVar();
 
-					minColor.assign( min( minColor, colorNeighbor ) );
-					maxColor.assign( max( maxColor, colorNeighbor ) );
+					If( depth.lessThan( closestDepth ), () => {
 
-					const currentDepth = depthTexture.sample( uvNeighbor ).r.toVar();
+						closestDepth.assign( depth );
+						closestPositionTexel.assign( neighbor );
 
-					// find the sample position of the closest depth in the neighborhood (used for velocity)
+					} );
 
-					If( currentDepth.lessThan( closestDepth ), () => {
+					If( depth.greaterThan( farthestDepth ), () => {
 
-						closestDepth.assign( currentDepth );
-						closestDepthPixelPosition.assign( uvNeighbor );
+						farthestDepth.assign( depth );
 
 					} );
 
-					// find the farthest depth in the neighborhood (used to preserve edge anti-aliasing)
+				}
 
-					If( currentDepth.greaterThan( farthestDepth ), () => {
+			}
 
-						farthestDepth.assign( currentDepth );
+			return currentDepthStruct( closestDepth, closestPositionTexel, farthestDepth );
 
-					} );
+		} );
 
-				} );
+		// Samples a previous depth and reproject it using the current camera matrices.
+		const samplePreviousDepth = ( uv ) => {
 
-			} );
+			const depth = this._previousDepthNode.sample( uv ).r;
+			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 );
 
-			// sampling/reprojection
+		};
 
-			const offset = velocityTexture.sample( closestDepthPixelPosition ).xy.mul( vec2( 0.5, - 0.5 ) ); // NDC to uv offset
+		// Optimized version of AABB clipping.
+		// Reference: https://github.com/playdeadgames/temporal
+		const clipAABB = Fn( ( [ currentColor, historyColor, minColor, maxColor ] ) => {
+
+			const pClip = maxColor.rgb.add( minColor.rgb ).mul( 0.5 );
+			const eClip = maxColor.rgb.sub( minColor.rgb ).mul( 0.5 ).add( 1e-7 );
+			const vClip = historyColor.sub( vec4( pClip, currentColor.a ) );
+			const vUnit = vClip.xyz.div( eClip );
+			const absUnit = vUnit.abs();
+			const maxUnit = max( absUnit.x, absUnit.y, absUnit.z );
+			return maxUnit.greaterThan( 1 ).select(
+				vec4( pClip, currentColor.a ).add( vClip.div( maxUnit ) ),
+				historyColor
+			);
+
+		} ).setLayout( {
+			name: 'clipAABB',
+			type: 'vec4',
+			inputs: [
+				{ name: 'currentColor', type: 'vec4' },
+				{ name: 'historyColor', type: 'vec4' },
+				{ name: 'minColor', type: 'vec4' },
+				{ name: 'maxColor', type: 'vec4' }
+			]
+		} );
 
-			const currentColor = sampleTexture.sample( uvNode );
-			const historyColor = historyTexture.sample( uvNode.sub( offset ) );
+		// Performs variance clipping.
+		// See: https://developer.download.nvidia.com/gameworks/events/GDC2016/msalvi_temporal_supersampling.pdf
+		const varianceClipping = Fn( ( [ positionTexel, currentColor, historyColor, gamma ] ) => {
 
-			// clamping
+			const offsets = [
+				[ - 1, - 1 ],
+				[ - 1, 1 ],
+				[ 1, - 1 ],
+				[ 1, 1 ],
+				[ 1, 0 ],
+				[ 0, - 1 ],
+				[ 0, 1 ],
+				[ - 1, 0 ]
+			];
 
-			const clampedHistoryColor = clamp( historyColor, minColor, maxColor );
+			const moment1 = currentColor.toVar();
+			const moment2 = currentColor.pow2().toVar();
 
-			// calculate current frame world position
+			for ( const [ x, y ] of offsets ) {
 
-			const currentDepth = depthTexture.sample( uvNode ).r;
-			const currentViewPosition = getViewPosition( uvNode, currentDepth, this._cameraProjectionMatrixInverse );
-			const currentWorldPosition = this._cameraWorldMatrix.mul( vec4( currentViewPosition, 1.0 ) ).xyz;
+				// Use max() to prevent NaN values from propagating.
+				const neighbor = this.beautyNode.offset( ivec2( x, y ) ).load( positionTexel ).max( 0 );
+				moment1.addAssign( neighbor );
+				moment2.addAssign( neighbor.pow2() );
 
-			// calculate previous frame world position from history UV and previous depth
+			}
 
-			const historyUV = uvNode.sub( offset );
-			const previousDepth = this._previousDepthNode.sample( historyUV ).r;
-			const previousViewPosition = getViewPosition( historyUV, previousDepth, this._previousCameraProjectionMatrixInverse );
-			const previousWorldPosition = this._previousCameraWorldMatrix.mul( vec4( previousViewPosition, 1.0 ) ).xyz;
+			const N = float( offsets.length + 1 );
+			const mean = moment1.div( N );
+			const variance = moment2.div( N ).sub( mean.pow2() ).max( 0 ).sqrt().mul( gamma );
+			const minColor = mean.sub( variance );
+			const maxColor = mean.add( variance );
 
-			// calculate difference in world positions
+			return clipAABB( mean.clamp( minColor, maxColor ), historyColor, minColor, maxColor );
 
-			const worldPositionDifference = length( currentWorldPosition.sub( previousWorldPosition ) ).toVar();
-			worldPositionDifference.assign( min( max( worldPositionDifference.sub( 1.0 ), 0.0 ), 1.0 ) );
+		} );
 
-			// Adaptive blend weights based on velocity magnitude suggested by CLAUDE in #32133
-			// Higher velocity or position difference = more weight on current frame to reduce ghosting
+		// Returns the amount of subpixel (expressed within [0, 1]) in the velocity.
+		const subpixelCorrection = Fn( ( [ velocityUV, textureSize ] ) => {
+
+			const velocityTexel = velocityUV.mul( textureSize );
+			const phase = velocityTexel.fract().abs();
+			const weight = max( phase, phase.oneMinus() );
+			return weight.x.mul( weight.y ).oneMinus().div( 0.75 );
+
+		} ).setLayout( {
+			name: 'subpixelCorrection',
+			type: 'float',
+			inputs: [
+				{ name: 'velocityUV', type: 'vec2' },
+				{ name: 'textureSize', type: 'ivec2' }
+			]
+		} );
 
-			const velocityMagnitude = length( offset ).toConst();
-			const motionFactor = max( worldPositionDifference.mul( 0.5 ), velocityMagnitude.mul( 10.0 ) ).toVar();
-			motionFactor.assign( min( motionFactor, 1.0 ) );
+		// Flicker reduction based on luminance weighing.
+		const flickerReduction = Fn( ( [ currentColor, historyColor, currentWeight ] ) => {
 
-			const currentWeight = float( 0.05 ).add( motionFactor.mul( 0.25 ) ).toVar();
-			const historyWeight = currentWeight.oneMinus().toVar();
+			const historyWeight = currentWeight.oneMinus();
+			const compressedCurrent = currentColor.mul( float( 1 ).div( ( max( currentColor.r, currentColor.g, currentColor.b ).add( 1 ) ) ) );
+			const compressedHistory = historyColor.mul( float( 1 ).div( ( max( historyColor.r, historyColor.g, historyColor.b ).add( 1 ) ) ) );
 
-			// zero out history weight if world positions are different (indicating motion) except on edges.
-			// note that the constants 0.00001 and 0.5 were suggested by CLAUDE in #32133
+			const luminanceCurrent = luminance( compressedCurrent.rgb );
+			const luminanceHistory = luminance( compressedHistory.rgb );
 
-			const isEdge = farthestDepth.sub( closestDepth ).greaterThan( 0.00001 );
-			const strongDisocclusion = worldPositionDifference.greaterThan( 0.5 ).and( isEdge.not() );
+			currentWeight.mulAssign( float( 1 ).div( luminanceCurrent.add( 1 ) ) );
+			historyWeight.mulAssign( float( 1 ).div( luminanceHistory.add( 1 ) ) );
 
-			If( strongDisocclusion, () => {
+			return add( currentColor.mul( currentWeight ), historyColor.mul( historyWeight ) ).div( max( currentWeight.add( historyWeight ), 0.00001 ) ).toVar();
 
-				currentWeight.assign( 1.0 );
-				historyWeight.assign( 0.0 );
+		} );
 
-			} );
+		const historyNode = texture( this._historyRenderTarget.texture );
 
-			// flicker reduction based on luminance weighing
+		const resolve = Fn( () => {
 
-			const compressedCurrent = currentColor.mul( float( 1 ).div( ( max( currentColor.r, currentColor.g, currentColor.b ).add( 1.0 ) ) ) );
-			const compressedHistory = clampedHistoryColor.mul( float( 1 ).div( ( max( clampedHistoryColor.r, clampedHistoryColor.g, clampedHistoryColor.b ).add( 1.0 ) ) ) );
+			const uvNode = uv();
+			const textureSize = this.beautyNode.size(); // Assumes all the buffers share the same size.
+			const positionTexel = uvNode.mul( textureSize );
 
-			const luminanceCurrent = luminance( compressedCurrent.rgb );
-			const luminanceHistory = luminance( compressedHistory.rgb );
+			// sample the closest and farthest depths in the current buffer
+
+			const currentDepth = sampleCurrentDepth( positionTexel );
+			const closestDepth = currentDepth.get( 'closestDepth' );
+			const closestPositionTexel = currentDepth.get( 'closestPositionTexel' );
+			const farthestDepth = currentDepth.get( 'farthestDepth' );
+
+			// convert the NDC offset to UV offset
+
+			const offsetUV = this.velocityNode.load( closestPositionTexel ).xy.mul( vec2( 0.5, - 0.5 ) );
+
+			// sample the previous depth
+
+			const historyUV = uvNode.sub( offsetUV );
+			const previousDepth = samplePreviousDepth( historyUV );
+
+			// history is considered valid when the UV is in range and there's no disocclusion except on edges
+
+			const isValidUV = historyUV.greaterThanEqual( 0 ).all().and( historyUV.lessThanEqual( 1 ).all() );
+			const isEdge = farthestDepth.sub( closestDepth ).greaterThan( this.edgeDepthDiff );
+			const isDisocclusion = closestDepth.sub( previousDepth ).greaterThan( this.depthThreshold );
+			const hasValidHistory = isValidUV.and( isEdge.or( isDisocclusion.not() ) );
+
+			// sample the current and previous colors
+
+			const currentColor = this.beautyNode.sample( uvNode );
+			const historyColor = historyNode.sample( uvNode.sub( offsetUV ) );
+
+			// increase the weight towards the current frame under motion
+
+			const motionFactor = uvNode.sub( historyUV ).mul( textureSize ).length().div( this.maxVelocityLength ).saturate();
+			const currentWeight = float( 0.05 ).toVar(); // A minimum weight
 
-			currentWeight.mulAssign( float( 1.0 ).div( luminanceCurrent.add( 1 ) ) );
-			historyWeight.mulAssign( float( 1.0 ).div( luminanceHistory.add( 1 ) ) );
+			if ( this.useSubpixelCorrection ) {
 
-			const smoothedOutput = add( currentColor.mul( currentWeight ), clampedHistoryColor.mul( historyWeight ) ).div( max( currentWeight.add( historyWeight ), 0.00001 ) ).toVar();
+				// Increase the minimum weight towards the current frame when the velocity is more subpixel.
+				currentWeight.addAssign( subpixelCorrection( offsetUV, textureSize ).mul( 0.25 ) );
 
-			return smoothedOutput;
+			}
+
+			currentWeight.assign( hasValidHistory.select( currentWeight.add( motionFactor ).saturate(), 1 ) );
+
+			// Perform neighborhood clipping/clamping. We use variance clipping here.
+
+			const varianceGamma = mix( 0.5, 1, motionFactor.oneMinus().pow2() ); // Reasonable gamma range is [0.75, 2]
+			const clippedHistoryColor = varianceClipping( positionTexel, currentColor, historyColor, varianceGamma );
+
+			// flicker reduction based on luminance weighing
+
+			const output = flickerReduction( currentColor, clippedHistoryColor, currentWeight );
+
+			return output;
 
 		} );
 
@@ -548,21 +691,26 @@ class TRAANode extends TempNode {
 
 export default TRAANode;
 
-// These jitter vectors are specified in integers because it is easier.
-// I am assuming a [-8,8) integer grid, but it needs to be mapped onto [-0.5,0.5)
-// before being used, thus these integers need to be scaled by 1/16.
-//
-// Sample patterns reference: https://msdn.microsoft.com/en-us/library/windows/desktop/ff476218%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396
-const _JitterVectors = [
-	[ - 4, - 7 ], [ - 7, - 5 ], [ - 3, - 5 ], [ - 5, - 4 ],
-	[ - 1, - 4 ], [ - 2, - 2 ], [ - 6, - 1 ], [ - 4, 0 ],
-	[ - 7, 1 ], [ - 1, 2 ], [ - 6, 3 ], [ - 3, 3 ],
-	[ - 7, 6 ], [ - 3, 6 ], [ - 5, 7 ], [ - 1, 7 ],
-	[ 5, - 7 ], [ 1, - 6 ], [ 6, - 5 ], [ 4, - 4 ],
-	[ 2, - 3 ], [ 7, - 2 ], [ 1, - 1 ], [ 4, - 1 ],
-	[ 2, 1 ], [ 6, 2 ], [ 0, 4 ], [ 4, 4 ],
-	[ 2, 5 ], [ 7, 5 ], [ 5, 6 ], [ 3, 7 ]
-];
+function _halton( index, base ) {
+
+	let fraction = 1;
+	let result = 0;
+	while ( index > 0 ) {
+
+		fraction /= base;
+		result += fraction * ( index % base );
+		index = Math.floor( index / base );
+
+	}
+
+	return result;
+
+}
+
+const _haltonOffsets = /*@__PURE__*/ Array.from(
+	{ length: 32 },
+	( _, index ) => [ _halton( index + 1, 2 ), _halton( index + 1, 3 ) ]
+);
 
 /**
  * TSL function for creating a TRAA node for Temporal Reprojection Anti-Aliasing.
@@ -575,4 +723,4 @@ const _JitterVectors = [
  * @param {Camera} camera - The camera the scene is rendered with.
  * @returns {TRAANode}
  */
-export const traa = ( beautyNode, depthNode, velocityNode, camera ) => nodeObject( new TRAANode( convertToTexture( beautyNode ), depthNode, velocityNode, camera ) );
+export const traa = ( beautyNode, depthNode, velocityNode, camera ) => new TRAANode( convertToTexture( beautyNode ), depthNode, velocityNode, camera );

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

@@ -138,4 +138,4 @@ export default TransitionNode;
  * @param {Node<float> | number} useTexture - Whether `mixTextureNode` should influence the transition or not.
  * @returns {TransitionNode}
  */
-export const transition = ( nodeA, nodeB, mixTextureNode, mixRatio, threshold, useTexture ) => nodeObject( new TransitionNode( convertToTexture( nodeA ), convertToTexture( nodeB ), convertToTexture( mixTextureNode ), nodeObject( mixRatio ), nodeObject( threshold ), nodeObject( useTexture ) ) );
+export const transition = ( nodeA, nodeB, mixTextureNode, mixRatio, threshold, useTexture ) => new TransitionNode( convertToTexture( nodeA ), convertToTexture( nodeB ), convertToTexture( mixTextureNode ), nodeObject( mixRatio ), nodeObject( threshold ), nodeObject( useTexture ) );

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

@@ -0,0 +1,80 @@
+import { abs, color, float, Fn, Loop, mix, nodeObject, perspectiveDepthToViewZ, reference, textureSize, uv, vec2, vec4, viewZToOrthographicDepth, int, If, array, ivec2 } from 'three/tsl';
+
+/**
+ * Performs a depth-aware blend between a base scene and a secondary effect (like godrays).
+ * This function uses a Poisson disk sampling pattern to detect depth discontinuities
+ * in the neighborhood of the current pixel. If an edge is detected, it shifts the
+ * sampling coordinate for the blend node away from the edge to prevent light leaking/haloing.
+ *
+ * @param {Node} baseNode - The main scene/beauty pass texture node.
+ * @param {Node} blendNode - The effect to be blended (e.g., Godrays, Bloom).
+ * @param {Node} depthNode - The scene depth texture node.
+ * @param {Camera} camera - The camera used for the scene.
+ * @param {Object} [options={}] - Configuration for the blend effect.
+ * @param {Node|Color} [options.blendColor=Color(0xff0000)] - The color applied to the blend node.
+ * @param {Node<int> | number} [options.edgeRadius=2] - The search radius (in pixels) for detecting depth edges.
+ * @param {Node<float> | number} [options.edgeStrength=2] - How far to "push" the UV away from detected edges.
+ * @returns {Node<vec4>} The resulting blended color node.
+ */
+export const depthAwareBlend = /*#__PURE__*/ Fn( ( [ baseNode, blendNode, depthNode, camera, options = {} ] ) => {
+
+	const uvNode = baseNode.uvNode || uv();
+
+	const cameraNear = reference( 'near', 'float', camera );
+	const cameraFar = reference( 'far', 'float', camera );
+
+	const blendColor = nodeObject( options.blendColor ) || color( 0xffffff );
+	const edgeRadius = nodeObject( options.edgeRadius ) || int( 2 );
+	const edgeStrength = nodeObject( options.edgeStrength ) || float( 2 );
+
+	const viewZ = perspectiveDepthToViewZ( depthNode, cameraNear, cameraFar );
+	const correctDepth = viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
+
+	const pushDir = vec2( 0.0 ).toVar();
+	const count = float( 0 ).toVar();
+
+	const resolution = ivec2( textureSize( baseNode ) ).toConst();
+	const pixelStep = vec2( 1 ).div( resolution );
+
+	const poissonDisk = array( [
+		vec2( 0.493393, 0.394269 ),
+		vec2( 0.798547, 0.885922 ),
+		vec2( 0.259143, 0.650754 ),
+		vec2( 0.605322, 0.023588 ),
+		vec2( - 0.574681, 0.137452 ),
+		vec2( - 0.430397, - 0.638423 ),
+		vec2( - 0.849487, - 0.366258 ),
+		vec2( 0.170621, - 0.569941 )
+	] );
+
+	Loop( 8, ( { i } ) => {
+
+		const offset = poissonDisk.element( i ).mul( edgeRadius );
+
+		const sampleUv = uvNode.add( offset.mul( pixelStep ) );
+		const sampleDepth = depthNode.sample( sampleUv );
+
+		const sampleViewZ = perspectiveDepthToViewZ( sampleDepth, cameraNear, cameraFar );
+		const sampleLinearDepth = viewZToOrthographicDepth( sampleViewZ, cameraNear, cameraFar );
+
+		If( abs( sampleLinearDepth.sub( correctDepth ) ).lessThan( float( 0.05 ).mul( correctDepth ) ), () => {
+
+			pushDir.addAssign( offset );
+			count.addAssign( 1 );
+
+		} );
+
+	} );
+
+	count.assign( count.equal( 0 ).select( 1, count ) );
+
+	pushDir.divAssign( count ).normalize();
+
+	const sampleUv = pushDir.length().greaterThan( 0 ).select( uvNode.add( edgeStrength.mul( pushDir.div( resolution ) ) ), uvNode );
+
+	const bestChoice = blendNode.sample( sampleUv ).r;
+	const baseColor = baseNode.sample( uvNode );
+
+	return vec4( mix( baseColor, vec4( blendColor, 1 ), bestChoice ) );
+
+} );