@unikia/upe-renderer 0.186.110 → 0.187.11

package/examples/jsm/postprocessing/BokehPass.js

@@ -17,7 +17,7 @@ import { BokehShader } from '../shaders/BokehShader.js';
  *
  * ```js
  * const bokehPass = new BokehPass( scene, camera, {
- * 	focus: 500
+ * 	focus: 500,
  * 	aperture: 5,
  * 	maxblur: 0.01
  * } );

package/examples/jsm/postprocessing/GTAOPass.js

@@ -250,7 +250,7 @@ class GTAOPass extends Pass {
 		this.height = height;
 
 		this.gtaoRenderTarget.setSize( width, height );
-		this.normalRenderTarget.setSize( width, height );
+		if ( this.normalRenderTarget ) this.normalRenderTarget.setSize( width, height );
 		this.pdRenderTarget.setSize( width, height );
 
 		this.gtaoMaterial.uniforms.resolution.value.set( width, height );
@@ -270,7 +270,7 @@ class GTAOPass extends Pass {
 
 		this.gtaoNoiseTexture.dispose();
 		this.pdNoiseTexture.dispose();
-		this.normalRenderTarget.dispose();
+		if ( this.normalRenderTarget ) this.normalRenderTarget.dispose();
 		this.gtaoRenderTarget.dispose();
 		this.pdRenderTarget.dispose();
 		this.normalMaterial.dispose();
@@ -296,10 +296,13 @@ class GTAOPass extends Pass {
 	/**
 	 * Configures the GBuffer of this pass. If no arguments are passed,
 	 * the pass creates an internal render target for holding depth
-	 * and normal data.
+	 * and normal data. External depth and normal data must use separate
+	 * textures and remain owned by the caller.
+	 * If no normal texture is supplied, normals are reconstructed from depth
+	 * for AO and denoising, and the normal output displays black.
 	 *
 	 * @param {DepthTexture} [depthTexture] - The depth texture.
-	 * @param {DepthTexture} [normalTexture] - The normal texture.
+	 * @param {Texture} [normalTexture] - The normal texture.
 	 */
 	setGBuffer( depthTexture, normalTexture ) {
 
@@ -311,34 +314,39 @@ class GTAOPass extends Pass {
 
 		} else {
 
-			this.depthTexture = new DepthTexture();
-			this.depthTexture.format = DepthStencilFormat;
-			this.depthTexture.type = UnsignedInt248Type;
-			this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
-				minFilter: NearestFilter,
-				magFilter: NearestFilter,
-				type: HalfFloatType,
-				depthTexture: this.depthTexture
-			} );
+			if ( this.normalRenderTarget === undefined ) {
+
+				const depthTexture = new DepthTexture();
+				depthTexture.format = DepthStencilFormat;
+				depthTexture.type = UnsignedInt248Type;
+				this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
+					minFilter: NearestFilter,
+					magFilter: NearestFilter,
+					type: HalfFloatType,
+					depthTexture: depthTexture
+				} );
+
+			}
+
+			this.depthTexture = this.normalRenderTarget.depthTexture;
 			this.normalTexture = this.normalRenderTarget.texture;
 			this._renderGBuffer = true;
 
 		}
 
 		const normalVectorType = ( this.normalTexture ) ? 1 : 0;
-		const depthValueSource = ( this.depthTexture === this.normalTexture ) ? 'w' : 'x';
 
 		this.gtaoMaterial.defines.NORMAL_VECTOR_TYPE = normalVectorType;
-		this.gtaoMaterial.defines.DEPTH_SWIZZLING = depthValueSource;
+		this.gtaoMaterial.needsUpdate = true;
 		this.gtaoMaterial.uniforms.tNormal.value = this.normalTexture;
 		this.gtaoMaterial.uniforms.tDepth.value = this.depthTexture;
 
 		this.pdMaterial.defines.NORMAL_VECTOR_TYPE = normalVectorType;
-		this.pdMaterial.defines.DEPTH_SWIZZLING = depthValueSource;
+		this.pdMaterial.needsUpdate = true;
 		this.pdMaterial.uniforms.tNormal.value = this.normalTexture;
 		this.pdMaterial.uniforms.tDepth.value = this.depthTexture;
 
-		this.depthRenderMaterial.uniforms.tDepth.value = this.normalRenderTarget.depthTexture;
+		this.depthRenderMaterial.uniforms.tDepth.value = this.depthTexture;
 
 	}
 
@@ -562,7 +570,7 @@ class GTAOPass extends Pass {
 
 			case GTAOPass.OUTPUT.Normal:
 
-				this.copyMaterial.uniforms.tDiffuse.value = this.normalRenderTarget.texture;
+				this.copyMaterial.uniforms.tDiffuse.value = this.normalTexture || null;
 				this.copyMaterial.blending = NoBlending;
 				this._renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
 

package/examples/jsm/renderers/SVGRenderer.js

@@ -108,6 +108,7 @@ class SVGRenderer {
 			_clearColor = new Color(),
 
 			_vector3 = new Vector3(), // Needed for PointLight
+			_vector3b = new Vector3(), // Needed for DirectionalLight
 			_centroid = new Vector3(),
 			_normal = new Vector3(),
 			_normalViewMatrix = new Matrix3(),
@@ -532,9 +533,9 @@ class SVGRenderer {
 
 				if ( light.isDirectionalLight ) {
 
-					const lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
+					const lightDirection = _vector3.setFromMatrixPosition( light.matrixWorld ).sub( _vector3b.setFromMatrixPosition( light.target.matrixWorld ) ).normalize();
 
-					let amount = normal.dot( lightPosition );
+					let amount = normal.dot( lightDirection );
 
 					if ( amount <= 0 ) continue;
 

package/examples/jsm/shaders/GTAOShader.js

@@ -29,7 +29,6 @@ const GTAOShader = {
 		PERSPECTIVE_CAMERA: 1,
 		SAMPLES: 16,
 		NORMAL_VECTOR_TYPE: 1,
-		DEPTH_SWIZZLING: 'x',
 		SCREEN_SPACE_RADIUS: 0,
 		SCREEN_SPACE_RADIUS_SCALE: 100.0,
 		SCENE_CLIP_BOX: 0,
@@ -102,11 +101,11 @@ const GTAOShader = {
 		}
 
 		float getDepth(const vec2 uv) {
-			return textureLod(tDepth, uv.xy, 0.0).DEPTH_SWIZZLING;
+			return textureLod(tDepth, uv.xy, 0.0).r;
 		}
 
 		float fetchDepth(const ivec2 uv) {
-			return texelFetch(tDepth, uv.xy, 0).DEPTH_SWIZZLING;
+			return texelFetch(tDepth, uv.xy, 0).r;
 		}
 
 		float getViewZ(const in float depth) {
@@ -208,7 +207,11 @@ const GTAOShader = {
 				vec4 sampleDir = vec4(cos(angle), sin(angle), 0., 0.5 + 0.5 * noiseTexel.w);
 				sampleDir.xyz = normalize(kernelMatrix * sampleDir.xyz);
 
-				vec3 viewDir = normalize(-viewPos.xyz);
+				#if PERSPECTIVE_CAMERA == 1
+					vec3 viewDir = normalize(-viewPos.xyz);
+				#else
+					vec3 viewDir = vec3(0., 0., 1.);
+				#endif
 				vec3 sliceBitangent = normalize(cross(sampleDir.xyz, viewDir));
 				vec3 sliceTangent = cross(sliceBitangent, viewDir);
 				vec3 normalInSlice = normalize(viewNormal - sliceBitangent * dot(viewNormal, sliceBitangent));

package/examples/jsm/shaders/PoissonDenoiseShader.js

@@ -27,7 +27,6 @@ const PoissonDenoiseShader = {
 		'SAMPLES': 16,
 		'SAMPLE_VECTORS': generatePdSamplePointInitializer( 16, 2, 1 ),
 		'NORMAL_VECTOR_TYPE': 1,
-		'DEPTH_VALUE_SOURCE': 0,
 	},
 
 	uniforms: {
@@ -97,19 +96,11 @@ const PoissonDenoiseShader = {
 		}
 
 		float getDepth(const vec2 uv) {
-		#if DEPTH_VALUE_SOURCE == 1
-			return textureLod(tDepth, uv.xy, 0.0).a;
-		#else
 			return textureLod(tDepth, uv.xy, 0.0).r;
-		#endif
 		}
 
 		float fetchDepth(const ivec2 uv) {
-			#if DEPTH_VALUE_SOURCE == 1
-				return texelFetch(tDepth, uv.xy, 0).a;
-			#else
-				return texelFetch(tDepth, uv.xy, 0).r;
-			#endif
+			return texelFetch(tDepth, uv.xy, 0).r;
 		}
 
 		vec3 computeNormalFromDepth(const vec2 uv) {

package/examples/jsm/tsl/WebGLNodesHandler.js

@@ -5,6 +5,7 @@ import {
 	Color,
 	UniformsLib,
 	UniformsUtils,
+	PMREMGenerator,
 } from 'three';
 import {
 	context,
@@ -24,6 +25,7 @@ import {
 	GLSLNodeBuilder,
 	BasicNodeLibrary,
 	WebGLCapabilities,
+	PMREMNode,
 } from 'three/webgpu';
 
 // Limitations
@@ -60,7 +62,7 @@ function generateUniformsList( program, uniforms ) {
 
 }
 
-// overrides shadow nodes to use the built in shadow textures
+// Adapts nodes to use WebGLRenderer resources.
 class WebGLNodeBuilder extends GLSLNodeBuilder {
 
 	addNode( node ) {
@@ -79,6 +81,10 @@ class WebGLNodeBuilder extends GLSLNodeBuilder {
 
 			};
 
+		} else if ( node instanceof PMREMNode && node._generator === null ) {
+
+			node._generator = new PMREMGenerator( this.renderer._renderer );
+
 		}
 
 		super.addNode( node );
@@ -184,6 +190,8 @@ class RendererProxy {
 
 	constructor( renderer ) {
 
+		this._renderer = renderer;
+
 		const backend = {
 			isWebGPUBackend: false,
 			extensions: renderer.extensions,
@@ -531,6 +539,7 @@ export class WebGLNodesHandler {
 			fogColor: { value: new Color() },
 			fogNear: { value: 0 },
 			fogFar: { value: 0 },
+			fogDensity: { value: 0 },
 			envMapIntensity: { value: 0 },
 			...UniformsUtils.clone( UniformsLib.lights )
 		};
@@ -560,16 +569,19 @@ export class WebGLNodesHandler {
 		}
 
 		// init uniforms
-		const builderUniforms = [ ...builder.uniforms.vertex, ...builder.uniforms.fragment ];
-		for ( const uniform of builderUniforms ) {
+		for ( const shaderStage of [ 'vertex', 'fragment' ] ) {
+
+			for ( const uniform of builder.uniforms[ shaderStage ] ) {
 
-			if ( uniform.type === 'buffer' ) {
+				if ( uniform.type === 'buffer' ) {
 
-				// buffer uniforms are all nested in groups
-				const group = new UniformsGroup();
-				group.name = uniform.node.name;
-				group.uniforms = [ uniform ];
-				uniformsGroups.push( group );
+					// buffer uniforms are all nested in groups
+					const group = new UniformsGroup();
+					group.name = builder.getUniformBufferName( uniform, shaderStage );
+					group.uniforms = [ uniform ];
+					uniformsGroups.push( group );
+
+				}
 
 			}
 

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

@@ -1,4 +1,4 @@
-import { RenderTarget, Vector2, QuadMesh, NodeMaterial, RendererUtils, TempNode, NodeUpdateType } from 'three/webgpu';
+import { RenderTarget, Vector2, QuadMesh, NodeMaterial, RendererUtils, Node, NodeUpdateType } from 'three/webgpu';
 import { nodeObject, Fn, float, uv, texture, passTexture, sign, max, convertToTexture } from 'three/tsl';
 
 const _size = /*@__PURE__*/ new Vector2();
@@ -9,10 +9,10 @@ let _rendererState;
 /**
  * Post processing node for creating an after image effect.
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { afterImage } from 'three/addons/tsl/display/AfterImageNode.js';
  */
-class AfterImageNode extends TempNode {
+class AfterImageNode extends Node {
 
 	static get type() {
 

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

@@ -1,4 +1,4 @@
-import { RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, TempNode, NodeUpdateType } from 'three/webgpu';
+import { RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, Node, NodeUpdateType } from 'three/webgpu';
 import { Fn, float, uv, uniform, convertToTexture, vec2, vec4, passTexture, luminance, abs, exp, max, context } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
@@ -16,10 +16,10 @@ let _rendererState;
  *
  * Reference: {@link https://en.wikipedia.org/wiki/Bilateral_filter}
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { bilateralBlur } from 'three/addons/tsl/display/BilateralBlurNode.js';
  */
-class BilateralBlurNode extends TempNode {
+class BilateralBlurNode extends Node {
 
 	static get type() {
 

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

@@ -1,4 +1,4 @@
-import { HalfFloatType, RenderTarget, Vector2, Vector3, TempNode, QuadMesh, NodeMaterial, RendererUtils, NodeUpdateType } from 'three/webgpu';
+import { HalfFloatType, RenderTarget, Vector2, Vector3, Node, QuadMesh, NodeMaterial, RendererUtils, NodeUpdateType } from 'three/webgpu';
 import { nodeObject, Fn, float, uv, passTexture, uniform, Loop, texture, luminance, smoothstep, mix, vec4, uniformArray, add, int, array, context } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
@@ -48,10 +48,10 @@ const luminosityHighPass = Fn( ( { input, threshold, smoothWidth } ) => {
  * const bloomPass = bloom( emissivePass );
  * renderPipeline.outputNode = scenePassColor.add( bloomPass );
  * ```
- * @augments TempNode
+ * @augments Node
  * @three_import import { bloom } from 'three/addons/tsl/display/BloomNode.js';
  */
-class BloomNode extends TempNode {
+class BloomNode extends Node {
 
 	static get type() {
 

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

@@ -1,4 +1,4 @@
-import { TempNode } from 'three/webgpu';
+import { Node } from 'three/webgpu';
 import {
 	nodeObject,
 	Fn,
@@ -13,10 +13,10 @@ import {
  * This effect simulates the color fringing that occurs in real camera lenses
  * by separating and offsetting the red, green, and blue channels.
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { chromaticAberration } from 'three/addons/tsl/display/ChromaticAberrationNode.js';
  */
-class ChromaticAberrationNode extends TempNode {
+class ChromaticAberrationNode extends Node {
 
 	static get type() {
 
@@ -117,15 +117,6 @@ class ChromaticAberrationNode extends TempNode {
 
 			return vec4( r, g, b, a );
 
-		} ).setLayout( {
-			name: 'ChromaticAberrationShader',
-			type: 'vec4',
-			inputs: [
-				{ name: 'uv', type: 'vec2' },
-				{ name: 'strength', type: 'float' },
-				{ name: 'center', type: 'vec2' },
-				{ name: 'scale', type: 'float' }
-			]
 		} );
 
 		const chromaticAberrationFn = Fn( () => {
@@ -162,13 +153,11 @@ export default ChromaticAberrationNode;
  */
 export const chromaticAberration = ( node, strength = 1.0, center = null, scale = 1.1 ) => {
 
-	return nodeObject(
-		new ChromaticAberrationNode(
-			convertToTexture( node ),
-			nodeObject( strength ),
-			nodeObject( center ),
-			nodeObject( scale )
-		)
+	return new ChromaticAberrationNode(
+		convertToTexture( node ),
+		nodeObject( strength ),
+		nodeObject( center ),
+		nodeObject( scale )
 	);
 
 };

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

@@ -1,5 +1,5 @@
-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, property } from 'three/tsl';
+import { DataTexture, RepeatWrapping, Vector2, Vector3, Node } 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, property, isBackgroundDepth } from 'three/tsl';
 import { SimplexNoise } from '../../math/SimplexNoise.js';
 
 /**
@@ -10,10 +10,10 @@ import { SimplexNoise } from '../../math/SimplexNoise.js';
  *
  * Reference: {@link https://openaccess.thecvf.com/content/WACV2021/papers/Khademi_Self-Supervised_Poisson-Gaussian_Denoising_WACV_2021_paper.pdf}.
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { denoise } from 'three/addons/tsl/display/DenoiseNode.js';
  */
-class DenoiseNode extends TempNode {
+class DenoiseNode extends Node {
 
 	static get type() {
 
@@ -197,7 +197,7 @@ class DenoiseNode extends TempNode {
 			const texel = sampleTexture( uvNode ).toVar();
 			const result = property( 'vec4' );
 
-			If( depth.greaterThanEqual( 1.0 ).or( dot( viewNormal, viewNormal ).equal( 0.0 ) ), () => {
+			If( isBackgroundDepth( depth ).or( dot( viewNormal, viewNormal ).equal( 0.0 ) ), () => {
 
 				result.assign( texel );
 

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

@@ -1,4 +1,4 @@
-import { TempNode, NodeMaterial, NodeUpdateType, RenderTarget, Vector2, HalfFloatType, RedFormat, QuadMesh, RendererUtils } from 'three/webgpu';
+import { Node, NodeMaterial, NodeUpdateType, RenderTarget, Vector2, HalfFloatType, RedFormat, QuadMesh, RendererUtils } from 'three/webgpu';
 import { convertToTexture, nodeObject, Fn, uniform, smoothstep, step, texture, max, uniformArray, outputStruct, property, vec4, vec3, uv, Loop, min, mix, float, context } from 'three/tsl';
 import { gaussianBlur } from './GaussianBlurNode.js';
 
@@ -12,10 +12,10 @@ let _rendererState;
  * - {@link https://pixelmischiefblog.wordpress.com/2016/11/25/bokeh-depth-of-field/}
  * - {@link https://www.adriancourreges.com/blog/2016/09/09/doom-2016-graphics-study/}
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { dof } from 'three/addons/tsl/display/DepthOfFieldNode.js';
  */
-class DepthOfFieldNode extends TempNode {
+class DepthOfFieldNode extends Node {
 
 	static get type() {
 

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

@@ -1,13 +1,13 @@
-import { TempNode } from 'three/webgpu';
+import { Node } from 'three/webgpu';
 import { nodeObject, Fn, uv, vec2, vec3, sin, cos, add, vec4, screenSize } from 'three/tsl';
 
 /**
  * Post processing node for creating dot-screen effect.
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { dotScreen } from 'three/addons/tsl/display/DotScreenNode.js';
  */
-class DotScreenNode extends TempNode {
+class DotScreenNode extends Node {
 
 	static get type() {
 

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

@@ -1,4 +1,4 @@
-import { HalfFloatType, RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, TempNode, NodeUpdateType } from 'three/webgpu';
+import { HalfFloatType, RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, Node, NodeUpdateType } from 'three/webgpu';
 import { Fn, float, vec2, vec3, vec4, ivec2, int, uv, floor, fract, abs, max, min, clamp, saturate, sqrt, select, exp2, nodeObject, passTexture, textureSize, textureLoad, convertToTexture, context } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
@@ -23,10 +23,10 @@ let _rendererState;
  *
  * Reference: {@link https://gpuopen.com/fidelityfx-superresolution/}.
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { fsr1 } from 'three/addons/tsl/display/fsr1/FSR1Node.js';
  */
-class FSR1Node extends TempNode {
+class FSR1Node extends Node {
 
 	static get type() {
 

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

@@ -1,14 +1,14 @@
-import { Vector2, TempNode } from 'three/webgpu';
+import { Vector2, Node } from 'three/webgpu';
 import { Fn, uniformArray, select, float, NodeUpdateType, uv, dot, clamp, uniform, convertToTexture, smoothstep, bool, vec2, vec3, If, Loop, max, min, Break, abs } from 'three/tsl';
 
 /**
  * Post processing node for applying FXAA. This node requires sRGB input
  * so tone mapping and color space conversion must happen before the anti-aliasing.
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { fxaa } from 'three/addons/tsl/display/FXAANode.js';
  */
-class FXAANode extends TempNode {
+class FXAANode extends Node {
 
 	static get type() {
 
@@ -328,13 +328,6 @@ class FXAANode extends TempNode {
 
 			return Sample( finalUv );
 
-		} ).setLayout( {
-			name: 'FxaaPixelShader',
-			type: 'vec4',
-			inputs: [
-				{ name: 'uv', type: 'vec2' },
-				{ name: 'texSize', type: 'vec2' },
-			]
 		} );
 
 		const fxaa = Fn( () => {

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

@@ -1,13 +1,13 @@
-import { TempNode } from 'three/webgpu';
+import { Node } from 'three/webgpu';
 import { rand, Fn, fract, time, uv, clamp, mix, vec4, nodeProxy } from 'three/tsl';
 
 /**
  * Post processing node for creating a film grain effect.
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { film } from 'three/addons/tsl/display/FilmNode.js';
  */
-class FilmNode extends TempNode {
+class FilmNode extends Node {
 
 	static get type() {
 

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

@@ -1,5 +1,5 @@
-import { DataTexture, RenderTarget, RepeatWrapping, Vector2, Vector3, TempNode, QuadMesh, NodeMaterial, RendererUtils, RedFormat } from 'three/webgpu';
-import { reference, logarithmicDepthToViewZ, viewZToPerspectiveDepth, getNormalFromDepth, getViewPosition, getScreenPositionFromClip, nodeObject, Fn, float, NodeUpdateType, uv, uniform, Loop, vec2, vec3, vec4, int, dot, max, min, pow, abs, If, textureSize, sin, cos, PI, texture, passTexture, mat3, normalize, cross, mix, acos, clamp, interleavedGradientNoise, screenCoordinate, rand, context } from 'three/tsl';
+import { DataTexture, RenderTarget, RepeatWrapping, Vector2, Vector3, Node, QuadMesh, NodeMaterial, RendererUtils, RedFormat } from 'three/webgpu';
+import { reference, getNormalFromDepth, getViewPosition, getScreenPositionFromClip, nodeObject, Fn, float, NodeUpdateType, uv, uniform, Loop, vec2, vec3, vec4, int, dot, max, min, pow, abs, If, textureSize, sin, cos, PI, texture, passTexture, mat3, normalize, cross, mix, acos, clamp, interleavedGradientNoise, screenCoordinate, rand, context, isBackgroundDepth, projectionDepth } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -43,10 +43,10 @@ let _rendererState;
  *
  * Reference: [Practical Real-Time Strategies for Accurate Indirect Occlusion](https://www.activision.com/cdn/research/Practical_Real_Time_Strategies_for_Accurate_Indirect_Occlusion_NEW%20VERSION_COLOR.pdf).
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { ao } from 'three/addons/tsl/display/GTAONode.js';
  */
-class GTAONode extends TempNode {
+class GTAONode extends Node {
 
 	static get type() {
 
@@ -228,6 +228,14 @@ class GTAONode extends TempNode {
 		 */
 		this._cameraFar = reference( 'far', 'float', camera );
 
+		/**
+		 * A reference to the scene's camera.
+		 *
+		 * @private
+		 * @type {Camera}
+		 */
+		this._camera = camera;
+
 		/**
 		 * Temporal direction that influences the rotation angle for each slice.
 		 *
@@ -397,48 +405,48 @@ class GTAONode extends TempNode {
 
 		const uvNode = uv();
 
-		const linearizeDepth = ( depth ) => {
-
-			if ( builder.renderer.logarithmicDepthBuffer === true ) {
-
-				const viewZ = logarithmicDepthToViewZ( depth, this._cameraNear, this._cameraFar );
-
-				return viewZToPerspectiveDepth( viewZ, this._cameraNear, this._cameraFar );
-
-			}
-
-			return depth;
-
-		};
-
-		const sampleDepth = ( uv ) => linearizeDepth( this.depthNode.sample( uv ).r );
+		const sampleDepth = ( uv ) => projectionDepth( this.depthNode.sample( uv ).r, this._cameraNear, this._cameraFar );
 
 		const sampleCenterDepth = ( uv ) => {
 
 			// Sidestep the nearest-rounding during depth access for the unjittered center pixel to avoid banding
 
 			const g = this.depthNode.gather().sample( uv );
-			const depth = min( min( g.x, g.y ), min( g.z, g.w ) );
+			const depth = builder.renderer.reversedDepthBuffer === true ? max( max( g.x, g.y ), max( g.z, g.w ) ) : min( min( g.x, g.y ), min( g.z, g.w ) );
 
-			return linearizeDepth( depth );
+			return projectionDepth( depth, this._cameraNear, this._cameraFar );
 
 		};
 
 		const sampleNoise = ( uv ) => this._noiseNode.sample( uv );
 		const sampleNormal = ( uv ) => ( this.normalNode !== null ) ? this.normalNode.sample( uv ).rgb.normalize() : getNormalFromDepth( uv, this.depthNode.value, this._cameraProjectionMatrixInverse );
 
+		const isValidSample = Fn( ( [ uv, centerTexel, size ] ) => {
+
+			const texel = uv.mul( size ).floor().toConst();
+
+			// rejects off-screen samples and samples that fall into the center texel
+
+			return uv.x.greaterThan( 0 ).and( uv.x.lessThan( 1 ) ).and( uv.y.greaterThan( 0 ) ).and( uv.y.lessThan( 1 ) )
+				.and( texel.x.notEqual( centerTexel.x ).or( texel.y.notEqual( centerTexel.y ) ) );
+
+		}, { uv: 'vec2', centerTexel: 'vec2', size: 'vec2', return: 'bool' } );
+
 		this._ao = Fn( () => {
 
 			const depth = this._resolutionScale.lessThan( 1 ).select( sampleCenterDepth( uvNode ), sampleDepth( uvNode ) ).toConst();
 
-			depth.greaterThanEqual( 1.0 ).discard();
+			isBackgroundDepth( depth ).discard();
+
+			const depthSize = vec2( textureSize( this.depthNode, 0 ) ).toConst();
+			const centerTexel = uvNode.mul( depthSize ).floor().toConst();
 
 			const viewPosition = getViewPosition( uvNode, depth, this._cameraProjectionMatrixInverse ).toConst();
 			const viewNormal = sampleNormal( uvNode ).toConst();
 
 			const radius = this.radius;
 			const invRadius = radius.reciprocal().toConst();
-			const viewDir = normalize( viewPosition.xyz.negate() ).toConst();
+			const viewDir = ( this._camera.isPerspectiveCamera === true ) ? normalize( viewPosition.xyz.negate() ).toConst() : vec3( 0, 0, 1 ).toConst();
 			const clipPosition = this._cameraProjectionMatrix.mul( vec4( viewPosition, 1.0 ) ).toConst();
 
 			const noiseResolution = textureSize( this._noiseNode, 0 );
@@ -522,7 +530,7 @@ class GTAONode extends TempNode {
 					const distFacX = min( lenX.mul( invRadius ), 1 );
 					const distFacSqX = distFacX.mul( distFacX );
 
-					If( abs( viewDeltaX.z ).lessThan( this.thickness ), () => {
+					If( isValidSample( sampleScreenPositionX, centerTexel, depthSize ).and( abs( viewDeltaX.z ).lessThan( this.thickness ) ), () => {
 
 						cosHorizons.x.assign( mix( max( cosHorizons.x, sHX ), cosHorizons.x, distFacSqX ) );
 
@@ -541,7 +549,7 @@ class GTAONode extends TempNode {
 					const distFacY = min( lenY.mul( invRadius ), 1 );
 					const distFacSqY = distFacY.mul( distFacY );
 
-					If( abs( viewDeltaY.z ).lessThan( this.thickness ), () => {
+					If( isValidSample( sampleScreenPositionY, centerTexel, depthSize ).and( abs( viewDeltaY.z ).lessThan( this.thickness ) ), () => {
 
 						cosHorizons.y.assign( mix( max( cosHorizons.y, sHY ), cosHorizons.y, distFacSqY ) );
 

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

@@ -1,4 +1,4 @@
-import { RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, TempNode, NodeUpdateType, warnOnce } from 'three/webgpu';
+import { RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, Node, NodeUpdateType, warnOnce } from 'three/webgpu';
 import { Fn, float, uv, uniform, convertToTexture, vec2, vec4, passTexture, premultiplyAlpha, unpremultiplyAlpha, context, texture } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
@@ -8,10 +8,10 @@ let _rendererState;
 /**
  * Post processing node for creating a gaussian blur effect.
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { gaussianBlur, premultipliedGaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';
  */
-class GaussianBlurNode extends TempNode {
+class GaussianBlurNode extends Node {
 
 	static get type() {