This is a small test app that uses WebGPU's unofficial webgpu.h header as a platform-agnostic hardware abstraction layer. It uses a C++ layer over webgpu.h, called webgpu_cpp.h. On native platforms, this project can be built against Dawn, Chromium's native WebGPU implementation. On the Web, this project can be built against Emscripten, which implements webgpu.h on top of the browser's own WebGPU JavaScript API (if enabled). It currently hasn't been set up to build against wgpu-native's webgpu.h implementation, but that is a goal.

Check the issues tab for known issues.

Please note the webgpu.h and webgpu_cpp.h APIs (implemented by Dawn/wgpu-native/Emscripten) are not yet stabilized.

Open pre-installed VSCode in Browser

Building

Instructions are for Linux/Mac; they will need to be adapted to work on Windows.

vcpkg

Clone the repository with submodules:

git clone https://github.com/kainino0x/webgpu-cross-platform-demo --recursive

Native build

Then run the following script (tested on Linux, Mac, and Windows via GitBash)

./setup_native_build.sh
mkdir -p out/native
cd out/native

Then:

cmake ../..
make -j4 clean all

Or, to use Ninja instead of Make:

cmake -GNinja ../..
ninja

Note: If you want to have window displayed, make sure to have glfw available.

How to config glfw package on each platform?

• Linux

  apt-get install libglfw3-dev

• macOS

  brew install glfw

• Win
  • Manually
    • Download glfw source package and windows pre-compiled binaries from here
    • Unzip (e.g. version 3.3.8) glfw-3.3.8.zip to C:/Program Files (x86)/glfw/
    • Unzip (e.g. version 3.3.8) glfw-3.3.8.bin.WIN64.zip and put lib-vc2022 to C:/Program Files (x86)/glfw/lib-vc2022 (assume you are using Visual Studio 2022 to build)
    • You are done. cmake/modules/Findglfw3.cmake is used to find them (You can edit the path it uses)
  • vcpkg
    • Here is a fork that uses vcpkg to manage glfw: link

Alternatively, you can disable using glfw and window display by

cmake ../.. -DDEMO_USE_GLFW=OFF

Web build

This has been mainly tested with Chrome Canary on Mac, but should work on Chrome/Edge/Firefox on any platform with support (modulo compatibility differences due to pre-release spec changes). Requires chrome://flags/#enable-unsafe-webgpu on Chrome/Edge.

Note: To build, the active Emscripten version must be recent. Use the latest Emscripten version for best results including bugfixes to the WebGPU bindings.

# Make sure Emscripten tools are in the path.
source /path/to/emsdk/emsdk_env.sh

mkdir -p out/web
cd out/web

Then:

emcmake cmake ../..
make -j4 clean all

Or, to use Ninja instead of Make:

emcmake cmake -GNinja ../..
ninja

There are shorthands for these in package.json so you can use, for example, npm run ninja-web.