TSL: Fix include one function under another. (mrdoob#26844)

* TSL: Fix include one function under another.

* Add include example

Author: sunag

examples/jsm/nodes/code/FunctionNode.js

@@ -99,17 +99,28 @@ class FunctionNode extends CodeNode {
 
 export default FunctionNode;
 
-const nativeFn = ( code, includes, language = '' ) => {
+const nativeFn = ( code, includes = [], language = '' ) => {
 
-	let functionNode = null;
+	for ( let i = 0; i < includes.length; i ++ ) {
 
-	return ( ...params ) => {
+		const include = includes[ i ];
 
-		if ( functionNode === null ) functionNode = nodeObject( new FunctionNode( code, includes, language ) );
+		// TSL Function: glslFn, wgslFn
 
-		return functionNode.call( ...params );
+		if ( typeof include === 'function' ) {
 
-	};
+			includes[ i ] = include.functionNode;
+
+		}
+
+	}
+
+	const functionNode = nodeObject( new FunctionNode( code, includes, language ) );
+
+	const fn = ( ...params ) => functionNode.call( ...params );
+	fn.functionNode = functionNode;
+
+	return fn;
 
 };
 

examples/webgpu_materials.html

@@ -166,7 +166,7 @@
 
 				// Custom WGSL ( desaturate filter )
 
-				const desaturateWGSLNode = wgslFn( `
+				const desaturateWGSLFn = wgslFn( `
 					fn desaturate( color:vec3<f32> ) -> vec3<f32> {
 
 						let lum = vec3<f32>( 0.299, 0.587, 0.114 );
@@ -176,8 +176,18 @@
 					}
 				` );
 
+				// include example
+
+				const someWGSLFn = wgslFn( `
+					fn someFn( color:vec3<f32> ) -> vec3<f32> {
+
+						return desaturate( color );
+
+					}
+				`, [ desaturateWGSLFn ] );
+
 				material = new MeshBasicNodeMaterial();
-				material.colorNode = desaturateWGSLNode( { color: texture( uvTexture ) } );
+				material.colorNode = someWGSLFn( { color: texture( uvTexture ) } );
 				materials.push( material );
 
 				// Custom WGSL ( get texture from keywords )