github.com/gfxfundamentals/webgl-fundamentals ↗
WebGL lessons that start with the basics
Open this visualization on its own page →
About gfxfundamentals/webgl-fundamentals
WebGL Fundamentals is a comprehensive tutorial series designed to teach WebGL from scratch using a modern, practical approach. Rather than basing lessons on dated OpenGL concepts, the series emphasizes that WebGL is fundamentally a simple API, with apparent complexity coming from how programmers choose to use it. The tutorials progress methodically through foundational concepts, teaching both 2D and 3D mathematics alongside shader programming and WebGL-specific techniques, enabling learners to write their own programs and understand the principles underlying more sophisticated implementations.
The project includes interactive HTML-based lessons covering fundamentals, image processing, matrix math, 3D graphics, lighting, textures, rendering to textures, text rendering, and various specialized topics. Each lesson is accompanied by working code examples that can be viewed in separate windows, with diagrams and visualizations to clarify mathematical concepts. The site is actively translated into multiple languages, with a structured system allowing community contributors to add translations incrementally without disrupting existing content.
The repository is built using Node.js and supports continuous development through a watch mode. It employs a markdown-based article system with language-specific configuration files, making it accessible to both developers new to graphics programming and contributors from different language communities. The project maintains an extensive to-do list reflecting aspirations to expand coverage into areas like normal mapping, advanced geometry, animation, debugging techniques, post-processing effects, and physically-based rendering.