... and some WebGPU effects. > Live version <
Library submodules:
langhelps writing WGSL. It allows for including snippets of WGSL & reuse, with some namespacing to avoid conflict. It also does import deduplication - i.e., this is not just textual includes.typeshelps mapping data (esp. uniforms) between Typescript & WGSL. Struct can be described in one place and used in both languages with proper typing and WGSL declarations.
Available demos, visible here:
multicubes: A bunch of rotating cubes bouncing around.viewer: Minimal glTF loader.fire: A classic demoscene style fire effect.cube: A rotating cube. All is done on the GPU, even the rotation / projection matrix calculation.conway: A binary Conway game of life.conway2: Another game of life, but with more fancy rendering.fade: Trivial example modifying the red channel.falling: Trivial compute example, moving data a bit around.minimal: Minimalistic render pipeline with no compute.
webgpu-conway2.mp4
WebGPU is an API to drive compute & rendering on GPUs from browsers (and others). This is to WebGL what Vulkan is to OpenGL. As of Jan. 2022, WebGPU is not available by default in browsers, and thus require experimental features to be available:
- Chrome on Linux, run it with the following extra flags - character case is important:
$ google-chrome --enable-unsafe-webgpu --enable-features=Vulkan - Chrome on Windows, add the following extra flag:
chrome.exe --enable-unsafe-webgpu - Firefox: run the nightly, go in "about:config" and activate feature "dom.webgpu.enabled". You might need to restart Firefox.
To run a dev version of the demos in this code, from a checkout of the code, assuming npm being available:
npm install
npm run dev-demos
npm run build-demos
git checkout pages
cp -f dist/demos/* .
git commit -a -m "Updating live version"