---
title: Matrix
slug: /matrix
section: Math
---

The [[Matrix]] type encapsulates a 4x4 matrix that can be used in WebGL or for doing affine transformations on [[Vector|Vectors]] and other [[Matrix|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.

```typescript
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
