Two JavaScript habits that bite
forceWebGL keeps the output the same everywhere. The last line is a statement of what the picture shows: the left half is blue, the right half orange.
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.Expected console output
JS a + b: [object Object][object Object]
TSL a.add(b): a node: a recipe, not a number
JS if (node): branch taken, whatever the GPU will compute
drawn: blue on the left half, orange on the right