Shadertoy to Lens Studio
This guide provides a reference for transcribing Shadertoy operations to Material Editor in Lens Studio. Since Material Editor now supports authoring shaders in both a node graph and writing GLSL in the Code Node, we provide both the node analog of a function and the correct Code Node syntax. Some Shadertoy inputs require supporting scripts to get and send data to materials. In these cases, we also provide example script code you can use in your projects.
For more information on Material Editor, check out our many guides on this powerful tool, including our guide specifically for the Code Node.
Shadertoy Operations
iTime
Node: Elapsed Time
Code Node:
float system.getTimeElapsed()
iTimeDelta
Node: Delta Time
Code Node:
float system.getTimeDelta()
iChannelResolution[i]
Node: Texture 2D Parameter → Texture Size.xy or Texture 2D Object Parameter → Texture Size.xy
Code Node: vec2 texture_2d::textureSize();
You can expose the Texture Size by enabling Expose Size Output under the Parameter Settings.
iChannel{i},
texture()
Node: Texture 2D Sample texture input or Texture 2D Object Parameter input + Texture 2D Sample
Code Node: vec4 sampledTex = MyTexture.sample( MyUV );
iResolution.xy
Node: Texture 2D Parameter → Texture Size.xy or Texture 2D Object Parameter → Texture Size.xy
Texture parameters can return the attached texture’s dimensions and pixel size (1/textureSize). To get the screen resolution, attach a Screen Texture to this parameter.
Another option is to send the resolution from Script to a float parameter.
For Parameters to appear in the inspector panel, and for the texture size to be returned correctly, they must be sampled, and the sampled value must contribute to the final output of the material or they will be compiled out.
Code Node:
input_texture_2d MyTexture;
output_vec2 Result;
void main()
{
Result = MyTexture.textureSize();
}
fragCoord.xy / iResolution.xy
Node: Surface UV Coord.xy
Code Node:
system.getSurfaceUVCoord0()
fragCoord
Node: Texture Size.xy * Surface UV Coord
Code Node:
input_texture_2d MyTexture;
output_vec2 Result;
void main()
{
Result = MyTexture.textureSize() * system.getSurfaceUVCoord0()
}
fragColor
Node: Shader → Color (Pixel).rgba
iMouse.xy
Node: Float Parameter
Use a Float Parameter with two channels (xy) to get the eventData.getTouchPosition().xy value from script.
Example:
// @input Asset.Material material
function onTouchHandler(eventData) {
script.material.mainPass.tapPos = eventData.getTouchPosition();
}
var touchStartEvent = script.createEvent('TouchStartEvent');
touchStartEvent.bind(onTouchHandler);
var touchMoveEvent = script.createEvent('TouchMoveEvent');
touchMoveEvent.bind(onTouchHandler);
iDate
Node: Float Parameter
Use the Float Parameter to get the .xyzw time (year/month/day/time in seconds).
Example:
//@input Asset.Material material
var event = script.createEvent("UpdateEvent");
event.bind(function (eventData)
{
var date = new Date();
var year = date.getYear();
var month = date.getMonth();
var day = date.getDay();
var time = (date.getHours() * 60.0 * 60.0) +
(date.getMinutes() * 60.0) +
date.getSeconds();
var iDate = new vec4(year,month,day,time);
script.material.mainPass.iDate = iDate;
});
iSampleRate
Node: Float Parameter
Use the Float Parameter and get the script.api.sampleRate value from script.
More info see: https://developers.snap.com/api/lens-studio/Classes/Providers/#audiotrackprovider
Example:
// @input Asset.AudioTrackAsset audioTrack
// @input Asset.Material material
var control = script.audioTrack.control;
script.material.mainPass.sampleRate = control.sampleRate;
Shadertoy Example
Shown below are some examples of how shaders from Shadertoy can be recreated in Lens Studio
Default Shader
Let’s consider the default shader on Shadertoy: https://www.shadertoy.com/new
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Time varying pixel color
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
// Output to screen
fragColor = vec4(col,1.0);
}
Material Editor using only Nodes
Below is how to recreate this shader using only nodes in Material Editor. The Swizzle at the end constructs the final (x, y, z, 1.0) vec4.
Material Editor with Code Node
You can also use a Code Node to transcribe the shader code in a more direct way. The code used in the Code Node is very similar to what’s used on Shadertoy, the main difference being how the Time uniform and the UV coordinate are called:
Code breakdown:
output_vec4 Result;
void main()
{
float time = system.getTimeElapsed();
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = system.getSurfaceUVCoord0();
// Time varying pixel color
vec3 col = 0.5 + 0.5 * cos(time + uv.xyx + vec3(0.0, 2.0, 4.0));
// Output to screen
Result = vec4(col,1.0);
}