WebGL / Tutorials
These tutorials teach how to make GPU-accelerated computer graphics in web browsers using WebGL 2. The goal is to help people with no previous experience to start quickly making things like generative art and fractals. 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 instead of a library/framework hiding the details from you. We will make fully self-contained HTML pages that load fast and give us full control.
- A WebGL 2.0-compatible browser. WebGL 2.0 can be enabled for Safari (iOS/MacOS) under Experimental Features.
- Basic understanding of geometry. You should know what a vertex is.
- An open mind and patience. WebGL/GPU programming is challenging. A lot of concepts from “regular” programming don’t translate. The APIs are awkward and un-intuitive. It can be confusing and frustrating and very hard to debug. It can also be very rewarding.
Table of Contents
- Concepts: Start here if you don’t know what a shader is
- #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