[WIP] GWebGPUEngine
A WebGPU Engine for real-time rendering and GPGPU. 中文
https://gwebgpu.antv.vision/zh/docs/api/gwebgpu
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 world = new World({
engineOptions: {
supportCompute: true,
},
});
const compute = world.createComputePipeline({
shader: `
//...
`,
dispatch: [1, 1, 1],
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：
import { globalInvocationID } from 'g-webgpu';
@numthreads(8, 1, 1)
class Add2Vectors {
@in @out
vectorA: float[];
@in
vectorB: float[];
sum(a: float, b: float): float {
return a + b;
}
@main
compute() {
// 获取当前线程处理的数据
const a = this.vectorA[globalInvocationID.x];
const b = this.vectorB[globalInvocationID.x];
// 输出当前线程处理完毕的数据，即两个向量相加后的结果
this.vectorA[globalInvocationID.x] = this.sum(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 installWatch all the packages:
yarn watchyarn start