Running on the GPU in 2 minutes

The other day I wanted to run code on the GPU quickly to validate if it could be used to speed up a problem I had, which was essentially running a Array#map() operation on a Uint32Array. It was annoying to realize that there was no copy-pastable snippet of code that I could use as a base and modify. I was hoping to be able to write such snippet and share it, but as I went on to write that code I realized why there was none: GPUs are tailor-made for rendering pipelines, and mapping javascript code to GPU code requires you to twist the way you solve your problem to fit into that model.

So to transform this javascript code:

const data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
const output = data.map(n => n * 2)

In an equivalent WebGL implementation, it took me about 200 lines of code. Correction: 200 lines of ugly code. Yes, I did try to make it pretty, but it’s impossible. What I did make pretty though is the interface for that code, it looks like this:

const gpu = setup(`
  uint transform(uint data) {
    return data * 2u;
  }
`)
gpu.setDimensions(2, 2)
gpu.setData(new Uint32Array([0, 1, 2, 3]))
 
const output = gpu.compute() // Uint32Array([0, 2, 4, 6])

So if you have literally the same use-case I had and your data fits in those constraints, here is the copy-pastable code.

If your use-case is slightly different and you need to modify that snippet of code, then you should start here:
https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html