A GPGPU implematation based on WebGL. 中文
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.
import { World } from '@antv/g-webgl-compute';
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);
}
}
- 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
Bootstrap with Yarn Workspace.
yarn install
Watch all the packages:
yarn watch
yarn start