Skip to content

Write a Shader

An editable fragment shader that recompiles as you type, with the driver’s own errors underneath.

What you should come away with: That a shader is a function from a pixel coordinate to a colour, and that the errors are readable once something shows them to you.

Assumes: Colour & Gamma. It will still make sense without it, but that one comes first.

Your fragment shader13 lines · recompiles as you type

Already declared for you: vUv, uTime, uResolution, uKnob

What the compiler said

Compiled — running above

The canvas keeps the last shader that compiled, so a typo leaves your picture on screen instead of replacing it with black. That is a deliberate choice and not how a real toolchain behaves: in a normal project a fragment shader that fails to compile gives you a blank surface and a message in a console you were not looking at, which is most of why shaders feel harder than they are.

The error text above is the graphics driver’s own, not this site’s. Line numbers are adjusted for the preamble you cannot see, so they point where you would actually look — the driver counts a few lines further down.