Shader tutorials love to open with vector calculus. Skip them. A fragment shader is a tiny function that answers one question: "what color is this pixel?" It runs for every pixel at once, it can't see its neighbors, and everything it knows comes from coordinates, time, and whatever you pass in. That's the whole model.
The only five functions you need to start
- mix(a, b, t) — blend between two things. This is 80% of shader work.
- smoothstep(lo, hi, x) — soft edges instead of hard cutoffs.
- sin(x) — anything that needs to loop, pulse, or wave.
- length(p) — distance from a point; instant circles and glows.
- fract(x) — repeat space into tiles; instant patterns.
// a soft ripple: distance + time through a sine, smoothed
float ripple(vec2 uv, vec2 center, float t) {
float d = length(uv - center);
float wave = sin(d * 40.0 - t * 4.0);
float fade = smoothstep(0.5, 0.0, d);
return wave * fade;
}The water splash that opens this site is ninety lines of GLSL and exactly zero equations I couldn't explain to a teenager.
Learn by vandalism
The fastest way to build intuition: take a working shader from Shadertoy and break it on purpose. Change one number, see what happens. Multiply where it adds. Feed time into a coordinate. You're not studying math — you're developing taste for how coordinates become pictures. The math arrives later, quietly, once you already care about the answer.
Six months of that and you'll stop copying and start composing. That's when shaders switch from intimidating to addictive — fair warning.