A shader sandbox with iTime and iResolution
The colours drift because iTime grows. The printed pixels are three fixed times drawn off-screen.
A shader is a tiny program the GPU runs thousands of times at once: a vertex shader places each corner of a triangle, a fragment shader colours each pixel. You write them in GLSL and try them in a Shadertoy-style sandbox.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make the sandbox show a vertical white-to-black gradient (white at the top).
Write the GLSL expression for a vec3 whose parts are the reverse of colour.
Explain it without notes
What is the difference between a vertex shader and a fragment shader, and how many times does each run for one triangle?
Why does float x = 1; fail in GLSL?
Console
Nothing logged yet.Expected console output
iTime 0 | bottom-left 255,60,50 | top-right 203,5,156
iTime 1 | bottom-left 190,0,171 | top-right 82,33,247
iTime 2 | bottom-left 67,57,252 | top-right 3,148,229