super-three 0.181.0 → 0.185.0

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

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

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

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

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

@@ -1,9 +1,8 @@
-import { AdditiveBlending, Color, Vector2, RendererUtils, PassNode, QuadMesh, NodeMaterial } from 'three/webgpu';
-import { nodeObject, uniform, mrt, texture, getTextureIndex, unpremultiplyAlpha } from 'three/tsl';
+import { AdditiveBlending, Color, Vector2, PassNode, QuadMesh, NodeMaterial } from 'three/webgpu';
+import { uniform, mrt, texture, getTextureIndex, unpremultiplyAlpha } from 'three/tsl';
 
 const _size = /*@__PURE__*/ new Vector2();
-
-let _rendererState;
+const _clearColor = /*@__PURE__*/ new Color();
 
 /**
  * A special render pass node that renders the scene with SSAA (Supersampling Anti-Aliasing).
@@ -61,22 +60,6 @@ class SSAAPassNode extends PassNode {
 		 */
 		this.unbiased = true;
 
-		/**
-		 * The clear color of the pass.
-		 *
-		 * @type {Color}
-		 * @default 0x000000
-		 */
-		this.clearColor = new Color( 0x000000 );
-
-		/**
-		 * The clear alpha of the pass.
-		 *
-		 * @type {number}
-		 * @default 0
-		 */
-		this.clearAlpha = 0;
-
 		/**
 		 * A uniform node representing the sample weight.
 		 *
@@ -114,8 +97,6 @@ class SSAAPassNode extends PassNode {
 		const { renderer } = frame;
 		const { scene, camera } = this;
 
-		_rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
-
 		//
 
 		this._pixelRatio = renderer.getPixelRatio();
@@ -130,6 +111,12 @@ class SSAAPassNode extends PassNode {
 		this._cameraNear.value = camera.near;
 		this._cameraFar.value = camera.far;
 
+		const currentRenderTarget = renderer.getRenderTarget();
+		const currentMRT = renderer.getMRT();
+		const currentAutoClear = renderer.autoClear;
+		const currentClearColor = renderer.getClearColor( _clearColor );
+		const currentClearAlpha = renderer.getClearAlpha();
+
 		renderer.setMRT( this.getMRT() );
 		renderer.autoClear = false;
 
@@ -186,7 +173,6 @@ class SSAAPassNode extends PassNode {
 
 			}
 
-			renderer.setClearColor( this.clearColor, this.clearAlpha );
 			renderer.setRenderTarget( this._sampleRenderTarget );
 			renderer.clear();
 			renderer.render( scene, camera );
@@ -200,6 +186,8 @@ class SSAAPassNode extends PassNode {
 				renderer.setClearColor( 0x000000, 0.0 );
 				renderer.clear();
 
+				renderer.setClearColor( currentClearColor, currentClearAlpha );
+
 			}
 
 			this._quadMesh.render( renderer );
@@ -228,9 +216,9 @@ class SSAAPassNode extends PassNode {
 
 		}
 
-		//
-
-		RendererUtils.restoreRendererState( renderer, _rendererState );
+		renderer.setRenderTarget( currentRenderTarget );
+		renderer.setMRT( currentMRT );
+		renderer.autoClear = currentAutoClear;
 
 	}
 
@@ -355,4 +343,4 @@ const _JitterVectors = [
  * @param {Camera} camera - The camera to render the scene with.
  * @returns {SSAAPassNode}
  */
-export const ssaaPass = ( scene, camera ) => nodeObject( new SSAAPassNode( scene, camera ) );
+export const ssaaPass = ( scene, camera ) => new SSAAPassNode( scene, camera );

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

@@ -1,5 +1,5 @@
-import { RenderTarget, Vector2, TempNode, QuadMesh, NodeMaterial, RendererUtils, MathUtils } from 'three/webgpu';
-import { clamp, normalize, reference, nodeObject, Fn, NodeUpdateType, uniform, vec4, passTexture, uv, logarithmicDepthToViewZ, viewZToPerspectiveDepth, getViewPosition, screenCoordinate, float, sub, fract, dot, vec2, rand, vec3, Loop, mul, PI, cos, sin, uint, cross, acos, sign, pow, luminance, If, max, abs, Break, sqrt, HALF_PI, div, ceil, shiftRight, convertToTexture, bool, getNormalFromDepth, interleavedGradientNoise } from 'three/tsl';
+import { RenderTarget, Vector2, TempNode, QuadMesh, NodeMaterial, RendererUtils, MathUtils, RGBFormat, RedFormat, UnsignedInt101111Type, UnsignedByteType } from 'three/webgpu';
+import { clamp, normalize, reference, Fn, NodeUpdateType, uniform, vec4, passTexture, uv, logarithmicDepthToViewZ, viewZToPerspectiveDepth, getViewPosition, screenCoordinate, float, sub, fract, dot, vec2, rand, vec3, Loop, mul, PI, cos, sin, uint, cross, acos, sign, pow, luminance, If, max, abs, Break, sqrt, HALF_PI, div, ceil, shiftRight, convertToTexture, bool, getNormalFromDepth, countOneBits, interleavedGradientNoise, property, outputStruct } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -139,7 +139,7 @@ class SSGINode extends TempNode {
 		 * Makes the sample distance in screen space instead of world-space (helps having more detail up close).
 		 *
 		 * @type {UniformNode<bool>}
-		 * @default false
+		 * @default true
 		 */
 		this.useScreenSpaceSampling = uniform( true, 'bool' );
 
@@ -197,6 +197,7 @@ class SSGINode extends TempNode {
 		/**
 		 * The resolution of the effect.
 		 *
+		 * @private
 		 * @type {UniformNode<vec2>}
 		 */
 		this._resolution = uniform( new Vector2() );
@@ -204,6 +205,7 @@ class SSGINode extends TempNode {
 		/**
 		 * Used to compute the effective step radius when viewSpaceSampling is `false`.
 		 *
+		 * @private
 		 * @type {UniformNode<vec2>}
 		 */
 		this._halfProjScale = uniform( 1 );
@@ -211,6 +213,7 @@ class SSGINode extends TempNode {
 		/**
 		 * Temporal direction that influences the rotation angle for each slice.
 		 *
+		 * @private
 		 * @type {UniformNode<float>}
 		 */
 		this._temporalDirection = uniform( 0 );
@@ -218,6 +221,7 @@ class SSGINode extends TempNode {
 		/**
 		 * Temporal offset added to the initial ray step.
 		 *
+		 * @private
 		 * @type {UniformNode<float>}
 		 */
 		this._temporalOffset = uniform( 0 );
@@ -263,13 +267,23 @@ class SSGINode extends TempNode {
 		this._camera = camera;
 
 		/**
-		 * The render target the GI is rendered into.
+		 * The render target the effect is rendered into. The first texture holds the GI,
+		 * the second one the AO.
 		 *
 		 * @private
 		 * @type {RenderTarget}
 		 */
-		this._ssgiRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false } );
-		this._ssgiRenderTarget.texture.name = 'SSGI';
+		this._ssgiRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false, count: 2 } );
+
+		const aoTexture = this._ssgiRenderTarget.textures[ 0 ];
+		aoTexture.name = 'SSGI.AO';
+		aoTexture.type = UnsignedByteType;
+		aoTexture.format = RedFormat;
+
+		const giTexture = this._ssgiRenderTarget.textures[ 1 ];
+		giTexture.name = 'SSGI.GI';
+		giTexture.type = UnsignedInt101111Type;
+		giTexture.format = RGBFormat;
 
 		/**
 		 * The material that is used to render the effect.
@@ -281,23 +295,42 @@ class SSGINode extends TempNode {
 		this._material.name = 'SSGI';
 
 		/**
-		 * The result of the effect is represented as a separate texture node.
+		 * The AO result of the effect is represented as a separate texture node.
 		 *
 		 * @private
 		 * @type {PassTextureNode}
 		 */
-		this._textureNode = passTexture( this, this._ssgiRenderTarget.texture );
+		this._aoNode = passTexture( this, this._ssgiRenderTarget.textures[ 0 ] );
+
+		/**
+		 * The GI result of the effect is represented as a separate texture node.
+		 *
+		 * @private
+		 * @type {PassTextureNode}
+		 */
+		this._giNode = passTexture( this, this._ssgiRenderTarget.textures[ 1 ] );
 
 	}
 
 	/**
-	 * Returns the result of the effect as a texture node.
+	 * Returns the AO result of the effect as a texture node.
 	 *
-	 * @return {PassTextureNode} A texture node that represents the result of the effect.
+	 * @return {PassTextureNode} A texture node that represents the AO result of the effect.
 	 */
-	getTextureNode() {
+	getAONode() {
 
-		return this._textureNode;
+		return this._aoNode;
+
+	}
+
+	/**
+	 * Returns the GI result of the effect as a texture node.
+	 *
+	 * @return {PassTextureNode} A texture node that represents the GI result of the effect.
+	 */
+	getGINode() {
+
+		return this._giNode;
 
 	}
 
@@ -353,9 +386,9 @@ class SSGINode extends TempNode {
 		_quadMesh.material = this._material;
 		_quadMesh.name = 'SSGI';
 
-		// clear
+		// clear (white for the AO attachement)
 
-		renderer.setClearColor( 0x000000, 1 );
+		renderer.setClearColor( 0xffffff, 1 );
 
 		// gi
 
@@ -376,6 +409,14 @@ class SSGINode extends TempNode {
 	 */
 	setup( builder ) {
 
+		const renderer = builder.renderer;
+
+		if ( renderer.backend.isWebGPUBackend === true && renderer.hasFeature( 'rg11b10ufloat-renderable' ) === false ) {
+
+			console.error( 'THREE.SSGINode: The device does not support the "rg11b10ufloat-renderable" feature which is required for SSGI.' );
+
+		}
+
 		const uvNode = uv();
 		const MAX_RAY = uint( 32 );
 		const globalOccludedBitfield = uint( 0 );
@@ -431,50 +472,18 @@ class SSGINode extends TempNode {
 			]
 		} );
 
-		const bitCount = Fn( ( [ value ] ) => {
-
-			const v = uint( value );
-			v.assign( v.sub( v.shiftRight( uint( 1 ) ).bitAnd( uint( 0x55555555 ) ) ) );
-			v.assign( v.bitAnd( uint( 0x33333333 ) ).add( v.shiftRight( uint( 2 ) ).bitAnd( uint( 0x33333333 ) ) ) );
-
-			return v.add( v.shiftRight( uint( 4 ) ) ).bitAnd( uint( 0xF0F0F0F ) ).mul( uint( 0x1010101 ) ).shiftRight( uint( 24 ) );
-
-		} ).setLayout( {
-			name: 'bitCount',
-			type: 'uint',
-			inputs: [
-				{ name: 'value', type: 'uint' }
-			]
-		} );
-
-		const horizonSampling = Fn( ( [ directionIsRight, RADIUS, viewPosition, slideDirTexelSize, initialRayStep, uvNode, viewDir, viewNormal, n ] ) => {
+		const horizonSampling = Fn( ( [ directionIsRight, stepRadius, radiusVS, viewPosition, slideDirTexelSize, initialRayStep, uvNode, viewDir, viewNormal, n ] ) => {
 
 			const STEP_COUNT = this.stepCount.toConst();
 			const EXP_FACTOR = this.expFactor.toConst();
 			const THICKNESS = this.thickness.toConst();
 			const BACKFACE_LIGHTING = this.backfaceLighting.toConst();
 
-			const stepRadius = float( 0 );
-
-			If( this.useScreenSpaceSampling.equal( true ), () => {
-
-				stepRadius.assign( RADIUS.mul( this._resolution.x.div( 2 ) ).div( float( 16 ) ) ); // SSRT3 has a bug where stepRadius is divided by STEP_COUNT twice; fix here
-
-			} ).Else( () => {
-
-				stepRadius.assign( max( RADIUS.mul( this._halfProjScale ).div( viewPosition.z.negate() ), float( STEP_COUNT ) ) ); // Port note: viewZ is negative so a negate is required
-
-			} );
-
-			stepRadius.divAssign( float( STEP_COUNT ).add( 1 ) );
-			const radiusVS = max( 1, float( STEP_COUNT.sub( 1 ) ) ).mul( stepRadius );
-			const uvDirection = directionIsRight.equal( true ).select( vec2( 1, - 1 ), vec2( - 1, 1 ) ); // Port note: Because of different uv conventions, uv-y has a different sign
-			const samplingDirection = directionIsRight.equal( true ).select( 1, - 1 );
+			const uvDirection = directionIsRight.select( vec2( 1, - 1 ), vec2( - 1, 1 ) ); // Port note: Because of different uv conventions, uv-y has a different sign
+			const samplingDirection = directionIsRight.select( 1, - 1 );
 
 			const color = vec3( 0 );
 
-			const lastSampleViewPosition = vec3( viewPosition ).toVar();
-
 			Loop( { start: uint( 0 ), end: STEP_COUNT, type: 'uint', condition: '<' }, ( { i } ) => {
 
 				const offset = pow( abs( mul( stepRadius, float( i ).add( initialRayStep ) ).div( radiusVS ) ), EXP_FACTOR ).mul( radiusVS ).toConst();
@@ -489,13 +498,13 @@ class SSGINode extends TempNode {
 
 				const sampleViewPosition = getViewPosition( sampleUV, sampleDepth( sampleUV ), this._cameraProjectionMatrixInverse ).toConst();
 				const pixelToSample = sampleViewPosition.sub( viewPosition ).normalize().toConst();
-				const linearThicknessMultiplier = this.useLinearThickness.equal( true ).select( sampleViewPosition.z.negate().div( this._cameraFar ).clamp().mul( 100 ), float( 1 ) );
+				const linearThicknessMultiplier = this.useLinearThickness.select( sampleViewPosition.z.negate().div( this._cameraFar ).clamp().mul( 100 ), float( 1 ) );
 				const pixelToSampleBackface = normalize( sampleViewPosition.sub( linearThicknessMultiplier.mul( viewDir ).mul( THICKNESS ) ).sub( viewPosition ) );
 
 				let frontBackHorizon = vec2( dot( pixelToSample, viewDir ), dot( pixelToSampleBackface, viewDir ) );
 				frontBackHorizon = GTAOFastAcos( clamp( frontBackHorizon, - 1, 1 ) );
 				frontBackHorizon = clamp( div( mul( samplingDirection, frontBackHorizon.negate() ).sub( n.sub( HALF_PI ) ), PI ) ); // Port note: subtract half pi instead of adding it
-				frontBackHorizon = directionIsRight.equal( true ).select( frontBackHorizon.yx, frontBackHorizon.xy ); // Front/Back get inverted depending on angle
+				frontBackHorizon = directionIsRight.select( frontBackHorizon.yx, frontBackHorizon.xy ); // Front/Back get inverted depending on angle
 
 				// inline ComputeOccludedBitfield() for easier debugging
 
@@ -509,7 +518,7 @@ class SSGINode extends TempNode {
 				currentOccludedBitfield = currentOccludedBitfield.bitAnd( globalOccludedBitfield.bitNot() );
 
 				globalOccludedBitfield.assign( globalOccludedBitfield.bitOr( currentOccludedBitfield ) );
-				const numOccludedZones = bitCount( currentOccludedBitfield );
+				const numOccludedZones = countOneBits( currentOccludedBitfield );
 
 				//
 
@@ -541,14 +550,17 @@ class SSGINode extends TempNode {
 
 				} );
 
-				lastSampleViewPosition.assign( sampleViewPosition );
-
 			} );
 
-			return vec3( color );
+			return color;
 
 		} );
 
+		const aoField = property( 'float' );
+		const giField = property( 'vec3' );
+
+		const outputNode = outputStruct( aoField, giField );
+
 		const gi = Fn( () => {
 
 			const depth = sampleDepth( uvNode ).toVar();
@@ -570,10 +582,28 @@ class SSGINode extends TempNode {
 			const color = vec3( 0 );
 
 			const ROTATION_COUNT = this.sliceCount.toConst();
+			const STEP_COUNT = this.stepCount.toConst();
 			const AO_INTENSITY = this.aoIntensity.toConst();
 			const GI_INTENSITY = this.giIntensity.toConst();
 			const RADIUS = this.radius.toConst();
 
+			const stepRadius = float( 0 ).toVar();
+
+			If( this.useScreenSpaceSampling, () => {
+
+				stepRadius.assign( RADIUS.mul( this._resolution.x.div( 2 ) ).div( float( 16 ) ) ); // SSRT3 has a bug where stepRadius is divided by STEP_COUNT twice; fix here
+
+			} ).Else( () => {
+
+				stepRadius.assign( max( RADIUS.mul( this._halfProjScale ).div( viewPosition.z.negate() ), float( STEP_COUNT ) ) ); // Port note: viewZ is negative so a negate is required
+
+			} );
+
+			stepRadius.divAssign( float( STEP_COUNT ).add( 1 ) );
+			const radiusVS = max( 1, float( STEP_COUNT.sub( 1 ) ) ).mul( stepRadius ).toConst();
+
+			//
+
 			Loop( { start: uint( 0 ), end: ROTATION_COUNT, type: 'uint', condition: '<' }, ( { i } ) => {
 
 				const rotationAngle = mul( float( i ).add( noiseDirection ).add( this._temporalDirection ), PI.div( float( ROTATION_COUNT ) ) ).toConst();
@@ -590,10 +620,10 @@ class SSGINode extends TempNode {
 
 				globalOccludedBitfield.assign( 0 );
 
-				color.addAssign( horizonSampling( bool( true ), RADIUS, viewPosition, slideDirTexelSize, initialRayStep, uvNode, viewDir, viewNormal, n ) );
-				color.addAssign( horizonSampling( bool( false ), RADIUS, viewPosition, slideDirTexelSize, initialRayStep, uvNode, viewDir, viewNormal, n ) );
+				color.addAssign( horizonSampling( bool( true ), stepRadius, radiusVS, viewPosition, slideDirTexelSize, initialRayStep, uvNode, viewDir, viewNormal, n ) );
+				color.addAssign( horizonSampling( bool( false ), stepRadius, radiusVS, viewPosition, slideDirTexelSize, initialRayStep, uvNode, viewDir, viewNormal, n ) );
 
-				ao.addAssign( float( bitCount( globalOccludedBitfield ) ).div( float( MAX_RAY ) ) );
+				ao.addAssign( float( countOneBits( globalOccludedBitfield ) ).div( float( MAX_RAY ) ) );
 
 			} );
 
@@ -611,16 +641,20 @@ class SSGINode extends TempNode {
 			const scale = currentLuminance.greaterThan( maxLuminance ).select( maxLuminance.div( currentLuminance ), float( 1 ) );
 			color.mulAssign( scale );
 
-			return vec4( color, ao );
+			aoField.assign( ao );
+			giField.assign( color );
+
+			return vec4( 0 );
 
 		} );
 
-		this._material.fragmentNode = gi().context( builder.getSharedContext() );
+		this._material.colorNode = gi().context( builder.getSharedContext() );
+		this._material.outputNode = outputNode;
 		this._material.needsUpdate = true;
 
 		//
 
-		return this._textureNode;
+		return this._aoNode;
 
 	}
 
@@ -651,4 +685,4 @@ export default SSGINode;
  * @param {Camera} camera - The camera the scene is rendered with.
  * @returns {SSGINode}
  */
-export const ssgi = ( beautyNode, depthNode, normalNode, camera ) => nodeObject( new SSGINode( convertToTexture( beautyNode ), depthNode, normalNode, camera ) );
+export const ssgi = ( beautyNode, depthNode, normalNode, camera ) => new SSGINode( convertToTexture( beautyNode ), depthNode, normalNode, camera );