@unikia/upe-renderer 0.186.110 → 0.187.11

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

@@ -1,4 +1,4 @@
-import { HalfFloatType, Vector2, RenderTarget, RendererUtils, QuadMesh, NodeMaterial, TempNode, NodeUpdateType, Matrix4, DepthTexture, FloatType } from 'three/webgpu';
+import { HalfFloatType, Vector2, RenderTarget, RendererUtils, QuadMesh, NodeMaterial, Node, NodeUpdateType, Matrix4, DepthTexture } from 'three/webgpu';
 import { float, Fn, max, texture, uniform, uv, vec2, convertToTexture, passTexture, velocity, ivec2, mix, context, OnBeforeRenderPipeline, OnAfterRenderPipeline } from 'three/tsl';
 import { clipAABB, computeHaltonOffsets, flickerReduction, sampleCurrentDepth, samplePreviousDepth } from '../utils/TAAUtils.js';
 
@@ -17,10 +17,10 @@ let _rendererState;
  *
  * Note: MSAA must be disabled when TRAA is in use.
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { traa } from 'three/addons/tsl/display/TRAANode.js';
  */
-class TRAANode extends TempNode {
+class TRAANode extends Node {
 
 	static get type() {
 
@@ -234,15 +234,7 @@ class TRAANode extends TempNode {
 		 * @private
 		 * @type {TextureNode}
 		 */
-		this._previousDepthNode = texture( new DepthTexture( 1, 1 ) );
-
-		/**
-		 * Sync the post processing stack with the TRAA node.
-		 *
-		 * @private
-		 * @type {boolean}
-		 */
-		this._needsPostProcessingSync = false;
+		this._previousDepthNode = texture( this._historyRenderTarget.depthTexture );
 
 		/**
 		 * The node used to render the scene's velocity.
@@ -367,16 +359,6 @@ class TRAANode extends TempNode {
 		const width = beautyRenderTarget.texture.width;
 		const height = beautyRenderTarget.texture.height;
 
-		//
-
-		if ( this._needsPostProcessingSync === true ) {
-
-			this.setViewOffset( width, height );
-
-			this._needsPostProcessingSync = false;
-
-		}
-
 		_rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
 
 		//
@@ -388,11 +370,6 @@ class TRAANode extends TempNode {
 
 		if ( needsRestart === true ) {
 
-			// make sure render targets are initialized after the resize which triggers a dispose()
-
-			renderer.initRenderTarget( this._historyRenderTarget );
-			renderer.initRenderTarget( this._resolveRenderTarget );
-
 			// make sure to reset the history with the contents of the beauty buffer otherwise subsequent frames after the
 			// resize will fade from a darker color to the correct one because the history was cleared with black.
 
@@ -425,7 +402,6 @@ class TRAANode extends TempNode {
 
 			const currentDepth = this.depthNode.value;
 			renderer.copyTextureToTexture( currentDepth, this._historyRenderTarget.depthTexture );
-			this._previousDepthNode.value = this._historyRenderTarget.depthTexture;
 
 		}
 
@@ -443,12 +419,14 @@ class TRAANode extends TempNode {
 	 */
 	setup( builder ) {
 
+		this.depthNode.build( builder );
+		this.velocityNode.build( builder );
+		this.beautyNode.build( builder );
+
 		if ( builder.renderPipeline && ! builder.context.renderPipelineState.viewOffsetOwner ) {
 
 			builder.context.renderPipelineState.viewOffsetOwner = this;
 
-			this._needsPostProcessingSync = true;
-
 			OnBeforeRenderPipeline( () => {
 
 				const size = builder.renderer.getDrawingBufferSize( _size );
@@ -464,11 +442,8 @@ class TRAANode extends TempNode {
 
 		}
 
-		if ( builder.renderer.reversedDepthBuffer === true ) {
-
-			this._historyRenderTarget.depthTexture.type = FloatType;
-
-		}
+		this._historyRenderTarget.depthTexture.format = this.depthNode.value.format;
+		this._historyRenderTarget.depthTexture.type = this.depthNode.value.type;
 
 		if ( builder.context.velocity !== undefined ) {
 
@@ -525,14 +500,7 @@ class TRAANode extends TempNode {
 			const weight = max( phase, phase.oneMinus() );
 			return weight.x.mul( weight.y ).oneMinus().div( 0.75 );
 
-		} ).setLayout( {
-			name: 'subpixelCorrection',
-			type: 'float',
-			inputs: [
-				{ name: 'velocityUV', type: 'vec2' },
-				{ name: 'textureSize', type: 'ivec2' }
-			]
-		} );
+		}, { velocityUV: 'vec2', textureSize: 'ivec2', return: 'float' } );
 
 		const historyNode = texture( this._historyRenderTarget.texture );
 

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

@@ -1,5 +1,5 @@
-import { EPSILON, Fn, If, abs, convertToTexture, dFdx, dFdy, dot, exp, float, floor, fwidth, getViewPosition, ivec2, luminance, max, min, mix, nodeObject, normalize, passTexture, screenCoordinate, select, smoothstep, sqrt, struct, texture, textureLoad, uniform, unpackRGBToNormal, uv, vec2, vec3, vec4, velocity, context, OnBeforeRenderPipeline, OnAfterRenderPipeline } from 'three/tsl';
-import { DepthTexture, HalfFloatType, Matrix4, NodeMaterial, NodeUpdateType, QuadMesh, RenderTarget, RendererUtils, TempNode, Vector2, Vector3 } from 'three/webgpu';
+import { EPSILON, Fn, If, abs, convertToTexture, dFdx, dFdy, dot, exp, float, floor, fwidth, getViewPosition, ivec2, luminance, max, min, mix, nodeObject, normalize, passTexture, screenCoordinate, select, smoothstep, sqrt, struct, texture, textureLoad, uniform, unpackRGBToNormal, uv, vec2, vec3, vec4, velocity, context, OnBeforeRenderPipeline, OnAfterRenderPipeline, isBackgroundDepth } from 'three/tsl';
+import { DepthTexture, HalfFloatType, Matrix4, NodeMaterial, NodeUpdateType, QuadMesh, RenderTarget, RendererUtils, Node, Vector2, Vector3 } from 'three/webgpu';
 import { ENV_RAY_LENGTH, ENV_RAY_LENGTH_THRESHOLD } from '../utils/SpecularHelpers.js';
 
 // Reprojection helpers
@@ -13,15 +13,7 @@ const beautyTexelFromScreen = Fn( ( [ screenTexel, beautySize, resolveSize ] ) =
 
 	return ivec2( floor( vec2( screenTexel ).mul( beautySize ).div( resolveSize ) ) );
 
-} ).setLayout( {
-	name: 'beautyTexelFromScreen',
-	type: 'ivec2',
-	inputs: [
-		{ name: 'screenTexel', type: 'ivec2' },
-		{ name: 'beautySize', type: 'vec2' },
-		{ name: 'resolveSize', type: 'vec2' }
-	]
-} );
+}, { screenTexel: 'ivec2', beautySize: 'vec2', resolveSize: 'vec2', return: 'ivec2' } );
 
 /**
  * Projects a world-space position into previous-frame UV coordinates.
@@ -45,15 +37,7 @@ const projectWorldToUV = Fn( ( [ worldPos, previousViewMatrix, previousProjectio
 
 	return resultUV;
 
-} ).setLayout( {
-	name: 'projectWorldToUV',
-	type: 'vec2',
-	inputs: [
-		{ name: 'worldPos', type: 'vec3' },
-		{ name: 'previousViewMatrix', type: 'mat4' },
-		{ name: 'previousProjectionMatrix', type: 'mat4' }
-	]
-} );
+}, { worldPos: 'vec3', previousViewMatrix: 'mat4', previousProjectionMatrix: 'mat4', return: 'vec2' } );
 
 // YCoCg variance clipping
 
@@ -112,15 +96,7 @@ const clipToAABB = Fn( ( [ history, boxMin, boxMax ] ) => {
 
 	return maxUnit.greaterThan( 1 ).select( pClip.add( vClip.div( maxUnit ) ), history );
 
-} ).setLayout( {
-	name: 'clipToAABB',
-	type: 'vec3',
-	inputs: [
-		{ name: 'history', type: 'vec3' },
-		{ name: 'boxMin', type: 'vec3' },
-		{ name: 'boxMax', type: 'vec3' }
-	]
-} );
+}, { history: 'vec3', boxMin: 'vec3', boxMax: 'vec3', return: 'vec3' } );
 
 const neighborhoodStruct = struct( {
 	mean: 'vec3',
@@ -387,7 +363,7 @@ const reprojectionStretchConfidence = Fn( ( [ historyUV, resolution ] ) => {
 
 	return sigMin.saturate();
 
-} );
+}, { historyUV: 'vec2', resolution: 'vec2', return: 'float' } );
 
 // Specular reprojection
 
@@ -409,6 +385,13 @@ const reprojectHitPoint = Fn( ( [
 
 	return projectWorldToUV( parallaxHitPoint, previousViewMatrix, previousProjectionMatrix );
 
+}, {
+	rayOrig: 'vec3',
+	rayLength: 'float',
+	cameraWorldPosition: 'vec3',
+	previousViewMatrix: 'mat4',
+	previousProjectionMatrix: 'mat4',
+	return: 'vec2'
 } );
 
 /**
@@ -420,11 +403,7 @@ const velocityToUVOffset = Fn( ( [ velocity ] ) => {
 
 	return velocity.mul( vec2( 0.5, - 0.5 ) );
 
-} ).setLayout( {
-	name: 'velocityToUVOffset',
-	type: 'vec2',
-	inputs: [ { name: 'velocity', type: 'vec2' } ]
-} );
+}, { velocity: 'vec2', return: 'vec2' } );
 
 /**
  * Current and previous-frame camera matrices for temporal reprojection passes.
@@ -513,10 +492,10 @@ const VARIANCE_GAMMA_MAX = 1;
  * - {@link https://alextardif.com/TAA.html}
  * - {@link https://www.elopezr.com/temporal-aa-and-the-quest-for-the-holy-trail/}
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { temporalReproject } from 'three/addons/tsl/display/TemporalReprojectNode.js';
  */
-class TemporalReprojectNode extends TempNode {
+class TemporalReprojectNode extends Node {
 
 	static get type() {
 
@@ -660,16 +639,29 @@ class TemporalReprojectNode extends TempNode {
 
 		_rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
 
-		const needsRestart = this._historyRenderTarget.width !== width || this._historyRenderTarget.height !== height;
+		const currentDepth = this.depthNode.value;
+		const historyDepth = this._historyRenderTarget.depthTexture;
+
+		const depthFormatChanged = historyDepth.format !== currentDepth.format || historyDepth.type !== currentDepth.type;
+
+		// The texture copy requires matching formats, e.g. float depth with reversed depth or depth/stencil.
+		// Checked here since updateBefore() can run before setup() when driven by another node.
+
+		if ( depthFormatChanged === true ) {
+
+			historyDepth.format = currentDepth.format;
+			historyDepth.type = currentDepth.type;
+			historyDepth.needsUpdate = true;
+
+		}
+
+		const needsRestart = depthFormatChanged === true || this._historyRenderTarget.width !== width || this._historyRenderTarget.height !== height;
 		this.setSize( width, height );
 
 		let historySwappedForRestart = false;
 
 		if ( needsRestart === true ) {
 
-			renderer.initRenderTarget( this._historyRenderTarget );
-			renderer.initRenderTarget( this._resolveRenderTarget );
-
 			this._previousNormalTexture.dispose();
 			this._previousNormalTexture = this.normalNode.value.clone();
 			this._previousNormalNode.value = this._previousNormalTexture;
@@ -708,16 +700,15 @@ class TemporalReprojectNode extends TempNode {
 
 		}
 
-		const currentDepth = this.depthNode.value;
 		const srcW = currentDepth.image !== null && currentDepth.image !== undefined ? currentDepth.image.width : 0;
 		const srcH = currentDepth.image !== null && currentDepth.image !== undefined ? currentDepth.image.height : 0;
 
 		if ( srcW > 0 && srcH > 0 ) {
 
-			renderer.copyTextureToTexture( currentDepth, this._historyRenderTarget.depthTexture );
+			renderer.copyTextureToTexture( currentDepth, historyDepth );
 			renderer.copyTextureToTexture( this.normalNode.value, this._previousNormalTexture );
 
-			this._previousDepthNode.value = this._historyRenderTarget.depthTexture;
+			this._previousDepthNode.value = historyDepth;
 
 		}
 
@@ -727,6 +718,10 @@ class TemporalReprojectNode extends TempNode {
 
 	setup( builder ) {
 
+		// Ensures the pass providing the depth updates before this node.
+
+		this.depthNode.build( builder );
+
 		const sharedContext = context( builder.getSharedContext() );
 
 		if ( builder.renderPipeline && ! builder.context.renderPipelineState.viewOffsetOwner ) {
@@ -788,7 +783,7 @@ class TemporalReprojectNode extends TempNode {
 
 			const screenTexel = ivec2( floor( screenCoordinate.xy.sub( 0.5 ) ) );
 			const depth = textureLoad( this.depthNode, screenTexel ).r.toVar();
-			depth.greaterThanEqual( 1.0 ).discard();
+			isBackgroundDepth( depth ).discard();
 
 			const beautySize = this.beautyNode.size();
 			const beautyTexel = beautyTexelFromScreen( screenTexel, beautySize, this._resolution );
@@ -1019,11 +1014,11 @@ export default TemporalReprojectNode;
  * @param {TemporalReprojectNodeOptions} [options]
  * @returns {TemporalReprojectNode}
  */
-export const temporalReproject = ( beautyNode, depthNode, normalNode, velocityNode, camera, options = {} ) => nodeObject( new TemporalReprojectNode(
+export const temporalReproject = ( beautyNode, depthNode, normalNode, velocityNode, camera, options = {} ) => new TemporalReprojectNode(
 	convertToTexture( beautyNode ),
 	nodeObject( depthNode ),
 	nodeObject( normalNode ),
 	nodeObject( velocityNode ),
 	camera,
 	options
-) );
+);

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

@@ -1,13 +1,13 @@
-import { TempNode } from 'three/webgpu';
+import { Node } from 'three/webgpu';
 import { nodeObject, Fn, float, uv, convertToTexture, vec4, If, int, clamp, sub, mix } from 'three/tsl';
 
 /**
  * Post processing node for creating a transition effect between scenes.
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { transition } from 'three/addons/tsl/display/TransitionNode.js';
  */
-class TransitionNode extends TempNode {
+class TransitionNode extends Node {
 
 	static get type() {
 

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

@@ -0,0 +1,30 @@
+import { float, Fn, vec2, vec4, uv, min, screenSize, convertToTexture } from 'three/tsl';
+
+/**
+ * Applies a lens dirt effect. The lens dirt texture is revealed wherever the
+ * scene's luminance is bright. The input is typically a blurred luminance of
+ * the scene, e.g. the result of a bloom pass. A wider blur reveals the dirt
+ * over a larger area around bright spots.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec4>} textureNode - The node that represents the scene's blurred luminance.
+ * @param {TextureNode} dirtTextureNode - The lens dirt texture.
+ * @param {Node<float>} [intensity=float(1)] - Defines the intensity of the lens dirt.
+ * @return {Node<vec4>} The lens dirt.
+ */
+export const lensDirt = /*#__PURE__*/ Fn( ( [ textureNode, dirtTextureNode, intensity = float( 1 ) ] ) => {
+
+	textureNode = convertToTexture( textureNode );
+
+	const targetUV = textureNode.uvNode || uv();
+
+	const dirtSize = vec2( dirtTextureNode.size( 0 ) ).toConst();
+	const aspect = screenSize.x.div( screenSize.y ).div( dirtSize.x.div( dirtSize.y ) ).toConst();
+	const dirtUV = targetUV.sub( 0.5 ).mul( vec2( min( aspect, 1 ), min( aspect.reciprocal(), 1 ) ) ).add( 0.5 ).toConst();
+
+	const dirt = dirtTextureNode.sample( dirtUV ).rgb.mul( textureNode.sample( targetUV ).rgb ).mul( intensity );
+
+	return vec4( dirt, 1 );
+
+} );