Michael Herzog 1 год назад
Родитель
Сommit
946a69c508

+ 3 - 1
examples/jsm/tsl/display/AnamorphicNode.js

@@ -1,5 +1,5 @@
 import { RenderTarget, Vector2, TempNode, QuadMesh, NodeMaterial, PostProcessingUtils } from 'three/webgpu';
 import { RenderTarget, Vector2, TempNode, QuadMesh, NodeMaterial, PostProcessingUtils } from 'three/webgpu';
-import { nodeObject, Fn, float, NodeUpdateType, uv, passTexture, uniform, convertToTexture, vec2, vec3, Loop, threshold } from 'three/tsl';
+import { nodeObject, Fn, float, NodeUpdateType, uv, passTexture, uniform, convertToTexture, vec2, vec3, Loop, mix, luminance } from 'three/tsl';
 
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 
 
@@ -92,6 +92,8 @@ class AnamorphicNode extends TempNode {
 
 
 		const sampleTexture = ( uv ) => textureNode.uv( uv );
 		const sampleTexture = ( uv ) => textureNode.uv( uv );
 
 
+		const threshold = ( color, threshold ) => mix( vec3( 0.0 ), color, luminance( color ).sub( threshold ).max( 0 ) );
+
 		const anamorph = Fn( () => {
 		const anamorph = Fn( () => {
 
 
 			const samples = this.samples;
 			const samples = this.samples;

+ 27 - 0
src/nodes/display/BumpMapNode.js

@@ -44,6 +44,15 @@ const perturbNormalArb = Fn( ( inputs ) => {
 
 
 } );
 } );
 
 
+/**
+ * This class can be used for applying bump maps to materials.
+ *
+ * ```js
+ * material.normalNode = bumpMap( texture( bumpTex ) );
+ * ```
+ *
+ * @augments TempNode
+ */
 class BumpMapNode extends TempNode {
 class BumpMapNode extends TempNode {
 
 
 	static get type() {
 	static get type() {
@@ -52,11 +61,29 @@ class BumpMapNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Constructs a new bump map node.
+	 *
+	 * @param {Node} textureNode - Represents the bump map data.
+	 * @param {Node?} [scaleNode=null] - Controls the intensity of the bump effect.
+	 */
 	constructor( textureNode, scaleNode = null ) {
 	constructor( textureNode, scaleNode = null ) {
 
 
 		super( 'vec3' );
 		super( 'vec3' );
 
 
+		/**
+		 * Represents the bump map data.
+		 *
+		 * @type {Node}
+		 */
 		this.textureNode = textureNode;
 		this.textureNode = textureNode;
+
+		/**
+		 * Controls the intensity of the bump effect.
+		 *
+		 * @type {Node?}
+		 * @default null
+		 */
 		this.scaleNode = scaleNode;
 		this.scaleNode = scaleNode;
 
 
 	}
 	}

+ 41 - 2
src/nodes/display/ColorAdjustment.js

@@ -7,18 +7,43 @@ import { LinearSRGBColorSpace } from '../../constants.js';
 
 
 /** @module ColorAdjustment **/
 /** @module ColorAdjustment **/
 
 
+/**
+ * Computes a grayscale value for the given RGB color value.
+ *
+ * @method
+ * @param {vec3} color - The color value to compute the grayscale for.
+ * @return {vec3} The grayscale color.
+ */
 export const grayscale = /*@__PURE__*/ Fn( ( [ color ] ) => {
 export const grayscale = /*@__PURE__*/ Fn( ( [ color ] ) => {
 
 
 	return luminance( color.rgb );
 	return luminance( color.rgb );
 
 
 } );
 } );
 
 
+/**
+ * Super-saturates or desaturates the given RGB color.
+ *
+ * @method
+ * @param {vec3} color - The input color.
+ * @param {float} [adjustment=1] - Specifies the amount of the conversion. A value under `1` desaturates the color, a value over `1` super-saturates it.
+ * @return {vec3} The saturated color.
+ */
 export const saturation = /*@__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
 export const saturation = /*@__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
 
 
 	return adjustment.mix( luminance( color.rgb ), color.rgb );
 	return adjustment.mix( luminance( color.rgb ), color.rgb );
 
 
 } );
 } );
 
 
+/**
+ * Selectively enhance the intensity of less saturated RGB colors. Can result
+ * in a more natural and visually appealing image with enhanced color depth
+ * compared to {@link ColorAdjustment#saturation}.
+ *
+ * @method
+ * @param {vec3} color - The input color.
+ * @param {float} [adjustment=1] - Controls the intensity of the vibrance effect.
+ * @return {vec3} The updated color.
+ */
 export const vibrance = /*@__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
 export const vibrance = /*@__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
 
 
 	const average = add( color.r, color.g, color.b ).div( 3.0 );
 	const average = add( color.r, color.g, color.b ).div( 3.0 );
@@ -30,6 +55,14 @@ export const vibrance = /*@__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] )
 
 
 } );
 } );
 
 
+/**
+ * Updates the hue component of the given RGB color while preserving its luminance and saturation.
+ *
+ * @method
+ * @param {vec3} color - The input color.
+ * @param {float} [adjustment=1] - Defines the degree of hue rotation in radians. A positive value rotates the hue clockwise, while a negative value rotates it counterclockwise.
+ * @return {vec3} The updated color.
+ */
 export const hue = /*@__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
 export const hue = /*@__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
 
 
 	const k = vec3( 0.57735, 0.57735, 0.57735 );
 	const k = vec3( 0.57735, 0.57735, 0.57735 );
@@ -40,13 +73,19 @@ export const hue = /*@__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
 
 
 } );
 } );
 
 
+/**
+ * Computes the luminance for the given RGB color value.
+ *
+ * @method
+ * @param {vec3} color - The color value to compute the luminance for.
+ * @param {vec3?} luminanceCoefficients - The luminance coefficients. By default predefined values of the current working color space are used.
+ * @return {vec3} The luminance.
+ */
 export const luminance = (
 export const luminance = (
 	color,
 	color,
 	luminanceCoefficients = vec3( ColorManagement.getLuminanceCoefficients( new Vector3() ) )
 	luminanceCoefficients = vec3( ColorManagement.getLuminanceCoefficients( new Vector3() ) )
 ) => dot( color, luminanceCoefficients );
 ) => dot( color, luminanceCoefficients );
 
 
-export const threshold = ( color, threshold ) => mix( vec3( 0.0 ), color, luminance( color ).sub( threshold ).max( 0 ) );
-
 /**
 /**
  * Color Decision List (CDL) v1.2
  * Color Decision List (CDL) v1.2
  *
  *

+ 16 - 0
src/nodes/display/ColorSpaceFunctions.js

@@ -1,6 +1,15 @@
 import { mix } from '../math/MathNode.js';
 import { mix } from '../math/MathNode.js';
 import { Fn } from '../tsl/TSLCore.js';
 import { Fn } from '../tsl/TSLCore.js';
 
 
+/** @module ColorSpaceFunctions **/
+
+/**
+ * Converts the given color value from sRGB to linear-sRGB color space.
+ *
+ * @method
+ * @param {vec3} color - The sRGB color.
+ * @return {vec3} The linear-sRGB color.
+ */
 export const sRGBTransferEOTF = /*@__PURE__*/ Fn( ( [ color ] ) => {
 export const sRGBTransferEOTF = /*@__PURE__*/ Fn( ( [ color ] ) => {
 
 
 	const a = color.mul( 0.9478672986 ).add( 0.0521327014 ).pow( 2.4 );
 	const a = color.mul( 0.9478672986 ).add( 0.0521327014 ).pow( 2.4 );
@@ -19,6 +28,13 @@ export const sRGBTransferEOTF = /*@__PURE__*/ Fn( ( [ color ] ) => {
 	]
 	]
 } );
 } );
 
 
+/**
+ * Converts the given color value from linear-sRGB to sRGB color space.
+ *
+ * @method
+ * @param {vec3} color - The linear-sRGB color.
+ * @return {vec3} The sRGB color.
+ */
 export const sRGBTransferOETF = /*@__PURE__*/ Fn( ( [ color ] ) => {
 export const sRGBTransferOETF = /*@__PURE__*/ Fn( ( [ color ] ) => {
 
 
 	const a = color.pow( 0.41666 ).mul( 1.055 ).sub( 0.055 );
 	const a = color.pow( 0.41666 ).mul( 1.055 ).sub( 0.055 );

+ 39 - 0
src/nodes/display/ColorSpaceNode.js

@@ -9,6 +9,12 @@ import { Matrix3 } from '../../math/Matrix3.js';
 const WORKING_COLOR_SPACE = 'WorkingColorSpace';
 const WORKING_COLOR_SPACE = 'WorkingColorSpace';
 const OUTPUT_COLOR_SPACE = 'OutputColorSpace';
 const OUTPUT_COLOR_SPACE = 'OutputColorSpace';
 
 
+/**
+ * This node represents a color space conversion. Meaning it converts
+ * a color value from a source to a target color space.
+ *
+ * @augments TempNode
+ */
 class ColorSpaceNode extends TempNode {
 class ColorSpaceNode extends TempNode {
 
 
 	static get type() {
 	static get type() {
@@ -17,16 +23,49 @@ class ColorSpaceNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Constructs a new color space node.
+	 *
+	 * @param {Node} colorNode - Represents the color to convert.
+	 * @param {String} source - The source color space.
+	 * @param {String} target - The target color space.
+	 */
 	constructor( colorNode, source, target ) {
 	constructor( colorNode, source, target ) {
 
 
 		super( 'vec4' );
 		super( 'vec4' );
 
 
+		/**
+		 * Represents the color to convert.
+		 *
+		 * @type {Node}
+		 */
 		this.colorNode = colorNode;
 		this.colorNode = colorNode;
+
+		/**
+		 * The source color space.
+		 *
+		 * @type {Node}
+		 */
 		this.source = source;
 		this.source = source;
+
+		/**
+		 * The target color space.
+		 *
+		 * @type {Node}
+		 */
 		this.target = target;
 		this.target = target;
 
 
 	}
 	}
 
 
+	/**
+	 * This method resolves the constants `WORKING_COLOR_SPACE` and
+	 * `OUTPUT_COLOR_SPACE` based on the current configuration of the
+	 * color management and renderer.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @param {String} colorSpace - The color space to resolve.
+	 * @return {String} The resolved color space.
+	 */
 	resolveColorSpace( builder, colorSpace ) {
 	resolveColorSpace( builder, colorSpace ) {
 
 
 		if ( colorSpace === WORKING_COLOR_SPACE ) {
 		if ( colorSpace === WORKING_COLOR_SPACE ) {

+ 15 - 0
src/nodes/display/FrontFacingNode.js

@@ -3,6 +3,11 @@ import { nodeImmutable, float } from '../tsl/TSLBase.js';
 
 
 import { BackSide, WebGLCoordinateSystem } from '../../constants.js';
 import { BackSide, WebGLCoordinateSystem } from '../../constants.js';
 
 
+/**
+ * This node can be used to evaluate whether a primitive is front or back facing.
+ *
+ * @augments Node
+ */
 class FrontFacingNode extends Node {
 class FrontFacingNode extends Node {
 
 
 	static get type() {
 	static get type() {
@@ -11,10 +16,20 @@ class FrontFacingNode extends Node {
 
 
 	}
 	}
 
 
+	/**
+	 * Constructs a new front facing node.
+	 */
 	constructor() {
 	constructor() {
 
 
 		super( 'bool' );
 		super( 'bool' );
 
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {Boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isFrontFacingNode = true;
 		this.isFrontFacingNode = true;
 
 
 	}
 	}

+ 33 - 0
src/nodes/display/NormalMapNode.js

@@ -37,6 +37,15 @@ const perturbNormal2Arb = /*@__PURE__*/ Fn( ( inputs ) => {
 
 
 } );
 } );
 
 
+/**
+ * This class can be used for applying normals maps to materials.
+ *
+ * ```js
+ * material.normalNode = normalMap( texture( normalTex ) );
+ * ```
+ *
+ * @augments TempNode
+ */
 class NormalMapNode extends TempNode {
 class NormalMapNode extends TempNode {
 
 
 	static get type() {
 	static get type() {
@@ -45,13 +54,37 @@ class NormalMapNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Constructs a new normal map node.
+	 *
+	 * @param {Node} textureNode - Represents the normal map data.
+	 * @param {Node?} [scaleNode=null] - Controls the intensity of the effect.
+	 */
 	constructor( node, scaleNode = null ) {
 	constructor( node, scaleNode = null ) {
 
 
 		super( 'vec3' );
 		super( 'vec3' );
 
 
+		/**
+		 * Represents the normal map data.
+		 *
+		 * @type {Node}
+		 */
 		this.node = node;
 		this.node = node;
+
+		/**
+		 * Controls the intensity of the effect.
+		 *
+		 * @type {Node?}
+		 * @default null
+		 */
 		this.scaleNode = scaleNode;
 		this.scaleNode = scaleNode;
 
 
+		/**
+		 * The normal map type.
+		 *
+		 * @type {(TangentSpaceNormalMap|ObjectSpaceNormalMap)}
+		 * @default TangentSpaceNormalMap
+		 */
 		this.normalMapType = TangentSpaceNormalMap;
 		this.normalMapType = TangentSpaceNormalMap;
 
 
 	}
 	}

+ 269 - 2
src/nodes/display/PassNode.js

@@ -12,6 +12,12 @@ import { RenderTarget } from '../../core/RenderTarget.js';
 
 
 const _size = /*@__PURE__*/ new Vector2();
 const _size = /*@__PURE__*/ new Vector2();
 
 
+/**
+ * Represents the texture of a pass node.
+ *
+ * @augments TextureNode
+ * @private
+ */
 class PassTextureNode extends TextureNode {
 class PassTextureNode extends TextureNode {
 
 
 	static get type() {
 	static get type() {
@@ -20,10 +26,21 @@ class PassTextureNode extends TextureNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Constructs a new pass texture node.
+	 *
+	 * @param {PassNode} passNode - The pass node.
+	 * @param {Texture} texture - The output texture.
+	 */
 	constructor( passNode, texture ) {
 	constructor( passNode, texture ) {
 
 
 		super( texture );
 		super( texture );
 
 
+		/**
+		 * A reference to the pass node.
+		 *
+		 * @type {PassNode}
+		 */
 		this.passNode = passNode;
 		this.passNode = passNode;
 
 
 		this.setUpdateMatrix( false );
 		this.setUpdateMatrix( false );
@@ -46,6 +63,13 @@ class PassTextureNode extends TextureNode {
 
 
 }
 }
 
 
+/**
+ * An extension of `PassTextureNode` which allows to manage more than one
+ * internal texture. Relevant for the `getPreviousTexture()` related API.
+ *
+ * @augments PassTextureNode
+ * @private
+ */
 class PassMultipleTextureNode extends PassTextureNode {
 class PassMultipleTextureNode extends PassTextureNode {
 
 
 	static get type() {
 	static get type() {
@@ -54,15 +78,40 @@ class PassMultipleTextureNode extends PassTextureNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Constructs a new pass texture node.
+	 *
+	 * @param {PassNode} passNode - The pass node.
+	 * @param {String} textureName - The output texture name.
+	 * @param {Boolean} [previousTexture=false] - Whether previous frame data should be used or not.
+	 */
 	constructor( passNode, textureName, previousTexture = false ) {
 	constructor( passNode, textureName, previousTexture = false ) {
 
 
+		// null is passed to the super call since this class does not
+		// use an external texture for rendering pass data into. Instead
+		// the texture is managed by the pass node itself
+
 		super( passNode, null );
 		super( passNode, null );
 
 
+		/**
+		 * The output texture name.
+		 *
+		 * @type {String}
+		 */
 		this.textureName = textureName;
 		this.textureName = textureName;
+
+		/**
+		 * Whether previous frame data should be used or not.
+		 *
+		 * @type {Boolean}
+		 */
 		this.previousTexture = previousTexture;
 		this.previousTexture = previousTexture;
 
 
 	}
 	}
 
 
+	/**
+	 * Updates the texture reference of this node.
+	 */
 	updateTexture() {
 	updateTexture() {
 
 
 		this.value = this.previousTexture ? this.passNode.getPreviousTexture( this.textureName ) : this.passNode.getTexture( this.textureName );
 		this.value = this.previousTexture ? this.passNode.getPreviousTexture( this.textureName ) : this.passNode.getTexture( this.textureName );
@@ -85,6 +134,21 @@ class PassMultipleTextureNode extends PassTextureNode {
 
 
 }
 }
 
 
+/**
+ * Represents a render pass (sometimes called beauty pass) in context of post processing.
+ * This pass produces a render for the given scene and camera and can provide multiple outputs
+ * via MRT for further processing.
+ *
+ * ```js
+ * const postProcessing = new PostProcessing( renderer );
+ *
+ * const scenePass = pass( scene, camera );
+ *
+ * postProcessing.outputNode = scenePass;
+ * ```
+ *
+ * @augments TempNode
+ */
 class PassNode extends TempNode {
 class PassNode extends TempNode {
 
 
 	static get type() {
 	static get type() {
@@ -93,17 +157,69 @@ class PassNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Constructs a new pass node.
+	 *
+	 * @param {('color'|'depth')} scope - The scope of the pass. The scope determines whether the node outputs color or depth.
+	 * @param {Scene} scene - A reference to the scene.
+	 * @param {Camera} camera - A reference to the camera.
+	 * @param {Object} options - Options for the internal render target.
+	 */
 	constructor( scope, scene, camera, options = {} ) {
 	constructor( scope, scene, camera, options = {} ) {
 
 
 		super( 'vec4' );
 		super( 'vec4' );
 
 
+		/**
+		 * The scope of the pass. The scope determines whether the node outputs color or depth.
+		 *
+		 * @type {('color'|'depth')}
+		 */
 		this.scope = scope;
 		this.scope = scope;
+
+		/**
+		 * A reference to the scene.
+		 *
+		 * @type {Scene}
+		 */
 		this.scene = scene;
 		this.scene = scene;
+
+		/**
+		 * A reference to the camera.
+		 *
+		 * @type {camera}
+		 */
 		this.camera = camera;
 		this.camera = camera;
+
+		/**
+		 * Options for the internal render target.
+		 *
+		 * @type {Object}
+		 */
 		this.options = options;
 		this.options = options;
 
 
+		/**
+		 * The pass's pixel ratio. Will be kept automatically kept in sync with the renderer's pixel ratio.
+		 *
+		 * @private
+		 * @type {Number}
+		 * @default 1
+		 */
 		this._pixelRatio = 1;
 		this._pixelRatio = 1;
+
+		/**
+		 * The pass's pixel width. Will be kept automatically kept in sync with the renderer's width.
+		 * @private
+		 * @type {Number}
+		 * @default 1
+		 */
 		this._width = 1;
 		this._width = 1;
+
+		/**
+		 * The pass's pixel height. Will be kept automatically kept in sync with the renderer's height.
+		 * @private
+		 * @type {Number}
+		 * @default 1
+		 */
 		this._height = 1;
 		this._height = 1;
 
 
 		const depthTexture = new DepthTexture();
 		const depthTexture = new DepthTexture();
@@ -115,31 +231,117 @@ class PassNode extends TempNode {
 		renderTarget.texture.name = 'output';
 		renderTarget.texture.name = 'output';
 		renderTarget.depthTexture = depthTexture;
 		renderTarget.depthTexture = depthTexture;
 
 
+		/**
+		 * The pass's render target.
+		 *
+		 * @type {RenderTarget}
+		 */
 		this.renderTarget = renderTarget;
 		this.renderTarget = renderTarget;
 
 
-		this.updateBeforeType = NodeUpdateType.FRAME;
-
+		/**
+		 * A dictionary holding the internal result textures.
+		 *
+		 * @private
+		 * @type {Object}
+		 */
 		this._textures = {
 		this._textures = {
 			output: renderTarget.texture,
 			output: renderTarget.texture,
 			depth: depthTexture
 			depth: depthTexture
 		};
 		};
 
 
+		/**
+		 * A dictionary holding the internal texture nodes.
+		 *
+		 * @private
+		 * @type {Object}
+		 */
 		this._textureNodes = {};
 		this._textureNodes = {};
+
+		/**
+		 * A dictionary holding the internal depth nodes.
+		 *
+		 * @private
+		 * @type {Object}
+		 */
 		this._linearDepthNodes = {};
 		this._linearDepthNodes = {};
+
+		/**
+		 * A dictionary holding the internal viewZ nodes.
+		 *
+		 * @private
+		 * @type {Object}
+		 */
 		this._viewZNodes = {};
 		this._viewZNodes = {};
 
 
+		/**
+		 * A dictionary holding the texture data of the previous frame.
+		 * Used for computing velocity/motion vectors.
+		 *
+		 * @private
+		 * @type {Object}
+		 */
 		this._previousTextures = {};
 		this._previousTextures = {};
+
+		/**
+		 * A dictionary holding the texture nodes of the previous frame.
+		 * Used for computing velocity/motion vectors.
+		 *
+		 * @private
+		 * @type {Object}
+		 */
 		this._previousTextureNodes = {};
 		this._previousTextureNodes = {};
 
 
+		/**
+		 * The `near` property of the camera as a uniform.
+		 *
+		 * @private
+		 * @type {UniformNode}
+		 */
 		this._cameraNear = uniform( 0 );
 		this._cameraNear = uniform( 0 );
+
+		/**
+		 * The `far` property of the camera as a uniform.
+		 *
+		 * @private
+		 * @type {UniformNode}
+		 */
 		this._cameraFar = uniform( 0 );
 		this._cameraFar = uniform( 0 );
 
 
+		/**
+		 * A MRT node configuring the MRT settings.
+		 *
+		 * @private
+		 * @type {MRTNode?}
+		 * @default null
+		 */
 		this._mrt = null;
 		this._mrt = null;
 
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {Boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isPassNode = true;
 		this.isPassNode = true;
 
 
+		/**
+		 * The `updateBeforeType` is set to `FRAME` since the pass render the
+		 * scene once per frame in its {@link PassNode#updateBefore} method.
+		 *
+		 * @type {String}
+		 * @default 'frame'
+		 */
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
 	}
 	}
 
 
+	/**
+	 * Sets the given MRT node to setup MRT for this pass.
+	 *
+	 * @param {MRTNode} mrt - The MRT object.
+	 * @return {PassNode} A reference to this pass.
+	 */
 	setMRT( mrt ) {
 	setMRT( mrt ) {
 
 
 		this._mrt = mrt;
 		this._mrt = mrt;
@@ -148,18 +350,34 @@ class PassNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Returns the current MRT node.
+	 *
+	 * @return {MRTNode} The current MRT node.
+	 */
 	getMRT() {
 	getMRT() {
 
 
 		return this._mrt;
 		return this._mrt;
 
 
 	}
 	}
 
 
+	/**
+	 * The method is overwritten so it always returns `true`.
+	 *
+	 * @return {Boolean} Whether this node is global or not.
+	 */
 	isGlobal() {
 	isGlobal() {
 
 
 		return true;
 		return true;
 
 
 	}
 	}
 
 
+	/**
+	 * Returns the texture for the given output name.
+	 *
+	 * @param {String} name - The output name to get the texture for.
+	 * @return {Texture} The texture.
+	 */
 	getTexture( name ) {
 	getTexture( name ) {
 
 
 		let texture = this._textures[ name ];
 		let texture = this._textures[ name ];
@@ -181,6 +399,12 @@ class PassNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Returns the texture holding the data of the previous frame for the given output name.
+	 *
+	 * @param {String} name - The output name to get the texture for.
+	 * @return {Texture} The texture holding the data of the previous frame.
+	 */
 	getPreviousTexture( name ) {
 	getPreviousTexture( name ) {
 
 
 		let texture = this._previousTextures[ name ];
 		let texture = this._previousTextures[ name ];
@@ -197,6 +421,11 @@ class PassNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Switches current and previous textures for the given output name.
+	 *
+	 * @param {String} name - The output name.
+	 */
 	toggleTexture( name ) {
 	toggleTexture( name ) {
 
 
 		const prevTexture = this._previousTextures[ name ];
 		const prevTexture = this._previousTextures[ name ];
@@ -218,6 +447,12 @@ class PassNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Returns the texture node for the given output name.
+	 *
+	 * @param {String} [name='output'] - The output name to get the texture node for.
+	 * @return {TextureNode} The texture node.
+	 */
 	getTextureNode( name = 'output' ) {
 	getTextureNode( name = 'output' ) {
 
 
 		let textureNode = this._textureNodes[ name ];
 		let textureNode = this._textureNodes[ name ];
@@ -234,6 +469,12 @@ class PassNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Returns the previous texture node for the given output name.
+	 *
+	 * @param {String} [name='output'] - The output name to get the previous texture node for.
+	 * @return {TextureNode} The previous texture node.
+	 */
 	getPreviousTextureNode( name = 'output' ) {
 	getPreviousTextureNode( name = 'output' ) {
 
 
 		let textureNode = this._previousTextureNodes[ name ];
 		let textureNode = this._previousTextureNodes[ name ];
@@ -252,6 +493,12 @@ class PassNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Returns a viewZ node of this pass.
+	 *
+	 * @param {String} [name='depth'] - The output name to get the viewZ node for. In most cases the default `'depth'` can be used however the parameter exists for custom depth outputs.
+	 * @return {Node} The viewZ node.
+	 */
 	getViewZNode( name = 'depth' ) {
 	getViewZNode( name = 'depth' ) {
 
 
 		let viewZNode = this._viewZNodes[ name ];
 		let viewZNode = this._viewZNodes[ name ];
@@ -269,6 +516,12 @@ class PassNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Returns a linear depth node of this pass.
+	 *
+	 * @param {String} [name='depth'] - The output name to get the linear depth node for. In most cases the default `'depth'` can be used however the parameter exists for custom depth outputs.
+	 * @return {Node} The lienar depth node.
+	 */
 	getLinearDepthNode( name = 'depth' ) {
 	getLinearDepthNode( name = 'depth' ) {
 
 
 		let linearDepthNode = this._linearDepthNodes[ name ];
 		let linearDepthNode = this._linearDepthNodes[ name ];
@@ -337,6 +590,12 @@ class PassNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Sets the size of the pass's render target. Honors the pixel ratio.
+	 *
+	 * @param {Number} width - The width to set.
+	 * @param {Number} height - The height to set.
+	 */
 	setSize( width, height ) {
 	setSize( width, height ) {
 
 
 		this._width = width;
 		this._width = width;
@@ -349,6 +608,11 @@ class PassNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Sets the pixel ratio the pass's render target and updates the size.
+	 *
+	 * @param {Number} pixelRatio - The pixel ratio to set.
+	 */
 	setPixelRatio( pixelRatio ) {
 	setPixelRatio( pixelRatio ) {
 
 
 		this._pixelRatio = pixelRatio;
 		this._pixelRatio = pixelRatio;
@@ -357,6 +621,9 @@ class PassNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Frees internal resources. Should be called when the node is no longer in use.
+	 */
 	dispose() {
 	dispose() {
 
 
 		this.renderTarget.dispose();
 		this.renderTarget.dispose();

+ 23 - 0
src/nodes/display/PosterizeNode.js

@@ -1,6 +1,12 @@
 import TempNode from '../core/TempNode.js';
 import TempNode from '../core/TempNode.js';
 import { nodeProxy } from '../tsl/TSLBase.js';
 import { nodeProxy } from '../tsl/TSLBase.js';
 
 
+/**
+ * Represents a posterize effect which reduces the number of colors
+ * in an image, resulting in a more blocky and stylized appearance.
+ *
+ * @augments TempNode
+ */
 class PosterizeNode extends TempNode {
 class PosterizeNode extends TempNode {
 
 
 	static get type() {
 	static get type() {
@@ -9,11 +15,28 @@ class PosterizeNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Constructs a new posterize node.
+	 *
+	 * @param {Node} sourceNode - The input color.
+	 * @param {Node} stepsNode - Controls the intensity of the posterization effect. A lower number results in a more blocky appearance.
+	 */
 	constructor( sourceNode, stepsNode ) {
 	constructor( sourceNode, stepsNode ) {
 
 
 		super();
 		super();
 
 
+		/**
+		 * The input color.
+		 *
+		 * @type {Node}
+		 */
 		this.sourceNode = sourceNode;
 		this.sourceNode = sourceNode;
+
+		/**
+		 * Controls the intensity of the posterization effect. A lower number results in a more blocky appearance.
+		 *
+		 * @type {Node}
+		 */
 		this.stepsNode = stepsNode;
 		this.stepsNode = stepsNode;
 
 
 	}
 	}

+ 55 - 1
src/nodes/display/RenderOutputNode.js

@@ -4,6 +4,29 @@ import { addMethodChaining, nodeObject } from '../tsl/TSLCore.js';
 import { NoColorSpace, NoToneMapping } from '../../constants.js';
 import { NoColorSpace, NoToneMapping } from '../../constants.js';
 import { ColorManagement } from '../../math/ColorManagement.js';
 import { ColorManagement } from '../../math/ColorManagement.js';
 
 
+/**
+ * Normally, tone mapping and color conversion happens automatically
+ * before outputting pixel too the default (screen) framebuffer. In certain
+ * post processing setups this happens to late because certain effects
+ * require e.g. sRGB input. For such scenarios, `RenderOutputNode` can be used
+ * to apply tone mapping and color space conversion at an arbitrary point
+ * in the effect chain.
+ *
+ * When applying tone mapping and color space conversion manually with this node,
+ * you have to set {@link PostProcessing#outputColorTransform} to `false`.
+ *
+ * ```js
+ * const postProcessing = new PostProcessing( renderer );
+ * postProcessing.outputColorTransform = false;
+ *
+ * const scenePass = pass( scene, camera );
+ * const outputPass = renderOutput( scenePass );
+ *
+ * postProcessing.outputNode = outputPass;
+ * ```
+ *
+ * @augments TempNode
+ */
 class RenderOutputNode extends TempNode {
 class RenderOutputNode extends TempNode {
 
 
 	static get type() {
 	static get type() {
@@ -12,15 +35,46 @@ class RenderOutputNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Constructs a new render output node.
+	 *
+	 * @param {Node} colorNode - The color node to process.
+	 * @param {String} toneMapping - The tone mapping type.
+	 * @param {String} outputColorSpace - The output color space.
+	 */
 	constructor( colorNode, toneMapping, outputColorSpace ) {
 	constructor( colorNode, toneMapping, outputColorSpace ) {
 
 
 		super( 'vec4' );
 		super( 'vec4' );
 
 
+		/**
+		 * The color node to process.
+		 *
+		 * @type {Node}
+		 */
 		this.colorNode = colorNode;
 		this.colorNode = colorNode;
+
+		/**
+		 * The tone mapping type.
+		 *
+		 * @type {Number?}
+		 */
 		this.toneMapping = toneMapping;
 		this.toneMapping = toneMapping;
+
+		/**
+		 * The output color space.
+		 *
+		 * @type {String?}
+		 */
 		this.outputColorSpace = outputColorSpace;
 		this.outputColorSpace = outputColorSpace;
 
 
-		this.isRenderOutput = true;
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {Boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isRenderOutputNode = true;
 
 
 	}
 	}
 
 

+ 58 - 10
src/nodes/display/ToneMappingFunctions.js

@@ -3,8 +3,16 @@ import { select } from '../math/ConditionalNode.js';
 import { clamp, log2, max, min, pow, mix } from '../math/MathNode.js';
 import { clamp, log2, max, min, pow, mix } from '../math/MathNode.js';
 import { mul, sub, div } from '../math/OperatorNode.js';
 import { mul, sub, div } from '../math/OperatorNode.js';
 
 
-// exposure only
-
+/** @module ToneMappingFunctions **/
+
+/**
+ * Linear tone mapping, exposure only.
+ *
+ * @method
+ * @param {vec3} color - The color that should be tone mapped.
+ * @param {float} exposure - The exposure.
+ * @return {vec3} The tone mapped color.
+ */
 export const linearToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 export const linearToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 
 
 	return color.mul( exposure ).clamp();
 	return color.mul( exposure ).clamp();
@@ -18,8 +26,16 @@ export const linearToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 	]
 	]
 } );
 } );
 
 
-// source: https://www.cs.utah.edu/docs/techreports/2002/pdf/UUCS-02-001.pdf
-
+/**
+ * Reinhard tone mapping.
+ *
+ * Reference: {@link https://www.cs.utah.edu/docs/techreports/2002/pdf/UUCS-02-001.pdf}
+ *
+ * @method
+ * @param {vec3} color - The color that should be tone mapped.
+ * @param {float} exposure - The exposure.
+ * @return {vec3} The tone mapped color.
+ */
 export const reinhardToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 export const reinhardToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 
 
 	color = color.mul( exposure );
 	color = color.mul( exposure );
@@ -35,8 +51,16 @@ export const reinhardToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) =>
 	]
 	]
 } );
 } );
 
 
-// source: http://filmicworlds.com/blog/filmic-tonemapping-operators/
-
+/**
+ * Cineon tone mapping.
+ *
+ * Reference: {@link http://filmicworlds.com/blog/filmic-tonemapping-operators/}
+ *
+ * @method
+ * @param {vec3} color - The color that should be tone mapped.
+ * @param {float} exposure - The exposure.
+ * @return {vec3} The tone mapped color.
+ */
 export const cineonToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 export const cineonToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 
 
 	// filmic operator by Jim Hejl and Richard Burgess-Dawson
 	// filmic operator by Jim Hejl and Richard Burgess-Dawson
@@ -68,8 +92,16 @@ const RRTAndODTFit = /*@__PURE__*/ Fn( ( [ color ] ) => {
 
 
 } );
 } );
 
 
-// source: https://github.com/selfshadow/ltc_code/blob/master/webgl/shaders/ltc/ltc_blit.fs
-
+/**
+ * ACESFilmic tone mapping.
+ *
+ * Reference: {@link https://github.com/selfshadow/ltc_code/blob/master/webgl/shaders/ltc/ltc_blit.fs}
+ *
+ * @method
+ * @param {vec3} color - The color that should be tone mapped.
+ * @param {float} exposure - The exposure.
+ * @return {vec3} The tone mapped color.
+ */
 export const acesFilmicToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 export const acesFilmicToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 
 
 	// sRGB => XYZ => D65_2_D60 => AP1 => RRT_SAT
 	// sRGB => XYZ => D65_2_D60 => AP1 => RRT_SAT
@@ -120,6 +152,14 @@ const agxDefaultContrastApprox = /*@__PURE__*/ Fn( ( [ x_immutable ] ) => {
 
 
 } );
 } );
 
 
+/**
+ * AgX tone mapping.
+ *
+ * @method
+ * @param {vec3} color - The color that should be tone mapped.
+ * @param {float} exposure - The exposure.
+ * @return {vec3} The tone mapped color.
+ */
 export const agxToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 export const agxToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 
 
 	const colortone = vec3( color ).toVar();
 	const colortone = vec3( color ).toVar();
@@ -151,8 +191,16 @@ export const agxToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 	]
 	]
 } );
 } );
 
 
-// https://modelviewer.dev/examples/tone-mapping
-
+/**
+ * Neutral tone mapping.
+ *
+ * Reference: {@link https://modelviewer.dev/examples/tone-mapping}
+ *
+ * @method
+ * @param {vec3} color - The color that should be tone mapped.
+ * @param {float} exposure - The exposure.
+ * @return {vec3} The tone mapped color.
+ */
 export const neutralToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 export const neutralToneMapping = /*@__PURE__*/ Fn( ( [ color, exposure ] ) => {
 
 
 	const StartCompression = float( 0.8 - 0.04 );
 	const StartCompression = float( 0.8 - 0.04 );

+ 36 - 0
src/nodes/display/ToneMappingNode.js

@@ -5,6 +5,11 @@ import { rendererReference } from '../accessors/RendererReferenceNode.js';
 import { NoToneMapping } from '../../constants.js';
 import { NoToneMapping } from '../../constants.js';
 import { hash } from '../core/NodeUtils.js';
 import { hash } from '../core/NodeUtils.js';
 
 
+/**
+ * This node represents a tone mapping operation.
+ *
+ * @augments TempNode
+ */
 class ToneMappingNode extends TempNode {
 class ToneMappingNode extends TempNode {
 
 
 	static get type() {
 	static get type() {
@@ -13,17 +18,48 @@ class ToneMappingNode extends TempNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Constructs a new tone mapping node.
+	 *
+	 * @param {Number} toneMapping - The tone mapping type.
+	 * @param {Node} exposureNode - The tone mapping exposure.
+	 * @param {Node} [colorNode=null] - The color node to process.
+	 */
 	constructor( toneMapping, exposureNode = toneMappingExposure, colorNode = null ) {
 	constructor( toneMapping, exposureNode = toneMappingExposure, colorNode = null ) {
 
 
 		super( 'vec3' );
 		super( 'vec3' );
 
 
+		/**
+		 * The tone mapping type.
+		 *
+		 * @type {Number}
+		 */
 		this.toneMapping = toneMapping;
 		this.toneMapping = toneMapping;
 
 
+		/**
+		 * The tone mapping exposure.
+		 *
+		 * @type {Node}
+		 * @default null
+		 */
 		this.exposureNode = exposureNode;
 		this.exposureNode = exposureNode;
+
+		/**
+		 * Represents the color to process.
+		 *
+		 * @type {Node}
+		 * @default null
+		 */
 		this.colorNode = colorNode;
 		this.colorNode = colorNode;
 
 
 	}
 	}
 
 
+	/**
+	 * Overwrites the default `getCacheKey()` implementation by including the tone
+	 * mapping type into the cache key.
+	 *
+	 * @return {Number} The hash.
+	 */
 	getCacheKey() {
 	getCacheKey() {
 
 
 		return hash( super.getCacheKey(), this.toneMapping );
 		return hash( super.getCacheKey(), this.toneMapping );

+ 60 - 0
src/nodes/display/ToonOutlinePassNode.js

@@ -8,6 +8,20 @@ import { normalLocal } from '../../nodes/accessors/Normal.js';
 import { BackSide } from '../../constants.js';
 import { BackSide } from '../../constants.js';
 import PassNode from './PassNode.js';
 import PassNode from './PassNode.js';
 
 
+/**
+ * Represents a render pass for producing a toon outline effect on compatible objects.
+ * Only 3D objects with materials of type `MeshToonMaterial` and `MeshToonNodeMaterial`
+ * will receive the outline.
+ *
+ * ```js
+ * const postProcessing = new PostProcessing( renderer );
+ *
+ * const scenePass = toonOutlinePass( scene, camera );
+ *
+ * postProcessing.outputNode = scenePass;
+ * ```
+ * @augments PassNode
+ */
 class ToonOutlinePassNode extends PassNode {
 class ToonOutlinePassNode extends PassNode {
 
 
 	static get type() {
 	static get type() {
@@ -16,14 +30,46 @@ class ToonOutlinePassNode extends PassNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Constructs a new outline pass node.
+	 *
+	 * @param {Scene} scene - A reference to the scene.
+	 * @param {Camera} camera - A reference to the camera.
+	 * @param {Node} colorNode - Defines the outline's color.
+	 * @param {Node} thicknessNode - Defines the outline's thickness.
+	 * @param {Node} alphaNode - Defines the outline's alpha.
+	 */
 	constructor( scene, camera, colorNode, thicknessNode, alphaNode ) {
 	constructor( scene, camera, colorNode, thicknessNode, alphaNode ) {
 
 
 		super( PassNode.COLOR, scene, camera );
 		super( PassNode.COLOR, scene, camera );
 
 
+		/**
+		 * Defines the outline's color.
+		 *
+		 * @type {Node}
+		 */
 		this.colorNode = colorNode;
 		this.colorNode = colorNode;
+
+		/**
+		 * Defines the outline's thickness.
+		 *
+		 * @type {Node}
+		 */
 		this.thicknessNode = thicknessNode;
 		this.thicknessNode = thicknessNode;
+
+		/**
+		 * Defines the outline's alpha.
+		 *
+		 * @type {Node}
+		 */
 		this.alphaNode = alphaNode;
 		this.alphaNode = alphaNode;
 
 
+		/**
+		 * An internal material cache.
+		 *
+		 * @private
+		 * @type {WeakMap}
+		 */
 		this._materialCache = new WeakMap();
 		this._materialCache = new WeakMap();
 
 
 	}
 	}
@@ -61,6 +107,12 @@ class ToonOutlinePassNode extends PassNode {
 
 
 	}
 	}
 
 
+	/**
+	 * Creates the material used for outline rendering.
+	 *
+	 * @private
+	 * @return {NodeMaterial} The outline material.
+	 */
 	_createMaterial() {
 	_createMaterial() {
 
 
 		const material = new NodeMaterial();
 		const material = new NodeMaterial();
@@ -88,6 +140,14 @@ class ToonOutlinePassNode extends PassNode {
 
 
 	}
 	}
 
 
+	/**
+	 * For the given toon material, this method returns a correspoding
+	 * outline material.
+	 *
+	 * @private
+	 * @param {(MeshToonMaterial|MeshToonNodeMaterial)} originalMaterial - The toon material.
+	 * @return {NodeMaterial} The outline material.
+	 */
 	_getOutlineMaterial( originalMaterial ) {
 	_getOutlineMaterial( originalMaterial ) {
 
 
 		let outlineMaterial = this._materialCache.get( originalMaterial );
 		let outlineMaterial = this._materialCache.get( originalMaterial );

粤ICP备19079148号