Login

u/Bobthief

Image 1 — how to study glsl shader on the website
Image 2 — how to study glsl shader on the website
Image 3 — how to study glsl shader on the website
Image 4 — how to study glsl shader on the website
Image 5 — how to study glsl shader on the website
Image 6 — how to study glsl shader on the website
▲ 2 r/shaders+2 crossposts

how to study glsl shader on the website

Hey everyone,

I've been building Pixel Shader Academy

a browser-based, interactive GLSL learning site aimed at people who are completely new to shaders. It's free and live here: https://shader.dolstep.com

The full source is on itch.io https://bobddadoo.itch.io/pixel-shader-academy-full-source

What it actually is

A sequence of bite-sized stages where each lesson hands you a real fragment shader running in a WebGL canvas next to a code editor. You edit GLSL → it recompiles live → the result is the puzzle target. Stages walk through the usual fundamentals: UV coordinates, step/smoothstep, mix, SDFs for circles/rectangles, polar coordinates, time-based animation, simple noise, and a few small post-effects toward the end.

Implementation notes

  • Frontend: Vite + vanilla JS, no framework. Each stage is a small data file (starter code, target image, hint text, success predicate).
  • Rendering: a single full-screen triangle with a per-stage fragment shader. Shader compile errors are surfaced inline in the editor with the GLSL line number mapped back.
  • Validation: I render the user's shader and a reference shader to offscreen framebuffers at the same resolution, then do a per-pixel diff with a tolerance threshold. Below the threshold = stage passes. It's dumb but it works surprisingly well for "did you reproduce this image" puzzles.
  • Asset pipeline: all reference images are baked from the reference shaders themselves at build time, so I never have to hand-author solution PNGs.
  • Mobile: the biggest pain. Float precision differences (highp vs mediump) on some Android GPUs broke a few SDF stages — I ended up forcing highp and adding small epsilons in the diff.
  • I built it almost entirely by pairing with Claude (Anthropic). I designed the curriculum and made the pedagogical calls; Claude wrote most of the boilerplate and helped iterate on shader puzzles.

What I'd love feedback on

  1. The per-pixel-diff validator feels naive. Anyone done something smarter for "did the student reproduce this image" without being brittle to anti-aliasing differences across GPUs?
  2. Curriculum ordering — is there a fundamental I'm missing before noise/post-fx, or one I'm teaching too early?
  3. Any classic GLSL "aha" exercises you'd add?
  4. Anything else I should add?

Happy to answer anything about the architecture, the validator, or the Claude-assisted workflow. Roasts welcome.

u/Bobthief — 1 day ago