Search code examples
javascriptopengl-eswebgl

Setting uniforms in webgl

Can anyone explain or point me in the right direction of a good explaination of the different functions used to set uniform values. In the cheat sheet here we get this:

void uniform[1234][fi](uint location, ...) void uniform[1234][fi]v(uint location, Array value) void uniformMatrix[234]fv(uint location, bool transpose, Array)

but i'd like to know what each of these is doing and what the f's and i's are for.

Solution

  • 1234 = dimensions

    f = float

    i = integer

    v The final character, if present, is v, indicating that the command takes an array (a vector) of values rather than a series of individual arguments

    For a non array uniform the only difference between v and non v versions of the uniform functions is just how you provide the data to it:

    uniform1fv(loc,[3.14159]) vs uniform1f(loc,3.14159).

    uniform3fv(loc,[.5,1.,.5]) vs uniform3f(loc,.5,1.,.5)

    but for an array uniform you can set the entire array using the v functions

    in shader

    uniform float someArray[10];

    in js

    // at init time
var location = gl.getUniformLocation(prg, "someArray");

// at render time
var arrayWith10Values = [5, 4, 1, 3, 4, 5, 12, 0.1, 2, -1];
gl.uniform1fv(location, arrayWith10Values);

    To do that with the non v functions you'd have to look up every location

    var location0 = gl.getUniformLocation(prg, "someArray[0]");
var location1 = gl.getUniformLocation(prg, "someArray[1]");
var location2 = gl.getUniformLocation(prg, "someArray[2]");
var location3 = gl.getUniformLocation(prg, "someArray[3]");
var location4 = gl.getUniformLocation(prg, "someArray[4]");
...etc...

gl.uniform1f(location0, value0);
gl.uniform1f(location1, value1);
gl.uniform1f(location2, value2);
gl.uniform1f(location3, value3);
gl.uniform1f(location4, value4);
...etc...