gpuWebGPU Tutorial
WebGPU is the modern way to use the graphics card from a web page. These 12 short lessons take you from your first triangle to 3D scenes, compute shaders and post-processing.
Learning by examples
Every lesson has examples you can edit and run in your browser with the Playground. Change the code, press Run, and see the result straight away.
Example
A complete WebGPU fragment shader:
@fragment
fn fragmentMain() -> @location(0) vec4f {
return vec4f(0.49, 0.95, 0.61, 1.0);
}Getting started
- Lesson 1
What is WebGPU?
What WebGPU is, how it compares to WebGL, and how to check browser support.
- Lesson 2
Your first triangle
Device, canvas, shaders, pipeline and render pass: the WebGPU "Hello World".
- Lesson 3
WGSL basics
Types, vectors, structs, built-in functions and loops in the WebGPU Shading Language.
- Lesson 4
Vertex buffers
Send your own geometry to the GPU, with index buffers to share corners.
- Lesson 5
Uniforms & bind groups
Pass colours, time and settings from JavaScript into your shaders.
Going 3D
- Lesson 6
Camera & matrices
Model, view and projection matrices in plain JavaScript, and a spinning cube.
- Lesson 7
Depth buffer
Make near objects hide far ones, whatever order you draw them in.
- Lesson 8
Textures & samplers
Upload images to the GPU and sample them in a fragment shader.
- Lesson 9
Instancing
Draw thousands of objects with a single draw call.
Advanced
Official WebGPU documentation
Every lesson ends with links to the matching pages of the official references. These are the ones to bookmark.
- w3.org
WebGPU specification
The W3C standard for the API, with every validation rule.
- w3.org
WGSL specification
The shading language standard: types, layout and built-ins.
- developer.mozilla.org
MDN: WebGPU API
Reference for every interface, with browser compatibility.
- webgpu.github.io
WebGPU Samples
The official collection of runnable WebGPU examples.