@gnsx/three 0.184.0

package/src/nodes/display/ColorAdjustment.js

@@ -0,0 +1,158 @@
+import { dot, max, mix } from '../math/MathNode.js';
+import { add } from '../math/OperatorNode.js';
+import { Fn, If, float, vec3, vec4 } from '../tsl/TSLBase.js';
+import { ColorManagement } from '../../math/ColorManagement.js';
+import { Vector3 } from '../../math/Vector3.js';
+import { LinearSRGBColorSpace } from '../../constants.js';
+
+/**
+ * Computes a grayscale value for the given RGB color value.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec3>} color - The color value to compute the grayscale for.
+ * @return {Node<vec3>} The grayscale color.
+ */
+export const grayscale = /*@__PURE__*/ Fn( ( [ color ] ) => {
+
+	return luminance( color.rgb );
+
+} );
+
+/**
+ * Super-saturates or desaturates the given RGB color.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec3>} color - The input color.
+ * @param {Node<float>} [adjustment=1] - Specifies the amount of the conversion. A value under `1` desaturates the color, a value over `1` super-saturates it.
+ * @return {Node<vec3>} The saturated color.
+ */
+export const saturation = /*@__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
+
+	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}.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec3>} color - The input color.
+ * @param {Node<float>} [adjustment=1] - Controls the intensity of the vibrance effect.
+ * @return {Node<vec3>} The updated color.
+ */
+export const vibrance = /*@__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
+
+	const average = add( color.r, color.g, color.b ).div( 3.0 );
+
+	const mx = color.r.max( color.g.max( color.b ) );
+	const amt = mx.sub( average ).mul( adjustment ).mul( - 3.0 );
+
+	return mix( color.rgb, mx, amt );
+
+} );
+
+/**
+ * Updates the hue component of the given RGB color while preserving its luminance and saturation.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec3>} color - The input color.
+ * @param {Node<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 {Node<vec3>} The updated color.
+ */
+export const hue = /*@__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
+
+	const k = vec3( 0.57735, 0.57735, 0.57735 );
+
+	const cosAngle = adjustment.cos();
+
+	return vec3( color.rgb.mul( cosAngle ).add( k.cross( color.rgb ).mul( adjustment.sin() ).add( k.mul( dot( k, color.rgb ).mul( cosAngle.oneMinus() ) ) ) ) );
+
+} );
+
+/**
+ * Computes the luminance for the given RGB color value.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec3>} color - The color value to compute the luminance for.
+ * @param {?Node<vec3>} luminanceCoefficients - The luminance coefficients. By default predefined values of the current working color space are used.
+ * @return {Node<float>} The luminance.
+ */
+export const luminance = (
+	color,
+	luminanceCoefficients = vec3( ColorManagement.getLuminanceCoefficients( new Vector3() ) )
+) => dot( color, luminanceCoefficients );
+
+/**
+ * Color Decision List (CDL) v1.2
+ *
+ * Compact representation of color grading information, defined by slope, offset, power, and
+ * saturation. The CDL should be typically be given input in a log space (such as LogC, ACEScc,
+ * or AgX Log), and will return output in the same space. Output may require clamping >=0.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec4>} color Input (-Infinity < input < +Infinity)
+ * @param {Node<vec3>} slope Slope (0 ≤ slope < +Infinity)
+ * @param {Node<vec3>} offset Offset (-Infinity < offset < +Infinity; typically -1 < offset < 1)
+ * @param {Node<vec3>} power Power (0 < power < +Infinity)
+ * @param {Node<float>} saturation Saturation (0 ≤ saturation < +Infinity; typically 0 ≤ saturation < 4)
+ * @param {Node<vec3>} luminanceCoefficients Luminance coefficients for saturation term, typically Rec. 709
+ * @return {Node<vec4>} Output, -Infinity < output < +Infinity
+ *
+ * References:
+ * - ASC CDL v1.2
+ * - {@link https://blender.stackexchange.com/a/55239/43930}
+ * - {@link https://docs.acescentral.com/specifications/acescc/}
+ */
+export const cdl = /*@__PURE__*/ Fn( ( [
+	color,
+	slope = vec3( 1 ),
+	offset = vec3( 0 ),
+	power = vec3( 1 ),
+	saturation = float( 1 ),
+	// ASC CDL v1.2 explicitly requires Rec. 709 luminance coefficients.
+	luminanceCoefficients = vec3( ColorManagement.getLuminanceCoefficients( new Vector3(), LinearSRGBColorSpace ) )
+] ) => {
+
+	// NOTE: The ASC CDL v1.2 defines a [0, 1] clamp on the slope+offset term, and another on the
+	// saturation term. Per the ACEScc specification and Filament, limits may be omitted to support
+	// values outside [0, 1], requiring a workaround for negative values in the power expression.
+
+	const luma = color.rgb.dot( vec3( luminanceCoefficients ) );
+
+	const v = max( color.rgb.mul( slope ).add( offset ), 0.0 ).toVar();
+	const pv = v.pow( power ).toVar();
+
+	If( v.r.greaterThan( 0.0 ), () => { v.r.assign( pv.r ); } ); // eslint-disable-line
+	If( v.g.greaterThan( 0.0 ), () => { v.g.assign( pv.g ); } ); // eslint-disable-line
+	If( v.b.greaterThan( 0.0 ), () => { v.b.assign( pv.b ); } ); // eslint-disable-line
+
+	v.assign( luma.add( v.sub( luma ).mul( saturation ) ) );
+
+	return vec4( v.rgb, color.a );
+
+} );
+
+/**
+ * TSL function for creating a posterize effect which reduces the number of colors
+ * in an image, resulting in a more blocky and stylized appearance.
+ *
+ * @tsl
+ * @function
+ * @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.
+ * @returns {Node} The posterized color.
+ */
+export const posterize = Fn( ( [ source, steps ] ) => {
+
+	return source.mul( steps ).floor().div( steps );
+
+} );
+

package/src/nodes/display/ColorSpaceFunctions.js

@@ -0,0 +1,54 @@
+import { mix } from '../math/MathNode.js';
+import { Fn } from '../tsl/TSLCore.js';
+
+/**
+ * Converts the given color value from sRGB to linear-sRGB color space.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec3>} color - The sRGB color.
+ * @return {Node<vec3>} The linear-sRGB color.
+ */
+export const sRGBTransferEOTF = /*@__PURE__*/ Fn( ( [ color ] ) => {
+
+	const a = color.mul( 0.9478672986 ).add( 0.0521327014 ).pow( 2.4 );
+	const b = color.mul( 0.0773993808 );
+	const factor = color.lessThanEqual( 0.04045 );
+
+	const rgbResult = mix( a, b, factor );
+
+	return rgbResult;
+
+} ).setLayout( {
+	name: 'sRGBTransferEOTF',
+	type: 'vec3',
+	inputs: [
+		{ name: 'color', type: 'vec3' }
+	]
+} );
+
+/**
+ * Converts the given color value from linear-sRGB to sRGB color space.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec3>} color - The linear-sRGB color.
+ * @return {Node<vec3>} The sRGB color.
+ */
+export const sRGBTransferOETF = /*@__PURE__*/ Fn( ( [ color ] ) => {
+
+	const a = color.pow( 0.41666 ).mul( 1.055 ).sub( 0.055 );
+	const b = color.mul( 12.92 );
+	const factor = color.lessThanEqual( 0.0031308 );
+
+	const rgbResult = mix( a, b, factor );
+
+	return rgbResult;
+
+} ).setLayout( {
+	name: 'sRGBTransferOETF',
+	type: 'vec3',
+	inputs: [
+		{ name: 'color', type: 'vec3' }
+	]
+} );

package/src/nodes/display/ColorSpaceNode.js

@@ -0,0 +1,164 @@
+import TempNode from '../core/TempNode.js';
+import { addMethodChaining, mat3, nodeObject, vec4 } from '../tsl/TSLCore.js';
+
+import { SRGBTransfer } from '../../constants.js';
+import { ColorManagement } from '../../math/ColorManagement.js';
+import { sRGBTransferEOTF, sRGBTransferOETF } from './ColorSpaceFunctions.js';
+import { Matrix3 } from '../../math/Matrix3.js';
+
+const WORKING_COLOR_SPACE = 'WorkingColorSpace';
+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 {
+
+	static get type() {
+
+		return 'ColorSpaceNode';
+
+	}
+
+	/**
+	 * 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 ) {
+
+		super( 'vec4' );
+
+		/**
+		 * Represents the color to convert.
+		 *
+		 * @type {Node}
+		 */
+		this.colorNode = colorNode;
+
+		/**
+		 * The source color space.
+		 *
+		 * @type {string}
+		 */
+		this.source = source;
+
+		/**
+		 * The target color space.
+		 *
+		 * @type {string}
+		 */
+		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 ) {
+
+		if ( colorSpace === WORKING_COLOR_SPACE ) {
+
+			return ColorManagement.workingColorSpace;
+
+		} else if ( colorSpace === OUTPUT_COLOR_SPACE ) {
+
+			return builder.context.outputColorSpace || builder.renderer.outputColorSpace;
+
+		}
+
+		return colorSpace;
+
+	}
+
+	setup( builder ) {
+
+		const { colorNode } = this;
+
+		const source = this.resolveColorSpace( builder, this.source );
+		const target = this.resolveColorSpace( builder, this.target );
+
+		let outputNode = colorNode;
+
+		if ( ColorManagement.enabled === false || source === target || ! source || ! target ) {
+
+			return outputNode;
+
+		}
+
+		if ( ColorManagement.getTransfer( source ) === SRGBTransfer ) {
+
+			outputNode = vec4( sRGBTransferEOTF( outputNode.rgb ), outputNode.a );
+
+		}
+
+		if ( ColorManagement.getPrimaries( source ) !== ColorManagement.getPrimaries( target ) ) {
+
+			outputNode = vec4(
+				mat3( ColorManagement._getMatrix( new Matrix3(), source, target ) ).mul( outputNode.rgb ),
+				outputNode.a
+			);
+
+		}
+
+		if ( ColorManagement.getTransfer( target ) === SRGBTransfer ) {
+
+			outputNode = vec4( sRGBTransferOETF( outputNode.rgb ), outputNode.a );
+
+		}
+
+		return outputNode;
+
+	}
+
+}
+
+export default ColorSpaceNode;
+
+/**
+ * TSL function for converting a given color node from the current working color space to the given color space.
+ *
+ * @tsl
+ * @function
+ * @param {Node} node - Represents the node to convert.
+ * @param {string} targetColorSpace - The target color space.
+ * @returns {ColorSpaceNode}
+ */
+export const workingToColorSpace = ( node, targetColorSpace ) => new ColorSpaceNode( nodeObject( node ), WORKING_COLOR_SPACE, targetColorSpace );
+
+/**
+ * TSL function for converting a given color node from the given color space to the current working color space.
+ *
+ * @tsl
+ * @function
+ * @param {Node} node - Represents the node to convert.
+ * @param {string} sourceColorSpace - The source color space.
+ * @returns {ColorSpaceNode}
+ */
+export const colorSpaceToWorking = ( node, sourceColorSpace ) => new ColorSpaceNode( nodeObject( node ), sourceColorSpace, WORKING_COLOR_SPACE );
+
+/**
+ * TSL function for converting a given color node from one color space to another one.
+ *
+ * @tsl
+ * @function
+ * @param {Node} node - Represents the node to convert.
+ * @param {string} sourceColorSpace - The source color space.
+ * @param {string} targetColorSpace - The target color space.
+ * @returns {ColorSpaceNode}
+ */
+export const convertColorSpace = ( node, sourceColorSpace, targetColorSpace ) => new ColorSpaceNode( nodeObject( node ), sourceColorSpace, targetColorSpace );
+
+addMethodChaining( 'workingToColorSpace', workingToColorSpace );
+addMethodChaining( 'colorSpaceToWorking', colorSpaceToWorking );

package/src/nodes/display/FrontFacingNode.js

@@ -0,0 +1,102 @@
+import Node from '../core/Node.js';
+import { nodeImmutable, float, Fn } from '../tsl/TSLBase.js';
+
+import { BackSide, DoubleSide } from '../../constants.js';
+
+/**
+ * This node can be used to evaluate whether a primitive is front or back facing.
+ *
+ * @augments Node
+ */
+class FrontFacingNode extends Node {
+
+	static get type() {
+
+		return 'FrontFacingNode';
+
+	}
+
+	/**
+	 * Constructs a new front facing node.
+	 */
+	constructor() {
+
+		super( 'bool' );
+
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isFrontFacingNode = true;
+
+	}
+
+	generate( builder ) {
+
+		if ( builder.shaderStage !== 'fragment' ) return 'true';
+
+		//
+
+		const { material } = builder;
+
+		if ( material.side === BackSide ) {
+
+			return 'false';
+
+		}
+
+		return builder.getFrontFacing();
+
+	}
+
+}
+
+export default FrontFacingNode;
+
+/**
+ * TSL object that represents whether a primitive is front or back facing
+ *
+ * @tsl
+ * @type {FrontFacingNode<bool>}
+ */
+export const frontFacing = /*@__PURE__*/ nodeImmutable( FrontFacingNode );
+
+/**
+ * TSL object that represents the front facing status as a number instead of a bool.
+ * `1` means front facing, `-1` means back facing.
+ *
+ * @tsl
+ * @type {Node<float>}
+ */
+export const faceDirection = /*@__PURE__*/ float( frontFacing ).mul( 2.0 ).sub( 1.0 );
+
+/**
+ * Converts a direction vector to a face direction vector based on the material's side.
+ *
+ * If the material is set to `BackSide`, the direction is inverted.
+ * If the material is set to `DoubleSide`, the direction is multiplied by `faceDirection`.
+ *
+ * @tsl
+ * @param {Node<vec3>} direction - The direction vector to convert.
+ * @returns {Node<vec3>} The converted direction vector.
+ */
+export const directionToFaceDirection = /*@__PURE__*/ Fn( ( [ direction ], { material } ) => {
+
+	const side = material.side;
+
+	if ( side === BackSide ) {
+
+		direction = direction.mul( - 1.0 );
+
+	} else if ( side === DoubleSide ) {
+
+		direction = direction.mul( faceDirection );
+
+	}
+
+	return direction;
+
+} );

package/src/nodes/display/NormalMapNode.js

@@ -0,0 +1,153 @@
+import TempNode from '../core/TempNode.js';
+
+import { normalView, transformNormalToView } from '../accessors/Normal.js';
+import { TBNViewMatrix } from '../accessors/AccessorsUtils.js';
+import { nodeProxy, vec3 } from '../tsl/TSLBase.js';
+
+import { TangentSpaceNormalMap, ObjectSpaceNormalMap, NoNormalPacking, NormalRGPacking, NormalGAPacking } from '../../constants.js';
+import { directionToFaceDirection } from './FrontFacingNode.js';
+import { unpackNormal } from '../utils/Packing.js';
+import { error } from '../../utils.js';
+
+/**
+ * This class can be used for applying normals maps to materials.
+ *
+ * ```js
+ * material.normalNode = normalMap( texture( normalTex ) );
+ * ```
+ *
+ * @augments TempNode
+ */
+class NormalMapNode extends TempNode {
+
+	static get type() {
+
+		return 'NormalMapNode';
+
+	}
+
+	/**
+	 * Constructs a new normal map node.
+	 *
+	 * @param {Node<vec3>} node - Represents the normal map data.
+	 * @param {?Node<vec2>} [scaleNode=null] - Controls the intensity of the effect.
+	 */
+	constructor( node, scaleNode = null ) {
+
+		super( 'vec3' );
+
+		/**
+		 * Represents the normal map data.
+		 *
+		 * @type {Node<vec3>}
+		 */
+		this.node = node;
+
+		/**
+		 * Controls the intensity of the effect.
+		 *
+		 * @type {?Node<vec2>}
+		 * @default null
+		 */
+		this.scaleNode = scaleNode;
+
+		/**
+		 * The normal map type.
+		 *
+		 * @type {(TangentSpaceNormalMap|ObjectSpaceNormalMap)}
+		 * @default TangentSpaceNormalMap
+		 */
+		this.normalMapType = TangentSpaceNormalMap;
+
+		/**
+		 * Controls how to unpack the sampled normal map values.
+		 *
+		 * @type {string}
+		 * @default NoNormalPacking
+		 */
+		this.unpackNormalMode = NoNormalPacking;
+
+	}
+
+	setup( builder ) {
+
+		const { normalMapType, scaleNode, unpackNormalMode } = this;
+
+		let normalMap = this.node.mul( 2.0 ).sub( 1.0 );
+
+		if ( normalMapType === TangentSpaceNormalMap ) {
+
+			if ( unpackNormalMode === NormalRGPacking ) {
+
+				normalMap = unpackNormal( normalMap.xy );
+
+			} else if ( unpackNormalMode === NormalGAPacking ) {
+
+				normalMap = unpackNormal( normalMap.yw );
+
+			} else if ( unpackNormalMode !== NoNormalPacking ) {
+
+				error( `THREE.NodeMaterial: Unexpected unpack normal mode: ${ unpackNormalMode }` );
+
+			}
+
+		} else {
+
+			if ( unpackNormalMode !== NoNormalPacking ) {
+
+				error( `THREE.NodeMaterial: Normal map type '${ normalMapType }' is not compatible with unpack normal mode '${ unpackNormalMode }'` );
+
+			}
+
+		}
+
+		if ( scaleNode !== null ) {
+
+			let scale = scaleNode;
+
+			if ( builder.isFlatShading() === true ) {
+
+				scale = directionToFaceDirection( scale );
+
+			}
+
+			normalMap = vec3( normalMap.xy.mul( scale ), normalMap.z );
+
+		}
+
+		let output = null;
+
+		if ( normalMapType === ObjectSpaceNormalMap ) {
+
+			output = transformNormalToView( normalMap );
+
+		} else if ( normalMapType === TangentSpaceNormalMap ) {
+
+			output = TBNViewMatrix.mul( normalMap ).normalize();
+
+		} else {
+
+			error( `NodeMaterial: Unsupported normal map type: ${ normalMapType }` );
+
+			output = normalView; // Fallback to default normal view
+
+		}
+
+		return output;
+
+	}
+
+}
+
+export default NormalMapNode;
+
+/**
+ * TSL function for creating a normal map node.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec3>} node - Represents the normal map data.
+ * @param {?Node<vec2>} [scaleNode=null] - Controls the intensity of the effect.
+ * @returns {NormalMapNode}
+ */
+export const normalMap = /*@__PURE__*/ nodeProxy( NormalMapNode ).setParameterLength( 1, 2 );