WebGL Textures & Vertices

Beginner's Guide

Page Fifty

4 x 4 Matrices

The vertex shader uses two 4 x 4 matrices. The mat4 um4_matrix rotates and moves a mesh. The mat4 um4_pmatrix provides depth or perspective. This section introduces 4 x 4 matrices for rotation and translation or movement. The OpenGL ES shader language represents a 4 x 4 matrix as type mat4. However prepare 4 x 4 matrices in JavaScript as one dimensional arrays with 16 entries. The section titled Perspective Projection builds on the foundation provided here.

Think of matrices as tables with rows and columns. A 4 x 4 matrix has four rows and four columns with a total of 16 entries.

Default Identity Matrix

An identity matrix does nothing. An identity matrix neither rotates a mesh, nor provides perspective projection. However the identity matrix proves useful to reset transformations. Transformations include moving, scaling, rotating, and shearing a mesh. To implement an identity matrix assign 0 to every entry in the matrix, except those which appear along the diagonal. Assign 1 to entries along the diagonal. The following graphic represents a JavaScript 4 x 4 identity matrix.

Identity Matrix

Diagram 13: Identity Matrix

WebGL Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.