WebGPU cross-platform app with CMake/Emscripten

This app is a minimalistic C++ example that shows how to use WebGPU to build desktop and web apps from a single codebase. Under the hood, it uses WebGPU's webgpu.h as a platform-agnostic hardware abstraction layer through a C++ wrapper called webgpu_cpp.h.

On the web, the app is built against Emscripten, which has bindings implementing webgpu.h on top of the JavaScript API. On specific platforms such as macOS or Windows, this project can be built against Dawn, Chromium's cross-platform WebGPU implementation.

⚠️ The webgpu.h and webgpu_cpp.h APIs are not yet stabilized. ⚠️

Setup

# Clone repository and initialize submodules.
git clone https://github.com/beaufortfrancois/webgpu-cross-platform-app.git
cd webgpu-cross-platform-app/
git submodule update --init

Requirements

Instructions are for macOS; they will need to be adapted to work on Linux and Windows.

# Make sure CMake and Emscripten are installed.
brew install cmake emscripten

Specific platform build

# Build the app with CMake.
cmake -B build && cmake --build build -j4

# Run the app.
./build/app

Web build

# Build the app with Emscripten.
emcmake cmake -B build-web && cmake --build build-web -j4

# Run a server.
npx http-server

# Open the web app.
open http://127.0.0.1:8080/build-web/app.html

Debugging WebAssembly

When building the app, compile it with DWARF debug information included thanks to emcmake cmake -DCMAKE_BUILD_TYPE=Debug -B build-web. And make sure to install the C/C++ DevTools Support (DWARF) Chrome extension to enable WebAssembly debugging in DevTools.