This a bare minimum test that shows how to draw a red triangle in a web browser using WebGPU and WebAssembly (Emscripten)

Tested with Chrome Canary 86.0 and Microsoft Edge Canary 85.0 with chrome://flags/#enable-unsafe-webgpu enabled, and with Firefox Nightly 80.0a1 with dom.webgpu.enabled and gfx.webrender.all enabled,

• Emscripten SDK.
• Optional: python 3 to serve the sample.
• Optional: Shaderc to compile the shaders.

The sample is built under linux/WSL, however it should work in Windows or Mac as well by translating the build script to each platform.

build.sh [-d] [--emsdk PATH_TO_EMSDK]

• -d to compile in debug mode
• --emsdk to specify the Emscripten SDK path

By default, the build script tries to find the Emscripten SDK at $HOME/mono/sdks/builds/toolchains/emsdk. This is because this work is originally meant to serve as an external test of MONO + WebGPU + Emscripten integration.

To compile the shaders:

glslc -Os -mfmt=num -o - -c in.vert glslc -Os -mfmt=num -o - -c in.frag

cd www
python server.py

The sample is partially based on WebGPU samples and hello-webgpu