wgslFn
Encapsulates a piece of native WGSL code with clear inputs and outputs into a reusable, modular function node that can be called multiple times within the node graph.
Core Advantages
Its core advantage is code modularity and reusability. It allows complex algorithms to be encapsulated into a single function node that can be called multiple times and in multiple places within a material graph, greatly simplifying the graph structure and improving code maintainability.
Common Uses
Building reusable procedural noise function libraries
Encapsulating complex color correction or filter algorithms
Creating shared math utility functions (e.g., range remapping)
How to adjust
There are two main ways to adjust this node: 1. Directly modify the WGSL source code string passed to the constructor to fundamentally change the function's core algorithm. 2. Pass different TSL nodes or values as parameters in each `.call()` invocation to parametrically control the output of that specific call without altering the algorithm itself.
Code Examples
1// 1. Define a reusable function node using wgslFn
2const remapFn = wgslFn(`
3 fn remap( v: f32, inMin: f32, inMax: f32, outMin: f32, outMax: f32 ) -> f32 {
4 return outMin + ( v - inMin ) * ( outMax - outMin ) / ( inMax - inMin );
5 }
6`);
7
8// 2. Call the function multiple times to distort the x and y components of the UV separately
9const remappedU = remapFn.call( { v: uv().x, inMin: 0, inMax: 1, outMin: -1, outMax: 1 } );
10const remappedV = remapFn.call( { v: uv().y, inMin: 0, inMax: 1, outMin: 0.2, outMax: 0.8 } );
11
12const distortedUV = vec2( remappedU, remappedV );