WebGL / Tutorials
These tutorials teach how to make GPU-accelerated computer graphics in web browsers using WebGL 2. The target audience is people with no previous WebGL experience but some web development experience.
It’s a learn-by-doing approach that explains concepts as we encounter them. All tutorials have zero dependencies so you can learn how everything works “under the hood” instead of learning a library or framework that hides away the details.
The goal is creative coding, so we’re not going to worry much about software engineering best practices and instead focus on drawing with minimal code.
- A WebGL 2.0-compatible browser. Older iOS and MacOS Safari versions require WebGL 2.0 to be enabled under Experimental Features.
- A basic understanding of geometry. Knowing a little matrix algebra helps.
Table of Contents
- Concepts: Start here if you don’t know what a shader is
Drawing in 2D
In the first several tutorials, we’ll ignore the 3D capabilities of WebGL and calculate the color of each pixel directly in fragment shaders.
- #1 Triangle: Drawing with WebGL
- #2 Square: Covering the canvas
- #3 Gradient: Choosing pixel colors
- #4 Animation: Changes over time
Some hints of what’s to come can be found in the WebGL examples.
- 2D Shapes and Patterns
- Drag and pinch to scroll and zoom
- Custom UIs, like sliders
- Drawing Fractals: Mandelbrot, Julia, Sierpiński, Newton
- Exporting images and videos
- Debugging Strategies