The modern GPU API for the web
Learn WebGPU from scratch
Clear lessons on adapters, shaders, and the render pipeline, with examples you can run in the browser.
Learning paths
Four sections, each with a place to start. The guides below follow the same order as the sidebar.
Guides Follow the tutorial Introduction, fundamental objects, WGSL, the render pipeline, buffers, textures, depth, and compute shaders. Start the tutorial API reference Look up the core objects An index of GPUBuffer, GPUTexture, GPUSampler, bind groups, render and compute pipelines, and the command encoder. Open the API reference Examples Run the short examples Start with a triangle, then vertex buffers, uniform buffers, and a sampled texture. Run the triangle Further reading Spec and ecosystem The W3C spec, WGSL, MDN, and entry points for engines such as Babylon.js and Three.js. Browse resources
Guide order
Each chapter continues from the one before it, from the first adapter through compute shaders.
- Introduction What WebGPU can do, and whether this browser can run it.
- Fundamental objects Adapter, device, command encoder, and queue.
- WGSL basics Types, entry points, and data passed between stages.
- Render pipeline Shader modules, pipelines, and render passes.
- Buffers Upload vertices and indices with GPUBuffer.
- Bind groups Hand buffers, textures, and samplers to a shader.
- Uniform buffers Pass values that change every frame.
- Textures and samplers Upload pixels and sample them in the fragment shader.
- Depth buffer Resolve occlusion with a depth test.
- Compute shaders Write a storage texture and read a buffer back.
You can read every tutorial in any browser. The live examples need a browser with WebGPU.