Skip to main content
Version: 5.x

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);
}
Was this page helpful?
Yes
No

AI-Powered Search