WebGL Computation

Setup

This happens before any operations are called, when the library is loaded.

• Set up a generic pass through vertex shader

• Pair with an operation specific fragment shader

• Compile program for each operation

Operation Call

This happens when you call a specific operation.

• Select the relevant precompiled program

• Pack relevant data into an RBGA floating point (32-bit) texture (you can do this beforehand in pipeline mode, then reuse it)

• Create an output texture (can also be done beforehand, in pipeline mode)

• Set up uniforms (this is usually stuff like matrix width and scalar coefficients)

• Attach input textures

• Attach output texture to framebuffer

• Call drawElements

If you're not in pipeline mode, readPixels is called to get the pixel data (for whatever is attached to the framebuffer) and convert it to a Float32Array that contains the result.

Pipeline mode allows you to leave data textures in GPU memory (including the results of previous computations), so you can reuse them without having to move data into and out of GPU memory.

Most devices don't support reading pixels from floating point textures, so when you want to retrieve the data, you also have to encode it into bytes in IEEE Floating Point format. There is a GLSL function that does this.