Setting uniforms in webgl

Question

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.

Answer 1

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...

Answer 2

The values within the square brackets refer to the dimension and the datatype of your variable. So you have the following list

• 1 - one value
• 2 - two values
• 3 - three values
• 4 - four values
• f - your data is a float
• i - your data is an integer
• v - your data refers to an array

In the WebGL Specification are more infromation about that.