WebGL2 & GLSL primer: A zero-to-hero, spaced-repetition guide

Hey all,

I’m currently architecting a geometry engine to address gaps in the creative-coding landscape. To do it right, I realized I needed to go beyond high-level abstractions and systematically internalize the low-level mechanics of the GPU. I spent the last two weeks developing the resource I couldn’t find, and I just open-sourced it.

It’s a zero-to-hero guide to engineering 2D and 3D graphics on the web: it provides a learning path through the irreducible minimum of the pipeline (WebGL2 state machine, GLSL shaders). It includes brief, intuitive explanations of the necessary mathematics.

To help you internalize the concepts and the syntax, it uses spaced repetition (Anki) and atomic, quizzable questions. This is an extremely efficient way to permanently remember both when and how to apply the ideas, without looking them up for the 50th time.

It bridges the gap between using libraries like p5.js/three.js and contributing to their most advanced features, by providing hands-on projects. The primer guides you from a blank canvas to producing 3D content from scratch.

Hope this helps anyone wanting to look under the hood… or build the engine!

Link: GitHub - GregStanton/webgl2-glsl-primer: Grok WebGL2 and GLSL through spaced repetition and hands-on projects. A zero-to-hero guide covering the programmable geometry pipeline, state management, and 3D shader logic.

Best,
Greg (@HigherMathNotes)

4 Likes