Real-Time 3D Graphics with WebGL 2 - Second Edition

Mapping JavaScript Matrices to ESSL Uniforms

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