THREE.JS / FOUNDATIONS 275

Let ShaderToy become a node.

ShaderToy programs describe mainImage() in GLSL. This lab decodes that contract, emits executable TSL, and blends two live shader nodes while exposing the original uniforms and a direct WebGL2 reference.

Initializing-

Creating ShaderToy nodes and the full-screen surface.

backend: -
decoder: -
encoder: -
output: -

Choose the transpiled surfaceGLSL mainImage -> TSL Node -> screen

renderer target shader pair output blend 0.50 time speed 1.00

animate iTime

ShaderToy contractwaiting

mainImage: -
iTime: -
iResolution: -
source lines: -
emitted lines: -
conversions: -

ShaderToyDecoder maps mainImage coordinates and uniforms before TSLEncoder emits executable JavaScript.

TSL graphwaiting

node A: -
node B: -
mix node: -
material: -
time speed: -
frames: -

The material selects shader A, shader B, or a TSL mix driven by the live blend uniform.

Backend boundarywaiting

WebGPU: -
WebGL2: -
fallback: -
CPU avg: -
draw calls: -
resources: -

The ShaderToy node path is WebGPU-only here; WebGL2 runs the original GLSL in a ShaderMaterial.

DecodeShaderToyDecoder

mainImage and its coordinate contract become a callable function.

EmitTSLEncoder

GLSL operators and uniforms become JavaScript TSL source.

ComposeNode.mix

Two independent ShaderToy nodes can blend inside a material graph.

RenderMeshBasicNodeMaterial

The full-screen quad stays ordinary Three.js scene content.

Transpiler timingwaiting

build ms: -
CPU avg: -
CPU p95: -
source lines: -
emitted lines: -
updates: -

Switch shader pairs and output policy, then measure the active full-screen path.

GLSLShaderToyDecoderTSLEncoderNodescreen

This is a deterministic adaptation of the official ShaderToy example: local shader programs replace the credited external artwork, while the ShaderToyDecoder, TSLEncoder, mainImage, iTime, iResolution, and node-material contracts remain executable.

Sources: official ShaderToy example · TSL · ShaderToyDecoder source · TSLEncoder source