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 emdawnwebgpu (Emscripten Dawn WebGPU), which has bindings implementing webgpu.h on top of the JavaScript API. It uses Emscripten, a tool for compiling C/C++ programs to WebAssembly. 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.