One line of TSL, and the shader it becomes
Prints WGSL on WebGPU and GLSL on WebGL 2, so no output is set. The stripes are drawn either way.
TSL, the Three.js Shading Language, builds shader logic from JavaScript functions: Fn, uniform, time, uv, mix, sin. One program becomes WGSL on WebGPU and GLSL on WebGL 2. Its documentation is thin, so you learn to read the source.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 3 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a Fn called stripes that takes a count and returns 0 or 1 across the uv.x, and use it for a plane's colorNode.
Print the vertex shader of a mesh with a positionNode and find the line that sets positionLocal.
Explain it without notes
Why can one TSL effect run on both WebGPU and WebGL 2?
A teammate writes material.colorNode = a + b with two nodes. What do they get and how do they fix it?
Console
Nothing logged yet.