General Matrix Operations
Most matrix operations share a similar format:
mat4.operation(srcMatrix, otherOperands, destMatrix (optional));
For all functions following this format the operation will be applied to the values in srcMatrix and the result will be written into destMatrix, which will also be returned. If destMatrix is not specified the result will be written into srcMatrix, if destMatrix is specified srcMatrix will not be altered.
Any 4x4 matrix functions expect sequences at least 16 elements in length as inputs when taking a matrix.
Documentation for the individual functions can be found here
Creating a perspective matrix
var persp = mat4.create(); mat4.perspective(45, 4/3, 1, 100, persp);
Performing multiple transforms on a matrix
var modelView = mat4.create(); mat4.identity(modelView); // Set to identity mat4.translate(modelView, [0, 0, -10]); // Translate back 10 units mat4.rotate(modelView, Math.PI/2, [0, 1, 0]); // Rotate 90 degrees around the Y axis mat4.scale(modelView, [2, 2, 2]); // Scale by 200%
Matricies created with glMatrix don't need to undergo any transformation to be used with WebGL. They can be passed directly
gl.uniformMatrix4fv(modelViewUniform, false, modelView);
Updating a destination matrix
var modelViewPersp = mat4.create(); mat4.multiply(modelView, persp, modelViewPersp); // Sets modelViewPersp to modelView * persp
Tranforming a point
var cameraPos = [0, 0, 0]; var newPos = [0, 0, 0]; mat4.multiplyVec3(modelView, cameraPos); // Result is written into cameraPos mat4.multiplyVec3(modelView, cameraPos, newPos); // Result is written into newPos