[WIP] GWebGPUEngine

A WebGPU Engine for real-time rendering and GPGPU. 中文

Wiki

• How to use Compute Pipeline API
• How to write Compute Shader with Typescript
• Use case: add 2 vectors

Online Demo: https://antv.vision/GWebGPUEngine/?path=/story/gpgpu--flocking

The current implementation status of the WebGPU API spec

Prerequisite

Please run in Chrome Canary() behind the flag --enable-unsafe-webgpu.The chrome://flags/#enable-unsafe-webgpu flag must be enabled.

Demos

• Fruchterman
• Flocking

Features

• Based on ECS Architecture which has been used in many 3D engines like Unity and PlayCanvas, especially inspired by
  • Entitas
  • perform-ecs
  • WickedEngine.
• Based on inversify, an IoC container implemented by TS.
• Use WebGPU by default and fallback to WebGL if not supported.
• We try to port some parallelizable algorithms to GPU side with ComputeShader implemented in WebGPU API. These algorithms are written with GLSL syntax now, but we hope using some TS-like languages in the future. stardustjs has already done a lot of work.

Getting started

rendering with Three.js-styled API:

const canvas = document.getElementById('application');

// create a world
const world = new World(canvas);

// create a camera
const camera = world.createCamera({
  aspect: Math.abs(canvas.width / canvas.height),
  angle: 72,
  far: 100,
  near: 1,
});
world.getCamera(camera).setPosition(0, 5, 5);

// create a scene
const scene = world.createScene({ camera });

// create geometry, material and attach them to mesh
const boxGeometry = world.createBoxGeometry({
  halfExtents: vec3.fromValues(1, 1, 1),
});
const material = world.createBasicMaterial();
const mesh = world.createMesh({
  geometry: boxGeometry,
  material,
});

// add meshes to current scene
world.add(scene, mesh);

GPGPU

You can try to solve some compute-intensive tasks like layout & particle effects with GPGPU technique. Use any rendering techniques(d3, g, Three.js or ours' rendering API if you like) when calculation is completed.

const canvas = document.getElementById('application');

const world = new World(canvas, {
  engineOptions: {
    supportCompute: true,
  },
});

const compute = world.createComputePipeline({
  shader: `
    //...
  `,
  onCompleted: (result) => {
    console.log(result); // [2, 4, 6, 8, 10, 12, 14, 16]
    world.destroy();
  },
});

// bind 2 params to Compute Shader
world.setBinding(compute, 'vectorA', [1, 2, 3, 4, 5, 6, 7, 8]);
world.setBinding(compute, 'vectorB', [1, 2, 3, 4, 5, 6, 7, 8]);

Our Compute Shader using Typescript syntax：

const vectorA: vec4[];
const vectorB: vec4[];

export function compute(threadId: int) {
  // get data of current thread by threadId
  const a = vectorA[threadId];
  const b = vectorB[threadId];

  // output result
  vectorA[threadId] = a + b;
}

Resources

• WebGPU Design
• WebGPU Samples
• Raw WebGPU
• WebGPU implementation in Rust
• awesome-webgpu
• Matrix Compute Online Demo
• From WebGL to WebGPU
• tensorflow.js WebGPU backend
• get-started-with-gpu-compute-on-the-web

Contributing

Bootstrap with Yarn Workspace.

yarn install

Watch all the packages:

yarn watch

Run Storybook on http://localhost:6006/:

yarn storybook