TSL: Different params order if method chaining is used. (#25683)

* CodeNode: Added language and serialize.

* TSL: Renamed inversesqrt -> inverseSqrt, faceforward -> faceForward,

* TSL: Added saturate

* TSL: Different params order if method chaining is used.

* Nodes: Change mix order and added FogNode.mixAssign()

examples/jsm/nodes/Nodes.js

@@ -9,7 +9,7 @@ export { default as ArrayUniformNode /* @TODO: arrayUniform */ } from './core/Ar
 export { default as AttributeNode, attribute } from './core/AttributeNode.js';
 export { default as BypassNode, bypass } from './core/BypassNode.js';
 export { default as CacheNode, cache } from './core/CacheNode.js';
-export { default as CodeNode, code } from './core/CodeNode.js';
+export { default as CodeNode, code, js } from './core/CodeNode.js';
 export { default as ConstNode } from './core/ConstNode.js';
 export { default as ContextNode, context } from './core/ContextNode.js';
 export { default as ExpressionNode, expression } from './core/ExpressionNode.js';
@@ -35,8 +35,10 @@ export { default as UniformNode, uniform } from './core/UniformNode.js';
 export { default as VarNode, label, temp } from './core/VarNode.js';
 export { default as VaryingNode, varying } from './core/VaryingNode.js';
 
+export * as NodeUtils from './core/NodeUtils.js';
+
 // math
-export { default as MathNode, EPSILON, INFINITY, radians, degrees, exp, exp2, log, log2, sqrt, inversesqrt, floor, ceil, normalize, fract, sin, cos, tan, asin, acos, atan, abs, sign, length, negate, invert, dFdx, dFdy, round, reciprocal, atan2, min, max, mod, step, reflect, distance, difference, dot, cross, pow, pow2, pow3, pow4, transformDirection, mix, clamp, refract, smoothstep, faceforward } from './math/MathNode.js';
+export { default as MathNode, EPSILON, INFINITY, radians, degrees, exp, exp2, log, log2, sqrt, inverseSqrt, floor, ceil, normalize, fract, sin, cos, tan, asin, acos, atan, abs, sign, length, negate, invert, dFdx, dFdy, round, reciprocal, atan2, min, max, mod, step, reflect, distance, difference, dot, cross, pow, pow2, pow3, pow4, transformDirection, mix, clamp, saturate, refract, smoothstep, faceForward } from './math/MathNode.js';
 export { default as OperatorNode, add, sub, mul, div, remainder, equal, assign, lessThan, greaterThan, lessThanEqual, greaterThanEqual, and, or, xor, bitAnd, bitOr, bitXor, shiftLeft, shiftRight } from './math/OperatorNode.js';
 export { default as CondNode, cond } from './math/CondNode.js';
 

examples/jsm/nodes/core/CodeNode.js

@@ -3,13 +3,14 @@ import { nodeProxy } from '../shadernode/ShaderNode.js';
 
 class CodeNode extends Node {
 
-	constructor( code = '', includes = [] ) {
+	constructor( code = '', includes = [], language = '' ) {
 
 		super( 'code' );
 
 		this.isCodeNode = true;
 
 		this.code = code;
+		this.language = language;
 
 		this._includes = includes;
 
@@ -46,10 +47,29 @@ class CodeNode extends Node {
 
 	}
 
+	serialize( data ) {
+
+		super.serialize( data );
+
+		data.code = this.code;
+		data.language = this.language;
+
+	}
+
+	deserialize( data ) {
+
+		super.deserialize( data );
+
+		this.code = data.code;
+		this.language = data.language;
+
+	}
+
 }
 
 export default CodeNode;
 
 export const code = nodeProxy( CodeNode );
+export const js = ( src, includes ) => code( src, includes, 'js' );
 
 addNodeClass( CodeNode );

examples/jsm/nodes/display/ColorAdjustmentNode.js

@@ -6,7 +6,7 @@ import { addNodeElement, ShaderNode, nodeProxy, float, vec3, mat3 } from '../sha
 
 const saturationNode = new ShaderNode( ( { color, adjustment } ) => {
 
-	return luminance( color ).mix( color, adjustment );
+	return adjustment.mix( luminance( color ), color );
 
 } );
 

examples/jsm/nodes/display/NormalMapNode.js

@@ -33,7 +33,7 @@ const perturbNormal2ArbNode = new ShaderNode( ( inputs ) => {
 	const B = q1perp.mul( st0.y ).add( q0perp.mul( st1.y ) );
 
 	const det = T.dot( T ).max( B.dot( B ) );
-	const scale = faceDirection.mul( det.inversesqrt() );
+	const scale = faceDirection.mul( det.inverseSqrt() );
 
 	return add( T.mul( mapN.x, scale ), B.mul( mapN.y, scale ), N.mul( mapN.z ) ).normalize();
 

examples/jsm/nodes/fog/FogNode.js

@@ -14,9 +14,9 @@ class FogNode extends Node {
 
 	}
 
-	mix( outputNode ) {
+	mixAssign( outputNode ) {
 
-		return outputNode.mix( this.colorNode, this );
+		return this.mix( outputNode, this.colorNode );
 
 	}
 

examples/jsm/nodes/lighting/EnvironmentNode.js

@@ -37,7 +37,7 @@ class EnvironmentNode extends LightingNode {
 				if ( reflectVec === undefined ) {
 
 					reflectVec = positionViewDirection.negate().reflect( transformedNormalView );
-					reflectVec = reflectVec.mix( transformedNormalView, roughness.mul( roughness ) ).normalize();
+					reflectVec = roughness.mul( roughness ).mix( reflectVec, transformedNormalView ).normalize();
 					reflectVec = reflectVec.transformDirection( cameraViewMatrix );
 
 				}

examples/jsm/nodes/materials/NodeMaterial.js

@@ -276,7 +276,7 @@ class NodeMaterial extends ShaderMaterial {
 
 		}
 
-		if ( fogNode ) outputNode = vec4( fogNode.mix( outputNode.rgb ), outputNode.a );
+		if ( fogNode ) outputNode = vec4( fogNode.mixAssign( outputNode.rgb ), outputNode.a );
 
 		return outputNode;
 

examples/jsm/nodes/math/MathNode.js

@@ -254,7 +254,7 @@ export const exp2 = nodeProxy( MathNode, MathNode.EXP2 );
 export const log = nodeProxy( MathNode, MathNode.LOG );
 export const log2 = nodeProxy( MathNode, MathNode.LOG2 );
 export const sqrt = nodeProxy( MathNode, MathNode.SQRT );
-export const inversesqrt = nodeProxy( MathNode, MathNode.INVERSE_SQRT );
+export const inverseSqrt = nodeProxy( MathNode, MathNode.INVERSE_SQRT );
 export const floor = nodeProxy( MathNode, MathNode.FLOOR );
 export const ceil = nodeProxy( MathNode, MathNode.CEIL );
 export const normalize = nodeProxy( MathNode, MathNode.NORMALIZE );
@@ -293,9 +293,13 @@ export const transformDirection = nodeProxy( MathNode, MathNode.TRANSFORM_DIRECT
 
 export const mix = nodeProxy( MathNode, MathNode.MIX );
 export const clamp = ( value, low = 0, high = 1 ) => nodeObject( new MathNode( MathNode.CLAMP, nodeObject( value ), nodeObject( low ), nodeObject( high ) ) );
+export const saturate = ( value ) => clamp( value );
 export const refract = nodeProxy( MathNode, MathNode.REFRACT );
 export const smoothstep = nodeProxy( MathNode, MathNode.SMOOTHSTEP );
-export const faceforward = nodeProxy( MathNode, MathNode.FACEFORWARD );
+export const faceForward = nodeProxy( MathNode, MathNode.FACEFORWARD );
+
+export const mixElement = ( t, e1, e2 ) => mix( e1, e2, t );
+export const smoothstepElement = ( x, low, high ) => smoothstep( low, high, x );
 
 addNodeElement( 'radians', radians );
 addNodeElement( 'degrees', degrees );
@@ -304,7 +308,7 @@ addNodeElement( 'exp2', exp2 );
 addNodeElement( 'log', log );
 addNodeElement( 'log2', log2 );
 addNodeElement( 'sqrt', sqrt );
-addNodeElement( 'inversesqrt', inversesqrt );
+addNodeElement( 'inverseSqrt', inverseSqrt );
 addNodeElement( 'floor', floor );
 addNodeElement( 'ceil', ceil );
 addNodeElement( 'normalize', normalize );
@@ -338,11 +342,12 @@ addNodeElement( 'pow2', pow2 );
 addNodeElement( 'pow3', pow3 );
 addNodeElement( 'pow4', pow4 );
 addNodeElement( 'transformDirection', transformDirection );
-addNodeElement( 'mix', mix );
+addNodeElement( 'mix', mixElement );
 addNodeElement( 'clamp', clamp );
 addNodeElement( 'refract', refract );
-addNodeElement( 'smoothstep', smoothstep );
-addNodeElement( 'faceforward', faceforward );
+addNodeElement( 'smoothstep', smoothstepElement );
+addNodeElement( 'faceForward', faceForward );
 addNodeElement( 'difference', difference );
+addNodeElement( 'saturate', saturate );
 
 addNodeClass( MathNode );

examples/webgpu_sandbox.html

@@ -125,7 +125,7 @@
 
 				const materialCompressed = new MeshBasicNodeMaterial();
 				materialCompressed.colorNode = texture( dxt5Texture );
-				materialCompressed.emissiveNode = color( 0x663300 );
+				materialCompressed.emissiveNode = oscSine().mix( color( 0x663300 ), color( 0x0000FF ) );
 				materialCompressed.alphaTestNode = oscSine();
 				materialCompressed.transparent = true;