Fn, uniform, time and reduced motion
The ball pulses in brightness and breathes in size. In a browser set to reduce motion, speed is 0 and it stands still. No output because of the fallback warning.
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.