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

NPM

npm i gpgpu.js

Example

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<storage, read_write> myData : array<u32>;
@group(0) @binding(1) var<uniform> 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]