@plastic-software/three 0.180.0 → 0.181.2

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

@@ -1,9 +1,12 @@
-import { DataTexture, RenderTarget, RepeatWrapping, Vector2, Vector3, TempNode, QuadMesh, NodeMaterial, RendererUtils } from 'three/webgpu';
+import { DataTexture, RenderTarget, RepeatWrapping, Vector2, Vector3, TempNode, QuadMesh, NodeMaterial, RendererUtils, RedFormat } 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();
 
+// From Activision GTAO paper: https://www.activision.com/cdn/research/s2016_pbs_activision_occlusion.pptx
+const _temporalRotations = [ 60, 300, 180, 240, 120, 0 ];
+
 let _rendererState;
 
 /**
@@ -48,7 +51,7 @@ class GTAONode extends TempNode {
 	 */
 	constructor( depthNode, normalNode, camera ) {
 
-		super( 'vec4' );
+		super( 'float' );
 
 		/**
 		 * A node that represents the scene's depth.
@@ -90,7 +93,7 @@ class GTAONode extends TempNode {
 		 * @private
 		 * @type {RenderTarget}
 		 */
-		this._aoRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false } );
+		this._aoRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false, format: RedFormat } );
 		this._aoRenderTarget.texture.name = 'GTAONode.AO';
 
 		// uniforms
@@ -150,6 +153,20 @@ class GTAONode extends TempNode {
 		 */
 		this.samples = uniform( 16 );
 
+		/**
+		 * Whether to use temporal filtering or not. Setting this property to
+		 * `true` requires the usage of `TRAANode`. This will help to reduce noise
+		 * although it introduces typical TAA artifacts like ghosting and temporal
+		 * instabilities.
+		 *
+		 * If setting this property to `false`, a manual denoise via `DenoiseNode`
+		 * might be required.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.useTemporalFiltering = false;
+
 		/**
 		 * The node represents the internal noise texture used by the AO.
 		 *
@@ -190,6 +207,13 @@ class GTAONode extends TempNode {
 		 */
 		this._cameraFar = reference( 'far', 'float', camera );
 
+		/**
+		 * Temporal direction that influences the rotation angle for each slice.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this._temporalDirection = uniform( 0 );
+
 		/**
 		 * The material that is used to render the effect.
 		 *
@@ -247,12 +271,27 @@ class GTAONode extends TempNode {
 
 		_rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
 
+		// update temporal uniforms
+
+		if ( this.useTemporalFiltering === true ) {
+
+			const frameId = frame.frameId;
+
+			this._temporalDirection.value = _temporalRotations[ frameId % 6 ] / 360;
+
+		} else {
+
+			this._temporalDirection.value = 0;
+
+		}
+
 		//
 
 		const size = renderer.getDrawingBufferSize( _size );
 		this.setSize( size.width, size.height );
 
 		_quadMesh.material = this._material;
+		_quadMesh.name = 'AO';
 
 		// clear
 
@@ -312,6 +351,7 @@ class GTAONode extends TempNode {
 			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 );
 			const randomVec = noiseTexel.xyz.mul( 2.0 ).sub( 1.0 );
 			const tangent = vec3( randomVec.xy, 0.0 ).normalize();
@@ -327,7 +367,7 @@ class GTAONode extends TempNode {
 
 			Loop( { start: int( 0 ), end: DIRECTIONS, type: 'int', condition: '<' }, ( { i } ) => {
 
-				const angle = float( i ).div( float( DIRECTIONS ) ).mul( PI ).toVar();
+				const angle = float( i ).div( float( DIRECTIONS ) ).mul( PI ).add( this._temporalDirection ).toVar();
 				const sampleDir = vec4( cos( angle ), sin( angle ), 0., add( 0.5, mul( 0.5, noiseTexel.w ) ) );
 				sampleDir.xyz = normalize( kernelMatrix.mul( sampleDir.xyz ) );
 
@@ -392,7 +432,7 @@ class GTAONode extends TempNode {
 			ao.assign( clamp( ao.div( DIRECTIONS ), 0, 1 ) );
 			ao.assign( pow( ao, this.scale ) );
 
-			return vec4( vec3( ao ), 1.0 );
+			return ao;
 
 		} );
 

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

@@ -27,7 +27,7 @@ class GaussianBlurNode extends TempNode {
 	 * @param {number} sigma - Controls the kernel of the blur filter. Higher values mean a wider blur radius.
 	 * @param {Object} [options={}] - Additional options for the gaussian blur effect.
 	 * @param {boolean} [options.premultipliedAlpha=false] - Whether to use premultiplied alpha for the blur effect.
-	 * @param {Vector2} [options.resolution=new Vector2(1, 1)] - The resolution of the effect. 0.5 means half the resolution of the texture node.
+	 * @param {number} [options.resolutionScale=1] - The resolution of the effect. 0.5 means half the resolution of the texture node.
 	 */
 	constructor( textureNode, directionNode = null, sigma = 4, options = {} ) {
 
@@ -110,7 +110,7 @@ class GaussianBlurNode extends TempNode {
 		/**
 		 * The resolution scale.
 		 *
-		 * @type {float}
+		 * @type {number}
 		 * @default (1)
 		 */
 		this.resolutionScale = options.resolutionScale || 1;
@@ -176,6 +176,7 @@ class GaussianBlurNode extends TempNode {
 
 		this._passDirection.value.set( 1, 0 );
 
+		_quadMesh.name = 'Gaussian Blur [ Horizontal Pass ]';
 		_quadMesh.render( renderer );
 
 		// vertical
@@ -185,6 +186,7 @@ class GaussianBlurNode extends TempNode {
 
 		this._passDirection.value.set( 0, 1 );
 
+		_quadMesh.name = 'Gaussian Blur [ Vertical Pass ]';
 		_quadMesh.render( renderer );
 
 		// restore
@@ -353,7 +355,7 @@ export default GaussianBlurNode;
  * @param {number} sigma - Controls the kernel of the blur filter. Higher values mean a wider blur radius.
  * @param {Object} [options={}] - Additional options for the gaussian blur effect.
  * @param {boolean} [options.premultipliedAlpha=false] - Whether to use premultiplied alpha for the blur effect.
- * @param {Vector2} [options.resolution=new Vector2(1, 1)] - The resolution of the effect. 0.5 means half the resolution of the texture node.
+ * @param {number} [options.resolutionScale=1] - The resolution of the effect. 0.5 means half the resolution of the texture node.
  * @returns {GaussianBlurNode}
  */
 export const gaussianBlur = ( node, directionNode, sigma, options = {} ) => nodeObject( new GaussianBlurNode( convertToTexture( node ), directionNode, sigma, options ) );

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

@@ -455,6 +455,8 @@ class OutlineNode extends TempNode {
 
 		this._updateSelectionCache();
 
+		const currentSceneName = scene.name;
+
 		// 1. Draw non-selected objects in the depth buffer
 
 		scene.overrideMaterial = this._depthMaterial;
@@ -470,6 +472,7 @@ class OutlineNode extends TempNode {
 
 		} );
 
+		scene.name = 'Outline [ Non-Selected Objects Pass ]';
 		renderer.render( scene, camera );
 
 		// 2. Draw only the selected objects by comparing the depth buffer of non-selected objects
@@ -487,6 +490,7 @@ class OutlineNode extends TempNode {
 
 		} );
 
+		scene.name = 'Outline [ Selected Objects Pass ]';
 		renderer.render( scene, camera );
 
 		//
@@ -495,15 +499,19 @@ class OutlineNode extends TempNode {
 
 		this._selectionCache.clear();
 
+		scene.name = currentSceneName;
+
 		// 3. Downsample to (at least) half resolution
 
 		_quadMesh.material = this._materialCopy;
+		_quadMesh.name = 'Outline [ Downsample ]';
 		renderer.setRenderTarget( this._renderTargetMaskDownSampleBuffer );
 		_quadMesh.render( renderer );
 
 		// 4. Perform edge detection (half resolution)
 
 		_quadMesh.material = this._edgeDetectionMaterial;
+		_quadMesh.name = 'Outline [ Edge Detection ]';
 		renderer.setRenderTarget( this._renderTargetEdgeBuffer1 );
 		_quadMesh.render( renderer );
 
@@ -513,6 +521,7 @@ class OutlineNode extends TempNode {
 		this._blurDirection.value.copy( _BLUR_DIRECTION_X );
 
 		_quadMesh.material = this._separableBlurMaterial;
+		_quadMesh.name = 'Outline [ Blur Half Resolution ]';
 		renderer.setRenderTarget( this._renderTargetBlurBuffer1 );
 		_quadMesh.render( renderer );
 
@@ -528,6 +537,7 @@ class OutlineNode extends TempNode {
 		this._blurDirection.value.copy( _BLUR_DIRECTION_X );
 
 		_quadMesh.material = this._separableBlurMaterial2;
+		_quadMesh.name = 'Outline [ Blur Quarter Resolution ]';
 		renderer.setRenderTarget( this._renderTargetBlurBuffer2 );
 		_quadMesh.render( renderer );
 
@@ -540,6 +550,7 @@ class OutlineNode extends TempNode {
 		// 7. Composite
 
 		_quadMesh.material = this._compositeMaterial;
+		_quadMesh.name = 'Outline [ Blur Quarter Resolution ]';
 		renderer.setRenderTarget( this._renderTargetComposite );
 		_quadMesh.render( renderer );