ShaderNode: Improve syntax (Fluent interface)

examples/jsm/nodes/display/ToneMappingNode.js

@@ -25,7 +25,7 @@ class ToneMappingNode extends TempNode {
 
 	construct( builder ) {
 
-		const colorNode = this.color || builder.context.color;
+		const colorNode = this.colorNode || builder.context.color;
 
 		const toneMapping = this.toneMapping;
 		const toneMappingParams = { exposure: this.exposureNode, color: colorNode };
@@ -38,7 +38,7 @@ class ToneMappingNode extends TempNode {
 
 		} else {
 
-			outputNode = this.colorNode;
+			outputNode = colorNode;
 
 		}
 

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

@@ -14,7 +14,7 @@ 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 );
 

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, mul, exp2 } 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 = exp2( mul( - 5.55473, dotVH ).sub( 6.98316 ).mul( dotVH ) );
 
-	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

@@ -97,7 +97,7 @@
 					stack.assign( position, max( negate( limit ), 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 ) );