Uniforms

You may need to read the introductory article in order to understand this one. The previous article is about attributes.

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. Umbra 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]);

Umbra 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();

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