@plastic-software/three 0.167.4 → 0.174.0

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

@@ -0,0 +1,88 @@
+import { NodeMaterial } from 'three/webgpu';
+import { nodeObject, Fn, vec4, uv, If, mod, screenCoordinate } from 'three/tsl';
+import StereoCompositePassNode from './StereoCompositePassNode.js';
+
+/**
+ * A render pass node that creates a parallax barrier effect.
+ *
+ * @augments StereoCompositePassNode
+ */
+class ParallaxBarrierPassNode extends StereoCompositePassNode {
+
+	static get type() {
+
+		return 'ParallaxBarrierPassNode';
+
+	}
+
+	/**
+	 * Constructs a new parallax barrier pass node.
+	 *
+	 * @param {Scene} scene - The scene to render.
+	 * @param {Camera} camera - The camera to render the scene with.
+	 */
+	constructor( scene, camera ) {
+
+		super( scene, camera );
+
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isParallaxBarrierPassNode = true;
+
+	}
+
+	/**
+	 * 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 parallaxBarrier = Fn( () => {
+
+			const color = vec4().toVar();
+
+			If( mod( screenCoordinate.y, 2 ).greaterThan( 1 ), () => {
+
+				color.assign( this._mapLeft.sample( uvNode ) );
+
+			} ).Else( () => {
+
+				color.assign( this._mapRight.sample( uvNode ) );
+
+			} );
+
+			return color;
+
+		} );
+
+		const material = this._material || ( this._material = new NodeMaterial() );
+		material.fragmentNode = parallaxBarrier().context( builder.getSharedContext() );
+		material.needsUpdate = true;
+
+		return super.setup( builder );
+
+	}
+
+}
+
+export default ParallaxBarrierPassNode;
+
+/**
+ * TSL function for creating an parallax barrier pass node.
+ *
+ * @tsl
+ * @function
+ * @param {Scene} scene - The scene to render.
+ * @param {Camera} camera - The camera to render the scene with.
+ * @returns {ParallaxBarrierPassNode}
+ */
+export const parallaxBarrierPass = ( scene, camera ) => nodeObject( new ParallaxBarrierPassNode( scene, camera ) );

package/{src/nodes → examples/jsm/tsl}/display/PixelationPassNode.js

@@ -1,42 +1,99 @@
-import TempNode from '../core/TempNode.js';
-import { uv } from '../accessors/UVNode.js';
-import { addNodeElement, Fn, nodeObject, vec2, vec3, float, If } from '../shadernode/ShaderNode.js';
-import { NodeUpdateType } from '../core/constants.js';
-import { uniform } from '../core/UniformNode.js';
-import { dot, clamp, smoothstep, sign, step, floor } from '../math/MathNode.js';
-import { Vector4 } from '../../math/Vector4.js';
-import { output, property } from '../core/PropertyNode.js';
-import PassNode from './PassNode.js';
-import { mrt } from '../core/MRTNode.js';
-import { normalView } from '../accessors/NormalNode.js';
-import { NearestFilter } from '../../constants.js';
-
+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 } from 'three/tsl';
+
+/**
+ * A inner node definition that implements the actual pixelation TSL code.
+ *
+ * @inner
+ * @augments TempNode
+ */
 class PixelationNode extends TempNode {
 
-	constructor( textureNode, depthNode, normalNode, pixelSize, normalEdgeStrength, depthEdgeStrength ) {
+	static get type() {
+
+		return 'PixelationNode';
+
+	}
 
-		super();
+	/**
+	 * Constructs a new pixelation 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.
+	 */
+	constructor( textureNode, depthNode, normalNode, pixelSize, normalEdgeStrength, depthEdgeStrength ) {
 
-		// Input textures
+		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;
-		this.normalNode = normalNode;
 
-		// Input uniforms
+		/**
+		 * The texture that represents the beauty's normals.
+		 *
+		 * @type {TextureNode}
+		 */
+		this.normalNode = normalNode;
 
+		/**
+		 * The pixel size.
+		 *
+		 * @type {Node<float>}
+		 */
 		this.pixelSize = pixelSize;
+
+		/**
+		 * The pixel size.
+		 *
+		 * @type {Node<float>}
+		 */
 		this.normalEdgeStrength = normalEdgeStrength;
-		this.depthEdgeStrength = depthEdgeStrength;
 
-		// Private uniforms
+		/**
+		 * The depth edge strength.
+		 *
+		 * @type {Node<float>}
+		 */
+		this.depthEdgeStrength = depthEdgeStrength;
 
+		/**
+		 * Uniform node that represents the resolution.
+		 *
+		 * @type {Node<vec4>}
+		 */
 		this._resolution = uniform( new Vector4() );
 
-		this.updateBeforeType = NodeUpdateType.RENDER;
+		/**
+		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node updates
+		 * its internal uniforms once per frame in `updateBefore()`.
+		 *
+		 * @type {string}
+		 * @default 'frame'
+		 */
+		this.updateBeforeType = NodeUpdateType.FRAME;
 
 	}
 
+	/**
+	 * This method is used to update uniforms once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
 	updateBefore() {
 
 		const map = this.textureNode.value;
@@ -48,6 +105,12 @@ class PixelationNode extends TempNode {
 
 	}
 
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {ShaderCallNodeInternal}
+	 */
 	setup() {
 
 		const { textureNode, depthNode, normalNode } = this;
@@ -56,11 +119,11 @@ class PixelationNode extends TempNode {
 		const uvNodeDepth = depthNode.uvNode || uv();
 		const uvNodeNormal = normalNode.uvNode || uv();
 
-		const sampleTexture = () => textureNode.uv( uvNodeTexture );
+		const sampleTexture = () => textureNode.sample( uvNodeTexture );
 
-		const sampleDepth = ( x, y ) => depthNode.uv( uvNodeDepth.add( vec2( x, y ).mul( this._resolution.zw ) ) ).r;
+		const sampleDepth = ( x, y ) => depthNode.sample( uvNodeDepth.add( vec2( x, y ).mul( this._resolution.zw ) ) ).r;
 
-		const sampleNormal = ( x, y ) => normalNode.uv( uvNodeNormal.add( vec2( x, y ).mul( this._resolution.zw ) ) ).rgb.normalize();
+		const sampleNormal = ( x, y ) => normalNode.sample( uvNodeNormal.add( vec2( x, y ).mul( this._resolution.zw ) ) ).rgb.normalize();
 
 		const depthEdgeIndicator = ( depth ) => {
 
@@ -150,20 +213,65 @@ class PixelationNode extends TempNode {
 
 }
 
-const pixelation = ( node, depthNode, normalNode, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) => nodeObject( new PixelationNode( nodeObject( node ).toTexture(), nodeObject( depthNode ).toTexture(), nodeObject( normalNode ).toTexture(), nodeObject( pixelSize ), nodeObject( normalEdgeStrength ), nodeObject( depthEdgeStrength ) ) );
-
-addNodeElement( 'pixelation', pixelation );
+const pixelation = ( node, depthNode, normalNode, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) => nodeObject( 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
+ */
 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=03] - The normal edge strength.
+	 * @param {Node<float> | number} [depthEdgeStrength=03] - The depth edge strength.
+	 */
 	constructor( scene, camera, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) {
 
-		super( 'color', scene, camera, { minFilter: NearestFilter, magFilter: NearestFilter } );
+		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( {
@@ -173,6 +281,12 @@ class PixelationPassNode extends PassNode {
 
 	}
 
+	/**
+	 * 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;
@@ -184,6 +298,12 @@ class PixelationPassNode extends PassNode {
 
 	}
 
+	/**
+	 * 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' );
@@ -196,6 +316,18 @@ class PixelationPassNode extends PassNode {
 
 }
 
+/**
+ * TSL function for creating a pixelation render pass node for post processing.
+ *
+ * @tsl
+ * @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 {Node<float> | number} [normalEdgeStrength=03] - The normal edge strength.
+ * @param {Node<float> | number} [depthEdgeStrength=03] - The depth edge strength.
+ * @returns {PixelationPassNode}
+ */
 export const pixelationPass = ( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength ) => nodeObject( new PixelationPassNode( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength ) );
 
 export default PixelationPassNode;

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

@@ -0,0 +1,95 @@
+import { TempNode } from 'three/webgpu';
+import { nodeObject, Fn, uv, uniform, 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
+ */
+class RGBShiftNode extends TempNode {
+
+	static get type() {
+
+		return 'RGBShiftNode';
+
+	}
+
+	/**
+	 * 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.
+	 */
+	constructor( textureNode, amount = 0.005, angle = 0 ) {
+
+		super( 'vec4' );
+
+		/**
+		 * The texture node that represents the input of the effect.
+		 *
+		 * @type {TextureNode}
+		 */
+		this.textureNode = textureNode;
+
+		/**
+		 * The amount of the RGB shift.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.amount = uniform( amount );
+
+		/**
+		 * Defines in which direction colors are shifted.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.angle = uniform( angle );
+
+	}
+
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {ShaderCallNodeInternal}
+	 */
+	setup( /* builder */ ) {
+
+		const { textureNode } = this;
+
+		const uvNode = textureNode.uvNode || uv();
+
+		const sampleTexture = ( uv ) => textureNode.sample( uv );
+
+		const rgbShift = Fn( () => {
+
+			const offset = vec2( cos( this.angle ), sin( this.angle ) ).mul( this.amount );
+			const cr = sampleTexture( uvNode.add( offset ) );
+			const cga = sampleTexture( uvNode );
+			const cb = sampleTexture( uvNode.sub( offset ) );
+
+			return vec4( cr.r, cga.g, cb.b, cga.a );
+
+		} );
+
+		return rgbShift();
+
+	}
+
+}
+
+export default RGBShiftNode;
+
+/**
+ * TSL function for creating a RGB shift or split effect for post processing.
+ *
+ * @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.
+ * @returns {RGBShiftNode}
+ */
+export const rgbShift = ( node, amount, angle ) => nodeObject( new RGBShiftNode( convertToTexture( node ), amount, angle ) );