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.:
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 stable version of WebGPU-distribution, namely v0.2.0.
🟡 Ready to read but uses an older version of WebGPU.
🟠 Work in progress: readable enough, but not complete.
🔴 TODO: we only scratched the surface.
For a preview of the future version of this guide, you may have a look at the hidden Next section, but it is not meant to be stable.
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¶
Introduction
Getting Started
Project setup 🟢
Hello WebGPU 🟢
Adapter and Device
The Adapter 🟢
The Device 🟢
The Command Queue 🟢
Opening a window 🟢
First Color 🟢
C++ wrapper 🟢
Project setup 🟢
Hello WebGPU 🟢
Adapter and Device
The Adapter 🟢
The Device 🟢
The Adapter 🟢
The Device 🟢
The Command Queue 🟢
Opening a window 🟢
First Color 🟢
C++ wrapper 🟢
Basic 3D Rendering
Hello Triangle 🟢
Input Geometry
Playing with buffers 🟢
A first Vertex Attribute 🟢
Multiple Attributes 🟢
Index Buffer 🟢
Loading from file 🟢
Shader Uniforms
A first uniform 🟢
More uniforms 🟢
Dynamic uniforms 🟡
3D Meshes
A simple example 🟡
Depth buffer 🟡
Transformation matrices 🟡
Projection matrices 🟡
Basic shading 🟡
Loading from file 🟡
Texturing
A first texture 🟡
Texture mapping 🟡
Sampler 🟡
Loading from file 🟡
Some interaction
Refactoring 🟡
Resizing the window 🟡
Camera control 🟡
Simple GUI 🟡
Lighting control 🟡🟢
Lighting and Material
Specularity 🟡
Normal mapping 🟡
Image-Based Lighting (🟠WIP)
Cube Maps (🟠WIP)
Physically-Based Materials (🟠WIP)
Hello Triangle 🟢
Input Geometry
Playing with buffers 🟢
A first Vertex Attribute 🟢
Multiple Attributes 🟢
Index Buffer 🟢
Loading from file 🟢
Playing with buffers 🟢
A first Vertex Attribute 🟢
Multiple Attributes 🟢
Index Buffer 🟢
Loading from file 🟢
Shader Uniforms
A first uniform 🟢
More uniforms 🟢
Dynamic uniforms 🟡
A first uniform 🟢
More uniforms 🟢
Dynamic uniforms 🟡
3D Meshes
A simple example 🟡
Depth buffer 🟡
Transformation matrices 🟡
Projection matrices 🟡
Basic shading 🟡
Loading from file 🟡
A simple example 🟡
Depth buffer 🟡
Transformation matrices 🟡
Projection matrices 🟡
Basic shading 🟡
Loading from file 🟡
Texturing
A first texture 🟡
Texture mapping 🟡
Sampler 🟡
Loading from file 🟡
A first texture 🟡
Texture mapping 🟡
Sampler 🟡
Loading from file 🟡
Some interaction
Refactoring 🟡
Resizing the window 🟡
Camera control 🟡
Simple GUI 🟡
Lighting control 🟡🟢
Refactoring 🟡
Resizing the window 🟡
Camera control 🟡
Simple GUI 🟡
Lighting control 🟡🟢
Lighting and Material
Specularity 🟡
Normal mapping 🟡
Image-Based Lighting (🟠WIP)
Cube Maps (🟠WIP)
Physically-Based Materials (🟠WIP)
Specularity 🟡
Normal mapping 🟡
Image-Based Lighting (🟠WIP)
Cube Maps (🟠WIP)
Physically-Based Materials (🟠WIP)
Physically-Based Materials (🟠WIP)
Basic Compute
Compute Pipeline 🟡
Image Processing
Mipmap Generation 🟡
Convolution Filters 🟡
Cubemap Conversion (🟠WIP)
Cubemap Prefiltering (🟠WIP)
Procedural Geometry
Deformation (🟠WIP)
Neural Networks (🔴TODO)
Compute Pipeline 🟡
Image Processing
Mipmap Generation 🟡
Convolution Filters 🟡
Cubemap Conversion (🟠WIP)
Cubemap Prefiltering (🟠WIP)
Mipmap Generation 🟡
Convolution Filters 🟡
Cubemap Conversion (🟠WIP)
Cubemap Prefiltering (🟠WIP)
Procedural Geometry
Deformation (🟠WIP)
Deformation (🟠WIP)
Neural Networks (🔴TODO)
Advanced Techniques
Instanced Drawing (🔴TODO)
RAII 🟡
Screen capture (🟠WIP)
Headless context 🟡
High Dynamic Range Textures (🟠WIP)
Benchmarking
Time 🟡
Memory (🔴TODO)
Processing Units (🔴TODO)
Environmental Impact (🔴TODO)
Deferred Shading (🔴TODO)
Render Bundles (🔴TODO)
Multi-Sampling (🔴TODO)
Scene tree (🔴TODO)
Shadow maps (🔴TODO)
Tesselation (🔴TODO)
Raytracing (🔴TODO)
Instanced Drawing (🔴TODO)
RAII 🟡
Screen capture (🟠WIP)
Headless context 🟡
High Dynamic Range Textures (🟠WIP)
High Dynamic Range Textures (🟠WIP)
Benchmarking
Time 🟡
Memory (🔴TODO)
Processing Units (🔴TODO)
Environmental Impact (🔴TODO)
Time 🟡
Memory (🔴TODO)
Processing Units (🔴TODO)
Environmental Impact (🔴TODO)
Deferred Shading (🔴TODO)
Render Bundles (🔴TODO)
Multi-Sampling (🔴TODO)
Scene tree (🔴TODO)
Shadow maps (🔴TODO)
Tesselation (🔴TODO)
Raytracing (🔴TODO)
Appendices
Teaching native graphics in 2023 🟢
Keep in mind lower-end devices 🟢
Feedback needed 🟢
Building for the Web 🟡
Using SDL for Window Management 🟡
Custom Extensions
The extension mechanism (🟠WIP)
With wgpu-native (🟠WIP)
With Dawn (🟠WIP)
Debugging (🟠WIP)
Memory Model (🔴TODO)
References (🟠WIP)
Temporary page
Teaching native graphics in 2023 🟢
Teaching native graphics in 2023 🟢
Keep in mind lower-end devices 🟢
Keep in mind lower-end devices 🟢
Feedback needed 🟢
Building for the Web 🟡
Using SDL for Window Management 🟡
Using SDL for Window Management 🟡
Custom Extensions
The extension mechanism (🟠WIP)
With wgpu-native (🟠WIP)
With Dawn (🟠WIP)
The extension mechanism (🟠WIP)
The extension mechanism (🟠WIP)
With wgpu-native (🟠WIP)
With Dawn (🟠WIP)
Debugging (🟠WIP)
Memory Model (🔴TODO)
References (🟠WIP)
Temporary page