ShaderNode: Improve syntax (Fluent interface) (#25074)

* ToneMappingNode: Fix property name

* ShaderNode: Improve syntax

* update some nodes using new syntax

* cleanup

* cleanup(2)

* update a few more lines

* cleanup

* updates

* cleanup

examples/jsm/nodes/functions/BSDF/DFGApprox.js

@@ -1,5 +1,5 @@
 import {
-	ShaderNode, dotNV, vec2, vec4, add, mul, min, exp2
+	ShaderNode, dotNV, vec2, vec4, mul, min
 } from '../../shadernode/ShaderNodeElements.js';
 
 // Analytical approximation of the DFG LUT, one half of the
@@ -14,11 +14,11 @@ const DFGApprox = new ShaderNode( ( inputs ) => {
 
 	const c1 = vec4( 1, 0.0425, 1.04, - 0.04 );
 
-	const r = add( mul( roughness, c0 ), c1 );
+	const r = roughness.mul( c0 ).add( c1 );
 
-	const a004 = add( mul( min( mul( r.x, r.x ), exp2( mul( - 9.28, dotNV ) ) ), r.x ), r.y );
+	const a004 = min( mul( r.x, r.x ), dotNV.mul( -9.28 ).exp2() ).mul( r.x ).add( r.y );
 
-	const fab = add( mul( vec2( - 1.04, 1.04 ), a004 ), r.zw );
+	const fab = vec2( - 1.04, 1.04 ).mul( a004 ).add( r.zw );
 
 	return fab;
 

examples/jsm/nodes/functions/BSDF/F_Schlick.js

@@ -1,4 +1,4 @@
-import { ShaderNode, add, sub, mul, exp2 } from '../../shadernode/ShaderNodeBaseElements.js';
+import { ShaderNode, sub } from '../../shadernode/ShaderNodeBaseElements.js';
 
 const F_Schlick = new ShaderNode( ( inputs ) => {
 
@@ -9,9 +9,9 @@ const F_Schlick = new ShaderNode( ( inputs ) => {
 
 	// Optimized variant (presented by Epic at SIGGRAPH '13)
 	// https://cdn2.unrealengine.com/Resources/files/2013SiggraphPresentationsNotes-26915738.pdf
-	const fresnel = exp2( mul( sub( mul( - 5.55473, dotVH ), 6.98316 ), dotVH ) );
+	const fresnel = dotVH.mul( - 5.55473 ).sub( 6.98316 ).mul( dotVH ).exp2();
 
-	return add( mul( f0, sub( 1.0, fresnel ) ), mul( f90, fresnel ) );
+	return f0.mul( sub( 1.0, fresnel ) ).add( f90.mul( fresnel ) );
 
 } ); // validated
 

examples/jsm/nodes/lighting/EnvironmentNode.js

@@ -2,7 +2,7 @@ import LightingNode from './LightingNode.js';
 import ContextNode from '../core/ContextNode.js';
 import CacheNode from '../core/CacheNode.js';
 import SpecularMIPLevelNode from '../utils/SpecularMIPLevelNode.js';
-import { float, mul, roughness, reflect, mix, positionViewDirection, negate, normalize, transformedNormalView, transformedNormalWorld, transformDirection, cameraViewMatrix, equirectUV, vec2, invert } from '../shadernode/ShaderNodeElements.js';
+import { float, mul, roughness, positionViewDirection, transformedNormalView, transformedNormalWorld, cameraViewMatrix, equirectUV, vec2 } from '../shadernode/ShaderNodeElements.js';
 
 class EnvironmentNode extends LightingNode {
 
@@ -30,9 +30,9 @@ class EnvironmentNode extends LightingNode {
 
 				if ( reflectVec === undefined ) {
 
-					reflectVec = reflect( negate( positionViewDirection ), transformedNormalView );
-					reflectVec = normalize( mix( reflectVec, transformedNormalView, mul( roughness, roughness ) ) );
-					reflectVec = transformDirection( reflectVec, cameraViewMatrix );
+					reflectVec = positionViewDirection.negate().reflect( transformedNormalView );
+					reflectVec = reflectVec.mix( transformedNormalView, roughness.mul( roughness ) ).normalize();
+					reflectVec = reflectVec.transformDirection( cameraViewMatrix );
 
 				}
 
@@ -47,7 +47,7 @@ class EnvironmentNode extends LightingNode {
 						// @TODO: Needed PMREM
 
 						radianceTextureUVNode = equirectUV( reflectVec );
-						radianceTextureUVNode = vec2( radianceTextureUVNode.x, invert( radianceTextureUVNode.y ) );
+						radianceTextureUVNode = vec2( radianceTextureUVNode.x, radianceTextureUVNode.y.invert() );
 
 					}
 
@@ -86,7 +86,7 @@ class EnvironmentNode extends LightingNode {
 						// @TODO: Needed PMREM
 
 						irradianceTextureUVNode = equirectUV( transformedNormalWorld );
-						irradianceTextureUVNode = vec2( irradianceTextureUVNode.x, invert( irradianceTextureUVNode.y ) );
+						irradianceTextureUVNode = vec2( irradianceTextureUVNode.x, irradianceTextureUVNode.y.invert() );
 
 					}
 

examples/jsm/nodes/shadernode/ShaderNode.js

@@ -7,6 +7,8 @@ import ConstNode from '../core/ConstNode.js';
 import StackNode from '../core/StackNode.js';
 import { getValueFromType } from '../core/NodeUtils.js';
 
+import * as NodeElements from './ShaderNodeElements.js';
+
 const shaderNodeHandler = {
 
 	construct( NodeClosure, params ) {
@@ -17,7 +19,7 @@ const shaderNodeHandler = {
 
 	},
 
-	get: function ( node, prop ) {
+	get: function ( node, prop, nodeObj ) {
 
 		if ( typeof prop === 'string' && node[ prop ] === undefined ) {
 
@@ -39,6 +41,12 @@ const shaderNodeHandler = {
 
 				return nodeObject( new ArrayElementNode( node, new ConstNode( Number( prop ), 'uint' ) ) );
 
+			} else if ( NodeElements[ prop ] ) {
+
+				const nodeElement = NodeElements[ prop ];
+
+				return ( ...params ) => nodeElement( nodeObj, ...params );
+
 			}
 
 		}

examples/webgpu_compute.html

@@ -31,8 +31,7 @@
 			import {
 				ShaderNode, compute,
 				uniform, element, storage, attribute, mul, sin, cos,
-				add, sub, cond, abs, negate, max, min, length, float, vec2, vec3, color,
-				greaterThanEqual, lessThanEqual, instanceIndex
+				add, cond, abs, max, min, float, vec2, vec3, color, instanceIndex
 			} from 'three/nodes';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
@@ -91,15 +90,15 @@
 
 					const position = add( particle, velocity );
 
-					stack.assign( velocity.x, cond( greaterThanEqual( abs( position.x ), limit.x ), negate( velocity.x ), velocity.x ) );
-					stack.assign( velocity.y, cond( greaterThanEqual( abs( position.y ), limit.y ), negate( velocity.y ), velocity.y ) );
+					stack.assign( velocity.x, abs( position.x ).greaterThanEqual( limit.x ).cond( velocity.x.negate(), velocity.x ) );
+					stack.assign( velocity.y, abs( position.y ).greaterThanEqual( limit.y ).cond( velocity.y.negate(), velocity.y ) );
 
-					stack.assign( position, max( negate( limit ), min( limit, position ) ) );
+					stack.assign( position, max( limit.negate(), min( limit, position ) ) );
 
 					const pointerSize = 0.1;
-					const distanceFromPointer = length( sub( pointer, position ) );
+					const distanceFromPointer = pointer.sub( position ).length();
 
-					stack.assign( particle, cond( lessThanEqual( distanceFromPointer, pointerSize ), vec3(), position ) );
+					stack.assign( particle, cond( distanceFromPointer.lessThanEqual( pointerSize ), vec3(), position ) );
 
 				} );