@gnsx/three 0.185.16 → 0.186.0

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

@@ -1,5 +1,5 @@
 import { TempNode } from '@gnsx/three/webgpu';
-import { Fn, uv, uniform, vec2, sin, cos, vec4, convertToTexture } from '@gnsx/three/tsl';
+import { nodeObject, Fn, uv, vec2, sin, cos, vec4, convertToTexture } from '@gnsx/three/tsl';
 
 /**
  * Post processing node for shifting/splitting RGB color channels. The effect
@@ -20,8 +20,8 @@ class RGBShiftNode extends TempNode {
 	 * Constructs a new RGB shift node.
 	 *
 	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
-	 * @param {number} [amount=0.005] - The amount of the RGB shift.
-	 * @param {number} [angle=0] - Defines the orientation in which colors are shifted.
+	 * @param {number|Node<float>} [amount=0.005] - The amount of the RGB shift.
+	 * @param {number|Node<float>} [angle=0] - Defines the orientation in which colors are shifted.
 	 */
 	constructor( textureNode, amount = 0.005, angle = 0 ) {
 
@@ -37,16 +37,16 @@ class RGBShiftNode extends TempNode {
 		/**
 		 * The amount of the RGB shift.
 		 *
-		 * @type {UniformNode<float>}
+		 * @type {Node<float>}
 		 */
-		this.amount = uniform( amount );
+		this.amount = nodeObject( amount );
 
 		/**
 		 * Defines in which direction colors are shifted.
 		 *
-		 * @type {UniformNode<float>}
+		 * @type {Node<float>}
 		 */
-		this.angle = uniform( angle );
+		this.angle = nodeObject( angle );
 
 	}
 
@@ -89,8 +89,8 @@ export default RGBShiftNode;
  * @tsl
  * @function
  * @param {Node<vec4>} node - The node that represents the input of the effect.
- * @param {number} [amount=0.005] - The amount of the RGB shift.
- * @param {number} [angle=0] - Defines in which direction colors are shifted.
+ * @param {number|Node<float>} [amount=0.005] - The amount of the RGB shift.
+ * @param {number|Node<float>} [angle=0] - Defines in which direction colors are shifted.
  * @returns {RGBShiftNode}
  */
 export const rgbShift = ( node, amount, angle ) => new RGBShiftNode( convertToTexture( node ), amount, angle );

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

@@ -1,4 +1,4 @@
-import { abs, atan, bool, convertToTexture, cos, cross, Discard, dot, EPSILON, exp, float, Fn, getScreenPosition, getViewPosition, If, int, log, Loop, luminance, mat2, max, mix, nodeObject, NodeUpdateType, normalize, passTexture, PI, property, reflect, sin, smoothstep, sqrt, tan, texture, uniform, unpackRGBToNormal, uv, vec2, vec3, vec4 } from '@gnsx/three/tsl';
+import { abs, atan, bool, convertToTexture, cos, cross, Discard, dot, EPSILON, exp, float, Fn, getScreenPosition, getViewPosition, If, int, log, Loop, luminance, mat2, max, mix, nodeObject, NodeUpdateType, normalize, passTexture, PI, property, reflect, sin, smoothstep, sqrt, tan, texture, uniform, unpackRGBToNormal, uv, vec2, vec3, vec4, context } from '@gnsx/three/tsl';
 import { HalfFloatType, MathUtils, Matrix4, NodeMaterial, QuadMesh, RendererUtils, RenderTarget, TempNode, Vector2 } from '@gnsx/three/webgpu';
 import { bindAnalyticNoise } from '../utils/RNoise.js';
 import { ENV_RAY_LENGTH_THRESHOLD } from '../utils/SpecularHelpers.js';
@@ -606,7 +606,7 @@ class RecurrentDenoiseNode extends TempNode {
 			const runDenoise = () => {
 
 				const viewNormal = sampleNormal( uvCoord ).toConst();
-				const worldNormal = viewNormal.transformDirection( this._viewMatrix ).toConst();
+				const worldNormal = viewNormal.transformNormalByInverseViewMatrix( this._viewMatrix ).toConst();
 				const texel = sampleTexture( uvCoord ).max( 0 ).toConst();
 
 				const viewPosition = getViewPosition( uvCoord, depth, this._cameraProjectionMatrixInverse ).toConst();
@@ -796,7 +796,7 @@ class RecurrentDenoiseNode extends TempNode {
 					if ( this.mode === 'specular' ) kernelDiff.addAssign( ( abs( roughness.sub( sampleRoughnessMetalness( sampleUv ).g ) ).mul( this.roughnessPhi ) ) );
 
 					const nViewNormal = sampleNormal( sampleUv );
-					const nWorldNormal = nViewNormal.transformDirection( this._viewMatrix );
+					const nWorldNormal = nViewNormal.transformNormalByInverseViewMatrix( this._viewMatrix );
 					const distToPlane = planeDistance( viewPosition, nViewPosition, viewNormal );
 
 					// Geometric edge stopping (depth and normal)
@@ -880,7 +880,8 @@ class RecurrentDenoiseNode extends TempNode {
 
 		} );
 
-		this._material.fragmentNode = denoiseFn( uv() ).context( builder.getSharedContext() );
+		this._material.contextNode = context( builder.getSharedContext() );
+		this._material.fragmentNode = denoiseFn( uv() );
 		this._material.needsUpdate = true;
 
 		return this._textureNode;
@@ -889,6 +890,8 @@ class RecurrentDenoiseNode extends TempNode {
 
 	dispose() {
 
+		super.dispose();
+
 		this._renderTarget.dispose();
 		this._material.dispose();
 

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

@@ -158,7 +158,7 @@ class RetroPassNode extends PassNode {
 
 						let finalUV;
 
-						if ( texture.isCubeTextureNode ) {
+						if ( texture.isCubeTextureNode ) {
 
 							finalUV = reflectVector;
 

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

@@ -1,5 +1,5 @@
 import { HalfFloatType, LinearFilter, NearestFilter, RenderTarget, Texture, Vector2, QuadMesh, NodeMaterial, TempNode, RendererUtils } from '@gnsx/three/webgpu';
-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 '@gnsx/three/tsl';
+import { abs, Fn, NodeUpdateType, uv, uniform, convertToTexture, vec2, vec4, passTexture, max, step, dot, float, texture, If, Loop, int, Break, sqrt, sign, mix, context } from '@gnsx/three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -292,25 +292,11 @@ class SMAANode extends TempNode {
 
 		// edges
 
-		const SMAAEdgeDetectionVS = Fn( () => {
+		const SMAAEdgeDetection = Fn( () => {
 
-			const vOffset0 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( - 1.0, 0.0, 0.0, - 1.0 ) ) );
-			const vOffset1 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( 1.0, 0.0, 0.0, 1.0 ) ) );
-			const vOffset2 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( - 2.0, 0.0, 0.0, - 2.0 ) ) );
-
-			varyingProperty( 'vec4', 'vOffset0' ).assign( vOffset0 );
-			varyingProperty( 'vec4', 'vOffset1' ).assign( vOffset1 );
-			varyingProperty( 'vec4', 'vOffset2' ).assign( vOffset2 );
-
-			return modelViewProjection;
-
-		} );
-
-		const SMAAEdgeDetectionFS = Fn( () => {
-
-			const vOffset0 = varyingProperty( 'vec4', 'vOffset0' );
-			const vOffset1 = varyingProperty( 'vec4', 'vOffset1' );
-			const vOffset2 = varyingProperty( 'vec4', 'vOffset2' );
+			const vOffset0 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( - 1.0, 0.0, 0.0, - 1.0 ) ) ).toVertexStage();
+			const vOffset1 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( 1.0, 0.0, 0.0, 1.0 ) ) ).toVertexStage();
+			const vOffset2 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( - 2.0, 0.0, 0.0, - 2.0 ) ) ).toVertexStage();
 
 			const threshold = vec2( SMAA_THRESHOLD, SMAA_THRESHOLD );
 
@@ -513,32 +499,16 @@ class SMAANode extends TempNode {
 
 		} );
 
-		const SMAAWeightsVS = Fn( () => {
+		const SMAAWeights = Fn( () => {
 
-			const vPixcoord = uvNode.xy.div( this._invSize );
+			const vPixcoord = uvNode.xy.div( this._invSize ).toVertexStage();
 
 			// We will use these offsets for the searches later on (see @PSEUDO_GATHER4):
-			const vOffset0 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( - 0.25, - 0.125, 1.25, - 0.125 ) ) ).toVar();
-			const vOffset1 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( - 0.125, - 0.25, - 0.125, 1.25 ) ) ).toVar();
+			const vOffset0 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( - 0.25, - 0.125, 1.25, - 0.125 ) ) ).toVertexStage();
+			const vOffset1 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( - 0.125, - 0.25, - 0.125, 1.25 ) ) ).toVertexStage();
 
 			// And these for the searches, they indicate the ends of the loops:
-			const vOffset2 = vec4( vOffset0.xz, vOffset1.yw ).add( vec4( - 2.0, 2.0, - 2.0, 2.0 ).mul( vec4( this._invSize.xx, this._invSize.yy ) ).mul( float( SMAA_MAX_SEARCH_STEPS ) ) ).toVar();
-
-			varyingProperty( 'vec2', 'vPixcoord' ).assign( vPixcoord );
-			varyingProperty( 'vec4', 'vOffset0' ).assign( vOffset0 );
-			varyingProperty( 'vec4', 'vOffset1' ).assign( vOffset1 );
-			varyingProperty( 'vec4', 'vOffset2' ).assign( vOffset2 );
-
-			return modelViewProjection;
-
-		} );
-
-		const SMAAWeightsFS = Fn( () => {
-
-			const vPixcoord = varyingProperty( 'vec2', 'vPixcoord' );
-			const vOffset0 = varyingProperty( 'vec4', 'vOffset0' );
-			const vOffset1 = varyingProperty( 'vec4', 'vOffset1' );
-			const vOffset2 = varyingProperty( 'vec4', 'vOffset2' );
+			const vOffset2 = vec4( vOffset0.xz, vOffset1.yw ).add( vec4( - 2.0, 2.0, - 2.0, 2.0 ).mul( vec4( this._invSize.xx, this._invSize.yy ) ).mul( float( SMAA_MAX_SEARCH_STEPS ) ) ).toVertexStage();
 
 			const weights = vec4( 0.0, 0.0, 0.0, 0.0 ).toVar();
 			const subsampleIndices = vec4( 0.0, 0.0, 0.0, 0.0 ).toVar();
@@ -623,22 +593,9 @@ class SMAANode extends TempNode {
 
 		// blend
 
-		const SMAABlendVS = Fn( () => {
-
-			//const vOffset0 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( - 1.0, 0.0, 0.0, - 1.0 ) ) );
-			const vOffset1 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( 1.0, 0.0, 0.0, 1.0 ) ) );
-
-			//varyingProperty( 'vec4', 'vOffset0' ).assign( vOffset0 );
-			varyingProperty( 'vec4', 'vOffset1' ).assign( vOffset1 );
-
-			return modelViewProjection;
+		const SMAABlend = Fn( () => {
 
-		} );
-
-		const SMAABlendFS = Fn( () => {
-
-			//const vOffset0 = varyingProperty( 'vec4', 'vOffset0' );
-			const vOffset1 = varyingProperty( 'vec4', 'vOffset1' );
+			const vOffset1 = vec4( uvNode.xy, uvNode.xy ).add( vec4( this._invSize.xy, this._invSize.xy ).mul( vec4( 1.0, 0.0, 0.0, 1.0 ) ) ).toVertexStage();
 			const result = vec4().toVar();
 
 			// Fetch the blending weights for current pixel:
@@ -694,16 +651,18 @@ class SMAANode extends TempNode {
 
 		} );
 
-		this._materialEdges.vertexNode = SMAAEdgeDetectionVS().context( builder.getSharedContext() );
-		this._materialEdges.fragmentNode = SMAAEdgeDetectionFS().context( builder.getSharedContext() );
+		const sharedContext = context( builder.getSharedContext() );
+
+		this._materialEdges.contextNode = sharedContext;
+		this._materialEdges.fragmentNode = SMAAEdgeDetection();
 		this._materialEdges.needsUpdate = true;
 
-		this._materialWeights.vertexNode = SMAAWeightsVS().context( builder.getSharedContext() );
-		this._materialWeights.fragmentNode = SMAAWeightsFS().context( builder.getSharedContext() );
+		this._materialWeights.contextNode = sharedContext;
+		this._materialWeights.fragmentNode = SMAAWeights();
 		this._materialWeights.needsUpdate = true;
 
-		this._materialBlend.vertexNode = SMAABlendVS().context( builder.getSharedContext() );
-		this._materialBlend.fragmentNode = SMAABlendFS().context( builder.getSharedContext() );
+		this._materialBlend.contextNode = sharedContext;
+		this._materialBlend.fragmentNode = SMAABlend();
 		this._materialBlend.needsUpdate = true;
 
 		return this._textureNode;
@@ -716,6 +675,8 @@ class SMAANode extends TempNode {
 	 */
 	dispose() {
 
+		super.dispose();
+
 		this._renderTargetEdges.dispose();
 		this._renderTargetWeights.dispose();
 		this._renderTargetBlend.dispose();

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

@@ -32,7 +32,7 @@ class SSAAPassNode extends PassNode {
 	 */
 	constructor( scene, camera ) {
 
-		super( PassNode.COLOR, scene, camera );
+		super( PassNode.COLOR, scene, camera, { samples: 0 } );
 
 		/**
 		 * This flag can be used for type testing.
@@ -99,9 +99,7 @@ class SSAAPassNode extends PassNode {
 
 		//
 
-		this._pixelRatio = renderer.getPixelRatio();
-
-		const size = renderer.getSize( _size );
+		const size = renderer.getDrawingBufferSize( _size );
 
 		this.setSize( size.width, size.height );
 		this._sampleRenderTarget.setSize( this.renderTarget.width, this.renderTarget.height );

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

@@ -0,0 +1,436 @@
+import { RenderTarget, Vector2, TempNode, QuadMesh, NodeMaterial, RendererUtils, RedFormat } from '@gnsx/three/webgpu';
+import { reference, logarithmicDepthToViewZ, viewZToPerspectiveDepth, getViewPosition, getScreenPositionFromClip, vogelDiskSample, interleavedGradientNoise, nodeObject, Fn, float, NodeUpdateType, uv, uniform, Loop, vec4, int, dot, max, clamp, length, screenCoordinate, PI2, texture, passTexture, context } from '@gnsx/three/tsl';
+import { depthAwareBlur } from './depthAwareBlur.js';
+
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
+const _size = /*@__PURE__*/ new Vector2();
+
+let _rendererState;
+
+/**
+ * Post processing node for a fast, screen-space ambient occlusion (SSAO).
+ *
+ * It point-samples a per-pixel rotated Vogel disk and estimates obscurance with a single depth tap
+ * per sample, trading the ground-truth accuracy of {@link GTAONode}'s horizon ray-marching for
+ * lower cost. A built-in separable, depth-aware blur denoises the result so it can be used without
+ * temporal accumulation.
+ * ```js
+ * const scenePass = pass( scene, camera );
+ * scenePass.setMRT( mrt( { output, normal: normalView } ) );
+ * const scenePassColor = scenePass.getTextureNode( 'output' );
+ * const scenePassDepth = scenePass.getTextureNode( 'depth' );
+ * const scenePassNormal = scenePass.getTextureNode( 'normal' );
+ *
+ * const aoPass = ssao( scenePassDepth, scenePassNormal, camera );
+ *
+ * renderPipeline.outputNode = scenePassColor.mul( aoPass.r );
+ * ```
+ *
+ * @augments TempNode
+ * @three_import import { ssao } from 'three/addons/tsl/display/SSAONode.js';
+ */
+class SSAONode extends TempNode {
+
+	static get type() {
+
+		return 'SSAONode';
+
+	}
+
+	/**
+	 * Constructs a new SSAO node.
+	 *
+	 * @param {Node<float>} depthNode - A node that represents the scene's depth.
+	 * @param {Node<vec3>} normalNode - A node that represents the scene's normals.
+	 * @param {Camera} camera - The camera the scene is rendered with.
+	 */
+	constructor( depthNode, normalNode, camera ) {
+
+		super( 'float' );
+
+		/**
+		 * A node that represents the scene's depth.
+		 *
+		 * @type {Node<float>}
+		 */
+		this.depthNode = depthNode;
+
+		/**
+		 * A node that represents the scene's normals.
+		 *
+		 * @type {Node<vec3>}
+		 */
+		this.normalNode = normalNode;
+
+		/**
+		 * The resolution scale. The effect renders at a fraction of the drawing buffer
+		 * for extra speed; `0.5` is a good default for a low-frequency signal like AO.
+		 *
+		 * @type {number}
+		 * @default 0.5
+		 */
+		this.resolutionScale = 0.5;
+
+		/**
+		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node renders
+		 * its effect once per frame in `updateBefore()`.
+		 *
+		 * @type {string}
+		 * @default 'frame'
+		 */
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
+		/**
+		 * The world-space radius the occlusion is gathered within.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.radius = uniform( 0.5 );
+
+		/**
+		 * The strength of the occlusion.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.intensity = uniform( 1 );
+
+		/**
+		 * An angle bias that suppresses self-occlusion on near-flat surfaces.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.bias = uniform( 0.025 );
+
+		/**
+		 * How many samples are used to estimate the occlusion. A higher value
+		 * results in a smoother result at a higher runtime cost.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.samples = uniform( 16 );
+
+		/**
+		 * Whether the depth-aware blur that denoises the raw AO is applied or not.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
+		this.blurEnabled = true;
+
+		/**
+		 * How strongly the blur rejects samples across depth discontinuities,
+		 * relative to the AO radius. A higher value keeps edges crisper.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.blurSharpness = uniform( 2 );
+
+		/**
+		 * The resolution of the effect. Set from the drawing buffer size and `resolutionScale`.
+		 *
+		 * @type {Vector2}
+		 */
+		this.resolution = new Vector2();
+
+		/**
+		 * The render target the raw ambient occlusion is rendered into. Also holds the
+		 * final result after the separable blur has ping-ponged back into it.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
+		this._aoRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false, format: RedFormat } );
+		this._aoRenderTarget.texture.name = 'SSAONode.AO';
+
+		/**
+		 * The render target the intermediate (horizontally blurred) result is rendered into.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
+		this._blurRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false, format: RedFormat } );
+		this._blurRenderTarget.texture.name = 'SSAONode.Blur';
+
+		/**
+		 * Represents the projection matrix of the scene's camera.
+		 *
+		 * @private
+		 * @type {UniformNode<mat4>}
+		 */
+		this._cameraProjectionMatrix = uniform( camera.projectionMatrix );
+
+		/**
+		 * Represents the inverse projection matrix of the scene's camera.
+		 *
+		 * @private
+		 * @type {UniformNode<mat4>}
+		 */
+		this._cameraProjectionMatrixInverse = uniform( camera.projectionMatrixInverse );
+
+		/**
+		 * Represents the near value of the scene's camera.
+		 *
+		 * @private
+		 * @type {ReferenceNode<float>}
+		 */
+		this._cameraNear = reference( 'near', 'float', camera );
+
+		/**
+		 * Represents the far value of the scene's camera.
+		 *
+		 * @private
+		 * @type {ReferenceNode<float>}
+		 */
+		this._cameraFar = reference( 'far', 'float', camera );
+
+		/**
+		 * The camera the scene is rendered with.
+		 *
+		 * @private
+		 * @type {Camera}
+		 */
+		this._camera = camera;
+
+		/**
+		 * The input texture the blur material reads from. Swapped between the two render
+		 * targets to run the horizontal and vertical passes with a single material.
+		 *
+		 * @private
+		 * @type {TextureNode}
+		 */
+		this._blurInput = texture( this._aoRenderTarget.texture );
+
+		/**
+		 * The blur direction (one texel along x or y).
+		 *
+		 * @private
+		 * @type {UniformNode<vec2>}
+		 */
+		this._blurDirection = uniform( new Vector2() );
+
+		/**
+		 * The material that computes the raw ambient occlusion.
+		 *
+		 * @private
+		 * @type {NodeMaterial}
+		 */
+		this._aoMaterial = new NodeMaterial();
+		this._aoMaterial.name = 'SSAO.AO';
+
+		/**
+		 * The material that applies the separable, depth-aware blur.
+		 *
+		 * @private
+		 * @type {NodeMaterial}
+		 */
+		this._blurMaterial = new NodeMaterial();
+		this._blurMaterial.name = 'SSAO.Blur';
+
+		/**
+		 * The result of the effect is represented as a separate texture node.
+		 *
+		 * @private
+		 * @type {PassTextureNode}
+		 */
+		this._textureNode = passTexture( this, this._aoRenderTarget.texture );
+
+	}
+
+	/**
+	 * Returns the result of the effect as a texture node.
+	 *
+	 * @return {PassTextureNode} A texture node that represents the result of the effect.
+	 */
+	getTextureNode() {
+
+		return this._textureNode;
+
+	}
+
+	/**
+	 * Sets the size of the effect.
+	 *
+	 * @param {number} width - The width of the effect.
+	 * @param {number} height - The height of the effect.
+	 */
+	setSize( width, height ) {
+
+		width = Math.max( 1, Math.round( this.resolutionScale * width ) );
+		height = Math.max( 1, Math.round( this.resolutionScale * height ) );
+
+		this.resolution.set( width, height );
+		this._aoRenderTarget.setSize( width, height );
+		this._blurRenderTarget.setSize( width, height );
+
+	}
+
+	/**
+	 * This method is used to render the effect once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+
+		_rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
+
+		const size = renderer.getDrawingBufferSize( _size );
+		this.setSize( size.width, size.height );
+
+		renderer.setClearColor( 0xffffff, 1 );
+
+		// ambient occlusion
+
+		_quadMesh.material = this._aoMaterial;
+		_quadMesh.name = 'SSAO.AO';
+		renderer.setRenderTarget( this._aoRenderTarget );
+		_quadMesh.render( renderer );
+
+		// separable, depth-aware blur: horizontal ( AO -> blur ) then vertical ( blur -> AO )
+
+		if ( this.blurEnabled === true ) {
+
+			_quadMesh.material = this._blurMaterial;
+			_quadMesh.name = 'SSAO.Blur';
+
+			this._blurInput.value = this._aoRenderTarget.texture;
+			this._blurDirection.value.set( 1 / this.resolution.x, 0 );
+			renderer.setRenderTarget( this._blurRenderTarget );
+			_quadMesh.render( renderer );
+
+			this._blurInput.value = this._blurRenderTarget.texture;
+			this._blurDirection.value.set( 0, 1 / this.resolution.y );
+			renderer.setRenderTarget( this._aoRenderTarget );
+			_quadMesh.render( renderer );
+
+		}
+
+		RendererUtils.restoreRendererState( renderer, _rendererState );
+
+	}
+
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {PassTextureNode}
+	 */
+	setup( builder ) {
+
+		const uvNode = uv();
+
+		const sampleDepth = ( uv ) => {
+
+			const depth = this.depthNode.sample( uv ).r;
+
+			if ( builder.renderer.logarithmicDepthBuffer === true ) {
+
+				const viewZ = logarithmicDepthToViewZ( depth, this._cameraNear, this._cameraFar );
+
+				return viewZToPerspectiveDepth( viewZ, this._cameraNear, this._cameraFar );
+
+			}
+
+			return depth;
+
+		};
+
+		// ambient occlusion
+
+		const ao = Fn( () => {
+
+			const depth = sampleDepth( uvNode ).toVar();
+
+			depth.greaterThanEqual( 1.0 ).discard();
+
+			const viewPosition = getViewPosition( uvNode, depth, this._cameraProjectionMatrixInverse ).toVar();
+			const viewNormal = this.normalNode.sample( uvNode ).rgb.normalize().toVar();
+
+			// a low-discrepancy Vogel disk rotated per-pixel decorrelates the samples spatially,
+			// so a small blur is enough to hide the sampling pattern
+
+			const phi = interleavedGradientNoise( screenCoordinate ).mul( PI2 ).toVar();
+			const samples = this.samples;
+
+			// the fragment's clip position is loop-invariant; projection is linear, so each
+			// sample only has to project its (view-plane) offset and add it
+
+			const clipPosition = this._cameraProjectionMatrix.mul( vec4( viewPosition, 1.0 ) ).toVar();
+
+			const occlusion = float( 0 ).toVar();
+
+			Loop( { start: int( 0 ), end: samples, type: 'int', condition: '<' }, ( { i } ) => {
+
+				// disk offset in the view-aligned plane at the fragment's depth, then reprojected
+
+				const offset = vogelDiskSample( i, samples, phi ).mul( this.radius );
+				const clipOffset = this._cameraProjectionMatrix.mul( vec4( offset, 0.0, 0.0 ) );
+				const sampleUv = getScreenPositionFromClip( clipPosition.add( clipOffset ) );
+
+				const sampleViewPosition = getViewPosition( sampleUv, sampleDepth( sampleUv ), this._cameraProjectionMatrixInverse );
+
+				// normalized obscurance: only occluders above the tangent plane count, faded by distance
+
+				const v = sampleViewPosition.sub( viewPosition ).toVar();
+				const dist = length( v ).toVar();
+				const cosAngle = dot( v, viewNormal ).div( max( dist, float( 0.0001 ) ) );
+				const falloff = this.radius.div( this.radius.add( dist ) );
+
+				occlusion.addAssign( max( cosAngle.sub( this.bias ), 0.0 ).mul( falloff ) );
+
+			} );
+
+			return clamp( occlusion.div( samples ).mul( this.intensity ).oneMinus(), 0.0, 1.0 );
+
+		} );
+
+		const sharedContext = context( builder.getSharedContext() );
+
+		// compute ambient occlusion
+
+		this._aoMaterial.contextNode = sharedContext;
+		this._aoMaterial.fragmentNode = ao();
+		this._aoMaterial.needsUpdate = true;
+
+		// separable, depth-aware blur ( run horizontally then vertically via `_blurDirection` )
+
+		this._blurMaterial.contextNode = sharedContext;
+		this._blurMaterial.fragmentNode = depthAwareBlur( this._blurInput, this.depthNode, this._blurDirection, this._camera, this.blurSharpness, this.radius );
+		this._blurMaterial.needsUpdate = true;
+
+		return this._textureNode;
+
+	}
+
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the effect is no longer required.
+	 */
+	dispose() {
+
+		super.dispose();
+
+		this._aoRenderTarget.dispose();
+		this._blurRenderTarget.dispose();
+
+		this._aoMaterial.dispose();
+		this._blurMaterial.dispose();
+
+	}
+
+}
+
+export default SSAONode;
+
+/**
+ * TSL function for creating a fast screen-space ambient occlusion (SSAO) effect.
+ *
+ * @tsl
+ * @function
+ * @param {Node<float>} depthNode - A node that represents the scene's depth.
+ * @param {Node<vec3>} normalNode - A node that represents the scene's normals.
+ * @param {Camera} camera - The camera the scene is rendered with.
+ * @returns {SSAONode}
+ */
+export const ssao = ( depthNode, normalNode, camera ) => new SSAONode( nodeObject( depthNode ), nodeObject( normalNode ), camera );