@plastic-software/three 0.180.0 → 0.181.2

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

@@ -0,0 +1,488 @@
+import { RedFormat, RenderTarget, Vector2, RendererUtils, QuadMesh, TempNode, NodeMaterial, NodeUpdateType, UnsignedByteType } from 'three/webgpu';
+import { reference, viewZToPerspectiveDepth, logarithmicDepthToViewZ, getScreenPosition, getViewPosition, float, Break, Loop, int, max, abs, If, interleavedGradientNoise, screenCoordinate, nodeObject, Fn, passTexture, uv, uniform, perspectiveDepthToViewZ, orthographicDepthToViewZ, vec2, lightPosition, lightTargetPosition, fract, rand, mix } from 'three/tsl';
+
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
+const _size = /*@__PURE__*/ new Vector2();
+
+const _spatialOffsets = [ 0, 0.5, 0.25, 0.75 ];
+
+let _rendererState;
+
+/**
+ * Post processing node for applying Screen-Space Shadows (SSS) to a scene.
+ *
+ * Screen-Space Shadows (also known as Contact Shadows) should ideally be used to complement
+ * traditional shadow maps. They are best suited for rendering detailed shadows of smaller
+ * objects at a closer scale like intricate shadowing on highly detailed models. In other words:
+ * Use Shadow Maps for the foundation and Screen-Space Shadows for the details.
+ *
+ * The shadows produced by this implementation might have too hard edges for certain use cases.
+ * Use a box, gaussian or hash blur to soften the edges before doing the composite with the
+ * beauty pass. Code example:
+ *
+ * ```js
+ * const sssPass = sss( scenePassDepth, camera, mainLight );
+ *
+ * const sssBlur = boxBlur( sssPass.r, { size: 2, separation: 1 } ); // optional blur
+ * ```
+ *
+ * Limitations:
+ *
+ * - Ideally the maximum shadow length should not exceed `1` meter. Otherwise the effect gets
+ * computationally very expensive since more samples during the ray marching process are evaluated.
+ * You can mitigate this issue by reducing the `quality` paramter.
+ * - The effect can only be used with a single directional light, the main light of your scene.
+ * This main light usually represents the sun or daylight.
+ * - Like other Screen-Space techniques SSS can only honor objects in the shadowing computation that
+ * are currently visible within the camera's view.
+ *
+ * References:
+ * - {@link https://panoskarabelas.com/posts/screen_space_shadows/}.
+ * - {@link https://www.bendstudio.com/blog/inside-bend-screen-space-shadows/}.
+ *
+ * @augments TempNode
+ * @three_import import { sss } from 'three/addons/tsl/display/SSSNode.js';
+ */
+class SSSNode extends TempNode {
+
+	static get type() {
+
+		return 'SSSNode';
+
+	}
+
+	/**
+	 * Constructs a new SSS node.
+	 *
+	 * @param {TextureNode} depthNode - A texture node that represents the scene's depth.
+	 * @param {Camera} camera - The camera the scene is rendered with.
+	 * @param {DirectionalLight} mainLight - The main directional light of the scene.
+	 */
+	constructor( depthNode, camera, mainLight ) {
+
+		super( 'float' );
+
+		/**
+		 * A node that represents the beauty pass's depth.
+		 *
+		 * @type {TextureNode}
+		 */
+		this.depthNode = depthNode;
+
+		/**
+		 * Maximum shadow length in world units. Longer shadows result in more computational
+		 * overhead.
+		 *
+		 * @type {UniformNode<float>}
+		 * @default 0.1
+		 */
+		this.maxDistance = uniform( 0.1, 'float' );
+
+		/**
+		 * Depth testing thickness.
+		 *
+		 * @type {UniformNode<float>}
+		 * @default 0.01
+		 */
+		this.thickness = uniform( 0.01, 'float' );
+
+		/**
+		 * Shadow intensity. Must be in the range `[0, 1]`.
+		 *
+		 * @type {UniformNode<float>}
+		 * @default 0.5
+		 */
+		this.shadowIntensity = uniform( 0.5, 'float' );
+
+		/**
+		 * This parameter controls how detailed the raymarching process works.
+		 * The value ranges is `[0,1]` where `1` means best quality (the maximum number
+		 * of raymarching iterations/samples) and `0` means no samples at all.
+		 *
+		 * A quality of `0.5` is usually sufficient for most use cases. Try to keep
+		 * this parameter as low as possible. Larger values result in noticeable more
+		 * overhead.
+		 *
+		 * @type {UniformNode<float>}
+		 * @default 0.5
+		 */
+		this.quality = uniform( 0.5 );
+
+		/**
+		 * The resolution scale. Valid values are in the range
+		 * `[0,1]`. `1` means best quality but also results in
+		 * more computational overhead. Setting to `0.5` means
+		 * the effect is computed in half-resolution.
+		 *
+		 * @type {number}
+		 * @default 1
+		 */
+		this.resolutionScale = 1;
+
+		/**
+		 * Whether to use temporal filtering or not. Setting this property to
+		 * `true` requires the usage of `TRAANode`. This will help to reduce noice
+		 * although it introduces typical TAA artifacts like ghosting and temporal
+		 * instabilities.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.useTemporalFiltering = false;
+
+		/**
+		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node renders
+		 * its effect once per frame in `updateBefore()`.
+		 *
+		 * @type {string}
+		 * @default 'frame'
+		 */
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
+		// private uniforms
+
+		/**
+		 * Represents the view matrix of the scene's camera.
+		 *
+		 * @private
+		 * @type {UniformNode<mat4>}
+		 */
+		this._cameraViewMatrix = uniform( camera.matrixWorldInverse );
+
+		/**
+		 * Represents the projection matrix of the scene's camera.
+		 *
+		 * @private
+		 * @type {UniformNode<mat4>}
+		 */
+		this._cameraProjectionMatrix = uniform( camera.projectionMatrix );
+
+		/**
+		 * Represents the inverse projection matrix of the scene's camera.
+		 *
+		 * @private
+		 * @type {UniformNode<mat4>}
+		 */
+		this._cameraProjectionMatrixInverse = uniform( camera.projectionMatrixInverse );
+
+		/**
+		 * Represents the near value of the scene's camera.
+		 *
+		 * @private
+		 * @type {ReferenceNode<float>}
+		 */
+		this._cameraNear = reference( 'near', 'float', camera );
+
+		/**
+		 * Represents the far value of the scene's camera.
+		 *
+		 * @private
+		 * @type {ReferenceNode<float>}
+		 */
+		this._cameraFar = reference( 'far', 'float', camera );
+
+		/**
+		 * The resolution of the pass.
+		 *
+		 * @private
+		 * @type {UniformNode<vec2>}
+		 */
+		this._resolution = uniform( new Vector2() );
+
+		/**
+		 * Temporal offset added to the initial ray step.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this._temporalOffset = uniform( 0 );
+
+		/**
+		 * The frame ID use when temporal filtering is enabled.
+		 *
+		 * @type {UniformNode<uint>}
+		 */
+		this._frameId = uniform( 0 );
+
+		/**
+		 * A reference to the scene's main light.
+		 *
+		 * @private
+		 * @type {DirectionalLight}
+		 */
+		this._mainLight = mainLight;
+
+		/**
+		 * The camera the scene is rendered with.
+		 *
+		 * @private
+		 * @type {Camera}
+		 */
+		this._camera = camera;
+
+		/**
+		 * The render target the SSS is rendered into.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
+		this._sssRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false, format: RedFormat, type: UnsignedByteType } );
+		this._sssRenderTarget.texture.name = 'SSS';
+
+		/**
+		 * The material that is used to render the effect.
+		 *
+		 * @private
+		 * @type {NodeMaterial}
+		 */
+		this._material = new NodeMaterial();
+		this._material.name = 'SSS';
+
+		/**
+		 * The result of the effect is represented as a separate texture node.
+		 *
+		 * @private
+		 * @type {PassTextureNode}
+		 */
+		this._textureNode = passTexture( this, this._sssRenderTarget.texture );
+
+
+	}
+
+	/**
+	 * Returns the result of the effect as a texture node.
+	 *
+	 * @return {PassTextureNode} A texture node that represents the result of the effect.
+	 */
+	getTextureNode() {
+
+		return this._textureNode;
+
+	}
+
+	/**
+	 * Sets the size of the effect.
+	 *
+	 * @param {number} width - The width of the effect.
+	 * @param {number} height - The height of the effect.
+	 */
+	setSize( width, height ) {
+
+		width = Math.round( this.resolutionScale * width );
+		height = Math.round( this.resolutionScale * height );
+
+		this._resolution.value.set( width, height );
+		this._sssRenderTarget.setSize( width, height );
+
+	}
+
+	/**
+	 * This method is used to render the effect once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+
+		_rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
+
+		//
+
+		const size = renderer.getDrawingBufferSize( _size );
+		this.setSize( size.width, size.height );
+
+		// update temporal uniforms
+
+		if ( this.useTemporalFiltering === true ) {
+
+			const frameId = frame.frameId;
+
+			this._temporalOffset.value = _spatialOffsets[ frameId % 4 ];
+			this._frameId = frame.frameId;
+
+		} else {
+
+			this._temporalOffset.value = 0;
+			this._frameId = 0;
+
+		}
+
+		//
+
+		_quadMesh.material = this._material;
+		_quadMesh.name = 'SSS';
+
+		// clear
+
+		renderer.setClearColor( 0xffffff, 1 );
+
+		// sss
+
+		renderer.setRenderTarget( this._sssRenderTarget );
+		_quadMesh.render( renderer );
+
+		// restore
+
+		RendererUtils.restoreRendererState( renderer, _rendererState );
+
+	}
+
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {PassTextureNode}
+	 */
+	setup( builder ) {
+
+		const uvNode = uv();
+
+		const getViewZ = Fn( ( [ depth ] ) => {
+
+			let viewZNode;
+
+			if ( this._camera.isPerspectiveCamera ) {
+
+				viewZNode = perspectiveDepthToViewZ( depth, this._cameraNear, this._cameraFar );
+
+			} else {
+
+				viewZNode = orthographicDepthToViewZ( depth, this._cameraNear, this._cameraFar );
+
+			}
+
+			return viewZNode;
+
+		} );
+
+		const sampleDepth = ( uv ) => {
+
+			const depth = this.depthNode.sample( uv ).r;
+
+			if ( builder.renderer.logarithmicDepthBuffer === true ) {
+
+				const viewZ = logarithmicDepthToViewZ( depth, this._cameraNear, this._cameraFar );
+
+				return viewZToPerspectiveDepth( viewZ, this._cameraNear, this._cameraFar );
+
+			}
+
+			return depth;
+
+		};
+
+		const sss = Fn( () => {
+
+			const depth = sampleDepth( uvNode ).toVar();
+			depth.greaterThanEqual( 1.0 ).discard();
+
+			// compute ray position and direction (in view-space)
+
+			const rayStartPosition = getViewPosition( uvNode, depth, this._cameraProjectionMatrixInverse ).toVar( 'rayStartPosition' );
+			const rayDirection = this._cameraViewMatrix.transformDirection( lightPosition( this._mainLight ).sub( lightTargetPosition( this._mainLight ) ) ).toConst( 'rayDirection' );
+			const rayEndPosition = rayStartPosition.add( rayDirection.mul( this.maxDistance ) ).toConst( 'rayEndPosition' );
+
+			// d0 and d1 are the start and maximum points of the ray in screen space
+			const d0 = screenCoordinate.xy.toVar();
+			const d1 = getScreenPosition( rayEndPosition, this._cameraProjectionMatrix ).mul( this._resolution ).toVar();
+
+			// below variables are used to control the raymarching process
+
+			// total length of the ray
+			const totalLen = d1.sub( d0 ).length().toVar();
+
+			// offset in x and y direction
+			const xLen = d1.x.sub( d0.x ).toVar();
+			const yLen = d1.y.sub( d0.y ).toVar();
+
+			// determine the larger delta
+			// The larger difference will help to determine how much to travel in the X and Y direction each iteration and
+			// how many iterations are needed to travel the entire ray
+			const totalStep = int( max( abs( xLen ), abs( yLen ) ).mul( this.quality.clamp() ) ).toConst();
+
+			// step sizes in the x and y directions
+			const xSpan = xLen.div( totalStep ).toVar();
+			const ySpan = yLen.div( totalStep ).toVar();
+
+			// compute noise based ray offset
+			const noise = interleavedGradientNoise( screenCoordinate );
+			const offset = fract( noise.add( this._temporalOffset ) ).add( rand( uvNode.add( this._frameId ) ) ).toConst( 'offset' );
+
+			const occlusion = float( 0 ).toVar();
+
+			Loop( totalStep, ( { i } ) => {
+
+				// advance on the ray by computing a new position in screen coordinates
+				const xy = vec2( d0.x.add( xSpan.mul( float( i ).add( offset ) ) ), d0.y.add( ySpan.mul( float( i ).add( offset ) ) ) ).toVar();
+
+				// stop processing if the new position lies outside of the screen
+				If( xy.x.lessThan( 0 ).or( xy.x.greaterThan( this._resolution.x ) ).or( xy.y.lessThan( 0 ) ).or( xy.y.greaterThan( this._resolution.y ) ), () => {
+
+					Break();
+
+				} );
+
+				// compute new uv, depth and viewZ for the next fragment
+
+				const uvNode = xy.div( this._resolution );
+				const fragmentDepth = sampleDepth( uvNode ).toConst();
+				const fragmentViewZ = getViewZ( fragmentDepth ).toConst( 'fragmentViewZ' );
+
+				const s = xy.sub( d0 ).length().div( totalLen ).toVar();
+				const rayPosition = mix( rayStartPosition, rayEndPosition, s );
+
+				const depthDelta = rayPosition.z.sub( fragmentViewZ ).negate(); // Port note: viewZ values are negative in three
+
+				// check if the camera can't "see" the ray (ray depth must be larger than the camera depth, so positive depth_delta)
+
+				If( depthDelta.greaterThan( 0 ).and( depthDelta.lessThan( this.thickness ) ), () => {
+
+					// mark as occluded
+
+					occlusion.assign( this.shadowIntensity );
+
+					Break();
+
+				} );
+
+
+			} );
+
+			return occlusion.oneMinus();
+
+		} );
+
+		this._material.fragmentNode = sss().context( builder.getSharedContext() );
+		this._material.needsUpdate = true;
+
+		return this._textureNode;
+
+	}
+
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the effect is no longer required.
+	 */
+	dispose() {
+
+		this._sssRenderTarget.dispose();
+
+		this._material.dispose();
+
+	}
+
+}
+
+export default SSSNode;
+
+/**
+ * TSL function for creating a SSS effect.
+ *
+ * @tsl
+ * @function
+ * @param {TextureNode} depthNode - A texture node that represents the scene's depth.
+ * @param {Camera} camera - The camera the scene is rendered with.
+ * @param {DirectionalLight} mainLight - The main directional light of the scene.
+ * @returns {SSSNode}
+ */
+export const sss = ( depthNode, camera, mainLight ) => nodeObject( new SSSNode( depthNode, camera, mainLight ) );

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

@@ -1,5 +1,5 @@
-import { HalfFloatType, Vector2, RenderTarget, RendererUtils, QuadMesh, NodeMaterial, TempNode, NodeUpdateType, Matrix4 } from 'three/webgpu';
-import { add, float, If, Loop, int, Fn, min, max, clamp, nodeObject, texture, uniform, uv, vec2, vec4, luminance, convertToTexture, passTexture, velocity } from 'three/tsl';
+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';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -100,13 +100,45 @@ class TRAANode extends TempNode {
 		 */
 		this._invSize = 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 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() );
+
 		/**
 		 * The render target that represents the history of frame data.
 		 *
 		 * @private
 		 * @type {?RenderTarget}
 		 */
-		this._historyRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false, type: HalfFloatType } );
+		this._historyRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false, type: HalfFloatType, depthTexture: new DepthTexture() } );
 		this._historyRenderTarget.texture.name = 'TRAANode.history';
 
 		/**
@@ -143,6 +175,14 @@ class TRAANode extends TempNode {
 		 */
 		this._originalProjectionMatrix = new Matrix4();
 
+		/**
+		 * A texture node for the previous depth buffer.
+		 *
+		 * @private
+		 * @type {TextureNode}
+		 */
+		this._previousDepthNode = texture( new DepthTexture( 1, 1 ) );
+
 		/**
 		 * Sync the post processing stack with the TRAA node.
 		 * @private
@@ -246,6 +286,16 @@ class TRAANode extends TempNode {
 
 		const { renderer } = frame;
 
+		// store previous frame matrices before updating current ones
+
+		this._previousCameraWorldMatrix.value.copy( this._cameraWorldMatrix.value );
+		this._previousCameraProjectionMatrixInverse.value.copy( this._cameraProjectionMatrixInverse.value );
+
+		// update camera matrices uniforms
+
+		this._cameraWorldMatrix.value.copy( this.camera.matrixWorld );
+		this._cameraProjectionMatrixInverse.value.copy( this.camera.projectionMatrixInverse );
+
 		// keep the TRAA in sync with the dimensions of the beauty node
 
 		const beautyRenderTarget = ( this.beautyNode.isRTTNode ) ? this.beautyNode.renderTarget : this.beautyNode.passNode.renderTarget;
@@ -293,6 +343,7 @@ class TRAANode extends TempNode {
 
 		renderer.setRenderTarget( this._resolveRenderTarget );
 		_quadMesh.material = this._resolveMaterial;
+		_quadMesh.name = 'TRAA';
 		_quadMesh.render( renderer );
 		renderer.setRenderTarget( null );
 
@@ -300,6 +351,23 @@ class TRAANode extends TempNode {
 
 		renderer.copyTextureToTexture( this._resolveRenderTarget.texture, this._historyRenderTarget.texture );
 
+		// Copy current depth to previous depth buffer
+
+		const size = renderer.getDrawingBufferSize( _size );
+
+		// only allow the depth copy if the dimensions of the history render target match with the drawing
+		// render buffer and thus the depth texture of the scene. For some reasons, there are timing issues
+		// with WebGPU resulting in different size of the drawing buffer and the beauty render target when
+		// resizing the browser window. This does not happen with the WebGL backend
+
+		if ( this._historyRenderTarget.height === size.height && this._historyRenderTarget.width === size.width ) {
+
+			const currentDepth = this.depthNode.value;
+			renderer.copyTextureToTexture( currentDepth, this._historyRenderTarget.depthTexture );
+			this._previousDepthNode.value = this._historyRenderTarget.depthTexture;
+
+		}
+
 		// restore
 
 		RendererUtils.restoreRendererState( renderer, _rendererState );
@@ -347,6 +415,7 @@ class TRAANode extends TempNode {
 			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();
 
 			// sample a 3x3 neighborhood to create a box in color space
@@ -373,6 +442,14 @@ class TRAANode extends TempNode {
 
 					} );
 
+					// find the farthest depth in the neighborhood (used to preserve edge anti-aliasing)
+
+					If( currentDepth.greaterThan( farthestDepth ), () => {
+
+						farthestDepth.assign( currentDepth );
+
+					} );
+
 				} );
 
 			} );
@@ -388,11 +465,49 @@ class TRAANode extends TempNode {
 
 			const clampedHistoryColor = clamp( historyColor, minColor, maxColor );
 
-			// flicker reduction based on luminance weighing
+			// calculate current frame world position
+
+			const currentDepth = depthTexture.sample( uvNode ).r;
+			const currentViewPosition = getViewPosition( uvNode, currentDepth, this._cameraProjectionMatrixInverse );
+			const currentWorldPosition = this._cameraWorldMatrix.mul( vec4( currentViewPosition, 1.0 ) ).xyz;
+
+			// calculate previous frame world position from history UV and previous depth
 
-			const currentWeight = float( 0.05 ).toVar();
+			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;
+
+			// calculate difference in world positions
+
+			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
+
+			const velocityMagnitude = length( offset ).toConst();
+			const motionFactor = max( worldPositionDifference.mul( 0.5 ), velocityMagnitude.mul( 10.0 ) ).toVar();
+			motionFactor.assign( min( motionFactor, 1.0 ) );
+
+			const currentWeight = float( 0.05 ).add( motionFactor.mul( 0.25 ) ).toVar();
 			const historyWeight = currentWeight.oneMinus().toVar();
 
+			// 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 isEdge = farthestDepth.sub( closestDepth ).greaterThan( 0.00001 );
+			const strongDisocclusion = worldPositionDifference.greaterThan( 0.5 ).and( isEdge.not() );
+
+			If( strongDisocclusion, () => {
+
+				currentWeight.assign( 1.0 );
+				historyWeight.assign( 0.0 );
+
+			} );
+
+			// flicker reduction based on luminance weighing
+
 			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 ) ) ) );
 
@@ -402,7 +517,9 @@ class TRAANode extends TempNode {
 			currentWeight.mulAssign( float( 1.0 ).div( luminanceCurrent.add( 1 ) ) );
 			historyWeight.mulAssign( float( 1.0 ).div( luminanceHistory.add( 1 ) ) );
 
-			return add( currentColor.mul( currentWeight ), clampedHistoryColor.mul( historyWeight ) ).div( max( currentWeight.add( historyWeight ), 0.00001 ) );
+			const smoothedOutput = add( currentColor.mul( currentWeight ), clampedHistoryColor.mul( historyWeight ) ).div( max( currentWeight.add( historyWeight ), 0.00001 ) ).toVar();
+
+			return smoothedOutput;
 
 		} );
 

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

@@ -14,6 +14,7 @@ import { Fn, vec2, uv, Loop, vec4, premultiplyAlpha, unpremultiplyAlpha, max, in
  *
  * Reference: {@link https://github.com/lettier/3d-game-shaders-for-beginners/blob/master/demonstration/shaders/fragment/box-blur.frag}.
  *
+ * @tsl
  * @function
  * @param {Node<vec4>} textureNode - The texture node that should be blurred.
  * @param {Object} [options={}] - Additional options for the hash blur effect.

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

@@ -12,6 +12,7 @@ import { float, Fn, vec2, uv, sin, rand, degrees, cos, Loop, vec4, premultiplyAl
  *
  * Reference: {@link https://www.shadertoy.com/view/4lXXWn}.
  *
+ * @tsl
  * @function
  * @param {Node<vec4>} textureNode - The texture node that should be blurred.
  * @param {Node<float>} [bluramount=float(0.1)] - This node determines the amount of blur.