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

(Excerpt)

This primer takes the reader from zero (no knowledge of WebGL2 or GLSL) to hero (confidence in everything from low-level state management to procedural graphics production). If you want to engineer advanced 2D or 3D graphics, or understand how graphics are implemented under the hood, then this guide is for you.

🧠 Method

Fundamentals of WebGL2 and GLSL are introduced in a natural order, chunking concepts and syntax into atomic Q&A cards. But this is not a typical FAQ or a cheat sheet; this a sequence of guided lessons meant to be internalized, in order, with concepts that build cumulatively from the ground up. Once a card has been learned, it can be directly incorporated into spaced-repetition learning software like Anki, which leverages a scientifically-backed algorithm to ensure you remember what you learn, efficiently and permanently. Because of the small chunks, you can also make significant progress with just a few minutes of effort per day. To provide practice applying the ideas as soon as they’re introduced, hands-on projects are integrated throughout, with solution code.

🗺️ Scope

The material focuses on the programmable geometry pipeline—creating form and color through code, logic, and mathematics. It covers the irreducible minimum required to build a 3D engine from scratch. While it establishes the foundation for all graphics tasks, it does not cover external asset management (like texture image loading), focusing instead on the state machine and the vertex/fragment logic essential for procedural graphics and tools like the RMF Engine designed by this primer's author. It's self contained, with intuitive explanations of the mathematical prerequisites. Recommendations on leveraging the covered skills are provided at the end, including an annotated list of links to high-quality projects and advanced resources.