WebGPU

Master modern GPU programming from first principles through interactive visualizations

Part 1

The GPU Mental Model

Understanding how GPUs think differently from CPUs

Why GPUs Exist

The parallel computation problem

The GPU Execution Model

Threads, workgroups, and the SIMT paradigm

Memory Hierarchy

Registers, shared memory, and global memory

WebGPU vs WebGL

What changed and why

Part 2

Getting Started

Setting up WebGPU and drawing your first triangle

Your First Triangle

Drawing the hello-world of graphics

The WebGPU API

Adapter, device, queue, and context

WGSL Fundamentals

The WebGPU Shading Language

Buffers and Data

Creating and uploading GPU data

Bind Groups and Layouts

How shaders access resources

Part 3

The Render Pipeline

Understanding the stages of rendering

Vertex Processing

Vertex buffers and vertex shaders

The Rasterizer

From triangles to fragments

Fragment Shaders

Per-pixel computation

Depth and Stencil

The depth buffer and stencil operations

Render Passes

Attachments and multi-pass rendering

Render Bundles

Pre-recording draw commands

Part 4

Compute Shaders

General-purpose GPU computation

Your First Compute Shader

Parallel computation on the GPU

Workgroup Organization

Choosing workgroup sizes

Shared Memory

Workgroup shared variables

Parallel Patterns

Reduction, scan, and histogram

Atomics and Synchronization

Atomic operations and barriers

Compute to Render

Using compute output in rendering

Part 5

Textures and Sampling

Working with images on the GPU

Texture Basics

Creating and configuring textures

Samplers

Filtering and address modes

Textures in Shaders

Sampling textures in WGSL

Storage Textures

Writing to textures from compute

Render to Texture

Framebuffer attachments

Part 6

3D Graphics

Building 3D scenes with WebGPU

3D Transformations

Model, view, and projection matrices

Camera Systems

Perspective and camera controls

Basic Lighting

Normals, diffuse, and specular

Loading Meshes

Parsing OBJ and index buffers

Materials and PBR

Physically-based rendering basics

Part 7

Advanced Rendering

Sophisticated rendering techniques

Instancing

Drawing many objects efficiently

Shadow Mapping

Depth from the light's view

Deferred Rendering

G-buffer and deferred lighting

Transparency and Blending

Alpha and order-independent transparency

Part 8

Simulation and Effects

GPU-accelerated simulations

Particle Systems

Compute-driven particles

Fluid Simulation

Eulerian fluid dynamics

Image Processing

GPU image filters

Procedural Generation

Noise and terrain on the GPU

Part 9

Performance and Debugging

Optimizing and troubleshooting WebGPU applications

Profiling and Timestamps

Measuring GPU performance

Optimization Strategies

Memory coalescing and batching

Debugging WebGPU

Error handling and debugging tools

Part 10

Real-World Patterns

Production-ready WebGPU techniques

Resource Management

Pooling and cleanup strategies

Multi-Canvas and Offscreen

OffscreenCanvas and multiple views

Interop and Video

Video textures and external resources