Using WebGL Shader Language (GLSL) for arbitrary vector mathematics in JavaScript

Question

The WebGL Shader Language (GLSL) is a very powerful tool for multidimensional vector mathematics.

Is there any possibility to use that power from JavaScript (running in web browser) for private non-3D calculations? Getting data in is possible, but is there any way to get data out to JavaScript after shader calculations are done?

No actual drawing is necessary, only calculating vectors. (I am toying with an idea of hardware accelerated gravity simulator written in JavaScript.)

Thank You!

In the news: Khronos seems to be developing WebCL which will be a JavaScript accessible version of OpenCL. That is exactly what I am looking for, but it will take some time...

score 17 · Accepted Answer · answered Mar 24 '11 at 13:24

17

As far as I can see from the spec WebGL supports framebuffer objects and read-back operations. This is sufficient for you to transform the data and get it back into client space. Here is a sequence of operations:

Create FBO with attachment render buffers that you need to store the result; bind it
Upload all input data into textures (the same size).
Create the GLSL processing shader that will do the calculus inside the fragment part, reading the input from textures and writing the output into destination renderbuffers; bind it
Draw a quad; read back the render buffers via glReadPixels.

answered Mar 24 '11 at 13:24

kvark

4,916
2
22
32

Too bad the only [supported format for readPixels](http://www.khronos.org/registry/webgl/specs/latest/#5.13.12) is UNSIGNED_BYTE RGBA. Float data in, integer data out. OpenGL supports FLOAT type, but this seems to be removed from WebGL. – Tero Niemi Mar 25 '11 at 09:00
@Tero Niemi. You are probably using RGBA8 render buffers anyway, so by reading in UNSIGNED_BYTE you are not loosing anything, but reducing the bandwidth load by 4 times compared to FLOAT. – kvark Mar 25 '11 at 11:39
2

Actually (if you want to know the gory details) I was using the JavaScript native type "Number" for planetary positions (that is equal to 64 bit floating point). To get number in GLSL I have to truncate it into 32 bit FLOAT. That is a bit painful, but okay. Next, I iterate planetary positions in GLSL. After that, I want them out, but I get only 8 bit integers... With a bit bit magic I probably could cut and chop FLOAT into BYTEs, and in JavaScript back into FLOATs, but all that bit level manipulation is probably eating away the speed bonus I am getting from the GPU. – Tero Niemi Mar 25 '11 at 15:46

score 6 · Answer 2 · answered Mar 12 '14 at 18:02

Getting floats out of a shader in the browser is actually pretty easy, the constraint being 1 float per pixel though.

We convert 4 ints to 1 float (r: int, g: int, b: int, a: int) -> (rgba: float).

Thanks IEEE

float random(vec2 seed) { 
    return fract(cos(mod(123456780., 1024. * dot(seed / time, vec2(23.1406926327792690, 2.6651441426902251))))); 
}
float shift_right(float v, float amt) { 
    v = floor(v) + 0.5; return floor(v / exp2(amt)); 
}
float shift_left(float v, float amt) { 
    return floor(v * exp2(amt) + 0.5); 
}
float mask_last(float v, float bits) { 
    return mod(v, shift_left(1.0, bits)); 
}
float extract_bits(float num, float from, float to) { 
    from = floor(from + 0.5); to = floor(to + 0.5); 
    return mask_last(shift_right(num, from), to - from); 
}
vec4 encode_float(float val) { 
    if (val == 0.0) return vec4(0, 0, 0, 0); 
    float sign = val > 0.0 ? 0.0 : 1.0; 
    val = abs(val); 
    float exponent = floor(log2(val)); 
    float biased_exponent = exponent + 127.0; 
    float fraction = ((val / exp2(exponent)) - 1.0) * 8388608.0; 
    float t = biased_exponent / 2.0; 
    float last_bit_of_biased_exponent = fract(t) * 2.0; 
    float remaining_bits_of_biased_exponent = floor(t); 
    float byte4 = extract_bits(fraction, 0.0, 8.0) / 255.0; 
    float byte3 = extract_bits(fraction, 8.0, 16.0) / 255.0; 
    float byte2 = (last_bit_of_biased_exponent * 128.0 + extract_bits(fraction, 16.0, 23.0)) / 255.0; 
    float byte1 = (sign * 128.0 + remaining_bits_of_biased_exponent) / 255.0; 
    return vec4(byte4, byte3, byte2, byte1); 
}

Usage:

Shader:

outputcolor = encode_float(420.420f);

JavaScript:

// convert output to floats
output = new Float32Array(output.buffer);

score 2 · Answer 3 · answered Mar 24 '11 at 14:19

2

Yes, it's doable -- there's an old demo (might require some tweaks to get it to work on the 1.0 WebGL specification) by Aaron Babcock here.

answered Mar 24 '11 at 14:19

Giles Thomas

5,631
1
28
42

Using WebGL Shader Language (GLSL) for arbitrary vector mathematics in JavaScript

3 Answers3