The Vibeary — round-up
Best shader resources and learning material
Shaders are the highest-leverage visual skill on the web: a few dozen lines running on the GPU produce effects no amount of CSS can imitate. They are also the steepest learning curve in front-end, because the mental model is different — you write code for one pixel, not one element. The material here is the fast path: structured learning resources that build intuition, plus collections of readable shaders you can pull apart and modify rather than paste blindly.
What earned a place
- Explains the why, not just the copy-paste
- Code is readable and modifiable
- Runs in the browser so you can iterate immediately
- Free to learn from
7 picks from the library
- 01
3D Game Shaders For Beginners
Step-by-step repo covering normal mapping, SSAO, bloom, outlining, fog and depth of field with runnable code.
Why it made the list: Every real-time effect you want to steal, explained with before/after screenshots
Shader learningopen-sourceDavid Lettier (@lettier)lettier.github.io
- 02
Fragment Foundry
Interactive scrollable fragment-shader tutorial where the shader recompiles live as you edit inline code.
Why it made the list: A near-forgotten 2015 gem whose inline live-compile UX still beats modern courses
Shader learningopen-sourceHugh Kennedy (@hughskennedy)hughsk.io
- 03
Pixel Shaders
Unfinished but excellent interactive book introducing graphics programming through progressively edited fragment shaders.
Why it made the list: Written by the Shadershop author; the interaction design is the lesson
Shader learningfreeToby Schachman (@tobyschachman)pixelshaders.com
- 04
PixelSpirit Deck
Tarot-style card deck where each card carries a GLSL snippet, teaching shader techniques as a physical practice.
Why it made the list: Physical-object approach to shader study; genuinely unlike any other resource
Shader learningopen-sourcePatricio Gonzalez Vivo (@patriciogv)pixelspiritdeck.com
- 05
Radiant
Collection of 130+ production-ready web shaders, each a self-contained HTML file with no build step, dependencies or bundler.
Why it made the list: Every effect is one file you can drop in or hand to an AI to remix.
Shader collectionsMITPaul Bakaus (@pbakaus)radiant-shaders.com
- 06
Shader School
Command-line workshopper with self-contained exercises teaching GLSL and WebGL fundamentals through failing tests.
Why it made the list: Test-driven shader learning; nothing else forces the concepts in this hard
Shader learningMITstackgl / Mikola Lysenko (@mikolalysenko)github.com
- 07
The Book of Shaders
Chapter-by-chapter guide to fragment shaders with a live GLSL editor embedded in every example.
Why it made the list: Still the only shader resource that teaches noise and SDFs without prerequisites
Shader learningfreePatricio Gonzalez Vivo & Jen Lowe (@patriciogv)thebookofshaders.com
Questions
- Do I need to learn WebGL before shaders?
- No. Start with fragment shaders in a playground, then learn the WebGL or WebGPU plumbing when you need to ship one.
- Are shaders bad for performance?
- They can be excellent for performance — the GPU does the work. The risk is fill rate on large surfaces and battery drain on mobile.