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 stable and platform-agnostic hardware abstraction layer through a C++ wrapper called webgpu_cpp.h. Note that this wrapper is subject to change.

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. While webgpu.h is considered stable, this stability doesn't include extensions added by Emdawnwebgpu or Dawn.

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.