Learn WebGPU

Tutorial

WebGPU tutorials

Learning progress
0 / 14 completed
1

Basics: WebGPU concepts and setup

Understand the core WebGPU concepts and prepare your environment.

Initializing WebGPU

Learn how to obtain a WebGPU adapter and device.

Canvas setup

Prepare a canvas to render with WebGPU.

2

Basics: Your first triangle

Learn the basic steps to draw a triangle with WebGPU.

Drawing a basic triangle

Render using a vertex shader and a fragment shader.

A colorful triangle

Understand per-vertex color and interpolation.

3

Basics: Buffers and uniforms

Learn how to manage GPU memory and pass data into shaders.

Using vertex buffers

Store vertex data in GPU memory.

Using uniforms

Manage data shared across an entire draw call.

4

Advanced: Textures and sampling

Learn how to handle image data and apply texture mapping.

Basic texture mapping

Apply an image to a polygon.

Compositing multiple textures

Blend textures together for richer visuals.

5

Advanced: Lighting and shading

Learn how to represent light and shading in 3D graphics.

The Phong lighting model

Implement a fundamental lighting model.

Advanced lighting techniques

Multiple lights and different light types.

6

Advanced: Compute shaders and graphics

Combine GPGPU and graphics pipelines.

Particle system

Update particles with a compute shader.

Image-processing filters

Fast image processing with compute shaders.

7

Expert: Performance optimization

Learn techniques to make WebGPU applications fast.

Instancing

Render many objects efficiently.

Optimization techniques

Manage huge numbers of instances efficiently.

Learn WebGPU — interactive tutorials for learning WebGPU

GitHub