@gnsx/three 0.185.16 → 0.186.0

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

@@ -1,5 +1,5 @@
-import { RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, TempNode, NodeUpdateType } from '@gnsx/three/webgpu';
-import { Fn, float, uv, uniform, convertToTexture, vec2, vec4, passTexture, premultiplyAlpha, unpremultiplyAlpha } from '@gnsx/three/tsl';
+import { RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, TempNode, NodeUpdateType, warnOnce } from '@gnsx/three/webgpu';
+import { Fn, float, uv, uniform, convertToTexture, vec2, vec4, passTexture, premultiplyAlpha, unpremultiplyAlpha, context, texture } from '@gnsx/three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 
@@ -62,15 +62,6 @@ class GaussianBlurNode extends TempNode {
 		 */
 		this._invSize = uniform( new Vector2() );
 
-		/**
-		 * Gaussian blur is applied in two passes (horizontal, vertical).
-		 * This node controls the direction of each pass.
-		 *
-		 * @private
-		 * @type {UniformNode<vec2>}
-		 */
-		this._passDirection = uniform( new Vector2() );
-
 		/**
 		 * The render target used for the horizontal pass.
 		 *
@@ -104,7 +95,15 @@ class GaussianBlurNode extends TempNode {
 		 * @private
 		 * @type {?NodeMaterial}
 		 */
-		this._material = null;
+		this._hMaterial = null;
+
+		/**
+		 * The material for the vertical pass.
+		 *
+		 * @private
+		 * @type {?NodeMaterial}
+		 */
+		this._vMaterial = null;
 
 		/**
 		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node renders
@@ -173,12 +172,9 @@ class GaussianBlurNode extends TempNode {
 
 		//
 
-		const textureNode = this.textureNode;
-		const map = textureNode.value;
+		const map = this.textureNode.value;
 
-		const currentTexture = textureNode.value;
-
-		_quadMesh.material = this._material;
+		_quadMesh.material = this._hMaterial;
 
 		this.setSize( map.image.width, map.image.height );
 
@@ -191,25 +187,20 @@ class GaussianBlurNode extends TempNode {
 
 		renderer.setRenderTarget( this._horizontalRT );
 
-		this._passDirection.value.set( 1, 0 );
-
 		_quadMesh.name = 'Gaussian Blur [ Horizontal Pass ]';
 		_quadMesh.render( renderer );
 
 		// vertical
 
-		textureNode.value = this._horizontalRT.texture;
-		renderer.setRenderTarget( this._verticalRT );
+		_quadMesh.material = this._vMaterial;
 
-		this._passDirection.value.set( 0, 1 );
+		renderer.setRenderTarget( this._verticalRT );
 
 		_quadMesh.name = 'Gaussian Blur [ Vertical Pass ]';
 		_quadMesh.render( renderer );
 
 		// restore
 
-		textureNode.value = currentTexture;
-
 		RendererUtils.restoreRendererState( renderer, _rendererState );
 
 	}
@@ -233,36 +224,32 @@ class GaussianBlurNode extends TempNode {
 	 */
 	setup( builder ) {
 
-		const textureNode = this.textureNode;
-
-		//
-
 		const uvNode = uv();
 		const directionNode = vec2( this.directionNode || 1 );
 
-		let sampleTexture, output;
+		const blur = Fn( ( [ textureNode, passDirection ] ) => {
 
-		if ( this.premultipliedAlpha ) {
+			let sampleTexture, output;
 
-			// https://lisyarus.github.io/blog/posts/blur-coefficients-generator.html
+			if ( this.premultipliedAlpha ) {
 
-			sampleTexture = ( uv ) => premultiplyAlpha( textureNode.sample( uv ) );
-			output = ( color ) => unpremultiplyAlpha( color );
+				// https://lisyarus.github.io/blog/posts/blur-coefficients-generator.html
 
-		} else {
+				sampleTexture = ( uv ) => premultiplyAlpha( textureNode.sample( uv ) );
+				output = ( color ) => unpremultiplyAlpha( color );
 
-			sampleTexture = ( uv ) => textureNode.sample( uv );
-			output = ( color ) => color;
+			} else {
 
-		}
+				sampleTexture = ( uv ) => textureNode.sample( uv );
+				output = ( color ) => color;
 
-		const blur = Fn( () => {
+			}
 
 			const kernelSize = 3 + ( 2 * this.sigma );
 			const gaussianCoefficients = this._getCoefficients( kernelSize );
 
 			const invSize = this._invSize;
-			const direction = directionNode.mul( this._passDirection );
+			const direction = directionNode.mul( passDirection );
 
 			const diffuseSum = vec4( sampleTexture( uvNode ).mul( gaussianCoefficients[ 0 ] ) ).toVar();
 
@@ -286,15 +273,26 @@ class GaussianBlurNode extends TempNode {
 
 		//
 
-		const material = this._material || ( this._material = new NodeMaterial() );
-		material.fragmentNode = blur().context( builder.getSharedContext() );
-		material.name = 'Gaussian_blur';
-		material.needsUpdate = true;
+		const hTextureNode = this.textureNode;
+
+		this._hMaterial = this._hMaterial || ( new NodeMaterial() );
+		this._hMaterial.contextNode = context( builder.getSharedContext() );
+		this._hMaterial.fragmentNode = blur( hTextureNode, vec2( 1, 0 ) );
+		this._hMaterial.name = 'Gaussian_blur_horizontal';
+		this._hMaterial.needsUpdate = true;
+
+		const vTextureNode = texture( this._horizontalRT.texture, uv() );
+
+		this._vMaterial = this._vMaterial || new NodeMaterial();
+		this._vMaterial.fragmentNode = blur( vTextureNode, vec2( 0, 1 ) );
+		this._vMaterial.name = 'Gaussian_blur_vertical';
+		this._vMaterial.needsUpdate = true;
 
 		//
 
 		const properties = builder.getNodeProperties( this );
-		properties.textureNode = textureNode;
+		properties.hTextureNode = hTextureNode;
+		properties.vTextureNode = vTextureNode;
 
 		//
 
@@ -311,7 +309,17 @@ class GaussianBlurNode extends TempNode {
 		this._horizontalRT.dispose();
 		this._verticalRT.dispose();
 
-		if ( this._material !== null ) this._material.dispose();
+		if ( this._hMaterial !== null ) {
+
+			this._hMaterial.dispose();
+			this._vMaterial.dispose();
+
+			this._hMaterial = null;
+			this._vMaterial = null;
+
+		}
+
+		super.dispose();
 
 	}
 
@@ -327,13 +335,18 @@ class GaussianBlurNode extends TempNode {
 		const coefficients = [];
 		const sigma = kernelRadius / 3;
 
-		for ( let i = 0; i < kernelRadius; i ++ ) {
+		let sum = 1;
+		coefficients.push( 1 );
+
+		for ( let i = 1; i < kernelRadius; i ++ ) {
 
-			coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( sigma * sigma ) ) / sigma );
+			const w = Math.exp( - 0.5 * i * i / ( sigma * sigma ) );
+			coefficients.push( w );
+			sum += 2 * w;
 
 		}
 
-		return coefficients;
+		return coefficients.map( c => c / sum );
 
 	}
 
@@ -346,7 +359,7 @@ class GaussianBlurNode extends TempNode {
 	 */
 	get resolution() {
 
-		console.warn( 'THREE.GaussianBlurNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
+		warnOnce( 'THREE.GaussianBlurNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
 
 		return new Vector2( this.resolutionScale, this.resolutionScale );
 
@@ -354,7 +367,7 @@ class GaussianBlurNode extends TempNode {
 
 	set resolution( value ) {
 
-		console.warn( 'THREE.GaussianBlurNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
+		warnOnce( 'THREE.GaussianBlurNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
 
 		this.resolutionScale = value.x;
 
@@ -384,7 +397,7 @@ export const gaussianBlur = ( node, directionNode, sigma, options = {} ) => new
  *
  * @tsl
  * @function
- * @deprecated  since r180. Use `gaussianBlur()` with `premultipliedAlpha: true` option instead.
+ * @deprecated since r180. Use `gaussianBlur()` with `premultipliedAlpha: true` option instead.
  * @param {Node<vec4>} node - The node that represents the input of the effect.
  * @param {Node<vec2|float>} directionNode - Defines the direction and radius of the blur.
  * @param {number} sigma - Controls the kernel of the blur filter. Higher values mean a wider blur radius.
@@ -392,7 +405,7 @@ export const gaussianBlur = ( node, directionNode, sigma, options = {} ) => new
  */
 export function premultipliedGaussianBlur( node, directionNode, sigma ) {
 
-	console.warn( 'THREE.TSL: "premultipliedGaussianBlur()" is deprecated. Use "gaussianBlur()" with "premultipliedAlpha: true" option instead.' ); // deprecated, r180
+	warnOnce( 'THREE.TSL: "premultipliedGaussianBlur()" is deprecated. Use "gaussianBlur()" with "premultipliedAlpha: true" option instead.' ); // @deprecated r180
 
 	return gaussianBlur( node, directionNode, sigma, { premultipliedAlpha: true } );
 

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

@@ -1,5 +1,5 @@
 import { Frustum, Matrix4, RenderTarget, Vector2, RendererUtils, QuadMesh, TempNode, NodeMaterial, NodeUpdateType, Vector3, Plane } from '@gnsx/three/webgpu';
-import { cubeTexture, clamp, viewZToPerspectiveDepth, logarithmicDepthToViewZ, float, Loop, max, Fn, passTexture, uv, dot, uniformArray, If, getViewPosition, uniform, vec4, add, interleavedGradientNoise, screenCoordinate, round, mul, uint, mix, exp, vec3, distance, pow, reference, lightPosition, vec2, bool, texture, perspectiveDepthToViewZ, lightShadowMatrix } from '@gnsx/three/tsl';
+import { cubeTexture, clamp, viewZToPerspectiveDepth, logarithmicDepthToViewZ, float, Loop, max, Fn, passTexture, uv, dot, uniformArray, If, getViewPosition, uniform, vec4, add, interleavedGradientNoise, screenCoordinate, round, mul, uint, mix, exp, vec3, distance, pow, reference, lightPosition, vec2, bool, texture, perspectiveDepthToViewZ, lightShadowMatrix, context } from '@gnsx/three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -579,7 +579,8 @@ class GodraysNode extends TempNode {
 
 		} );
 
-		this._material.fragmentNode = godrays().context( builder.getSharedContext() );
+		this._material.contextNode = context( builder.getSharedContext() );
+		this._material.fragmentNode = godrays();
 		this._material.needsUpdate = true;
 
 		return this._textureNode;
@@ -592,6 +593,8 @@ class GodraysNode extends TempNode {
 	 */
 	dispose() {
 
+		super.dispose();
+
 		this._godraysRenderTarget.dispose();
 
 		this._material.dispose();

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

@@ -8,7 +8,7 @@
  */
 
 import { If, dot, equirectUV, float, luminance, max, normalize, texture, uniform, vec2, vec4 } from '@gnsx/three/tsl';
-import { ClampToEdgeWrapping, DataTexture, DataUtils, FloatType, HalfFloatType, LinearFilter, RedFormat, RepeatWrapping, Source, Vector2 } from '@gnsx/three/webgpu';
+import { ClampToEdgeWrapping, DataTexture, DataUtils, FloatType, HalfFloatType, LinearFilter, RedFormat, RepeatWrapping, TextureSource, Vector2 } from '@gnsx/three/webgpu';
 import { D_GTR, F_Schlick, GeometryTerm, SmithG, equirectDirPdf, misPowerHeuristic } from '../utils/SpecularHelpers.js';
 
 function colorToLuminance( r, g, b ) {
@@ -45,7 +45,7 @@ function binarySearchFindClosestIndexOf( array, targetValue, offset = 0, count =
 function preprocessEnvMap( envMap ) {
 
 	const map = envMap.clone();
-	map.source = new Source( { ...map.image } );
+	map.source = new TextureSource( { ...map.image } );
 	const { width, height, data } = map.image;
 
 	let newData = data;

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

@@ -1,5 +1,5 @@
 import { RenderTarget, Vector2, TempNode, NodeUpdateType, QuadMesh, RendererUtils, NodeMaterial } from '@gnsx/three/webgpu';
-import { convertToTexture, nodeObject, Fn, passTexture, uv, vec2, vec3, vec4, max, float, sub, int, Loop, fract, pow, distance } from '@gnsx/three/tsl';
+import { convertToTexture, nodeObject, Fn, passTexture, uv, vec2, vec3, vec4, max, float, sub, int, Loop, fract, pow, distance, context } from '@gnsx/three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -239,7 +239,8 @@ class LensflareNode extends TempNode {
 
 		} );
 
-		this._material.fragmentNode = lensflare().context( builder.getSharedContext() );
+		this._material.contextNode = context( builder.getSharedContext() );
+		this._material.fragmentNode = lensflare();
 		this._material.needsUpdate = true;
 
 		return this._textureNode;
@@ -252,6 +253,8 @@ class LensflareNode extends TempNode {
 	 */
 	dispose() {
 
+		super.dispose();
+
 		this._renderTarget.dispose();
 		this._material.dispose();
 

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

@@ -0,0 +1,352 @@
+import { PassNode, RenderTarget, BlendMode, RendererUtils, Vector2, HalfFloatType, UnsignedByteType, RedFormat, CustomBlending, NormalBlending, OneFactor, ZeroFactor, OneMinusSrcColorFactor } from '@gnsx/three/webgpu';
+import { float, mix, mrt, output, positionView, texture, vec4 } from '@gnsx/three/tsl';
+
+const _size = /*@__PURE__*/ new Vector2();
+
+let _rendererState, _sceneState;
+
+/**
+ * A render pass node that renders the scene with Order-Independent Transparency
+ * based on the Weighted Blended OIT technique by McGuire and Bavoil.
+ *
+ * Transparent objects are rendered in a separate pass into two accumulation
+ * targets (a weighted color sum and the pixel's revealage) which are
+ * then composited over the rest of the scene. Since the result does not depend
+ * on the draw order, artifacts from sorting-based transparency like popping or
+ * incorrectly resolved intersecting geometry are avoided.
+ *
+ * Only transparent materials using `NormalBlending` and no transmission qualify
+ * for OIT. All other objects are rendered as usual.
+ *
+ * MSAA is only supported with the WebGPU backend.
+ *
+ * MRT configurations assigned via `setMRT()` apply to the default pass only.
+ * OIT-qualified objects contribute to the color output but not to custom
+ * MRT outputs since a pixel may accumulate multiple transparent surfaces.
+ *
+ * ```js
+ * const renderPipeline = new THREE.RenderPipeline( renderer );
+ * renderPipeline.outputNode = oitPass( scene, camera );
+ * ```
+ *
+ * References:
+ * - {@link https://jcgt.org/published/0002/02/09/}
+ * - {@link https://casual-effects.blogspot.com/2014/03/weighted-blended-order-independent.html}
+ *
+ * @augments PassNode
+ * @three_import import { oitPass } from 'three/addons/tsl/display/OITPassNode.js';
+ */
+class OITPassNode extends PassNode {
+
+	static get type() {
+
+		return 'OITPassNode';
+
+	}
+
+	/**
+	 * Constructs a new OIT pass node.
+	 *
+	 * @param {Scene} scene - The scene to render.
+	 * @param {Camera} camera - The camera to render the scene with.
+	 * @param {Object} [options={}] - Options for the internal render target.
+	 */
+	constructor( scene, camera, options = {} ) {
+
+		super( PassNode.COLOR, scene, camera, options );
+
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isOITPassNode = true;
+
+		/**
+		 * The depth-based weight of a transparent fragment, see equations (7) to (9)
+		 * in the paper. When `null`, equation (9) is used. Must be assigned before
+		 * the first render.
+		 *
+		 * @type {?Node<float>}
+		 * @default null
+		 */
+		this.weightNode = null;
+
+		// the accumulation target shares the depth of the default pass so transparent
+		// fragments are depth-tested against the opaque scene (without depth writes)
+
+		const oitRenderTarget = new RenderTarget( 1, 1, { count: 2 } );
+		oitRenderTarget.depthTexture = this.renderTarget.depthTexture;
+
+		const accumTexture = oitRenderTarget.textures[ 0 ]; // RGBA16
+		accumTexture.name = 'accum';
+		accumTexture.type = HalfFloatType;
+
+		const revealageTexture = oitRenderTarget.textures[ 1 ]; // R8
+		revealageTexture.name = 'revealage';
+		revealageTexture.format = RedFormat;
+		revealageTexture.type = UnsignedByteType;
+
+		/**
+		 * The render target holding the OIT accumulation textures.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
+		this._oitRenderTarget = oitRenderTarget;
+
+		/**
+		 * The MRT configuration for the OIT pass.
+		 *
+		 * @private
+		 * @type {?MRTNode}
+		 */
+		this._oitMRTNode = null;
+
+		/**
+		 * The renderer of the current frame.
+		 *
+		 * @private
+		 * @type {?Renderer}
+		 */
+		this._renderer = null;
+
+		/**
+		 * Renders opaque objects and transparent objects that do not qualify for OIT.
+		 *
+		 * @private
+		 * @type {Function}
+		 */
+		this._defaultRenderObjectFunction = ( object, scene, camera, geometry, material, group, lightsNode, clippingContext, passId ) => {
+
+			if ( isOITCapable( material ) === false ) {
+
+				this._renderer.renderObject( object, scene, camera, geometry, material, group, lightsNode, clippingContext, passId );
+
+			}
+
+		};
+
+		/**
+		 * Renders OIT-qualified objects into the accumulation targets.
+		 *
+		 * @private
+		 * @type {Function}
+		 */
+		this._oitRenderObjectFunction = ( object, scene, camera, geometry, material, group, lightsNode, clippingContext, passId ) => {
+
+			if ( isOITCapable( material ) === true ) {
+
+				const currentDepthWrite = material.depthWrite;
+
+				material.depthWrite = false;
+
+				this._renderer.renderObject( object, scene, camera, geometry, material, group, lightsNode, clippingContext, passId );
+
+				material.depthWrite = currentDepthWrite;
+
+			}
+
+		};
+
+	}
+
+	/**
+	 * Returns the MRT configuration for the OIT pass.
+	 *
+	 * @private
+	 * @return {MRTNode} The MRT node.
+	 */
+	_getMRTNode() {
+
+		if ( this._oitMRTNode === null ) {
+
+			const alpha = output.a;
+
+			let weight = this.weightNode;
+
+			if ( weight === null ) {
+
+				// equation (9) from the paper, based on the linear eye-space depth
+
+				const z = positionView.z.negate();
+
+				weight = alpha.mul( float( 0.03 ).div( z.div( 200 ).pow( 4 ).add( 1e-5 ) ).clamp( 1e-2, 3e3 ) );
+
+			}
+
+			// since the revealage target is single-channel, the alpha must be blended
+			// via its red channel
+
+			const accumBlending = new BlendMode( CustomBlending );
+			accumBlending.blendSrc = OneFactor;
+			accumBlending.blendDst = OneFactor;
+
+			const revealageBlending = new BlendMode( CustomBlending );
+			revealageBlending.blendSrc = ZeroFactor;
+			revealageBlending.blendDst = OneMinusSrcColorFactor;
+
+			this._oitMRTNode = mrt( {
+				accum: vec4( output.rgb.mul( alpha ), alpha ).mul( weight ),
+				revealage: alpha
+			} ).setBlendMode( 'accum', accumBlending ).setBlendMode( 'revealage', revealageBlending )
+				.setClearColor( 'accum', 0x000000, 0 ).setClearColor( 'revealage', 0xffffff, 1 );
+
+		}
+
+		return this._oitMRTNode;
+
+	}
+
+	setSize( width, height ) {
+
+		super.setSize( width, height );
+
+		this._oitRenderTarget.setSize( this.renderTarget.width, this.renderTarget.height );
+
+	}
+
+	setup( builder ) {
+
+		const beautyNode = super.setup( builder );
+
+		// MSAA
+
+		if ( builder.renderer.backend.isWebGPUBackend === true ) {
+
+			// sample counts must match since the depth buffer is shared
+
+			this._oitRenderTarget.samples = this.renderTarget.samples;
+
+		} else {
+
+			// The WebGL backend does not support depth texture sharing with MSAA unless
+			// WEBGL_multisampled_render_to_texture is supported (which isn't available on most devices)
+
+			this.renderTarget.samples = 0;
+
+		}
+
+		// TSL
+
+		const accumNode = texture( this._oitRenderTarget.textures[ 0 ] );
+		const revealageNode = texture( this._oitRenderTarget.textures[ 1 ] ).r;
+
+		const accumColor = accumNode.rgb.div( accumNode.a.max( 1e-5 ) );
+
+		return vec4( mix( accumColor, beautyNode.rgb, revealageNode ), beautyNode.a );
+
+	}
+
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+		const { scene, camera } = this;
+
+		this._renderer = renderer;
+
+		renderer.getDrawingBufferSize( _size );
+		this.setSize( _size.width, _size.height );
+
+		_rendererState = RendererUtils.saveRendererState( renderer, _rendererState );
+
+		const currentAutoClearColor = renderer.autoClearColor;
+		const currentAutoClearDepth = renderer.autoClearDepth;
+		const currentAutoClearStencil = renderer.autoClearStencil;
+		const currentTransparent = renderer.transparent;
+		const currentOpaque = renderer.opaque;
+		const currentMask = camera.layers.mask;
+
+		this._cameraNear.value = camera.near;
+		this._cameraFar.value = camera.far;
+
+		if ( this._layers !== null ) {
+
+			camera.layers.mask = this._layers.mask;
+
+		}
+
+		renderer.autoClear = this.autoClear;
+		renderer.autoClearColor = this.autoClearColor;
+		renderer.autoClearDepth = this.autoClearDepth;
+		renderer.autoClearStencil = this.autoClearStencil;
+
+		// default pass: opaque objects and transparent objects that do not qualify for OIT
+
+		renderer.setMRT( this._mrt );
+		renderer.setRenderTarget( this.renderTarget );
+		renderer.setRenderObjectFunction( this._defaultRenderObjectFunction );
+
+		renderer.render( scene, camera );
+
+		// OIT pass: accumulate the weighted colors and the revealage of all OIT-qualified objects
+
+		_sceneState = RendererUtils.resetSceneState( scene, _sceneState ); // the background must not affect the accumulation targets
+
+		renderer.setRenderTarget( this._oitRenderTarget );
+		renderer.setMRT( this._getMRTNode() );
+		renderer.setRenderObjectFunction( this._oitRenderObjectFunction );
+		renderer.autoClearDepth = false; // the depth buffer is shared with the default pass
+		renderer.opaque = false;
+		renderer.transparent = true;
+
+		renderer.render( scene, camera );
+
+		// restore
+
+		RendererUtils.restoreSceneState( scene, _sceneState );
+		RendererUtils.restoreRendererState( renderer, _rendererState );
+
+		renderer.autoClearColor = currentAutoClearColor;
+		renderer.autoClearDepth = currentAutoClearDepth;
+		renderer.autoClearStencil = currentAutoClearStencil;
+		renderer.transparent = currentTransparent;
+		renderer.opaque = currentOpaque;
+
+		camera.layers.mask = currentMask;
+
+		this._renderer = null;
+
+	}
+
+	dispose() {
+
+		super.dispose();
+
+		this._oitRenderTarget.dispose();
+
+	}
+
+}
+
+/**
+ * Returns `true` if the given material qualifies for OIT.
+ *
+ * @param {Material} material - The material to check.
+ * @return {boolean} Whether the material qualifies for OIT or not.
+ */
+function isOITCapable( material ) {
+
+	return material.transparent === true && material.blending === NormalBlending &&
+		( material.transmission > 0 ) === false &&
+		! ( material.transmissionNode && material.transmissionNode.isNode ) &&
+		! ( material.backdropNode && material.backdropNode.isNode );
+
+}
+
+
+export default OITPassNode;
+
+/**
+ * TSL function for creating an OIT pass node.
+ *
+ * @tsl
+ * @function
+ * @param {Scene} scene - The scene to render.
+ * @param {Camera} camera - The camera to render the scene with.
+ * @param {Object} [options={}] - Options for the internal render target.
+ * @returns {OITPassNode}
+ */
+export const oitPass = ( scene, camera, options ) => new OITPassNode( scene, camera, options );

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

@@ -748,6 +748,8 @@ class OutlineNode extends TempNode {
 	 */
 	dispose() {
 
+		super.dispose();
+
 		this.selectedObjects.length = 0;
 
 		this._renderTargetDepthBuffer.dispose();

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

@@ -1,5 +1,5 @@
 import { NodeMaterial } from '@gnsx/three/webgpu';
-import { Fn, vec4, uv, If, mod, screenCoordinate } from '@gnsx/three/tsl';
+import { Fn, vec4, uv, If, mod, screenCoordinate, context } from '@gnsx/three/tsl';
 import StereoCompositePassNode from './StereoCompositePassNode.js';
 
 /**
@@ -66,7 +66,8 @@ class ParallaxBarrierPassNode extends StereoCompositePassNode {
 		} );
 
 		const material = this._material || ( this._material = new NodeMaterial() );
-		material.fragmentNode = parallaxBarrier().context( builder.getSharedContext() );
+		material.contextNode = context( builder.getSharedContext() );
+		material.fragmentNode = parallaxBarrier();
 		material.needsUpdate = true;
 
 		return super.setup( builder );