gpgpu.js

gpgpu.js is a library for running compute on the GPU in the browser. It is built on top of WebGPU, a new web standard for GPU programming.

It's currently very basic and is just a simple wrapper over WebGPU that simplifies the process of running compute shaders. It's not meant to be a full-featured compute library, but rather a simple way to run compute shaders in the browser with less boilerplate.

Features

- Run compute shaders on the GPU in the browser with minimal boilerplate
- Easily create uniform buffers to pass parameters to your compute shaders
- Easily create buffers on the GPU and copy data to/from them

Limitations

- Currently only runs in the browser on Chrome 113+
- Node currently doesn't support WebGPU

Installation

$3

``
npm i gpgpu.js
`

Example

`ts
import { GPGPU } from "gpgpu.js";

// Initialize compute
const gpgpu = new GPGPU();
await gpgpu.init();

// Make some data
const inputArray = new Uint32Array([0, 1, 2, 3, 4, 5]);

// Create a buffer on the GPU and copy the data into it
const buffer = gpgpu.createBuffer(inputArray.length);
buffer.setData(inputArray);

// Create a uniform buffer with parameters
const params = gpgpu.createUniformBuffer();
params.addUint("multiplier", 2);
params.build();

// The actual compute code in WGSL
const computeSource =
struct Params {
multiplier : u32,
}

@group(0) @binding(0) var myData : array;
@group(0) @binding(1) var params : Params;

@compute @workgroup_size(64, 1, 1)
fn main(@builtin(global_invocation_id) global_id : vec3u) {
let i = global_id.x; // thread index
myData[i] *= params.multiplier;
};

// Create a compute shader and bind our buffers to it
const computeShader = gpgpu.createComputeShader(computeSource);
computeShader.setBuffer(0, buffer);
computeShader.setBuffer(1, params);

// Our workgroup size is 64 threads so we need a dispatch for every 64 elements.
// We round up in case the number of elements is not a multiple of 64.
const numberOfDispatches = Math.ceil(inputArray.length / 64);

// Actually run the compute shader
computeShader.dispatch(numberOfDispatches);

// Get the data from our buffer
const outputData = await buffer.getData();
const outputArray = new Uint32Array(outputData);

console.log(outputArray); // [0, 2, 4, 6, 8]
``