super-three 0.170.0 → 0.171.0

package/examples/jsm/transpiler/GLSLDecoder.js

@@ -30,6 +30,10 @@ const associativityRightToLeft = [
 	':'
 ];
 
+const glslToTSL = {
+	inversesqrt: 'inverseSqrt'
+};
+
 const spaceRegExp = /^((\t| )\n*)+/;
 const lineRegExp = /^\n+/;
 const commentRegExp = /^\/\*[\s\S]*?\*\//;
@@ -46,6 +50,12 @@ const operatorsRegExp = new RegExp( '^(\\' + [
 	'.', ',', ';', '!', '=', '~', '*', '/', '%', '+', '-', '<', '>', '&', '^', '|', '?', ':', '#'
 ].join( '$' ).split( '' ).join( '\\' ).replace( /\\\$/g, '|' ) + ')' );
 
+function getFunctionName( str ) {
+
+	return glslToTSL[ str ] || str;
+
+}
+
 function getGroupDelta( str ) {
 
 	if ( str === '(' || str === '[' || str === '{' ) return 1;
@@ -485,62 +495,84 @@ class GLSLDecoder {
 
 					// function call
 
-					const paramsTokens = this.parseFunctionParametersFromTokens( tokens.slice( 2, tokens.length - 1 ) );
+					const internalTokens = this.getTokensUntil( ')', tokens, 1 ).slice( 1, - 1 );
+
+					const paramsTokens = this.parseFunctionParametersFromTokens( internalTokens );
+
+					const functionCall = new FunctionCall( getFunctionName( firstToken.str ), paramsTokens );
+
+					const accessTokens = tokens.slice( 3 + internalTokens.length );
 
-					return new FunctionCall( firstToken.str, paramsTokens );
+					if ( accessTokens.length > 0 ) {
+
+						const elements = this.parseAccessorElementsFromTokens( accessTokens );
+
+						return new AccessorElements( functionCall, elements );
+
+					}
+
+					return functionCall;
 
 				} else if ( secondToken.str === '[' ) {
 
 					// array accessor
 
-					const elements = [];
+					const elements = this.parseAccessorElementsFromTokens( tokens.slice( 1 ) );
 
-					let currentTokens = tokens.slice( 1 );
+					return new AccessorElements( new Accessor( firstToken.str ), elements );
 
-					while ( currentTokens.length > 0 ) {
+				}
 
-						const token = currentTokens[ 0 ];
+			}
 
-						if ( token.str === '[' ) {
+			return new Accessor( firstToken.str );
 
-							const accessorTokens = this.getTokensUntil( ']', currentTokens );
+		}
 
-							const element = this.parseExpressionFromTokens( accessorTokens.slice( 1, accessorTokens.length - 1 ) );
+	}
 
-							currentTokens = currentTokens.slice( accessorTokens.length );
+	parseAccessorElementsFromTokens( tokens ) {
 
-							elements.push( new DynamicElement( element ) );
+		const elements = [];
 
-						} else if ( token.str === '.' ) {
+		let currentTokens = tokens;
 
-							const accessorTokens = currentTokens.slice( 1, 2 );
+		while ( currentTokens.length > 0 ) {
 
-							const element = this.parseExpressionFromTokens( accessorTokens );
+			const token = currentTokens[ 0 ];
 
-							currentTokens = currentTokens.slice( 2 );
+			if ( token.str === '[' ) {
 
-							elements.push( new StaticElement( element ) );
+				const accessorTokens = this.getTokensUntil( ']', currentTokens );
 
-						} else {
+				const element = this.parseExpressionFromTokens( accessorTokens.slice( 1, accessorTokens.length - 1 ) );
 
-							console.error( 'Unknown accessor expression', token );
+				currentTokens = currentTokens.slice( accessorTokens.length );
 
-							break;
+				elements.push( new DynamicElement( element ) );
 
-						}
+			} else if ( token.str === '.' ) {
 
-					}
+				const accessorTokens = currentTokens.slice( 1, 2 );
 
-					return new AccessorElements( firstToken.str, elements );
+				const element = this.parseExpressionFromTokens( accessorTokens );
 
-				}
+				currentTokens = currentTokens.slice( 2 );
 
-			}
+				elements.push( new StaticElement( element ) );
 
-			return new Accessor( firstToken.str );
+			} else {
+
+				console.error( 'Unknown accessor expression', token );
+
+				break;
+
+			}
 
 		}
 
+		return elements;
+
 	}
 
 	parseFunctionParametersFromTokens( tokens ) {

package/examples/jsm/transpiler/TSLEncoder.js

@@ -1,4 +1,5 @@
-import * as THREE from 'three';
+import { REVISION } from 'three/webgpu';
+import * as TSL from 'three/tsl';
 
 import { VariableDeclaration, Accessor } from './AST.js';
 
@@ -43,7 +44,7 @@ const unaryLib = {
 	'--': 'decrement' // decrementBefore
 };
 
-const isPrimitive = ( value ) => /^(true|false|-?\d)/.test( value );
+const isPrimitive = ( value ) => /^(true|false|-?(\d|\.\d))/.test( value );
 
 class TSLEncoder {
 
@@ -68,7 +69,7 @@ class TSLEncoder {
 
 		name = name.split( '.' )[ 0 ];
 
-		if ( THREE[ name ] !== undefined && this.global.has( name ) === false && this._currentProperties[ name ] === undefined ) {
+		if ( TSL[ name ] !== undefined && this.global.has( name ) === false && this._currentProperties[ name ] === undefined ) {
 
 			this.imports.add( name );
 
@@ -158,6 +159,10 @@ class TSLEncoder {
 
 				this.addImport( opFn );
 
+			} else if ( opFn === '.' ) {
+
+				code = left + opFn + right;
+
 			} else {
 
 				code = left + '.' + opFn + '( ' + right + ' )';
@@ -192,7 +197,7 @@ class TSLEncoder {
 
 		} else if ( node.isAccessorElements ) {
 
-			code = node.property;
+			code = this.emitExpression( node.object );
 
 			for ( const element of node.elements ) {
 
@@ -248,7 +253,7 @@ class TSLEncoder {
 
 		} else if ( node.isUnary && node.expression.isNumber ) {
 
-			code = node.type + ' ' + node.expression.value;
+			code = node.expression.type + '( ' + node.type + ' ' + node.expression.value + ' )';
 
 		} else if ( node.isUnary ) {
 
@@ -690,7 +695,7 @@ ${ this.tab }} )`;
 		const imports = [ ...this.imports ];
 		const exports = [ ...this.global ];
 
-		let header = '// Three.js Transpiler r' + THREE.REVISION + '\n\n';
+		let header = '// Three.js Transpiler r' + REVISION + '\n\n';
 		let footer = '';
 
 		if ( this.iife ) {

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

@@ -1,5 +1,5 @@
-import { RenderTarget, Vector2, PostProcessingUtils } from 'three';
-import { TempNode, nodeObject, Fn, float, vec4, NodeUpdateType, uv, texture, passTexture, uniform, sign, max, convertToTexture, QuadMesh, NodeMaterial } from 'three/tsl';
+import { RenderTarget, Vector2, QuadMesh, NodeMaterial, PostProcessingUtils, TempNode, NodeUpdateType } from 'three/webgpu';
+import { nodeObject, Fn, float, vec4, uv, texture, passTexture, uniform, sign, max, convertToTexture } from 'three/tsl';
 
 const _size = /*@__PURE__*/ new Vector2();
 const _quadMeshComp = /*@__PURE__*/ new QuadMesh();
@@ -16,7 +16,7 @@ class AfterImageNode extends TempNode {
 
 	constructor( textureNode, damp = 0.96 ) {
 
-		super( textureNode );
+		super( 'vec4' );
 
 		this.textureNode = textureNode;
 		this.textureNodeOld = texture();

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

@@ -1,5 +1,5 @@
-import { Matrix3 } from 'three';
-import { clamp, nodeObject, Fn, vec4, uv, uniform, max, NodeMaterial } from 'three/tsl';
+import { Matrix3, NodeMaterial } from 'three/webgpu';
+import { clamp, nodeObject, Fn, vec4, uv, uniform, max } from 'three/tsl';
 import StereoCompositePassNode from './StereoCompositePassNode.js';
 
 class AnaglyphPassNode extends StereoCompositePassNode {

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

@@ -1,5 +1,5 @@
-import { RenderTarget, Vector2, PostProcessingUtils } from 'three';
-import { TempNode, nodeObject, Fn, float, NodeUpdateType, uv, passTexture, uniform, convertToTexture, QuadMesh, NodeMaterial, vec2, vec3, Loop, threshold } from 'three/tsl';
+import { RenderTarget, Vector2, TempNode, QuadMesh, NodeMaterial, PostProcessingUtils } from 'three/webgpu';
+import { nodeObject, Fn, float, NodeUpdateType, uv, passTexture, uniform, convertToTexture, vec2, vec3, Loop, threshold } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 

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

@@ -1,5 +1,5 @@
-import { HalfFloatType, RenderTarget, Vector2, Vector3, PostProcessingUtils } from 'three';
-import { TempNode, nodeObject, Fn, float, NodeUpdateType, uv, passTexture, uniform, QuadMesh, NodeMaterial, Loop, texture, luminance, smoothstep, mix, vec4, uniformArray, add, int } from 'three/tsl';
+import { HalfFloatType, RenderTarget, Vector2, Vector3, TempNode, QuadMesh, NodeMaterial, PostProcessingUtils, NodeUpdateType } from 'three/webgpu';
+import { nodeObject, Fn, float, uv, passTexture, uniform, Loop, texture, luminance, smoothstep, mix, vec4, uniformArray, add, int } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -19,7 +19,7 @@ class BloomNode extends TempNode {
 
 	constructor( inputNode, strength = 1, radius = 0, threshold = 0 ) {
 
-		super();
+		super( 'vec4' );
 
 		this.inputNode = inputNode;
 		this.strength = uniform( strength );

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

@@ -1,5 +1,6 @@
-import { Vector2, Vector3 } from 'three';
-import { getNormalFromDepth, getViewPosition, convertToTexture, TempNode, nodeObject, Fn, float, NodeUpdateType, uv, uniform, Loop, luminance, vec2, vec3, vec4, uniformArray, int, dot, max, pow, abs, If, textureSize, sin, cos, mat2, PI } from 'three/tsl';
+import { DataTexture, RepeatWrapping, Vector2, Vector3, TempNode } from 'three/webgpu';
+import { texture, getNormalFromDepth, getViewPosition, convertToTexture, nodeObject, Fn, float, NodeUpdateType, uv, uniform, Loop, luminance, vec2, vec3, vec4, uniformArray, int, dot, max, pow, abs, If, textureSize, sin, cos, mat2, PI } from 'three/tsl';
+import { SimplexNoise } from '../../math/SimplexNoise.js';
 
 class DenoiseNode extends TempNode {
 
@@ -9,26 +10,29 @@ class DenoiseNode extends TempNode {
 
 	}
 
-	constructor( textureNode, depthNode, normalNode, noiseNode, camera ) {
+	constructor( textureNode, depthNode, normalNode, camera ) {
 
-		super();
+		super( 'vec4' );
 
 		this.textureNode = textureNode;
 		this.depthNode = depthNode;
 		this.normalNode = normalNode;
-		this.noiseNode = noiseNode;
 
-		this.cameraProjectionMatrixInverse = uniform( camera.projectionMatrixInverse );
+		this.noiseNode = texture( generateDefaultNoise() );
+
 		this.lumaPhi = uniform( 5 );
 		this.depthPhi = uniform( 5 );
 		this.normalPhi = uniform( 5 );
 		this.radius = uniform( 5 );
 		this.index = uniform( 0 );
 
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
+		// uniforms
+
 		this._resolution = uniform( new Vector2() );
 		this._sampleVectors = uniformArray( generatePdSamplePointInitializer( 16, 2, 1 ) );
-
-		this.updateBeforeType = NodeUpdateType.FRAME;
+		this._cameraProjectionMatrixInverse = uniform( camera.projectionMatrixInverse );
 
 	}
 
@@ -46,7 +50,7 @@ class DenoiseNode extends TempNode {
 
 		const sampleTexture = ( uv ) => this.textureNode.uv( uv );
 		const sampleDepth = ( uv ) => this.depthNode.uv( uv ).x;
-		const sampleNormal = ( uv ) => ( this.normalNode !== null ) ? this.normalNode.uv( uv ).rgb.normalize() : getNormalFromDepth( uv, this.depthNode.value, this.cameraProjectionMatrixInverse );
+		const sampleNormal = ( uv ) => ( this.normalNode !== null ) ? this.normalNode.uv( uv ).rgb.normalize() : getNormalFromDepth( uv, this.depthNode.value, this._cameraProjectionMatrixInverse );
 		const sampleNoise = ( uv ) => this.noiseNode.uv( uv );
 
 		const denoiseSample = Fn( ( [ center, viewNormal, viewPosition, sampleUv ] ) => {
@@ -55,7 +59,7 @@ class DenoiseNode extends TempNode {
 			const depth = sampleDepth( sampleUv ).toVar();
 			const normal = sampleNormal( sampleUv ).toVar();
 			const neighborColor = texel.rgb;
-			const viewPos = getViewPosition( sampleUv, depth, this.cameraProjectionMatrixInverse ).toVar();
+			const viewPos = getViewPosition( sampleUv, depth, this._cameraProjectionMatrixInverse ).toVar();
 
 			const normalDiff = dot( viewNormal, normal ).toVar();
 			const normalSimilarity = pow( max( normalDiff, 0 ), this.normalPhi ).toVar();
@@ -84,7 +88,7 @@ class DenoiseNode extends TempNode {
 
 			const center = vec3( texel.rgb ).toVar();
 
-			const viewPosition = getViewPosition( uvNode, depth, this.cameraProjectionMatrixInverse ).toVar();
+			const viewPosition = getViewPosition( uvNode, depth, this._cameraProjectionMatrixInverse ).toVar();
 
 			const noiseResolution = textureSize( this.noiseNode, 0 );
 			let noiseUv = vec2( uvNode.x, uvNode.y.oneMinus() );
@@ -178,4 +182,36 @@ function generateDenoiseSamples( numSamples, numRings, radiusExponent ) {
 
 }
 
-export const denoise = ( node, depthNode, normalNode, noiseNode, camera ) => nodeObject( new DenoiseNode( convertToTexture( node ), nodeObject( depthNode ), nodeObject( normalNode ), nodeObject( noiseNode ), camera ) );
+function generateDefaultNoise( size = 64 ) {
+
+	const simplex = new SimplexNoise();
+
+	const arraySize = size * size * 4;
+	const data = new Uint8Array( arraySize );
+
+	for ( let i = 0; i < size; i ++ ) {
+
+		for ( let j = 0; j < size; j ++ ) {
+
+			const x = i;
+			const y = j;
+
+			data[ ( i * size + j ) * 4 ] = ( simplex.noise( x, y ) * 0.5 + 0.5 ) * 255;
+			data[ ( i * size + j ) * 4 + 1 ] = ( simplex.noise( x + size, y ) * 0.5 + 0.5 ) * 255;
+			data[ ( i * size + j ) * 4 + 2 ] = ( simplex.noise( x, y + size ) * 0.5 + 0.5 ) * 255;
+			data[ ( i * size + j ) * 4 + 3 ] = ( simplex.noise( x + size, y + size ) * 0.5 + 0.5 ) * 255;
+
+		}
+
+	}
+
+	const noiseTexture = new DataTexture( data, size, size );
+	noiseTexture.wrapS = RepeatWrapping;
+	noiseTexture.wrapT = RepeatWrapping;
+	noiseTexture.needsUpdate = true;
+
+	return noiseTexture;
+
+}
+
+export const denoise = ( node, depthNode, normalNode, camera ) => nodeObject( new DenoiseNode( convertToTexture( node ), nodeObject( depthNode ), nodeObject( normalNode ), camera ) );

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

@@ -1,4 +1,5 @@
-import { convertToTexture, TempNode, nodeObject, Fn, NodeUpdateType, uv, uniform, vec2, vec4, clamp } from 'three/tsl';
+import { TempNode, NodeUpdateType } from 'three/webgpu';
+import { convertToTexture, nodeObject, Fn, uv, uniform, vec2, vec4, clamp } from 'three/tsl';
 
 class DepthOfFieldNode extends TempNode {
 
@@ -10,7 +11,7 @@ class DepthOfFieldNode extends TempNode {
 
 	constructor( textureNode, viewZNode, focusNode, apertureNode, maxblurNode ) {
 
-		super();
+		super( 'vec4' );
 
 		this.textureNode = textureNode;
 		this.viewZNode = viewZNode;

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

@@ -1,5 +1,5 @@
-import { Vector2 } from 'three';
-import { TempNode, nodeObject, Fn, uv, uniform, vec2, vec3, sin, cos, add, vec4, screenSize } from 'three/tsl';
+import { Vector2, TempNode } from 'three/webgpu';
+import { nodeObject, Fn, uv, uniform, vec2, vec3, sin, cos, add, vec4, screenSize } from 'three/tsl';
 
 class DotScreenNode extends TempNode {
 

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

@@ -1,5 +1,5 @@
-import { Vector2 } from 'three';
-import { TempNode, nodeObject, Fn, uniformArray, select, float, NodeUpdateType, uv, dot, clamp, uniform, convertToTexture, smoothstep, bool, vec2, vec3, If, Loop, max, min, Break, abs } from 'three/tsl';
+import { Vector2, TempNode } from 'three/webgpu';
+import { nodeObject, Fn, uniformArray, select, float, NodeUpdateType, uv, dot, clamp, uniform, convertToTexture, smoothstep, bool, vec2, vec3, If, Loop, max, min, Break, abs } from 'three/tsl';
 
 class FXAANode extends TempNode {
 
@@ -11,7 +11,7 @@ class FXAANode extends TempNode {
 
 	constructor( textureNode ) {
 
-		super();
+		super( 'vec4' );
 
 		this.textureNode = textureNode;
 

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

@@ -1,4 +1,5 @@
-import { TempNode, rand, Fn, fract, time, uv, clamp, mix, vec4, nodeProxy } from 'three/tsl';
+import { TempNode } from 'three/webgpu';
+import { rand, Fn, fract, time, uv, clamp, mix, vec4, nodeProxy } from 'three/tsl';
 
 class FilmNode extends TempNode {
 
@@ -10,7 +11,7 @@ class FilmNode extends TempNode {
 
 	constructor( inputNode, intensityNode = null, uvNode = null ) {
 
-		super();
+		super( 'vec4' );
 
 		this.inputNode = inputNode;
 		this.intensityNode = intensityNode;

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

@@ -1,11 +1,15 @@
-import { DataTexture, RenderTarget, RepeatWrapping, Vector2, Vector3, PostProcessingUtils } from 'three';
-import { getNormalFromDepth, getScreenPosition, getViewPosition, QuadMesh, TempNode, nodeObject, Fn, float, NodeUpdateType, uv, uniform, Loop, vec2, vec3, vec4, int, dot, max, pow, abs, If, textureSize, sin, cos, PI, texture, passTexture, mat3, add, normalize, mul, cross, div, mix, sqrt, sub, acos, clamp, NodeMaterial } from 'three/tsl';
+import { DataTexture, RenderTarget, RepeatWrapping, Vector2, Vector3, TempNode, QuadMesh, NodeMaterial, PostProcessingUtils } from 'three/webgpu';
+import { reference, logarithmicDepthToViewZ, viewZToPerspectiveDepth, getNormalFromDepth, getScreenPosition, getViewPosition, nodeObject, Fn, float, NodeUpdateType, uv, uniform, Loop, vec2, vec3, vec4, int, dot, max, pow, abs, If, textureSize, sin, cos, PI, texture, passTexture, mat3, add, normalize, mul, cross, div, mix, sqrt, sub, acos, clamp } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
 
 let _rendererState;
 
+/**
+ * References:
+ * https://www.activision.com/cdn/research/Practical_Real_Time_Strategies_for_Accurate_Indirect_Occlusion_NEW%20VERSION_COLOR.pdf
+ */
 class GTAONode extends TempNode {
 
 	static get type() {
@@ -16,31 +20,44 @@ class GTAONode extends TempNode {
 
 	constructor( depthNode, normalNode, camera ) {
 
-		super();
+		super( 'vec4' );
 
 		this.depthNode = depthNode;
 		this.normalNode = normalNode;
 
+		this.resolutionScale = 1;
+
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
+		// render targets
+
+		this._aoRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false } );
+		this._aoRenderTarget.texture.name = 'GTAONode.AO';
+
+		// uniforms
+
 		this.radius = uniform( 0.25 );
 		this.resolution = uniform( new Vector2() );
 		this.thickness = uniform( 1 );
 		this.distanceExponent = uniform( 1 );
 		this.distanceFallOff = uniform( 1 );
 		this.scale = uniform( 1 );
-		this.noiseNode = texture( generateMagicSquareNoise() );
+		this.samples = uniform( 16 );
 
-		this.cameraProjectionMatrix = uniform( camera.projectionMatrix );
-		this.cameraProjectionMatrixInverse = uniform( camera.projectionMatrixInverse );
+		this._noiseNode = texture( generateMagicSquareNoise() );
+		this._cameraProjectionMatrix = uniform( camera.projectionMatrix );
+		this._cameraProjectionMatrixInverse = uniform( camera.projectionMatrixInverse );
+		this._cameraNear = reference( 'near', 'float', camera );
+		this._cameraFar = reference( 'far', 'float', camera );
 
-		this.SAMPLES = uniform( 16 );
+		// materials
 
-		this._aoRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false } );
-		this._aoRenderTarget.texture.name = 'GTAONode.AO';
+		this._material = new NodeMaterial();
+		this._material.name = 'GTAO';
 
-		this._material = null;
-		this._textureNode = passTexture( this, this._aoRenderTarget.texture );
+		//
 
-		this.updateBeforeType = NodeUpdateType.FRAME;
+		this._textureNode = passTexture( this, this._aoRenderTarget.texture );
 
 	}
 
@@ -52,6 +69,9 @@ class GTAONode extends TempNode {
 
 	setSize( width, height ) {
 
+		width = Math.round( this.resolutionScale * width );
+		height = Math.round( this.resolutionScale * height );
+
 		this.resolution.value.set( width, height );
 		this._aoRenderTarget.setSize( width, height );
 
@@ -89,9 +109,24 @@ class GTAONode extends TempNode {
 
 		const uvNode = uv();
 
-		const sampleDepth = ( uv ) => this.depthNode.uv( uv ).x;
-		const sampleNoise = ( uv ) => this.noiseNode.uv( uv );
-		const sampleNormal = ( uv ) => ( this.normalNode !== null ) ? this.normalNode.uv( uv ).rgb.normalize() : getNormalFromDepth( uv, this.depthNode.value, this.cameraProjectionMatrixInverse );
+		const sampleDepth = ( uv ) => {
+
+			const depth = this.depthNode.uv( 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 sampleNoise = ( uv ) => this._noiseNode.uv( uv );
+		const sampleNormal = ( uv ) => ( this.normalNode !== null ) ? this.normalNode.uv( uv ).rgb.normalize() : getNormalFromDepth( uv, this.depthNode.value, this._cameraProjectionMatrixInverse );
 
 		const ao = Fn( () => {
 
@@ -99,12 +134,12 @@ class GTAONode extends TempNode {
 
 			depth.greaterThanEqual( 1.0 ).discard();
 
-			const viewPosition = getViewPosition( uvNode, depth, this.cameraProjectionMatrixInverse ).toVar();
+			const viewPosition = getViewPosition( uvNode, depth, this._cameraProjectionMatrixInverse ).toVar();
 			const viewNormal = sampleNormal( uvNode ).toVar();
 
 			const radiusToUse = this.radius;
 
-			const noiseResolution = textureSize( this.noiseNode, 0 );
+			const noiseResolution = textureSize( this._noiseNode, 0 );
 			let noiseUv = vec2( uvNode.x, uvNode.y.oneMinus() );
 			noiseUv = noiseUv.mul( this.resolution.div( noiseResolution ) );
 			const noiseTexel = sampleNoise( noiseUv );
@@ -113,8 +148,8 @@ class GTAONode extends TempNode {
 			const bitangent = vec3( tangent.y.mul( - 1.0 ), tangent.x, 0.0 );
 			const kernelMatrix = mat3( tangent, bitangent, vec3( 0.0, 0.0, 1.0 ) );
 
-			const DIRECTIONS = this.SAMPLES.lessThan( 30 ).select( 3, 5 ).toVar();
-			const STEPS = add( this.SAMPLES, DIRECTIONS.sub( 1 ) ).div( DIRECTIONS ).toVar();
+			const DIRECTIONS = this.samples.lessThan( 30 ).select( 3, 5 ).toVar();
+			const STEPS = add( this.samples, DIRECTIONS.sub( 1 ) ).div( DIRECTIONS ).toVar();
 
 			const ao = float( 0 ).toVar();
 
@@ -138,9 +173,9 @@ class GTAONode extends TempNode {
 
 					// x
 
-					const sampleScreenPositionX = getScreenPosition( viewPosition.add( sampleViewOffset ), this.cameraProjectionMatrix ).toVar();
+					const sampleScreenPositionX = getScreenPosition( viewPosition.add( sampleViewOffset ), this._cameraProjectionMatrix ).toVar();
 					const sampleDepthX = sampleDepth( sampleScreenPositionX ).toVar();
-					const sampleSceneViewPositionX = getViewPosition( sampleScreenPositionX, sampleDepthX, this.cameraProjectionMatrixInverse ).toVar();
+					const sampleSceneViewPositionX = getViewPosition( sampleScreenPositionX, sampleDepthX, this._cameraProjectionMatrixInverse ).toVar();
 					const viewDeltaX = sampleSceneViewPositionX.sub( viewPosition ).toVar();
 
 					If( abs( viewDeltaX.z ).lessThan( this.thickness ), () => {
@@ -152,9 +187,9 @@ class GTAONode extends TempNode {
 
 					// y
 
-					const sampleScreenPositionY = getScreenPosition( viewPosition.sub( sampleViewOffset ), this.cameraProjectionMatrix ).toVar();
+					const sampleScreenPositionY = getScreenPosition( viewPosition.sub( sampleViewOffset ), this._cameraProjectionMatrix ).toVar();
 					const sampleDepthY = sampleDepth( sampleScreenPositionY ).toVar();
-					const sampleSceneViewPositionY = getViewPosition( sampleScreenPositionY, sampleDepthY, this.cameraProjectionMatrixInverse ).toVar();
+					const sampleSceneViewPositionY = getViewPosition( sampleScreenPositionY, sampleDepthY, this._cameraProjectionMatrixInverse ).toVar();
 					const viewDeltaY = sampleSceneViewPositionY.sub( viewPosition ).toVar();
 
 					If( abs( viewDeltaY.z ).lessThan( this.thickness ), () => {
@@ -183,10 +218,8 @@ class GTAONode extends TempNode {
 
 		} );
 
-		const material = this._material || ( this._material = new NodeMaterial() );
-		material.fragmentNode = ao().context( builder.getSharedContext() );
-		material.name = 'GTAO';
-		material.needsUpdate = true;
+		this._material.fragmentNode = ao().context( builder.getSharedContext() );
+		this._material.needsUpdate = true;
 
 		//
 
@@ -198,6 +231,8 @@ class GTAONode extends TempNode {
 
 		this._aoRenderTarget.dispose();
 
+		this._material.dispose();
+
 	}
 
 }

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

@@ -1,11 +1,10 @@
-import { RenderTarget, Vector2, PostProcessingUtils } from 'three';
-import { TempNode, nodeObject, Fn, If, float, NodeUpdateType, uv, uniform, convertToTexture, vec2, vec4, QuadMesh, passTexture, mul, NodeMaterial } from 'three/tsl';
+import { RenderTarget, Vector2, NodeMaterial, PostProcessingUtils, QuadMesh, TempNode, NodeUpdateType } from 'three/webgpu';
+import { nodeObject, Fn, If, float, uv, uniform, convertToTexture, vec2, vec4, passTexture, mul } from 'three/tsl';
 
 // WebGPU: The use of a single QuadMesh for both gaussian blur passes results in a single RenderObject with a SampledTexture binding that
 // alternates between source textures and triggers creation of new BindGroups and BindGroupLayouts every frame.
 
-const _quadMesh1 = /*@__PURE__*/ new QuadMesh();
-const _quadMesh2 = /*@__PURE__*/ new QuadMesh();
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
 
 let _rendererState;
 
@@ -108,8 +107,7 @@ class GaussianBlurNode extends TempNode {
 
 		const currentTexture = textureNode.value;
 
-		_quadMesh1.material = this._material;
-		_quadMesh2.material = this._material;
+		_quadMesh.material = this._material;
 
 		this.setSize( map.image.width, map.image.height );
 
@@ -124,7 +122,7 @@ class GaussianBlurNode extends TempNode {
 
 		this._passDirection.value.set( 1, 0 );
 
-		_quadMesh1.render( renderer );
+		_quadMesh.render( renderer );
 
 		// vertical
 
@@ -133,7 +131,7 @@ class GaussianBlurNode extends TempNode {
 
 		this._passDirection.value.set( 0, 1 );
 
-		_quadMesh2.render( renderer );
+		_quadMesh.render( renderer );
 
 		// restore
 

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

@@ -1,5 +1,5 @@
-import { RenderTarget, Vector2 } from 'three';
-import { convertToTexture, TempNode, nodeObject, Fn, NodeUpdateType, QuadMesh, PostProcessingUtils, NodeMaterial, passTexture, uv, vec2, vec3, vec4, max, float, sub, int, Loop, fract, pow, distance } from 'three/tsl';
+import { RenderTarget, Vector2, TempNode, NodeUpdateType, QuadMesh, PostProcessingUtils, NodeMaterial } from 'three/webgpu';
+import { convertToTexture, nodeObject, Fn, passTexture, uv, vec2, vec3, vec4, max, float, sub, int, Loop, fract, pow, distance } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -20,7 +20,7 @@ class LensflareNode extends TempNode {
 
 	constructor( textureNode, params = {} ) {
 
-		super();
+		super( 'vec4' );
 
 		this.textureNode = textureNode;