2D · WebGL2 · GLSL ES 3.0

Teach shaders through color, math, and 2D games

Ten modules, start to finish: UV coordinates → vectors → color → shapes → noise → motion → textures → style → your own recreation of a real game effect. Each one pairs the plain math — a graph you could draw on paper — with a shader you can actually poke at. Built with 2D games as the throughline, but the same fundamentals carry straight into generative art, VJ visuals, or just wanting to know what's actually happening on the GPU.

Start Module 00 →

The path

Ten core modules, plus two electives once you're through the fundamentals. Everything below is a real, working lesson — click any one to jump straight in.

  1. 00·OrientationCPU vs. GPU, the render pipeline in one diagram, and the "debug by visualizing" habit you'll use in every module after this.Test →
  2. 01UV space and coordinatesNormalized UVs, the aspect-ratio trap, and drawing a circle with nothing but the Pythagorean theorem.Test →
  3. 02Vectors & trig, rebuilt for shadersPoints vs. vectors, the dot product as "how aligned," and rotating a shape by rotating the space around it.Test →
  4. 03Color theory for the fragment shaderRGB vs. HSV, the Inigo Quilez cosine-palette formula, and the gamma-correction gap almost nothing else fills in.Test →
  5. 04Shapes with signed distance fieldsCircle and box SDFs, real anti-aliasing against pixel width, and transforming the space instead of the shape.Test →
  6. 05Noise & randomnessHash functions, the actual difference between value/Perlin/simplex/Worley noise, and stacking octaves into fbm.Test →
  7. 06Motion & time-based effectsScreen-space distortion (heat haze, water ripples) and one-point reflection, combined into a live kaleidoscope.Test →
  8. 07Texture sampling & sprite effectsFiltering modes, real alpha-compositing math, and a hash-driven dissolve effect with a glowing edge.Test →
  9. 08Stylized & art shadersFake lighting and posterized toon shading, then chromatic aberration bolted on top.Test →
  10. 09Capstone: recreate a real game effectNo fixed answer — pick a real reference (dissolve-death, shoreline shimmer, toon outline) and build it from what you know.Test →