@plastic-software/three 0.182.0 → 0.183.0

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

@@ -80,13 +80,13 @@ class PixelationNode extends TempNode {
 		this._resolution = uniform( new Vector4() );
 
 		/**
-		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node updates
+		 * The `updateType` is set to `NodeUpdateType.FRAME` since the node updates
 		 * its internal uniforms once per frame in `updateBefore()`.
 		 *
 		 * @type {string}
 		 * @default 'frame'
 		 */
-		this.updateBeforeType = NodeUpdateType.FRAME;
+		this.updateType = NodeUpdateType.FRAME;
 
 	}
 
@@ -95,7 +95,7 @@ class PixelationNode extends TempNode {
 	 *
 	 * @param {NodeFrame} frame - The current node frame.
 	 */
-	updateBefore() {
+	update() {
 
 		const map = this.textureNode.value;
 
@@ -214,7 +214,7 @@ class PixelationNode extends TempNode {
 
 }
 
-const pixelation = ( node, depthNode, normalNode, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) => nodeObject( new PixelationNode( convertToTexture( node ), convertToTexture( depthNode ), convertToTexture( normalNode ), nodeObject( pixelSize ), nodeObject( normalEdgeStrength ), nodeObject( depthEdgeStrength ) ) );
+const pixelation = ( node, depthNode, normalNode, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) => new PixelationNode( convertToTexture( node ), convertToTexture( depthNode ), convertToTexture( normalNode ), nodeObject( pixelSize ), nodeObject( normalEdgeStrength ), nodeObject( depthEdgeStrength ) );
 
 /**
  * A special render pass node that renders the scene with a pixelation effect.
@@ -330,6 +330,6 @@ class PixelationPassNode extends PassNode {
  * @param {Node<float> | number} [depthEdgeStrength=0.4] - The depth edge strength.
  * @returns {PixelationPassNode}
  */
-export const pixelationPass = ( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength ) => nodeObject( new PixelationPassNode( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength ) );
+export const pixelationPass = ( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength ) => new PixelationPassNode( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength );
 
 export default PixelationPassNode;

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

@@ -1,5 +1,5 @@
 import { TempNode } from 'three/webgpu';
-import { nodeObject, Fn, uv, uniform, vec2, sin, cos, vec4, convertToTexture } from 'three/tsl';
+import { Fn, uv, uniform, vec2, sin, cos, vec4, convertToTexture } from 'three/tsl';
 
 /**
  * Post processing node for shifting/splitting RGB color channels. The effect
@@ -93,4 +93,4 @@ export default RGBShiftNode;
  * @param {number} [angle=0] - Defines in which direction colors are shifted.
  * @returns {RGBShiftNode}
  */
-export const rgbShift = ( node, amount, angle ) => nodeObject( new RGBShiftNode( convertToTexture( node ), amount, angle ) );
+export const rgbShift = ( node, amount, angle ) => new RGBShiftNode( convertToTexture( node ), amount, angle );

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

@@ -0,0 +1,263 @@
+import { MeshBasicNodeMaterial, PassNode, UnsignedByteType, NearestFilter, CubeMapNode, MeshPhongNodeMaterial } from 'three/webgpu';
+import { float, vec2, vec4, Fn, uv, varying, cameraProjectionMatrix, cameraViewMatrix, positionWorld, screenSize, materialColor, uint, texture, uniform, context, reflectVector } from 'three/tsl';
+
+const _affineUv = varying( vec2() );
+const _w = varying( float() );
+
+const _clipSpaceRetro = Fn( () => {
+
+	const defaultPosition = cameraProjectionMatrix
+		.mul( cameraViewMatrix )
+		.mul( positionWorld );
+
+	const roundedPosition = defaultPosition.xy
+		.div( defaultPosition.w.mul( 2 ) )
+		.mul( screenSize.xy )
+		.round()
+		.div( screenSize.xy )
+		.mul( defaultPosition.w.mul( 2 ) );
+
+	_affineUv.assign( uv().mul( defaultPosition.w ) );
+	_w.assign( defaultPosition.w );
+
+	return vec4( roundedPosition.xy, defaultPosition.zw );
+
+} )();
+
+/**
+ * A post-processing pass that applies a retro PS1-style effect to the scene.
+ *
+ * This node renders the scene with classic PlayStation 1 visual characteristics:
+ * - **Vertex snapping**: Vertices are snapped to screen pixels, creating the iconic "wobbly" geometry
+ * - **Affine texture mapping**: Textures are sampled without perspective correction, resulting in distortion effects
+ * - **Low resolution**: Default 0.25 scale (typical 320x240 equivalent)
+ * - **Nearest-neighbor filtering**: Sharp pixelated textures without smoothing
+ *
+ * @augments PassNode
+ */
+class RetroPassNode extends PassNode {
+
+	/**
+	 * Creates a new RetroPassNode instance.
+	 *
+	 * @param {Scene} scene - The scene to render.
+	 * @param {Camera} camera - The camera to render from.
+	 * @param {Object} [options={}] - Additional options for the retro pass.
+	 * @param {Node} [options.affineDistortion=null] - An optional node to apply affine distortion to UVs.
+	 */
+	constructor( scene, camera, options = {} ) {
+
+		super( PassNode.COLOR, scene, camera );
+
+		const {
+			affineDistortion = null,
+			filterTextures = false
+		} = options;
+
+		this.setResolutionScale( .25 );
+
+		this.renderTarget.texture.type = UnsignedByteType;
+		this.renderTarget.texture.magFilter = NearestFilter;
+		this.renderTarget.texture.minFilter = NearestFilter;
+
+		this.affineDistortionNode = affineDistortion;
+
+		this.filterTextures = filterTextures;
+
+		this._materialCache = new Map();
+
+	}
+
+	/**
+	 * Updates the retro pass before rendering.
+	 *
+	 * @override
+	 * @param {Frame} frame - The current frame information.
+	 * @returns {void}
+	 */
+	updateBefore( frame ) {
+
+		const renderer = frame.renderer;
+
+		const currentRenderObjectFunction = renderer.getRenderObjectFunction();
+
+		renderer.setRenderObjectFunction( ( object, scene, camera, geometry, material, ...params ) => {
+
+			const retroMaterialData = this._materialCache.get( material );
+
+			let retroMaterial;
+
+			if ( retroMaterialData === undefined || retroMaterialData.version !== material.version ) {
+
+				if ( retroMaterialData !== undefined ) {
+
+					retroMaterialData.material.dispose();
+
+				}
+
+				if ( material.isMeshBasicMaterial || material.isMeshBasicNodeMaterial ) {
+
+					retroMaterial = new MeshBasicNodeMaterial();
+
+				} else {
+
+					retroMaterial = new MeshPhongNodeMaterial();
+
+				}
+
+				retroMaterial.colorNode = material.colorNode || null;
+				retroMaterial.opacityNode = material.opacityNode || null;
+				retroMaterial.positionNode = material.positionNode || null;
+				retroMaterial.vertexNode = material.vertexNode || _clipSpaceRetro;
+
+				let colorNode = material.colorNode || materialColor;
+
+				if ( material.isMeshStandardNodeMaterial || material.isMeshStandardMaterial ) {
+
+					const envMap = material.envMap || scene.environment;
+
+					if ( envMap ) {
+
+						const reflection = new CubeMapNode( texture( envMap ) );
+
+						let metalness;
+
+						if ( material.metalnessNode ) {
+
+							metalness = material.metalnessNode;
+
+						} else {
+
+							metalness = uniform( material.metalness ).onRenderUpdate( ( { material } ) => material.metalness );
+
+							if ( material.metalnessMap ) {
+
+								const textureUniform = texture( material.metalnessMap ).onRenderUpdate( ( { material } ) => material.metalnessMap );
+
+								metalness = metalness.mul( textureUniform.b );
+
+							}
+
+						}
+
+						colorNode = metalness.mix( colorNode, reflection );
+
+					}
+
+				}
+
+				retroMaterial.colorNode = colorNode;
+
+				//
+
+				const contextData = {};
+
+				if ( this.affineDistortionNode ) {
+
+					contextData.getUV = ( texture ) => {
+
+						let finalUV;
+
+						if ( texture.isCubeTextureNode ) {
+
+							finalUV = reflectVector;
+
+						} else {
+
+							finalUV = this.affineDistortionNode.mix( uv(), _affineUv.div( _w ) );
+
+						}
+
+						return finalUV;
+
+					};
+
+				}
+
+				if ( this.filterTextures !== true ) {
+
+					contextData.getTextureLevel = () => uint( 0 );
+
+				}
+
+				retroMaterial.contextNode = context( contextData );
+
+				//
+
+				this._materialCache.set( material, {
+					material: retroMaterial,
+					version: material.version
+				} );
+
+			} else {
+
+				retroMaterial = retroMaterialData.material;
+
+			}
+
+			for ( const property in material ) {
+
+				if ( retroMaterial[ property ] === undefined ) continue;
+
+				retroMaterial[ property ] = material[ property ];
+
+			}
+
+			renderer.renderObject( object, scene, camera, geometry, retroMaterial, ...params );
+
+		} );
+
+		super.updateBefore( frame );
+
+		renderer.setRenderObjectFunction( currentRenderObjectFunction );
+
+	}
+
+	/**
+	 * Disposes the retro pass and its internal resources.
+	 *
+	 * @override
+	 * @returns {void}
+	 */
+	dispose() {
+
+		super.dispose();
+
+		this._materialCache.forEach( ( data ) => {
+
+			data.material.dispose();
+
+		} );
+
+		this._materialCache.clear();
+
+	}
+
+}
+
+export default RetroPassNode;
+
+/**
+ * Creates a new RetroPassNode instance for PS1-style rendering.
+ *
+ * The retro pass applies vertex snapping, affine texture mapping, and low-resolution
+ * rendering to achieve an authentic PlayStation 1 aesthetic. Combine with other
+ * post-processing effects like dithering, posterization, and scanlines for full retro look.
+ *
+ * ```js
+ * // Combined with other effects
+ * let pipeline = retroPass( scene, camera );
+ * pipeline = bayerDither( pipeline, 32 );
+ * pipeline = posterize( pipeline, 32 );
+ * renderPipeline.outputNode = pipeline;
+ * ```
+ *
+ * @tsl
+ * @function
+ * @param {Scene} scene - The scene to render.
+ * @param {Camera} camera - The camera to render from.
+ * @param {Object} [options={}] - Additional options for the retro pass.
+ * @param {Node} [options.affineDistortion=null] - An optional node to apply affine distortion to UVs.
+ * @return {RetroPassNode} A new RetroPassNode instance.
+ */
+export const retroPass = ( scene, camera, options = {} ) => new RetroPassNode( scene, camera, options );

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

@@ -1,5 +1,5 @@
 import { HalfFloatType, LinearFilter, NearestFilter, RenderTarget, Texture, Vector2, QuadMesh, NodeMaterial, TempNode, RendererUtils } from 'three/webgpu';
-import { abs, nodeObject, Fn, NodeUpdateType, uv, uniform, convertToTexture, varyingProperty, vec2, vec4, modelViewProjection, passTexture, max, step, dot, float, texture, If, Loop, int, Break, sqrt, sign, mix } from 'three/tsl';
+import { abs, Fn, NodeUpdateType, uv, uniform, convertToTexture, varyingProperty, vec2, vec4, modelViewProjection, passTexture, max, step, dot, float, texture, If, Loop, int, Break, sqrt, sign, mix } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -765,4 +765,4 @@ export default SMAANode;
  * @param {Node<vec4>} node - The node that represents the input of the effect.
  * @returns {SMAANode}
  */
-export const smaa = ( node ) => nodeObject( new SMAANode( convertToTexture( node ) ) );
+export const smaa = ( node ) => new SMAANode( convertToTexture( node ) );

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

@@ -1,5 +1,5 @@
 import { AdditiveBlending, Color, Vector2, RendererUtils, PassNode, QuadMesh, NodeMaterial } from 'three/webgpu';
-import { nodeObject, uniform, mrt, texture, getTextureIndex, unpremultiplyAlpha } from 'three/tsl';
+import { uniform, mrt, texture, getTextureIndex, unpremultiplyAlpha } from 'three/tsl';
 
 const _size = /*@__PURE__*/ new Vector2();
 
@@ -355,4 +355,4 @@ const _JitterVectors = [
  * @param {Camera} camera - The camera to render the scene with.
  * @returns {SSAAPassNode}
  */
-export const ssaaPass = ( scene, camera ) => nodeObject( new SSAAPassNode( scene, camera ) );
+export const ssaaPass = ( scene, camera ) => new SSAAPassNode( scene, camera );

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

@@ -1,5 +1,5 @@
 import { RenderTarget, Vector2, TempNode, QuadMesh, NodeMaterial, RendererUtils, MathUtils } from 'three/webgpu';
-import { clamp, normalize, reference, nodeObject, Fn, NodeUpdateType, uniform, vec4, passTexture, uv, logarithmicDepthToViewZ, viewZToPerspectiveDepth, getViewPosition, screenCoordinate, float, sub, fract, dot, vec2, rand, vec3, Loop, mul, PI, cos, sin, uint, cross, acos, sign, pow, luminance, If, max, abs, Break, sqrt, HALF_PI, div, ceil, shiftRight, convertToTexture, bool, getNormalFromDepth, countOneBits, interleavedGradientNoise } from 'three/tsl';
+import { clamp, normalize, reference, Fn, NodeUpdateType, uniform, vec4, passTexture, uv, logarithmicDepthToViewZ, viewZToPerspectiveDepth, getViewPosition, screenCoordinate, float, sub, fract, dot, vec2, rand, vec3, Loop, mul, PI, cos, sin, uint, cross, acos, sign, pow, luminance, If, max, abs, Break, sqrt, HALF_PI, div, ceil, shiftRight, convertToTexture, bool, getNormalFromDepth, countOneBits, interleavedGradientNoise } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -639,4 +639,4 @@ export default SSGINode;
  * @param {Camera} camera - The camera the scene is rendered with.
  * @returns {SSGINode}
  */
-export const ssgi = ( beautyNode, depthNode, normalNode, camera ) => nodeObject( new SSGINode( convertToTexture( beautyNode ), depthNode, normalNode, camera ) );
+export const ssgi = ( beautyNode, depthNode, normalNode, camera ) => new SSGINode( convertToTexture( beautyNode ), depthNode, normalNode, camera );

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

@@ -1,5 +1,5 @@
 import { HalfFloatType, RenderTarget, Vector2, RendererUtils, QuadMesh, TempNode, NodeMaterial, NodeUpdateType, LinearFilter, LinearMipmapLinearFilter } from 'three/webgpu';
-import { texture, reference, viewZToPerspectiveDepth, logarithmicDepthToViewZ, getScreenPosition, getViewPosition, sqrt, mul, div, cross, float, Continue, Break, Loop, int, max, abs, sub, If, dot, reflect, normalize, screenCoordinate, nodeObject, Fn, passTexture, uv, uniform, perspectiveDepthToViewZ, orthographicDepthToViewZ, vec2, vec3, vec4 } from 'three/tsl';
+import { texture, reference, viewZToPerspectiveDepth, logarithmicDepthToViewZ, getScreenPosition, getViewPosition, mul, div, cross, float, Continue, Break, Loop, int, max, abs, sub, If, dot, reflect, normalize, screenCoordinate, nodeObject, Fn, passTexture, uv, uniform, perspectiveDepthToViewZ, orthographicDepthToViewZ, vec2, vec3, vec4 } from 'three/tsl';
 import { boxBlur } from './boxBlur.js';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
@@ -275,7 +275,8 @@ class SSRNode extends TempNode {
 		if ( this.roughnessNode !== null ) {
 
 			const mips = this._blurRenderTarget.texture.mipmaps.length - 1;
-			const lod = float( this.roughnessNode ).mul( mips ).clamp( 0, mips );
+			const r = float( this.roughnessNode );
+			const lod = r.mul( r ).mul( mips ).clamp( 0, mips );
 
 			blurredTextureNode = passTexture( this, this._blurRenderTarget.texture ).level( lod );
 
@@ -399,10 +400,9 @@ class SSRNode extends TempNode {
 			// https://en.wikipedia.org/wiki/Plane_(geometry)
 			// http://paulbourke.net/geometry/pointlineplane/
 
+			// planeNormal is already normalized, so denominator is 1
 			const d = mul( planeNormal.x, planePoint.x ).add( mul( planeNormal.y, planePoint.y ) ).add( mul( planeNormal.z, planePoint.z ) ).negate().toVar();
-
-			const denominator = sqrt( mul( planeNormal.x, planeNormal.x, ).add( mul( planeNormal.y, planeNormal.y ) ).add( mul( planeNormal.z, planeNormal.z ) ) ).toVar();
-			const distance = div( mul( planeNormal.x, point.x ).add( mul( planeNormal.y, point.y ) ).add( mul( planeNormal.z, point.z ) ).add( d ), denominator );
+			const distance = mul( planeNormal.x, point.x ).add( mul( planeNormal.y, point.y ) ).add( mul( planeNormal.z, point.z ) ).add( d );
 			return distance;
 
 		} );
@@ -589,7 +589,7 @@ class SSRNode extends TempNode {
 
 						// output
 						const reflectColor = this.colorNode.sample( uvNode );
-						output.assign( vec4( reflectColor.rgb, op ) );
+						output.assign( vec4( reflectColor.rgb.mul( op ), 1 ) );
 						Break();
 
 					} );
@@ -653,4 +653,4 @@ export default SSRNode;
  * @param {?Camera} [camera=null] - The camera the scene is rendered with.
  * @returns {SSRNode}
  */
-export const ssr = ( colorNode, depthNode, normalNode, metalnessNode, roughnessNode = null, camera = null ) => nodeObject( new SSRNode( nodeObject( colorNode ), nodeObject( depthNode ), nodeObject( normalNode ), nodeObject( metalnessNode ), nodeObject( roughnessNode ), camera ) );
+export const ssr = ( colorNode, depthNode, normalNode, metalnessNode, roughnessNode = null, camera = null ) => new SSRNode( nodeObject( colorNode ), nodeObject( depthNode ), nodeObject( normalNode ), nodeObject( metalnessNode ), nodeObject( roughnessNode ), camera );

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

@@ -1,5 +1,5 @@
 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';
+import { reference, viewZToPerspectiveDepth, logarithmicDepthToViewZ, getScreenPosition, getViewPosition, float, Break, Loop, int, max, abs, If, interleavedGradientNoise, screenCoordinate, 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();
@@ -487,4 +487,4 @@ export default SSSNode;
  * @param {DirectionalLight} mainLight - The main directional light of the scene.
  * @returns {SSSNode}
  */
-export const sss = ( depthNode, camera, mainLight ) => nodeObject( new SSSNode( depthNode, camera, mainLight ) );
+export const sss = ( depthNode, camera, mainLight ) => new SSSNode( depthNode, camera, mainLight );

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

@@ -0,0 +1,29 @@
+import { Fn, float, length, smoothstep, uv } from 'three/tsl';
+
+/**
+ * Returns a radial gradient from center (white) to edges (black).
+ * Useful for masking effects based on distance from center.
+ *
+ * @tsl
+ * @function
+ * @param {Node<float>} [scale=1.0] - Controls the size of the gradient (0 = all black, 1 = full circle).
+ * @param {Node<float>} [softness=0.5] - Controls the edge softness (0 = hard edge, 1 = soft gradient).
+ * @param {Node<vec2>} [coord=uv()] - The input UV coordinates.
+ * @return {Node<float>} 1.0 at center, 0.0 at edges.
+ */
+export const circle = Fn( ( [ scale = float( 1.0 ), softness = float( 0.5 ), coord = uv() ] ) => {
+
+	// Center UV coordinates (-0.5 to 0.5)
+	const centered = coord.sub( 0.5 );
+
+	// Calculate distance from center (0 at center, ~0.707 at corners)
+	const dist = length( centered ).mul( 2.0 );
+
+	// Calculate inner and outer edges based on scale and softness
+	const outer = scale;
+	const inner = scale.sub( softness.mul( scale ) );
+
+	// Smoothstep for soft/hard transition
+	return smoothstep( outer, inner, dist );
+
+} );

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

@@ -1,5 +1,5 @@
 import { Vector2, TempNode, NodeUpdateType } from 'three/webgpu';
-import { nodeObject, Fn, uv, uniform, convertToTexture, vec2, vec3, vec4, mat3, luminance, add } from 'three/tsl';
+import { Fn, uv, uniform, convertToTexture, vec2, vec3, vec4, mat3, luminance, add } from 'three/tsl';
 
 /**
  * Post processing node for detecting edges with a sobel filter.
@@ -165,4 +165,4 @@ export default SobelOperatorNode;
  * @param {Node<vec4>} node - The node that represents the input of the effect.
  * @returns {SobelOperatorNode}
  */
-export const sobel = ( node ) => nodeObject( new SobelOperatorNode( convertToTexture( node ) ) );
+export const sobel = ( node ) => new SobelOperatorNode( convertToTexture( node ) );

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

@@ -1,5 +1,4 @@
 import { StereoCamera, Vector2, PassNode, RendererUtils } from 'three/webgpu';
-import { nodeObject } from 'three/tsl';
 
 const _size = /*@__PURE__*/ new Vector2();
 
@@ -117,4 +116,4 @@ export default StereoPassNode;
  * @param {Camera} camera - The camera to render the scene with.
  * @returns {StereoPassNode}
  */
-export const stereoPass = ( scene, camera ) => nodeObject( new StereoPassNode( scene, camera ) );
+export const stereoPass = ( scene, camera ) => new StereoPassNode( scene, camera );

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, nodeObject, texture, uniform, uv, vec2, vec4, luminance, convertToTexture, passTexture, velocity, getViewPosition, viewZToPerspectiveDepth, struct, ivec2, mix } 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();
@@ -376,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.
@@ -434,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();
 
@@ -726,4 +723,4 @@ const _haltonOffsets = /*@__PURE__*/ Array.from(
  * @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 ) );
+
+} );

package/examples/jsm/tsl/math/Bayer.js

@@ -1,5 +1,5 @@
 import { TextureLoader } from 'three';
-import { Fn, int, ivec2, textureLoad } from 'three/tsl';
+import { Fn, int, ivec2, textureLoad, screenUV, screenSize, mod, floor, float, vec3 } from 'three/tsl';
 
 /**
  * @module Bayer
@@ -32,3 +32,42 @@ export const bayer16 = Fn( ( [ uv ] ) => {
 	return textureLoad( bayer16Texture, ivec2( uv ).mod( int( 16 ) ) );
 
 } );
+
+/**
+ * This TSL function applies Bayer dithering to a color input. It uses a 4x4 Bayer matrix
+ * pattern to add structured noise before color quantization, which helps reduce visible
+ * color banding when limiting color depth.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec3>} color - The input color to apply dithering to.
+ * @param {Node<float>} [steps=32] - The number of color steps per channel.
+ * @return {Node<vec3>} The dithered color ready for quantization.
+ *
+ * @example
+ * // Apply dithering with posterize
+ * const ditheredColor = bayerDither( inputColor, 32 );
+ * const finalColor = posterize( ditheredColor, 32 );
+ */
+export const bayerDither = Fn( ( [ color, steps = float( 32.0 ) ] ) => {
+
+	const screenPos = screenUV.mul( screenSize );
+	const x = mod( floor( screenPos.x ), float( 4.0 ) );
+	const y = mod( floor( screenPos.y ), float( 4.0 ) );
+
+	// Simplified Bayer matrix approximation
+	const bayer = mod(
+		floor( x.add( 1.0 ) ).mul( floor( y.add( 1.0 ) ) ).mul( 17.0 ),
+		16.0
+	).div( 16.0 ).sub( 0.5 );
+
+	// Apply dither offset before quantization
+	const ditherOffset = bayer.div( steps );
+
+	return vec3(
+		color.r.add( ditherOffset ),
+		color.g.add( ditherOffset ),
+		color.b.add( ditherOffset )
+	);
+
+} );