Matrix

The Matrix type encapsulates a 4x4 matrix that can be used in WebGL or for doing affine transformations on Vectors and other Matrices.

The matrix data is stored in column major order, which is the convention for WebGL matrices.

| | | | | | ------- | ------- | -------- | -------- | | data[0] | data[4] | data[8] | data[12] | | data[1] | data[5] | data[9] | data[13] | | data[2] | data[6] | data[10] | data[14] | | data[3] | data[7] | data[11] | data[15] |

Transforming Vectors

Matrices are an efficient way to transform multiple vectors by the same transformation. Especially if the matrix can be cached.

const points = [...];

const mat = Matrix.identity().translate(100, 100).scale(2).rotate(Math.PI / 2);

// transform the points
const transformedPoints = points.map(p => mat.multiply(p));

const inverse = mat.getAffineInverse();

// undo the transform with the inverse
const originalPoints = points.map(p => inverse.multiply(p));

Multiplying Matrices

Order matters when multiplying matrices A x B != B x A . When multiplying matrices the order read in the code