Node: Document more modules. (#30135)

* Node: Document more modules.

* Clean up.

* Node: Document more modules.

* Fix E2E.

examples/jsm/tsl/display/AfterImageNode.js

@@ -1,11 +1,18 @@
 import { RenderTarget, Vector2, QuadMesh, NodeMaterial, PostProcessingUtils, TempNode, NodeUpdateType } from 'three/webgpu';
 import { nodeObject, Fn, float, vec4, uv, texture, passTexture, uniform, sign, max, convertToTexture } from 'three/tsl';
 
+/** @module AfterImageNode **/
+
 const _size = /*@__PURE__*/ new Vector2();
 const _quadMeshComp = /*@__PURE__*/ new QuadMesh();
 
 let _rendererState;
 
+/**
+ * Post processing node for creating an after image effect.
+ *
+ * @augments TempNode
+ */
 class AfterImageNode extends TempNode {
 
 	static get type() {
@@ -14,32 +21,91 @@ class AfterImageNode extends TempNode {
 
 	}
 
+	/**
+	 * Constructs a new after image node.
+	 *
+	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
+	 * @param {Number} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect.
+	 */
 	constructor( textureNode, damp = 0.96 ) {
 
 		super( 'vec4' );
 
+		/**
+		 * The texture node that represents the input of the effect.
+		 *
+		 * @type {TextureNode}
+		 */
 		this.textureNode = textureNode;
+
+		/**
+		 * The texture represents the pervious frame.
+		 *
+		 * @type {TextureNode}
+		 */
 		this.textureNodeOld = texture();
+
+		/**
+		 * The damping intensity as a uniform node.
+		 *
+		 * @type {UniformNode<float>}
+		 */
 		this.damp = uniform( damp );
 
+		/**
+		 * The render target used for compositing the effect.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
 		this._compRT = new RenderTarget( 1, 1, { depthBuffer: false } );
 		this._compRT.texture.name = 'AfterImageNode.comp';
 
+		/**
+		 * The render target that represents the previous frame.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
 		this._oldRT = new RenderTarget( 1, 1, { depthBuffer: false } );
 		this._oldRT.texture.name = 'AfterImageNode.old';
 
+		/**
+		 * The result of the effect is represented as a separate texture node.
+		 *
+		 * @private
+		 * @type {PassTextureNode}
+		 */
 		this._textureNode = passTexture( this, this._compRT.texture );
 
+		/**
+		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node renders
+		 * its effect once per frame in `updateBefore()`.
+		 *
+		 * @type {String}
+		 * @default 'frame'
+		 */
 		this.updateBeforeType = NodeUpdateType.FRAME;
 
 	}
 
+	/**
+	 * Returns the result of the effect as a texture node.
+	 *
+	 * @return {PassTextureNode} A texture node that represents the result of the effect.
+	 */
 	getTextureNode() {
 
 		return this._textureNode;
 
 	}
 
+	/**
+	 * Sets the size of the effect.
+	 *
+	 * @param {Number} width - The width of the effect.
+	 * @param {Number} height - The height of the effect.
+	 */
 	setSize( width, height ) {
 
 		this._compRT.setSize( width, height );
@@ -47,6 +113,11 @@ class AfterImageNode extends TempNode {
 
 	}
 
+	/**
+	 * This method is used to render the effect once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
 	updateBefore( frame ) {
 
 		const { renderer } = frame;
@@ -90,6 +161,12 @@ class AfterImageNode extends TempNode {
 
 	}
 
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {PassTextureNode}
+	 */
 	setup( builder ) {
 
 		const textureNode = this.textureNode;
@@ -141,6 +218,10 @@ class AfterImageNode extends TempNode {
 
 	}
 
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the effect is no longer required.
+	 */
 	dispose() {
 
 		this._compRT.dispose();
@@ -150,6 +231,14 @@ class AfterImageNode extends TempNode {
 
 }
 
+/**
+ * TSL function for creating an after image node for post processing.
+ *
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @param {Number} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect.
+ * @returns {AfterImageNode}
+ */
 export const afterImage = ( node, damp ) => nodeObject( new AfterImageNode( convertToTexture( node ), damp ) );
 
 export default AfterImageNode;

examples/jsm/tsl/display/AnaglyphPassNode.js

@@ -2,6 +2,13 @@ import { Matrix3, NodeMaterial } from 'three/webgpu';
 import { clamp, nodeObject, Fn, vec4, uv, uniform, max } from 'three/tsl';
 import StereoCompositePassNode from './StereoCompositePassNode.js';
 
+/** @module AnaglyphPassNode **/
+
+/**
+ * A render pass node that creates an anaglyph effect.
+ *
+ * @augments StereoCompositePassNode
+ */
 class AnaglyphPassNode extends StereoCompositePassNode {
 
 	static get type() {
@@ -10,20 +17,43 @@ class AnaglyphPassNode extends StereoCompositePassNode {
 
 	}
 
+	/**
+	 * Constructs a new anaglyph 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.isAnaglyphPassNode = true;
 
 		// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
 
+		/**
+		 * Color matrix node for the left eye.
+		 *
+		 * @type {UniformNode<mat3>}
+		 */
 		this._colorMatrixLeft = uniform( new Matrix3().fromArray( [
 			0.456100, - 0.0400822, - 0.0152161,
 			0.500484, - 0.0378246, - 0.0205971,
 			0.176381, - 0.0157589, - 0.00546856
 		] ) );
 
+		/**
+		 * Color matrix node for the right eye.
+		 *
+		 * @type {UniformNode<mat3>}
+		 */
 		this._colorMatrixRight = uniform( new Matrix3().fromArray( [
 			- 0.0434706, 0.378476, - 0.0721527,
 			- 0.0879388, 0.73364, - 0.112961,
@@ -32,6 +62,12 @@ class AnaglyphPassNode extends StereoCompositePassNode {
 
 	}
 
+	/**
+	 * 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();
@@ -60,4 +96,12 @@ class AnaglyphPassNode extends StereoCompositePassNode {
 
 export default AnaglyphPassNode;
 
+/**
+ * TSL function for creating an anaglyph pass node.
+ *
+ * @function
+ * @param {Scene} scene - The scene to render.
+ * @param {Camera} camera - The camera to render the scene with.
+ * @returns {AnaglyphPassNode}
+ */
 export const anaglyphPass = ( scene, camera ) => nodeObject( new AnaglyphPassNode( scene, camera ) );

examples/jsm/tsl/display/BleachBypass.js

@@ -1,5 +1,15 @@
 import { float, Fn, vec3, vec4, min, max, mix, luminance } from 'three/tsl';
 
+/** @module BleachBypass **/
+
+/**
+ * Applies a bleach bypass effect to the given color node.
+ *
+ * @function
+ * @param {Node<vec4>} color - The color node to apply the sepia for.
+ * @param {Node<float>} [opacity=1] - Influences how strong the effect is blended with the original color.
+ * @return {Node<vec4>} The updated color node.
+ */
 export const bleach = /*@__PURE__*/ Fn( ( [ color, opacity = 1 ] ) => {
 
 	const base = color;

examples/jsm/tsl/display/DepthOfFieldNode.js

@@ -1,6 +1,13 @@
 import { TempNode, NodeUpdateType } from 'three/webgpu';
 import { convertToTexture, nodeObject, Fn, uv, uniform, vec2, vec4, clamp } from 'three/tsl';
 
+/** @module DepthOfFieldNode **/
+
+/**
+ * Post processing node for creating depth of field (DOF) effect.
+ *
+ * @augments TempNode
+ */
 class DepthOfFieldNode extends TempNode {
 
 	static get type() {
@@ -9,23 +16,78 @@ class DepthOfFieldNode extends TempNode {
 
 	}
 
+	/**
+	 * Constructs a new DOF node.
+	 *
+	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
+	 * @param {Node<float>} viewZNode - Represents the viewZ depth values of the scene.
+	 * @param {Node<float>} focusNode - Defines the effect's focus which is the distance along the camera's look direction in world units.
+	 * @param {Node<float>} apertureNode - Defines the effect's aperture.
+	 * @param {Node<float>} maxblurNode - Defines the effect's maximum blur.
+	 */
 	constructor( textureNode, viewZNode, focusNode, apertureNode, maxblurNode ) {
 
 		super( 'vec4' );
 
+		/**
+		 * The texture node that represents the input of the effect.
+		 *
+		 * @type {TextureNode}
+		 */
 		this.textureNode = textureNode;
+
+		/**
+		 * Represents the viewZ depth values of the scene.
+		 *
+		 * @type {Node<float>}
+		 */
 		this.viewZNode = viewZNode;
 
+		/**
+		 * Defines the effect's focus which is the distance along the camera's look direction in world units.
+		 *
+		 * @type {Node<float>}
+		 */
 		this.focusNode = focusNode;
+
+		/**
+		 * Defines the effect's aperture.
+		 *
+		 * @type {Node<float>}
+		 */
 		this.apertureNode = apertureNode;
+
+		/**
+		 * Defines the effect's maximum blur.
+		 *
+		 * @type {Node<float>}
+		 */
 		this.maxblurNode = maxblurNode;
 
+		/**
+		 * Represents the input's aspect ratio.
+		 *
+		 * @private
+		 * @type {UniformNode<float>}
+		 */
 		this._aspect = uniform( 0 );
 
+		/**
+		 * 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 the effect's uniforms once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
 	updateBefore() {
 
 		const map = this.textureNode.value;
@@ -34,6 +96,12 @@ class DepthOfFieldNode 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 = this.textureNode;
@@ -116,4 +184,15 @@ class DepthOfFieldNode extends TempNode {
 
 export default DepthOfFieldNode;
 
+/**
+ * TSL function for creating a depth-of-field effect (DOF) for post processing.
+ *
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @param {Node<float>} viewZNode - Represents the viewZ depth values of the scene.
+ * @param {Node<float> | Number} focus - Defines the effect's focus which is the distance along the camera's look direction in world units.
+ * @param {Node<float> | Number} aperture - Defines the effect's aperture.
+ * @param {Node<float> | Number} maxblur - Defines the effect's maximum blur.
+ * @returns {DepthOfFieldNode}
+ */
 export const dof = ( node, viewZNode, focus = 1, aperture = 0.025, maxblur = 1 ) => nodeObject( new DepthOfFieldNode( convertToTexture( node ), nodeObject( viewZNode ), nodeObject( focus ), nodeObject( aperture ), nodeObject( maxblur ) ) );

examples/jsm/tsl/display/DotScreenNode.js

@@ -1,6 +1,13 @@
-import { Vector2, TempNode } from 'three/webgpu';
+import { TempNode } from 'three/webgpu';
 import { nodeObject, Fn, uv, uniform, vec2, vec3, sin, cos, add, vec4, screenSize } from 'three/tsl';
 
+/** @module DotScreenNode **/
+
+/**
+ * Post processing node for creating dot-screen effect.
+ *
+ * @augments TempNode
+ */
 class DotScreenNode extends TempNode {
 
 	static get type() {
@@ -9,17 +16,46 @@ class DotScreenNode extends TempNode {
 
 	}
 
-	constructor( inputNode, center = new Vector2( 0.5, 0.5 ), angle = 1.57, scale = 1 ) {
+	/**
+	 * Constructs a new dot screen node.
+	 *
+	 * @param {Node} inputNode - The node that represents the input of the effect.
+	 * @param {Number} [angle=1.57] - The rotation of the effect in radians.
+	 * @param {Number} [scale=1] - The scale of the effect. A higher value means smaller dots.
+	 */
+	constructor( inputNode, angle = 1.57, scale = 1 ) {
 
 		super( 'vec4' );
 
+		/**
+		 * The node that represents the input of the effect.
+		 *
+		 * @type {Node}
+		 */
 		this.inputNode = inputNode;
-		this.center = uniform( center );
+
+		/**
+		 * A uniform node that represents the rotation of the effect in radians.
+		 *
+		 * @type {UniformNode<float>}
+		 */
 		this.angle = uniform( angle );
+
+		/**
+		 * A uniform node that represents the scale of the effect. A higher value means smaller dots.
+		 *
+		 * @type {UniformNode<float>}
+		 */
 		this.scale = uniform( scale );
 
 	}
 
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {ShaderCallNodeInternal}
+	 */
 	setup() {
 
 		const inputNode = this.inputNode;
@@ -29,7 +65,7 @@ class DotScreenNode extends TempNode {
 			const s = sin( this.angle );
 			const c = cos( this.angle );
 
-			const tex = uv().mul( screenSize ).sub( this.center );
+			const tex = uv().mul( screenSize );
 			const point = vec2( c.mul( tex.x ).sub( s.mul( tex.y ) ), s.mul( tex.x ).add( c.mul( tex.y ) ) ).mul( this.scale );
 
 			return sin( point.x ).mul( sin( point.y ) ).mul( 4 );
@@ -56,4 +92,13 @@ class DotScreenNode extends TempNode {
 
 export default DotScreenNode;
 
-export const dotScreen = ( node, center, angle, scale ) => nodeObject( new DotScreenNode( nodeObject( node ), center, angle, scale ) );
+/**
+ * TSL function for creating a dot-screen node for post processing.
+ *
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @param {Number} [angle=1.57] - The rotation of the effect in radians.
+ * @param {Number} [scale=1] - The scale of the effect. A higher value means smaller dots.
+ * @returns {DotScreenNode}
+ */
+export const dotScreen = ( node, angle, scale ) => nodeObject( new DotScreenNode( nodeObject( node ), angle, scale ) );

examples/jsm/tsl/display/FXAANode.js

@@ -1,6 +1,14 @@
 import { Vector2, TempNode } from 'three/webgpu';
 import { nodeObject, Fn, uniformArray, select, float, NodeUpdateType, uv, dot, clamp, uniform, convertToTexture, smoothstep, bool, vec2, vec3, If, Loop, max, min, Break, abs } from 'three/tsl';
 
+/** @module FXAANode **/
+
+/**
+ * Post processing node for applying FXAA. This node requires sRGB input
+ * so tone mapping and color space conversion must happen before the anti-aliasing.
+ *
+ * @augments TempNode
+ */
 class FXAANode extends TempNode {
 
 	static get type() {
@@ -9,19 +17,47 @@ class FXAANode extends TempNode {
 
 	}
 
+	/**
+	 * Constructs a new FXAA node.
+	 *
+	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
+	 */
 	constructor( textureNode ) {
 
 		super( 'vec4' );
 
+		/**
+		 * The texture node that represents the input of the effect.
+		 *
+		 * @type {TextureNode}
+		 */
 		this.textureNode = textureNode;
 
+		/**
+		 * 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;
 
+		/**
+		 * A uniform node holding the inverse resolution value.
+		 *
+		 * @private
+		 * @type {UniformNode<vec2>}
+		 */
 		this._invSize = uniform( new Vector2() );
 
 	}
 
-	updateBefore() {
+	/**
+	 * This method is used to update the effect's uniforms once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
+	updateBefore( /* frame */ ) {
 
 		const map = this.textureNode.value;
 
@@ -29,7 +65,13 @@ class FXAANode extends TempNode {
 
 	}
 
-	setup() {
+	/**
+	 * 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.textureNode.bias( - 100 );
 		const uvNode = textureNode.uvNode || uv();
@@ -313,4 +355,11 @@ class FXAANode extends TempNode {
 
 export default FXAANode;
 
+/**
+ * TSL function for creating a FXAA node for anti-aliasing via post processing.
+ *
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @returns {FXAANode}
+ */
 export const fxaa = ( node ) => nodeObject( new FXAANode( convertToTexture( node ) ) );

examples/jsm/tsl/display/FilmNode.js

@@ -1,6 +1,13 @@
 import { TempNode } from 'three/webgpu';
 import { rand, Fn, fract, time, uv, clamp, mix, vec4, nodeProxy } from 'three/tsl';
 
+/** @module FilmNode **/
+
+/**
+ * Post processing node for creating a film grain effect.
+ *
+ * @augments TempNode
+ */
 class FilmNode extends TempNode {
 
 	static get type() {
@@ -9,17 +16,47 @@ class FilmNode extends TempNode {
 
 	}
 
+	/**
+	 * Constructs a new film node.
+	 *
+	 * @param {Node} inputNode - The node that represents the input of the effect.
+	 * @param {Node<float>?} [intensityNode=null] - A node that represents the effect's intensity.
+	 * @param {Node<vec2>?} [uvNode=null] - A node that allows to pass custom (e.g. animated) uv data.
+	 */
 	constructor( inputNode, intensityNode = null, uvNode = null ) {
 
 		super( 'vec4' );
 
+		/**
+		 * The node that represents the input of the effect.
+		 *
+		 * @type {Node}
+		 */
 		this.inputNode = inputNode;
+
+		/**
+		 * A node that represents the effect's intensity.
+		 *
+		 * @type {Node<float>}
+		 */
 		this.intensityNode = intensityNode;
+
+		/**
+		 * A node that allows to pass custom (e.g. animated) uv data.
+		 *
+		 * @type {Node<vec2>}
+		 */
 		this.uvNode = uvNode;
 
 	}
 
-	setup() {
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {ShaderCallNodeInternal}
+	 */
+	setup( /* builder */ ) {
 
 		const uvNode = this.uvNode || uv();
 
@@ -50,4 +87,13 @@ class FilmNode extends TempNode {
 
 export default FilmNode;
 
+/**
+ * TSL function for creating a film node for post processing.
+ *
+ * @function
+ * @param {Node<vec4>} inputNode - The node that represents the input of the effect.
+ * @param {Node<float>?} [intensityNode=null] - A node that represents the effect's intensity.
+ * @param {Node<vec2>?} [uvNode=null] - A node that allows to pass custom (e.g. animated) uv data.
+ * @returns {FilmNode}
+ */
 export const film = /*@__PURE__*/ nodeProxy( FilmNode );

examples/jsm/tsl/display/GaussianBlurNode.js

@@ -1,8 +1,7 @@
 import { RenderTarget, Vector2, NodeMaterial, PostProcessingUtils, QuadMesh, TempNode, NodeUpdateType } from 'three/webgpu';
 import { nodeObject, Fn, If, float, uv, uniform, convertToTexture, vec2, vec4, passTexture, mul } from 'three/tsl';
 
-// WebGPU: The use of a single QuadMesh for both gaussian blur passes results in a single RenderObject with a SampledTexture binding that
-// alternates between source textures and triggers creation of new BindGroups and BindGroupLayouts every frame.
+/** @module GaussianBlurNode **/
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 
@@ -34,6 +33,11 @@ const unpremult = /*@__PURE__*/ Fn( ( [ color ] ) => {
 	]
 } );
 
+/**
+ * Post processing node for creating a gaussian blur effect.
+ *
+ * @augments TempNode
+ */
 class GaussianBlurNode extends TempNode {
 
 	static get type() {
@@ -42,33 +46,116 @@ class GaussianBlurNode extends TempNode {
 
 	}
 
+	/**
+	 * Constructs a new gaussian blur node.
+	 *
+	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
+	 * @param {Node<vec2|float>} directionNode - Defines the direction and radius of the blur.
+	 * @param {Number} sigma - Controls the kernel of the blur filter. Higher values mean a wider blur radius.
+	 */
 	constructor( textureNode, directionNode = null, sigma = 2 ) {
 
 		super( 'vec4' );
 
+		/**
+		 * The texture node that represents the input of the effect.
+		 *
+		 * @type {TextureNode}
+		 */
 		this.textureNode = textureNode;
+
+		/**
+		 * Defines the direction and radius of the blur.
+		 *
+		 * @type {Node<vec2|float>}
+		 */
 		this.directionNode = directionNode;
+
+		/**
+		 * Controls the kernel of the blur filter. Higher values mean a wider blur radius.
+		 *
+		 * @type {Number}
+		 */
 		this.sigma = sigma;
 
+		/**
+		 * A uniform node holding the inverse resolution value.
+		 *
+		 * @private
+		 * @type {UniformNode<vec2>}
+		 */
 		this._invSize = uniform( new Vector2() );
+
+		/**
+		 * Gaussian blur is applied in two passes (horizontal, vertical).
+		 * This node controls the direction of each pass.
+		 *
+		 * @private
+		 * @type {UniformNode<vec2>}
+		 */
 		this._passDirection = uniform( new Vector2() );
 
+		/**
+		 * The render target used for the horizontal pass.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
 		this._horizontalRT = new RenderTarget( 1, 1, { depthBuffer: false } );
 		this._horizontalRT.texture.name = 'GaussianBlurNode.horizontal';
+
+		/**
+		 * The render target used for the vertical pass.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
 		this._verticalRT = new RenderTarget( 1, 1, { depthBuffer: false } );
 		this._verticalRT.texture.name = 'GaussianBlurNode.vertical';
 
+		/**
+		 * The result of the effect is represented as a separate texture node.
+		 *
+		 * @private
+		 * @type {PassTextureNode}
+		 */
 		this._textureNode = passTexture( this, this._verticalRT.texture );
 		this._textureNode.uvNode = textureNode.uvNode;
 
+		/**
+		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node renders
+		 * its effect once per frame in `updateBefore()`.
+		 *
+		 * @type {String}
+		 * @default 'frame'
+		 */
 		this.updateBeforeType = NodeUpdateType.FRAME;
 
+		/**
+		 * Controls the resolution of the effect.
+		 *
+		 * @type {Vector2}
+		 * @default (1,1)
+		 */
 		this.resolution = new Vector2( 1, 1 );
 
+		/**
+		 * Whether the effect should use premultiplied alpha or not. Set this to `true`
+		 * if you are going to blur texture input with transparency.
+		 *
+		 * @type {Boolean}
+		 * @default false
+		 */
 		this.premultipliedAlpha = false;
 
 	}
 
+	/**
+	 * Sets the given premultiplied alpha value.
+	 *
+	 * @param {Boolean} value - Whether the effect should use premultiplied alpha or not.
+	 * @return {GaussianBlurNode} height - A reference to this node.
+	 */
 	setPremultipliedAlpha( value ) {
 
 		this.premultipliedAlpha = value;
@@ -77,12 +164,23 @@ class GaussianBlurNode extends TempNode {
 
 	}
 
+	/**
+	 * Returns the premultiplied alpha value.
+	 *
+	 * @return {Boolean} Whether the effect should use premultiplied alpha or not.
+	 */
 	getPremultipliedAlpha() {
 
 		return this.premultipliedAlpha;
 
 	}
 
+	/**
+	 * Sets the size of the effect.
+	 *
+	 * @param {Number} width - The width of the effect.
+	 * @param {Number} height - The height of the effect.
+	 */
 	setSize( width, height ) {
 
 		width = Math.max( Math.round( width * this.resolution.x ), 1 );
@@ -94,6 +192,11 @@ class GaussianBlurNode extends TempNode {
 
 	}
 
+	/**
+	 * This method is used to render the effect once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
 	updateBefore( frame ) {
 
 		const { renderer } = frame;
@@ -141,12 +244,23 @@ class GaussianBlurNode extends TempNode {
 
 	}
 
+	/**
+	 * Returns the result of the effect as a texture node.
+	 *
+	 * @return {PassTextureNode} A texture node that represents the result of the effect.
+	 */
 	getTextureNode() {
 
 		return this._textureNode;
 
 	}
 
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {PassTextureNode}
+	 */
 	setup( builder ) {
 
 		const textureNode = this.textureNode;
@@ -220,6 +334,10 @@ class GaussianBlurNode extends TempNode {
 
 	}
 
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the effect is no longer required.
+	 */
 	dispose() {
 
 		this._horizontalRT.dispose();
@@ -227,6 +345,13 @@ class GaussianBlurNode extends TempNode {
 
 	}
 
+	/**
+	 * Computes gaussian coefficients depending on the given kernel radius.
+	 *
+	 * @private
+	 * @param {Number} kernelRadius - The kernel radius.
+	 * @return {Array<Number>}
+	 */
 	_getCoefficients( kernelRadius ) {
 
 		const coefficients = [];
@@ -245,5 +370,24 @@ class GaussianBlurNode extends TempNode {
 
 export default GaussianBlurNode;
 
+/**
+ * TSL function for creating gaussian blur node for post processing.
+ *
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @param {Node<vec2|float>} directionNode - Defines the direction and radius of the blur.
+ * @param {Number} sigma - Controls the kernel of the blur filter. Higher values mean a wider blur radius.
+ * @returns {GaussianBlurNode}
+ */
 export const gaussianBlur = ( node, directionNode, sigma ) => nodeObject( new GaussianBlurNode( convertToTexture( node ), directionNode, sigma ) );
+
+/**
+ * TSL function for creating gaussian blur node for post processing with enabled premultiplied alpha.
+ *
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @param {Node<vec2|float>} directionNode - Defines the direction and radius of the blur.
+ * @param {Number} sigma - Controls the kernel of the blur filter. Higher values mean a wider blur radius.
+ * @returns {GaussianBlurNode}
+ */
 export const premultipliedGaussianBlur = ( node, directionNode, sigma ) => nodeObject( new GaussianBlurNode( convertToTexture( node ), directionNode, sigma ).setPremultipliedAlpha( true ) );

examples/jsm/tsl/display/Lut3DNode.js

@@ -1,6 +1,13 @@
 import { TempNode } from 'three/webgpu';
 import { nodeObject, Fn, float, uniform, vec3, vec4, mix } from 'three/tsl';
 
+/** @module Lut3DNode **/
+
+/**
+ * A post processing node for color grading via lookup tables.
+ *
+ * @augments TempNode
+ */
 class Lut3DNode extends TempNode {
 
 	static get type() {
@@ -9,17 +16,54 @@ class Lut3DNode extends TempNode {
 
 	}
 
+	/**
+	 * Constructs a new LUT node.
+	 *
+	 * @param {Node} inputNode - The node that represents the input of the effect.
+	 * @param {TextureNode} lutNode - A texture node that represents the lookup table.
+	 * @param {Number} size - The size of the lookup table.
+	 * @param {Node<float>} intensityNode - Controls the intensity of the effect.
+	 */
 	constructor( inputNode, lutNode, size, intensityNode ) {
 
 		super( 'vec4' );
 
+		/**
+		 * The node that represents the input of the effect.
+		 *
+		 * @type {Node}
+		 */
 		this.inputNode = inputNode;
+
+		/**
+		 * A texture node that represents the lookup table.
+		 *
+		 * @type {TextureNode}
+		 */
 		this.lutNode = lutNode;
+
+		/**
+		 * The size of the lookup table.
+		 *
+		 * @type {UniformNode<float>}
+		 */
 		this.size = uniform( size );
+
+		/**
+		 * Controls the intensity of the effect.
+		 *
+		 * @type {Node<float>}
+		 */
 		this.intensityNode = intensityNode;
 
 	}
 
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {ShaderCallNodeInternal}
+	 */
 	setup() {
 
 		const { inputNode, lutNode } = this;
@@ -52,4 +96,14 @@ class Lut3DNode extends TempNode {
 
 export default Lut3DNode;
 
+/**
+ * TSL function for creating a LUT node for color grading via post processing.
+ *
+ * @function
+ * @param {Node} node - The node that represents the input of the effect.
+ * @param {TextureNode} lut - A texture node that represents the lookup table.
+ * @param {Number} size - The size of the lookup table.
+ * @param {Node<float> | Number} intensity - Controls the intensity of the effect.
+ * @returns {Lut3DNode}
+ */
 export const lut3D = ( node, lut, size, intensity ) => nodeObject( new Lut3DNode( nodeObject( node ), nodeObject( lut ), size, nodeObject( intensity ) ) );

examples/jsm/tsl/display/MotionBlur.js

@@ -1,6 +1,16 @@
-
 import { Fn, float, uv, Loop, int } from 'three/tsl';
 
+/** @module MotionBlur **/
+
+/**
+ * Applies a motion blur effect to the given input node.
+ *
+ * @function
+ * @param {Node<vec4>} inputNode - The input node to apply the motion blur for.
+ * @param {Node<vec2>} velocity - The motion vectors of the beauty pass.
+ * @param {Node<int>} [numSamples=int(16)] - How many samples the effect should use. A higher value results in better quality but is also more expensive.
+ * @return {Node<vec4>} The input node with the motion blur effect applied.
+ */
 export const motionBlur = /*@__PURE__*/ Fn( ( [ inputNode, velocity, numSamples = int( 16 ) ] ) => {
 
 	const sampleColor = ( uv ) => inputNode.sample( uv );

examples/jsm/tsl/display/ParallaxBarrierPassNode.js

@@ -2,6 +2,13 @@ import { NodeMaterial } from 'three/webgpu';
 import { nodeObject, Fn, vec4, uv, If, mod, screenCoordinate } from 'three/tsl';
 import StereoCompositePassNode from './StereoCompositePassNode.js';
 
+/** @module ParallaxBarrierPassNode **/
+
+/**
+ * A render pass node that creates a parallax barrier effect.
+ *
+ * @augments StereoCompositePassNode
+ */
 class ParallaxBarrierPassNode extends StereoCompositePassNode {
 
 	static get type() {
@@ -10,14 +17,33 @@ class ParallaxBarrierPassNode extends StereoCompositePassNode {
 
 	}
 
+	/**
+	 * 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();
@@ -52,4 +78,12 @@ class ParallaxBarrierPassNode extends StereoCompositePassNode {
 
 export default ParallaxBarrierPassNode;
 
+/**
+ * TSL function for creating an parallax barrier pass node.
+ *
+ * @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 ) );

examples/jsm/tsl/display/PixelationPassNode.js

@@ -1,6 +1,14 @@
 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';
 
+/** @module PixelationPassNode **/
+
+/**
+ * A inner node definition that implements the actual pixelation TSL code.
+ *
+ * @inner
+ * @augments TempNode
+ */
 class PixelationNode extends TempNode {
 
 	static get type() {
@@ -9,30 +17,85 @@ class PixelationNode extends TempNode {
 
 	}
 
+	/**
+	 * 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 ) {
 
 		super( 'vec4' );
 
-		// Input textures
-
+		/**
+		 * 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() );
 
+		/**
+		 * 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;
@@ -44,6 +107,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;
@@ -148,6 +217,11 @@ class PixelationNode extends TempNode {
 
 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() {
@@ -156,14 +230,50 @@ class PixelationPassNode extends PassNode {
 
 	}
 
+	/**
+	 * 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( 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 +283,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 +300,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 +318,17 @@ class PixelationPassNode extends PassNode {
 
 }
 
+/**
+ * TSL function for creating a pixelation render pass node for post processing.
+ *
+ * @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;

examples/jsm/tsl/display/RGBShiftNode.js

@@ -1,6 +1,14 @@
 import { TempNode } from 'three/webgpu';
 import { nodeObject, Fn, uv, uniform, vec2, sin, cos, vec4, convertToTexture } from 'three/tsl';
 
+/** @module RGBShiftNode **/
+
+/**
+ * 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() {
@@ -9,17 +17,47 @@ class RGBShiftNode extends TempNode {
 
 	}
 
+	/**
+	 * 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 );
 
 	}
 
-	setup() {
+	/**
+	 * 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;
 
@@ -46,4 +84,13 @@ class RGBShiftNode extends TempNode {
 
 export default RGBShiftNode;
 
+/**
+ * TSL function for creating a RGB shift or split effect for post processing.
+ *
+ * @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 ) );

examples/jsm/tsl/display/SSAAPassNode.js

@@ -1,20 +1,23 @@
 import { AdditiveBlending, Color, Vector2, PostProcessingUtils, PassNode, QuadMesh, NodeMaterial } from 'three/webgpu';
 import { nodeObject, uniform, mrt, texture, getTextureIndex } from 'three/tsl';
 
+/** @module SSAAPassNode **/
+
 const _size = /*@__PURE__*/ new Vector2();
 
 let _rendererState;
 
 /**
-*
-* Supersample Anti-Aliasing Render Pass
-*
-* This manual approach to SSAA re-renders the scene ones for each sample with camera jitter and accumulates the results.
-*
-* References: https://en.wikipedia.org/wiki/Supersampling
-*
-*/
-
+ * A special render pass node that renders the scene with SSAA (Supersampling Anti-Aliasing).
+ * This manual SSAA approach re-renders the scene ones for each sample with camera jitter and accumulates the results.
+ *
+ * This node produces a high-quality anti-aliased output but is also extremely expensive because of
+ * its brute-force approach of re-rendering the entire scene multiple times.
+ *
+ * References: https://en.wikipedia.org/wiki/Supersampling
+ *
+ * @augments PassNode
+ */
 class SSAAPassNode extends PassNode {
 
 	static get type() {
@@ -23,25 +26,89 @@ class SSAAPassNode extends PassNode {
 
 	}
 
+	/**
+	 * Constructs a new SSAA pass node.
+	 *
+	 * @param {Scene} scene - The scene to render.
+	 * @param {Camera} camera - The camera to render the scene with.
+	 */
 	constructor( scene, camera ) {
 
 		super( PassNode.COLOR, scene, camera );
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {Boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isSSAAPassNode = true;
 
-		this.sampleLevel = 4; // specified as n, where the number of samples is 2^n, so sampleLevel = 4, is 2^4 samples, 16.
+		/**
+		 * The sample level specified  as n, where the number of samples is 2^n,
+		 * so sampleLevel = 4, is 2^4 samples, 16.
+		 *
+		 * @type {Number}
+		 * @default 4
+		 */
+		this.sampleLevel = 4;
+
+		/**
+		 * Whether rounding erros should be mitigated or not.
+		 *
+		 * @type {Boolean}
+		 * @default true
+		 */
 		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.
+		 *
+		 * @type {UnifornNode<float>}
+		 * @default 1
+		 */
 		this.sampleWeight = uniform( 1 );
 
-		this.sampleRenderTarget = null;
-
+		/**
+		 * Reference to the internal render target that holds the current sample.
+		 *
+		 * @private
+		 * @type {RenderTarget?}
+		 */
+		this._sampleRenderTarget = null;
+
+		/**
+		 * Reference to the internal quad mesh.
+		 *
+		 * @private
+		 * @type {QuadMesh}
+		 */
 		this._quadMesh = new QuadMesh();
 
 	}
 
+	/**
+	 * This method is used to render the SSAA effect once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
 	updateBefore( frame ) {
 
 		const { renderer } = frame;
@@ -56,7 +123,7 @@ class SSAAPassNode extends PassNode {
 		const size = renderer.getSize( _size );
 
 		this.setSize( size.width, size.height );
-		this.sampleRenderTarget.setSize( this.renderTarget.width, this.renderTarget.height );
+		this._sampleRenderTarget.setSize( this.renderTarget.width, this.renderTarget.height );
 
 		//
 
@@ -120,7 +187,7 @@ class SSAAPassNode extends PassNode {
 			}
 
 			renderer.setClearColor( this.clearColor, this.clearAlpha );
-			renderer.setRenderTarget( this.sampleRenderTarget );
+			renderer.setRenderTarget( this._sampleRenderTarget );
 			renderer.clear();
 			renderer.render( scene, camera );
 
@@ -139,7 +206,7 @@ class SSAAPassNode extends PassNode {
 
 		}
 
-		renderer.copyTextureToTexture( this.sampleRenderTarget.depthTexture, this.renderTarget.depthTexture );
+		renderer.copyTextureToTexture( this._sampleRenderTarget.depthTexture, this.renderTarget.depthTexture );
 
 		// restore
 
@@ -167,11 +234,17 @@ class SSAAPassNode extends PassNode {
 
 	}
 
+	/**
+	 * This method is used to setup the effect's MRT configuration and quad mesh.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {PassTextureNode}
+	 */
 	setup( builder ) {
 
-		if ( this.sampleRenderTarget === null ) {
+		if ( this._sampleRenderTarget === null ) {
 
-			this.sampleRenderTarget = this.renderTarget.clone();
+			this._sampleRenderTarget = this.renderTarget.clone();
 
 		}
 
@@ -185,11 +258,11 @@ class SSAAPassNode extends PassNode {
 
 			for ( const name in passMRT.outputNodes ) {
 
-				const index = getTextureIndex( this.sampleRenderTarget.textures, name );
+				const index = getTextureIndex( this._sampleRenderTarget.textures, name );
 
 				if ( index >= 0 ) {
 
-					outputs[ name ] = texture( this.sampleRenderTarget.textures[ index ] ).mul( this.sampleWeight );
+					outputs[ name ] = texture( this._sampleRenderTarget.textures[ index ] ).mul( this.sampleWeight );
 
 				}
 
@@ -199,7 +272,7 @@ class SSAAPassNode extends PassNode {
 
 		} else {
 
-			sampleTexture = texture( this.sampleRenderTarget.texture ).mul( this.sampleWeight );
+			sampleTexture = texture( this._sampleRenderTarget.texture ).mul( this.sampleWeight );
 
 		}
 
@@ -216,13 +289,17 @@ class SSAAPassNode extends PassNode {
 
 	}
 
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the pass is no longer required.
+	 */
 	dispose() {
 
 		super.dispose();
 
-		if ( this.sampleRenderTarget !== null ) {
+		if ( this._sampleRenderTarget !== null ) {
 
-			this.sampleRenderTarget.dispose();
+			this._sampleRenderTarget.dispose();
 
 		}
 
@@ -269,4 +346,12 @@ const _JitterVectors = [
 	]
 ];
 
+/**
+ * TSL function for creating a SSAA pass node for Supersampling Anti-Aliasing.
+ *
+ * @function
+ * @param {Scene} scene - The scene to render.
+ * @param {Camera} camera - The camera to render the scene with.
+ * @returns {SSAAPassNode}
+ */
 export const ssaaPass = ( scene, camera ) => nodeObject( new SSAAPassNode( scene, camera ) );

examples/jsm/tsl/display/Sepia.js

@@ -1,5 +1,14 @@
 import { dot, Fn, vec3, vec4 } from 'three/tsl';
 
+/** @module Sepia **/
+
+/**
+ * Applies a sepia effect to the given color node.
+ *
+ * @function
+ * @param {Node<vec4>} color - The color node to apply the sepia for.
+ * @return {Node<vec4>} The updated color node.
+ */
 export const sepia = /*@__PURE__*/ Fn( ( [ color ] ) => {
 
 	const c = vec3( color );

examples/jsm/tsl/display/SobelOperatorNode.js

@@ -1,6 +1,15 @@
 import { Vector2, TempNode, NodeUpdateType } from 'three/webgpu';
 import { nodeObject, Fn, uv, uniform, convertToTexture, vec2, vec3, vec4, mat3, luminance, add } from 'three/tsl';
 
+/** @module SobelOperatorNode **/
+
+/**
+ * Post processing node for detecting edges with a sobel filter.
+ * A sobel filter should be applied after tone mapping and output color
+ * space conversion.
+ *
+ * @augments TempNode
+ */
 class SobelOperatorNode extends TempNode {
 
 	static get type() {
@@ -9,19 +18,47 @@ class SobelOperatorNode extends TempNode {
 
 	}
 
+	/**
+	 * Constructs a new sobel operator node.
+	 *
+	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
+	 */
 	constructor( textureNode ) {
 
 		super( 'vec4' );
 
+		/**
+		 * The texture node that represents the input of the effect.
+		 *
+		 * @type {TextureNode}
+		 */
 		this.textureNode = textureNode;
 
+		/**
+		 * 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;
 
+		/**
+		 * A uniform node holding the inverse resolution value.
+		 *
+		 * @private
+		 * @type {UniformNode<vec2>}
+		 */
 		this._invSize = uniform( new Vector2() );
 
 	}
 
-	updateBefore() {
+	/**
+	 * This method is used to update the effect's uniforms once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
+	updateBefore( /* frame */ ) {
 
 		const map = this.textureNode.value;
 
@@ -29,7 +66,13 @@ class SobelOperatorNode extends TempNode {
 
 	}
 
-	setup() {
+	/**
+	 * 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;
 
@@ -115,4 +158,11 @@ class SobelOperatorNode extends TempNode {
 
 export default SobelOperatorNode;
 
+/**
+ * TSL function for creating a sobel operator node which performs edge detection with a sobel filter.
+ *
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @returns {SobelOperatorNode}
+ */
 export const sobel = ( node ) => nodeObject( new SobelOperatorNode( convertToTexture( node ) ) );

examples/jsm/tsl/display/StereoCompositePassNode.js

@@ -6,6 +6,16 @@ const _quadMesh = /*@__PURE__*/ new QuadMesh();
 
 let _rendererState;
 
+/**
+ * A special (abstract) render pass node that renders the scene
+ * as a stereoscopic image. Unlike {@link StereoPassNode}, this
+ * node composits the image for the left and right eye
+ * into a single one. That is required for effects like
+ * anaglyph or parallax barrier.
+ *
+ * @abstract
+ * @augments PassNode
+ */
 class StereoCompositePassNode extends PassNode {
 
 	static get type() {
@@ -14,25 +24,76 @@ class StereoCompositePassNode extends PassNode {
 
 	}
 
+	/**
+	 * Constructs a new stereo composite pass node.
+	 *
+	 * @param {Scene} scene - The scene to render.
+	 * @param {Camera} camera - The camera to render the scene with.
+	 */
 	constructor( scene, camera ) {
 
 		super( PassNode.COLOR, scene, camera );
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {Boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isStereoCompositePassNode = true;
 
+		/**
+		 * The internal stereo camera that is used to render the scene.
+		 *
+		 * @type {StereoCamera}
+		 */
 		this.stereo = new StereoCamera();
 		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, type: HalfFloatType };
 
+		/**
+		 * The render target for rendering the left eye's view.
+		 *
+		 * @type {RenderTarget}
+		 */
 		this._renderTargetL = new RenderTarget( 1, 1, _params );
+
+		/**
+		 * The render target for rendering the right eye's view.
+		 *
+		 * @type {RenderTarget}
+		 */
 		this._renderTargetR = new RenderTarget( 1, 1, _params );
 
+		/**
+		 * A texture node representing the left's eye view.
+		 *
+		 * @type {TextureNode}
+		 */
 		this._mapLeft = texture( this._renderTargetL.texture );
+
+		/**
+		 * A texture node representing the right's eye view.
+		 *
+		 * @type {TextureNode}
+		 */
 		this._mapRight = texture( this._renderTargetR.texture );
 
+		/**
+		 * The node material that implements the composite. All
+		 * derived effect passes must provide an instance for rendering.
+		 *
+		 * @type {NodeMaterial}
+		 */
 		this._material = null;
 
 	}
 
+	/**
+	 * Updates the internal stereo camera.
+	 *
+	 * @param {Number} coordinateSystem - The current coordinate system.
+	 */
 	updateStereoCamera( coordinateSystem ) {
 
 		this.stereo.cameraL.coordinateSystem = coordinateSystem;
@@ -41,6 +102,12 @@ class StereoCompositePassNode 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 ) {
 
 		super.setSize( width, height );
@@ -50,6 +117,11 @@ class StereoCompositePassNode extends PassNode {
 
 	}
 
+	/**
+	 * This method is used to render the effect once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
 	updateBefore( frame ) {
 
 		const { renderer } = frame;
@@ -88,6 +160,10 @@ class StereoCompositePassNode extends PassNode {
 
 	}
 
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the pass is no longer required.
+	 */
 	dispose() {
 
 		super.dispose();

examples/jsm/tsl/display/StereoPassNode.js

@@ -1,10 +1,17 @@
 import { StereoCamera, Vector2, PassNode, PostProcessingUtils } from 'three/webgpu';
 import { nodeObject } from 'three/tsl';
 
+/** @module StereoPassNode **/
+
 const _size = /*@__PURE__*/ new Vector2();
 
 let _rendererState;
 
+/**
+ * A special render pass node that renders the scene as a stereoscopic image.
+ *
+ * @augments PassNode
+ */
 class StereoPassNode extends PassNode {
 
 	static get type() {
@@ -13,17 +20,40 @@ class StereoPassNode extends PassNode {
 
 	}
 
+	/**
+	 * Constructs a new stereo pass node.
+	 *
+	 * @param {Scene} scene - The scene to render.
+	 * @param {Camera} camera - The camera to render the scene with.
+	 */
 	constructor( scene, camera ) {
 
 		super( PassNode.COLOR, scene, camera );
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {Boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isStereoPassNode = true;
 
+		/**
+		 * The internal stereo camera that is used to render the scene.
+		 *
+		 * @type {StereoCamera}
+		 */
 		this.stereo = new StereoCamera();
 		this.stereo.aspect = 0.5;
 
 	}
 
+	/**
+	 * This method is used to render the stereo effect once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
 	updateBefore( frame ) {
 
 		const { renderer } = frame;
@@ -79,4 +109,12 @@ class StereoPassNode extends PassNode {
 
 export default StereoPassNode;
 
+/**
+ * TSL function for creating a stereo pass node for stereoscopic rendering.
+ *
+ * @function
+ * @param {Scene} scene - The scene to render.
+ * @param {Camera} camera - The camera to render the scene with.
+ * @returns {StereoPassNode}
+ */
 export const stereoPass = ( scene, camera ) => nodeObject( new StereoPassNode( scene, camera ) );

examples/jsm/tsl/display/TransitionNode.js

@@ -1,6 +1,13 @@
 import { TempNode } from 'three/webgpu';
 import { nodeObject, Fn, float, uv, convertToTexture, vec4, If, int, clamp, sub, mix } from 'three/tsl';
 
+/** @module TransitionNode **/
+
+/**
+ * Post processing node for creating a transition effect between scenes.
+ *
+ * @augments TempNode
+ */
 class TransitionNode extends TempNode {
 
 	static get type() {
@@ -9,24 +16,70 @@ class TransitionNode extends TempNode {
 
 	}
 
+	/**
+	 * Constructs a new transition node.
+	 *
+	 * @param {TextureNode} textureNodeA - A texture node that represents the beauty pass of the first scene.
+	 * @param {TextureNode} textureNodeB - A texture node that represents the beauty pass of the second scene.
+	 * @param {TextureNode} mixTextureNode - A texture node that defines how the transition effect should look like.
+	 * @param {Node<float>} mixRatioNode - The interpolation factor that controls the mix.
+	 * @param {Node<float>} thresholdNode - Can be used to tweak the linear interpolation.
+	 * @param {Node<float>} useTextureNode - Whether `mixTextureNode` should influence the transition or not.
+	 */
 	constructor( textureNodeA, textureNodeB, mixTextureNode, mixRatioNode, thresholdNode, useTextureNode ) {
 
 		super( 'vec4' );
 
-		// Input textures
-
+		/**
+		 * A texture node that represents the beauty pass of the first scene.
+		 *
+		 * @type {TextureNode}
+		 */
 		this.textureNodeA = textureNodeA;
+
+		/**
+		 * A texture node that represents the beauty pass of the second scene.
+		 *
+		 * @type {TextureNode}
+		 */
 		this.textureNodeB = textureNodeB;
-		this.mixTextureNode = mixTextureNode;
 
-		// Uniforms
+		/**
+		 * A texture that defines how the transition effect should look like.
+		 *
+		 * @type {TextureNode}
+		 */
+		this.mixTextureNode = mixTextureNode;
 
+		/**
+		 * The interpolation factor that controls the mix.
+		 *
+		 * @type {Node<float>}
+		 */
 		this.mixRatioNode = mixRatioNode;
+
+		/**
+		 * Can be used to tweak the linear interpolation.
+		 *
+		 * @type {Node<float>}
+		 */
 		this.thresholdNode = thresholdNode;
+
+		/**
+		 * Whether `mixTextureNode` should influence the transition or not.
+		 *
+		 * @type {Node<float>}
+		 */
 		this.useTextureNode = useTextureNode;
 
 	}
 
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {ShaderCallNodeInternal}
+	 */
 	setup() {
 
 		const { textureNodeA, textureNodeB, mixTextureNode, mixRatioNode, thresholdNode, useTextureNode } = this;
@@ -73,4 +126,16 @@ class TransitionNode extends TempNode {
 
 export default TransitionNode;
 
-export const transition = ( nodeA, nodeB, mixTexture, mixRatio = 0.0, threshold = 0.1, useTexture = 0 ) => nodeObject( new TransitionNode( convertToTexture( nodeA ), convertToTexture( nodeB ), convertToTexture( mixTexture ), nodeObject( mixRatio ), nodeObject( threshold ), nodeObject( useTexture ) ) );
+/**
+ * TSL function for creating a transition node for post processing.
+ *
+ * @function
+ * @param {Node<vec4>} nodeA - A texture node that represents the beauty pass of the first scene.
+ * @param {Node<vec4>} nodeB - A texture node that represents the beauty pass of the second scene.
+ * @param {Node<vec4>} mixTextureNode - A texture that defines how the transition effect should look like.
+ * @param {Node<float> | Number} mixRatio - The interpolation factor that controls the mix.
+ * @param {Node<float> | Number} threshold - Can be used to tweak the linear interpolation.
+ * @param {Node<float> | Number} useTexture - Whether `mixTextureNode` should influence the transition or not.
+ * @returns {TransitionNode}
+ */
+export const transition = ( nodeA, nodeB, mixTextureNode, mixRatio, threshold, useTexture ) => nodeObject( new TransitionNode( convertToTexture( nodeA ), convertToTexture( nodeB ), convertToTexture( mixTextureNode ), nodeObject( mixRatio ), nodeObject( threshold ), nodeObject( useTexture ) ) );

examples/jsm/tsl/display/hashBlur.js

@@ -1,7 +1,18 @@
 import { float, Fn, vec2, uv, sin, rand, degrees, cos, Loop, vec4 } from 'three/tsl';
 
-// https://www.shadertoy.com/view/4lXXWn
-
+/** @module HashBlur **/
+
+/**
+ * Applies a hash blur effect to the given texture node.
+ *
+ * Reference: {@link https://www.shadertoy.com/view/4lXXWn}.
+ *
+ * @function
+ * @param {Node<vec4>} textureNode - The texture node that should be blurred.
+ * @param {Node<float>} [bluramount=float(0.1)] - This node determines the amount of blur.
+ * @param {Node<float>} [repeats=float(45)] - This node determines the quality of the blur. A higher value produces a less grainy result but is also more expensive.
+ * @return {Node<vec4>} The blurred texture node.
+ */
 export const hashBlur = /*#__PURE__*/ Fn( ( [ textureNode, bluramount = float( 0.1 ), repeats = float( 45 ) ] ) => {
 
 	const draw = ( uv ) => textureNode.sample( uv );