WebGL / Tutorials

Overview

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.

Prerequisites

• A WebGL 2.0-compatible browser. Older iOS and MacOS Safari versions require WebGL 2.0 to be enabled under Experimental Features.
• Familiarity with JavaScript, HTML, and CSS. If you can build a webpage, you’re good.
• A basic understanding of geometry. Knowing a little matrix algebra helps.

Table of Contents

Intro

• 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

Future topics

Some hints of what’s to come can be found in the WebGL examples.

• 2D Shapes and Patterns
• Anti-aliasing
• Interactivity
  • Drag and pinch to scroll and zoom
  • Custom UIs, like sliders
• Drawing Fractals: Mandelbrot, Julia, Sierpiński, Newton
• Exporting images and videos
• Randomness
• Debugging Strategies
• Performance/Optimization
• 3D

Other resources

• WebGL2 Fundamentals
• MDN’s WebGL tutorials
• The Book of Shaders (note this uses WebGL 1.0)
• Shadertoy
• Inigo Quilez’s site
• Learning Modern 3D Graphics Programming (not about WebGL, but the concepts still apply)