Code Node Template
The Code Node Template showcases several important Code Node functions that can be used within Lens Studio. The template is organized into three sections; Basic, Intermediate, and Advanced. Each one builds up in complexity starting with how to get UV coordinates and ending with a modular raymarching example.
For an overview of how the Code Node works, please visit the Introduction to Code Nodes guide.
Basic
With the first example, you will learn how to create a material to alter UVs, change colors over time and how to sample a texture file.
Output UVs
This material contains two code nodes which contribute to the final output: Output UVs and Expanding Circle.
Output UV’s simply gets the first UV coordinate and assigns it to the Result output wire. Clicking on this node, you can see it is using the system.getSurfaceUVCoord0() function. The system command accesses built-in uniforms and functions.
For more information, please visit the Code Node Reference guide.
The other Code Node, Expanding Circle, will draw a circle using a sine wave and puts the result into the alpha channel. This function takes two inputs, one for the circle size and one for the UVs which were created by the Output UVs node.
Two other code nodes are floating below the main graph: System Built-in Values and Inputs/Outputs/Global Types. These serve as examples of using Code Nodes as reference.
Creating a new Code Node and switching the Example Code to one of the built-in examples makes it easy to see how to use special syntax, including a complete list of system functions.
Time Varying Colors
This material uses the system.getTimeElapsed() function to return the current lens time. By creatively modulating a cosine function along with different input parameters for offset and frequency, you can get a pleasing color changing effect.
Sample Texture
The Sample Texture material demonstrates how to sample a texture in a Code Node. The Code Node uses the special .sample() function to sample a texture at a given UV coordinate.
This example not only samples a texture, but also distorts the texture's UVs first to create a wavy texture animation.
Intermediate
In the Intermediate section, you will learn how to translate subgraphs into code nodes, an extension of the lighting loop code node example and how globals work with code nodes.
Subgraph to Code Node
These three materials demonstrate what it looks like to transcribe a subgraph to Code Nodes. Code Nodes are similar to subgraphs in that they encapsulate portions of the graph to a single node, and have their own user-defined inputs and outputs.
Anything a subgraph can handle, the Code Node will be able to handle as well.
Each of these materials splits the output horizontally: red shapes on the left are computed by the Code Node and blue shapes on the right are computed by subgraphs.
At the end, another Code Node called Horizontal Split handles the actual separation logic.
Lighting Loop
The Lighting Loop example is simply the output of the built-in Lighting Loop from the Example Code dropdown list. This code uses several system functions to get lighting information from the scene.
This material also features a vertex shader created using nodes which spins the object, altering its positions and normals.
Custom Code Globals
Globals are powerful tools unique to Lens Studio. They provide a way to declare and operate on custom variables that can then be referenced in the graph system, upstream from the Code Node itself. These Global variables can be accessed in the graph by adding a Custom Code Global node. This node’s dropdown will be populated with global variables defined from Code Nodes in the same subgraph level.
When a Custom Code Global node is a dependency of one of the inputs on your Custom Code node, evaluate() can be called on the input variable name to inject the graph logic from that input into the section of code. This makes it a powerful tool for merging graph and code logic.
Advanced
Finally, in the Advanced section, you will learn about how Code Nodes work in the VFX Editor, how a vertex shader is created and how Code Nodes enable to use of Raymarching.
VFX
Code Nodes can also be used in VFX Editor. For VFX graphs, the free-floating Code Node is available from Material Editor, as well as special versions that can be added to each particle execution stage.
These container Code Nodes do not allow output ports to be created, but do allow setting particle attributes. All VFX Code Nodes also have additional getters for particle attributes and system settings, as well as special functions for generating unique per-particle random numbers.
In this example, the entire Simple Emitter asset was recreated using only Code Nodes. The output is the same, but the graph loads much faster in Studio due to fewer node connections that need to be evaluated.
Click on the various container nodes in this asset to see how to get and set particle attributes, create per-particle random numbers, and modify vertex and pixel shaders, all within Code Nodes.
Vertex Shaders
Depending on where the Code Node is used, it may be evaluated in either the vertex or pixel shader. If it is a dependency of the World Position, Normal, or Tangent inputs on the Shader node, it will be evaluated in the vertex shader.
This allows for some powerful effects, opening the door to interesting animation and instancing opportunities.
There are two vertex shader examples provided for your use:
- Ripple: A vertex displacement shader where a Code Node draws a ripple function. The wave not only modifies vertex position and normals, but is also output separately and interpolated to be available in the pixel shader for custom shading.
- Instancing Sunflower: This example uses instancing to turn a single mesh into an animated sunflower. The golden ratio and other math functions are used in the Code Node to control the final shape.
Raymarching
Before the Code Node was available, effects like raymarching were not possible in Material Editor. With Code Nodes, performing complex logic operations is easy, unlocking a new class of rendering techniques.
The raymarching example showcases the full capabilities of the Code Node. Custom Global variables allow for the inner raymarch loop to be accessed up-stream in the graph, breaking out a traditionally monolithic pattern to a more modular one. Various SDF and boolean operations can be easily rearranged and visually organized. This unique design showcases the benefits of deep integration of the Code Node with the rest of the graph system.
What's Next?
To continue to learn more about Code Nodes, please take a look at the following guides: