@unikia/upe-renderer 0.186.110 → 0.187.11

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

@@ -1,108 +1,92 @@
-import { NearestFilter, Vector4, TempNode, NodeUpdateType, PassNode } from 'three/webgpu';
-import { nodeObject, Fn, float, uv, uniform, convertToTexture, vec2, vec3, clamp, floor, dot, smoothstep, If, sign, step, mrt, output, normalView, property, vec4 } from 'three/tsl';
+import { NearestFilter, PassNode } from 'three/webgpu';
+import { nodeObject, Fn, float, uv, vec2, vec3, clamp, floor, dot, smoothstep, If, sign, step, mrt, output, normalView, property, vec4, textureSize } from 'three/tsl';
 
 /**
- * A inner node definition that implements the actual pixelation TSL code.
+ * A special render pass node that renders the scene with a pixelation effect,
+ * creating a visual presentation similar to that of a 2D pixel art game.
  *
- * @inner
- * @augments TempNode
+ * The effect is achieved by rendering into a render target whose dimensions
+ * are scaled down by {@link PixelationPassNode#pixelSize}.
+ *
+ * @augments PassNode
+ * @three_import import { pixelationPass } from 'three/addons/tsl/display/PixelationPassNode.js';
  */
-class PixelationNode extends TempNode {
+class PixelationPassNode extends PassNode {
 
 	static get type() {
 
-		return 'PixelationNode';
+		return 'PixelationPassNode';
 
 	}
 
 	/**
-	 * Constructs a new pixelation node.
+	 * Constructs a new pixelation pass node.
 	 *
-	 * @param {TextureNode} textureNode - The texture node that represents the beauty pass.
-	 * @param {TextureNode} depthNode - The texture that represents the beauty's depth.
-	 * @param {TextureNode} normalNode - The texture that represents the beauty's normals.
-	 * @param {Node<float>} pixelSize - The pixel size.
-	 * @param {Node<float>} normalEdgeStrength - The normal edge strength.
-	 * @param {Node<float>} depthEdgeStrength - The depth edge strength.
+	 * @param {Scene} scene - The scene to render.
+	 * @param {Camera} camera - The camera to render the scene with.
+	 * @param {number} [pixelSize=6] - The pixel size.
+	 * @param {Node<float> | number} [normalEdgeStrength=0.3] - The normal edge strength.
+	 * @param {Node<float> | number} [depthEdgeStrength=0.4] - The depth edge strength.
 	 */
-	constructor( textureNode, depthNode, normalNode, pixelSize, normalEdgeStrength, depthEdgeStrength ) {
-
-		super( 'vec4' );
-
-		/**
-		 * The texture node that represents the beauty pass.
-		 *
-		 * @type {TextureNode}
-		 */
-		this.textureNode = textureNode;
-
-		/**
-		 * The texture that represents the beauty's depth.
-		 *
-		 * @type {TextureNode}
-		 */
-		this.depthNode = depthNode;
+	constructor( scene, camera, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) {
 
-		/**
-		 * The texture that represents the beauty's normals.
-		 *
-		 * @type {TextureNode}
-		 */
-		this.normalNode = normalNode;
+		super( PassNode.COLOR, scene, camera, { minFilter: NearestFilter, magFilter: NearestFilter } );
 
 		/**
-		 * The pixel size.
+		 * The pixel size. This value scales the pass's render target.
 		 *
-		 * @type {Node<float>}
+		 * @type {number}
+		 * @default 6
 		 */
 		this.pixelSize = pixelSize;
 
 		/**
-		 * The pixel size.
+		 * The normal edge strength.
 		 *
 		 * @type {Node<float>}
+		 * @default 0.3
 		 */
-		this.normalEdgeStrength = normalEdgeStrength;
+		this.normalEdgeStrength = nodeObject( normalEdgeStrength );
 
 		/**
 		 * The depth edge strength.
 		 *
 		 * @type {Node<float>}
+		 * @default 0.4
 		 */
-		this.depthEdgeStrength = depthEdgeStrength;
+		this.depthEdgeStrength = nodeObject( depthEdgeStrength );
 
 		/**
-		 * Uniform node that represents the resolution.
+		 * This flag can be used for type testing.
 		 *
-		 * @private
-		 * @type {Node<vec4>}
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
 		 */
-		this._resolution = uniform( new Vector4() );
+		this.isPixelationPassNode = true;
 
-		/**
-		 * The `updateType` is set to `NodeUpdateType.FRAME` since the node updates
-		 * its internal uniforms once per frame in `updateBefore()`.
-		 *
-		 * @type {string}
-		 * @default 'frame'
-		 */
-		this.updateType = NodeUpdateType.FRAME;
+		this._mrt = mrt( {
+			output: output,
+			normal: normalView
+		} );
 
 	}
 
 	/**
-	 * This method is used to update uniforms once per frame.
+	 * Sets the size of the pass.
 	 *
-	 * @param {NodeFrame} frame - The current node frame.
+	 * `PassNode.updateBefore()` calls this method once per frame, so
+	 * {@link PixelationPassNode#pixelSize} can be changed at any time.
+	 *
+	 * @param {number} width - The width of the pass.
+	 * @param {number} height - The height of the pass.
 	 */
-	update() {
-
-		const map = this.textureNode.value;
+	setSize( width, height ) {
 
-		const width = map.image.width;
-		const height = map.image.height;
+		const adjustedWidth = Math.floor( width / this.pixelSize );
+		const adjustedHeight = Math.floor( height / this.pixelSize );
 
-		this._resolution.value.set( width, height, 1 / width, 1 / height );
+		super.setSize( adjustedWidth, adjustedHeight );
 
 	}
 
@@ -112,59 +96,59 @@ class PixelationNode extends TempNode {
 	 * @param {NodeBuilder} builder - The current node builder.
 	 * @return {ShaderCallNodeInternal}
 	 */
-	setup() {
+	setup( /* builder */ ) {
 
-		const { textureNode, depthNode, normalNode } = this;
+		const textureNode = this.getTextureNode( 'output' );
+		const depthNode = this.getTextureNode( 'depth' );
+		const normalNode = this.getTextureNode( 'normal' );
 
 		const uvNodeTexture = textureNode.uvNode || uv();
 		const uvNodeDepth = depthNode.uvNode || uv();
 		const uvNodeNormal = normalNode.uvNode || uv();
 
 		const sampleTexture = () => textureNode.sample( uvNodeTexture );
+		const sampleDepth = ( uv ) => depthNode.sample( uv ).r;
+		const sampleNormal = ( uv ) => normalNode.sample( uv ).rgb.normalize();
 
-		const sampleDepth = ( x, y ) => depthNode.sample( uvNodeDepth.add( vec2( x, y ).mul( this._resolution.zw ) ) ).r;
-
-		const sampleNormal = ( x, y ) => normalNode.sample( uvNodeNormal.add( vec2( x, y ).mul( this._resolution.zw ) ) ).rgb.normalize();
-
-		const depthEdgeIndicator = ( depth ) => {
+		const depthEdgeIndicator = ( depth, depthE, depthW, depthN, depthS ) => {
 
 			const diff = property( 'float', 'diff' );
-			diff.addAssign( clamp( sampleDepth( 1, 0 ).sub( depth ) ) );
-			diff.addAssign( clamp( sampleDepth( - 1, 0 ).sub( depth ) ) );
-			diff.addAssign( clamp( sampleDepth( 0, 1 ).sub( depth ) ) );
-			diff.addAssign( clamp( sampleDepth( 0, - 1 ).sub( depth ) ) );
+			diff.addAssign( clamp( depthE.sub( depth ) ) );
+			diff.addAssign( clamp( depthW.sub( depth ) ) );
+			diff.addAssign( clamp( depthN.sub( depth ) ) );
+			diff.addAssign( clamp( depthS.sub( depth ) ) );
 
 			return floor( smoothstep( 0.01, 0.02, diff ).mul( 2 ) ).div( 2 );
 
 		};
 
-		const neighborNormalEdgeIndicator = ( x, y, depth, normal ) => {
+		const neighborNormalEdgeIndicator = ( x, y, neighborDepth, depth, normal, invSize ) => {
 
-			const depthDiff = sampleDepth( x, y ).sub( depth );
-			const neighborNormal = sampleNormal( x, y );
+			const depthDiff = neighborDepth.sub( depth ).toConst();
+			const neighborNormal = sampleNormal( uvNodeNormal.add( vec2( x, y ).mul( invSize ) ) ).toConst();
 
 			// Edge pixels should yield to faces who's normals are closer to the bias normal.
 
 			const normalEdgeBias = vec3( 1, 1, 1 ); // This should probably be a parameter.
-			const normalDiff = dot( normal.sub( neighborNormal ), normalEdgeBias );
-			const normalIndicator = clamp( smoothstep( - 0.01, 0.01, normalDiff ), 0.0, 1.0 );
+			const normalDiff = dot( normal.sub( neighborNormal ), normalEdgeBias ).toConst();
+			const normalIndicator = clamp( smoothstep( - 0.01, 0.01, normalDiff ), 0.0, 1.0 ).toConst();
 
 			// Only the shallower pixel should detect the normal edge.
 
-			const depthIndicator = clamp( sign( depthDiff.mul( .25 ).add( .0025 ) ), 0.0, 1.0 );
+			const depthIndicator = clamp( sign( depthDiff.mul( .25 ).add( .0025 ) ), 0.0, 1.0 ).toConst();
 
 			return float( 1.0 ).sub( dot( normal, neighborNormal ) ).mul( depthIndicator ).mul( normalIndicator );
 
 		};
 
-		const normalEdgeIndicator = ( depth, normal ) => {
+		const normalEdgeIndicator = ( depth, normal, depthE, depthW, depthN, depthS, invSize ) => {
 
 			const indicator = property( 'float', 'indicator' );
 
-			indicator.addAssign( neighborNormalEdgeIndicator( 0, - 1, depth, normal ) );
-			indicator.addAssign( neighborNormalEdgeIndicator( 0, 1, depth, normal ) );
-			indicator.addAssign( neighborNormalEdgeIndicator( - 1, 0, depth, normal ) );
-			indicator.addAssign( neighborNormalEdgeIndicator( 1, 0, depth, normal ) );
+			indicator.addAssign( neighborNormalEdgeIndicator( 0, - 1, depthS, depth, normal, invSize ) );
+			indicator.addAssign( neighborNormalEdgeIndicator( 0, 1, depthN, depth, normal, invSize ) );
+			indicator.addAssign( neighborNormalEdgeIndicator( - 1, 0, depthW, depth, normal, invSize ) );
+			indicator.addAssign( neighborNormalEdgeIndicator( 1, 0, depthE, depth, normal, invSize ) );
 
 			return step( 0.1, indicator );
 
@@ -177,10 +161,22 @@ class PixelationNode extends TempNode {
 			const depth = property( 'float', 'depth' );
 			const normal = property( 'vec3', 'normal' );
 
+			const depthE = float().toVar();
+			const depthW = float().toVar();
+			const depthN = float().toVar();
+			const depthS = float().toVar();
+
+			const invSize = vec2( 1 ).div( textureSize( textureNode ) ).toConst();
+
 			If( this.depthEdgeStrength.greaterThan( 0.0 ).or( this.normalEdgeStrength.greaterThan( 0.0 ) ), () => {
 
-				depth.assign( sampleDepth( 0, 0 ) );
-				normal.assign( sampleNormal( 0, 0 ) );
+				depth.assign( sampleDepth( uvNodeDepth ) );
+				normal.assign( sampleNormal( uvNodeNormal ) );
+
+				depthE.assign( sampleDepth( uvNodeDepth.add( vec2( 1, 0 ).mul( invSize ) ) ) );
+				depthW.assign( sampleDepth( uvNodeDepth.add( vec2( - 1, 0 ).mul( invSize ) ) ) );
+				depthN.assign( sampleDepth( uvNodeDepth.add( vec2( 0, 1 ).mul( invSize ) ) ) );
+				depthS.assign( sampleDepth( uvNodeDepth.add( vec2( 0, - 1 ).mul( invSize ) ) ) );
 
 			} );
 
@@ -188,7 +184,7 @@ class PixelationNode extends TempNode {
 
 			If( this.depthEdgeStrength.greaterThan( 0.0 ), () => {
 
-				dei.assign( depthEdgeIndicator( depth ) );
+				dei.assign( depthEdgeIndicator( depth, depthE, depthW, depthN, depthS ) );
 
 			} );
 
@@ -196,7 +192,7 @@ class PixelationNode extends TempNode {
 
 			If( this.normalEdgeStrength.greaterThan( 0.0 ).and( normal.length().greaterThan( 0 ) ), () => {
 
-				nei.assign( normalEdgeIndicator( depth, normal ) );
+				nei.assign( normalEdgeIndicator( depth, normal, depthE, depthW, depthN, depthS, invSize ) );
 
 			} );
 
@@ -214,110 +210,6 @@ class PixelationNode extends TempNode {
 
 }
 
-const pixelation = ( node, depthNode, normalNode, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) => new PixelationNode( convertToTexture( node ), convertToTexture( depthNode ), convertToTexture( normalNode ), nodeObject( pixelSize ), nodeObject( normalEdgeStrength ), nodeObject( depthEdgeStrength ) );
-
-/**
- * A special render pass node that renders the scene with a pixelation effect.
- *
- * @augments PassNode
- * @three_import import { pixelationPass } from 'three/addons/tsl/display/PixelationPassNode.js';
- */
-class PixelationPassNode extends PassNode {
-
-	static get type() {
-
-		return 'PixelationPassNode';
-
-	}
-
-	/**
-	 * Constructs a new pixelation pass node.
-	 *
-	 * @param {Scene} scene - The scene to render.
-	 * @param {Camera} camera - The camera to render the scene with.
-	 * @param {Node<float> | number} [pixelSize=6] - The pixel size.
-	 * @param {Node<float> | number} [normalEdgeStrength=0.3] - The normal edge strength.
-	 * @param {Node<float> | number} [depthEdgeStrength=0.4] - The depth edge strength.
-	 */
-	constructor( scene, camera, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) {
-
-		super( PassNode.COLOR, scene, camera, { minFilter: NearestFilter, magFilter: NearestFilter } );
-
-		/**
-		 * The pixel size.
-		 *
-		 * @type {number}
-		 * @default 6
-		 */
-		this.pixelSize = pixelSize;
-
-		/**
-		 * The normal edge strength.
-		 *
-		 * @type {number}
-		 * @default 0.3
-		 */
-		this.normalEdgeStrength = normalEdgeStrength;
-
-		/**
-		 * The depth edge strength.
-		 *
-		 * @type {number}
-		 * @default 0.4
-		 */
-		this.depthEdgeStrength = depthEdgeStrength;
-
-		/**
-		 * This flag can be used for type testing.
-		 *
-		 * @type {boolean}
-		 * @readonly
-		 * @default true
-		 */
-		this.isPixelationPassNode = true;
-
-		this._mrt = mrt( {
-			output: output,
-			normal: normalView
-		} );
-
-	}
-
-	/**
-	 * Sets the size of the pass.
-	 *
-	 * @param {number} width - The width of the pass.
-	 * @param {number} height - The height of the pass.
-	 */
-	setSize( width, height ) {
-
-		const pixelSize = this.pixelSize.value ? this.pixelSize.value : this.pixelSize;
-
-		const adjustedWidth = Math.floor( width / pixelSize );
-		const adjustedHeight = Math.floor( height / pixelSize );
-
-		super.setSize( adjustedWidth, adjustedHeight );
-
-	}
-
-	/**
-	 * This method is used to setup the effect's TSL code.
-	 *
-	 * @param {NodeBuilder} builder - The current node builder.
-	 * @return {PixelationNode}
-	 */
-	setup() {
-
-		const color = super.getTextureNode( 'output' );
-		const depth = super.getTextureNode( 'depth' );
-		const normal = super.getTextureNode( 'normal' );
-
-		return pixelation( color, depth, normal, this.pixelSize, this.normalEdgeStrength, this.depthEdgeStrength );
-
-	}
-
-}
-
 /**
  * TSL function for creating a pixelation render pass node for post processing.
  *
@@ -325,7 +217,7 @@ class PixelationPassNode extends PassNode {
  * @function
  * @param {Scene} scene - The scene to render.
  * @param {Camera} camera - The camera to render the scene with.
- * @param {Node<float> | number} [pixelSize=6] - The pixel size.
+ * @param {number} [pixelSize=6] - The pixel size.
  * @param {Node<float> | number} [normalEdgeStrength=0.3] - The normal edge strength.
  * @param {Node<float> | number} [depthEdgeStrength=0.4] - The depth edge strength.
  * @returns {PixelationPassNode}

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

@@ -1,14 +1,14 @@
-import { TempNode } from 'three/webgpu';
+import { Node } from 'three/webgpu';
 import { nodeObject, Fn, uv, vec2, sin, cos, vec4, convertToTexture } from 'three/tsl';
 
 /**
  * Post processing node for shifting/splitting RGB color channels. The effect
  * separates color channels and offsets them from each other.
  *
- * @augments TempNode
+ * @augments Node
  * @three_import import { rgbShift } from 'three/addons/tsl/display/RGBShiftNode.js';
  */
-class RGBShiftNode extends TempNode {
+class RGBShiftNode extends Node {
 
 	static get type() {