Uniforms

You may need to read the previous article about WebGL in order to understand this one.

Another way to pass data to the GPU is with uniforms.

Uniforms are variables that are uniform for each vertex. They can be defined in either the vertex shader or the fragment shader.

#version 300 es

precision highp float;

/*
The naming convention for uniforms is camelCase prefixed by
"u_".
*/
uniform vec4 u_color;

out vec4 outColor;

void main() {
	outColor = u_color;
}

Once a uniform has been declared in a shader program, it can be accessed with the WebGL API by getting its location. μGL does this step automatically when linking shader programs.

const colorUniformLocation = gl.getUniformLocation(
	program, "u_color");

In order to set a uniform's value, the function that matches that value's type must be called. For example, setting a vec4-valued uniform looks like this:

gl.uniform4fv(colorUniformLocation, [0, 0, 0, 1]);

μGL automatically determines the correct setter function, so the following line has the same effect:

program.uniforms.get("u_color").value = [0, 0, 0, 1];

Setting uniforms should be done between binding a VAO and drawing it:

program.use();
vao.bind();

program.uniforms.get("u_color").value = [0, 0, 0, 1];
// More uniforms...

vao.draw();

There is also a shorthand equivalent to the block of code above:

vao.draw({ "u_color": [0, 0, 0, 1] });

The next article covers the typical program structure when using the WebGL API.