# Learn WebGPU

*For native graphics in C++.*

This documentation walks you through the use of the [WebGPU](https://www.w3.org/TR/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](https://eliemichel.github.io/LearnWebGPU/introduction.html) 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](https://eliemichel.github.io/LearnWebGPU/getting-started/index.html) 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](https://eliemichel.github.io/LearnWebGPU/_images/resulting-code-light.png) ![_images/resulting-code-dark.png](https://eliemichel.github.io/LearnWebGPU/_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](https://eliemichel.github.io/LearnWebGPU/getting-started/project-setup.html#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`](https://github.com/gfx-rs/wgpu-native) or [Dawn](https://dawn.googlesource.com/dawn/) as a backend.

*How far do you want the base code to go?*

A 3D mesh viewer with basic interaction

I recommend starting from the end of the [Lighting control](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/some-interaction/lighting-control.html) 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](https://eliemichel.github.io/LearnWebGPU/appendices/building-for-the-web.html) 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](https://github.com/eliemichel/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](https://eliemichel.github.io/LearnWebGPU/next/index.html) 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[¶](#contents "Link to this heading")

- [Introduction](https://eliemichel.github.io/LearnWebGPU/introduction.html)
- [Getting Started](https://eliemichel.github.io/LearnWebGPU/getting-started/index.html)
  
  - [Project setup 🟢](https://eliemichel.github.io/LearnWebGPU/getting-started/project-setup.html)
  - [Hello WebGPU 🟢](https://eliemichel.github.io/LearnWebGPU/getting-started/hello-webgpu.html)
  - [Adapter and Device](https://eliemichel.github.io/LearnWebGPU/getting-started/adapter-and-device/index.html)
    
    - [The Adapter 🟢](https://eliemichel.github.io/LearnWebGPU/getting-started/adapter-and-device/the-adapter.html)
    - [The Device 🟢](https://eliemichel.github.io/LearnWebGPU/getting-started/adapter-and-device/the-device.html)
  - [The Command Queue 🟢](https://eliemichel.github.io/LearnWebGPU/getting-started/the-command-queue.html)
  - [Opening a window 🟢](https://eliemichel.github.io/LearnWebGPU/getting-started/opening-a-window.html)
  - [First Color 🟢](https://eliemichel.github.io/LearnWebGPU/getting-started/first-color.html)
  - [C++ wrapper 🟢](https://eliemichel.github.io/LearnWebGPU/getting-started/cpp-idioms.html)
- [Basic 3D Rendering](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/index.html)
  
  - [Hello Triangle 🟢](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/hello-triangle.html)
  - [Input Geometry](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/input-geometry/index.html)
    
    - [Playing with buffers 🟢](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/input-geometry/playing-with-buffers.html)
    - [A first Vertex Attribute 🟢](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/input-geometry/a-first-vertex-attribute.html)
    - [Multiple Attributes 🟢](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/input-geometry/multiple-attributes.html)
    - [Index Buffer 🟢](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/input-geometry/index-buffer.html)
    - [Loading from file 🟢](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/input-geometry/loading-from-file.html)
  - [Shader Uniforms](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/shader-uniforms/index.html)
    
    - [A first uniform 🟢](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/shader-uniforms/a-first-uniform.html)
    - [More uniforms 🟢](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/shader-uniforms/multiple-uniforms.html)
    - [Dynamic uniforms 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/shader-uniforms/dynamic-uniforms.html)
  - [3D Meshes](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/3d-meshes/index.html)
    
    - [A simple example 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/3d-meshes/a-simple-example.html)
    - [Depth buffer 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/3d-meshes/depth-buffer.html)
    - [Transformation matrices 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/3d-meshes/transformation-matrices.html)
    - [Projection matrices 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/3d-meshes/projection-matrices.html)
    - [Basic shading 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/3d-meshes/basic-shading.html)
    - [Loading from file 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/3d-meshes/loading-from-file.html)
  - [Texturing](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/texturing/index.html)
    
    - [A first texture 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/texturing/a-first-texture.html)
    - [Texture mapping 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/texturing/texture-mapping.html)
    - [Sampler 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/texturing/sampler.html)
    - [Loading from file 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/texturing/loading-from-file.html)
  - [Some interaction](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/some-interaction/index.html)
    
    - [Refactoring 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/some-interaction/refactoring.html)
    - [Resizing the window 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/some-interaction/resizing-window.html)
    - [Camera control 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/some-interaction/camera-control.html)
    - [Simple GUI 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/some-interaction/simple-gui.html)
    - [Lighting control 🟡🟢](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/some-interaction/lighting-control.html)
  - [Lighting and Material](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/lighting-and-material/index.html)
    
    - [Specularity 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/lighting-and-material/specular.html)
    - [Normal mapping 🟡](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/lighting-and-material/normal-mapping.html)
    - [Image-Based Lighting (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/lighting-and-material/ibl.html)
    - [Cube Maps (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/lighting-and-material/cubemap.html)
    - [Physically-Based Materials (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/basic-3d-rendering/lighting-and-material/pbr.html)
- [Basic Compute](https://eliemichel.github.io/LearnWebGPU/basic-compute/index.html)
  
  - [Compute Pipeline 🟡](https://eliemichel.github.io/LearnWebGPU/basic-compute/compute-pipeline.html)
  - [Image Processing](https://eliemichel.github.io/LearnWebGPU/basic-compute/image-processing/index.html)
    
    - [Mipmap Generation 🟡](https://eliemichel.github.io/LearnWebGPU/basic-compute/image-processing/mipmap-generation.html)
    - [Convolution Filters 🟡](https://eliemichel.github.io/LearnWebGPU/basic-compute/image-processing/convolution-filters.html)
    - [Cubemap Conversion (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/basic-compute/image-processing/cubemap-conversion.html)
    - [Cubemap Prefiltering (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/basic-compute/image-processing/cubemap-prefiltering.html)
  - [Procedural Geometry](https://eliemichel.github.io/LearnWebGPU/basic-compute/procedural-geometry/index.html)
    
    - [Deformation (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/basic-compute/procedural-geometry/deformation.html)
  - [Neural Networks (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/basic-compute/neural-networks.html)
- [Advanced Techniques](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/index.html)
  
  - [Instanced Drawing (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/instanced-drawing.html)
  - [RAII 🟡](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/raii.html)
  - [Screen capture (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/screen-capture.html)
  - [Headless context 🟡](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/headless.html)
  - [High Dynamic Range Textures (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/hdr-textures.html)
  - [Benchmarking](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/benchmarking/index.html)
    
    - [Time 🟡](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/benchmarking/time.html)
    - [Memory (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/benchmarking/memory.html)
    - [Processing Units (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/benchmarking/processing-units.html)
    - [Environmental Impact (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/benchmarking/environmental-impact.html)
  - [Deferred Shading (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/deferred-shading.html)
  - [Render Bundles (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/render-bundles.html)
  - [Multi-Sampling (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/multi-sampling.html)
  - [Scene tree (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/scene-tree.html)
  - [Shadow maps (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/shadow-maps.html)
  - [Tesselation (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/tesselation.html)
  - [Raytracing (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/advanced-techniques/raytracing.html)
- [Appendices](https://eliemichel.github.io/LearnWebGPU/appendices/index.html)
  
  - [Teaching native graphics in 2023 🟢](https://eliemichel.github.io/LearnWebGPU/appendices/teaching-native-graphics-in-2023.html)
  - [Keep in mind lower-end devices 🟢](https://eliemichel.github.io/LearnWebGPU/appendices/keep-in-mind-lower-end-devices.html)
  - [Feedback needed 🟢](https://eliemichel.github.io/LearnWebGPU/appendices/feedback-needed.html)
  - [Building for the Web 🟡](https://eliemichel.github.io/LearnWebGPU/appendices/building-for-the-web.html)
  - [Using SDL for Window Management 🟡](https://eliemichel.github.io/LearnWebGPU/appendices/using-sdl.html)
  - [Custom Extensions](https://eliemichel.github.io/LearnWebGPU/appendices/custom-extensions/index.html)
    
    - [The extension mechanism (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/appendices/custom-extensions/mechanism.html)
    - [With `wgpu-native` (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/appendices/custom-extensions/with-wgpu-native.html)
    - [With Dawn (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/appendices/custom-extensions/with-dawn.html)
  - [Debugging (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/appendices/debugging.html)
  - [Memory Model (🔴TODO)](https://eliemichel.github.io/LearnWebGPU/appendices/memory-model.html)
  - [References (🟠WIP)](https://eliemichel.github.io/LearnWebGPU/appendices/references.html)
  - [Temporary page](https://eliemichel.github.io/LearnWebGPU/appendices/tmp.html)