Learn WebGPU

For native graphics in C++.

This documentation walks you through the use of the WebGPU graphics API to create native 3D applications in C++ from scratch, for Windows, Linux and macOS.

Quick Start! (Click Me)

Do you want to understand every bit of GPU code you write?

Yes, write WebGPU code from scratch!

That’s great! You can simply proceed to the introduction and read all chapters sequentially.

No, I’d rather skip the initial boilerplate.

This perfectly makes sense, you can always come back to the basic steps later.

You probably want to check out the Resulting code link at the beginning and end of each page, e.g.:

_images/resulting-code-light.png _images/resulting-code-dark.png

Are you ok with using a shallow wrapper for easier reading?

Yes, I prefer C++ styled code.

Use the “With webgpu.hpp” tab.

No, show me the raw C WebGPU API!

Use the “Vanilla webgpu.h” tab. The Resulting code for vanilla WebGPU is less up to date, but this tab also switches all the code blocks inside the guide, and these are up to date.

To build this base code, refer to the Building section of the project setup chapter. You may add -DWEBGPU_BACKEND=WGPU (default) or -DWEBGPU_BACKEND=DAWN to the cmake -B build line to pick respectively wgpu-native or Dawn as a backend.

How far do you want the base code to go?

A simple triangle

Check out the Hello Triangle chapter.

A 3D mesh viewer with basic interaction

I recommend starting from the end of the Lighting control chapter.

I want things to run on the Web as well.

The main body of the guide misses a few extra lines, refer to the Building for the Web appendix to adapt the examples so that they run on the Web!

🚧 Work in progress

This guide is still under construction, and the WebGPU standard is still evolving. To help the reader tracking how up to date it is, we use the following signs in chapter’s titles:

🟢 Up to date! Uses the latest version of WebGPU-distribution.
🟡 Ready to read but uses an older version of WebGPU.
🟠 Work in progress: readable enough, but not complete.
🔴 TODO: we only scratched the surface.

NB: When using the accompagnying code of a chapter, make sure to use the very version of webgpu/ that it provides to avoid discrepancies.

Contents