Since the Model-View and Perspective matrices do not change during a single rendering step, they are passed as uniforms to the shaders. For example, if we were applying a translation to an object in our scene, we would have to paint the whole object in the new coordinates given by the translation. Painting the whole object in the new position is achieved in exactly one rendering step.

However, before the rendering step is invoked (by calling drawArrays or drawElements), we need to make sure that the shaders have an updated version of our matrices. We already know how to do that for other uniforms, such as light and color properties. The method to map JavaScript matrices to uniforms is similar to the following:

1. Get a JavaScript reference to the uniform with the following code:

const reference = getUniformLocation(program, uniformName);

2. Use the reference to pass the matrix to the shader with the following code:

// Matrix is the JavaScript matrix variable
gl.uniformMatrix4fv(reference, transpose, matrix);

As is the case for other uniforms, ESSL supports two-, three-, and four-dimensional matrices: uniformMatrix[234]fv(reference, transpose, matrix). This will load 2x2, 3x3, or 4x4 matrices (corresponding to 2, 3, or 4 in the command name) of floating points into the uniform referenced by reference. The type of reference is WebGLUniformLocation. For practical purposes, it is an integer number. According to the specification, the transpose value must be set to false. The matrix uniforms are always of the floating point type (f). The matrices are passed as 4, 9, or 16 element vectors (v) and are always specified in a column-major order. The matrix parameter can also be of the Float32Array type. This is one of JavaScript's typed arrays. These arrays are included in the language to provide access to and the manipulation of raw binary data, and thus increase efficiency.