Class Matrix4

Readonlyorder

const m = Matrix4.identity();
console.log(m.order); // 4
Copy

Readonlyelements

const m = Matrix4.identity();
console.log(m.elements);
// [ 1, 0, 0, 0,
//   0, 1, 0, 0,
//   0, 0, 1, 0,
//   0, 0, 0, 1 ]
Copy

constructor

• new Matrix4(
      e00: number,
      e01: number,
      e02: number,
      e03: number,
      e10: number,
      e11: number,
      e12: number,
      e13: number,
      e20: number,
      e21: number,
      e22: number,
      e23: number,
      e30: number,
      e31: number,
      e32: number,
      e33: number,
  ): Matrix4

  Creates a new 4x4 matrix with the specified elements.
  The internal data is stored in column-major order in a Float32Array.

  The parameters e(column)(row) correspond to the following matrix positions: \

  | e00 e10 e20 e30 |
  | e01 e11 e21 e31 |
  | e02 e12 e22 e32 |
  | e03 e13 e23 e33 |
  Copy

  The elements array stores each column sequentialy:
  [e00, e01, e02, e03, e10, e11, e12, e13, e20, e21, e22, e23, e30, e31, e32, e33]

  Parameters

  • e00: number

    element in column 0, row 0

  • e01: number

    element in column 0, row 1

  • e02: number

    element in column 0, row 2

  • e03: number

    element in column 0, row 3

  • e10: number

    element in column 1, row 0

  • e11: number

    element in column 1, row 1

  • e12: number

    element in column 1, row 2

  • e13: number

    element in column 1, row 3

  • e20: number

    element in column 2, row 0

  • e21: number

    element in column 2, row 1

  • e22: number

    element in column 2, row 2

  • e23: number

    element in column 2, row 3

  • e30: number

    element in column 3, row 0

  • e31: number

    element in column 3, row 1

  • e32: number

    element in column 3, row 2

  • e33: number

    element in column 3, row 3

  Returns Matrix4

  Example

  const m = new Matrix4(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15);
  console.log(m.elements);
  // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ]
  Copy

Staticidentity

• identity(): Matrix4

  Creates a identity matrix instance

  Returns Matrix4

  new identity matrix instance

  Example

  const m = Matrix4.identity();
  console.log(m.elements);
  // [ 1, 0, 0, 0,
  //   0, 1, 0, 0,
  //   0, 0, 1, 0,
  //   0, 0, 0, 1 ]
  Copy

Staticzero

• zero(): Matrix4

  Creates a new zero matrix instance

  Returns Matrix4

  new zero matrix instance

  Example

  const m = Matrix4.zero();
  console.log(m.elements);
  // [ 1, 0, 0, 0,
  //   0, 1, 0, 0,
  //   0, 0, 1, 0,
  //   0, 0, 0, 1 ]
  Copy

clone

• clone(): Matrix4

  Creates new instance has same elements (pure)

  Returns Matrix4

  new cloned matrix instance

  Example

  const m = Matrix4.identity();
  const c = m.clone();
  console.log(c.elements);
  // [ 1, 0, 0, 0,
  //   0, 1, 0, 0,
  //   0, 0, 1, 0,
  //   0, 0, 0, 1 ]
  Copy

set

• set(
      e00: number,
      e01: number,
      e02: number,
      e03: number,
      e10: number,
      e11: number,
      e12: number,
      e13: number,
      e20: number,
      e21: number,
      e22: number,
      e23: number,
      e30: number,
      e31: number,
      e32: number,
      e33: number,
  ): Matrix4

  Sets all elements (mutates this)

  Parameters

  • e00: number

    element in column 0, row 0

  • e01: number

    element in column 0, row 1

  • e02: number

    element in column 0, row 2

  • e03: number

    element in column 0, row 3

  • e10: number

    element in column 1, row 0

  • e11: number

    element in column 1, row 1

  • e12: number

    element in column 1, row 2

  • e13: number

    element in column 1, row 3

  • e20: number

    element in column 2, row 0

  • e21: number

    element in column 2, row 1

  • e22: number

    element in column 2, row 2

  • e23: number

    element in column 2, row 3

  • e30: number

    element in column 3, row 0

  • e31: number

    element in column 3, row 1

  • e32: number

    element in column 3, row 2

  • e33: number

    element in column 3, row 3

  Returns Matrix4

  this instance, for method chaining

  Example

  const m = Matrix4.zero();
  m.set(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  console.log(m.elements);
  // [ 1, 0, 0, 0,
  //   0, 1, 0, 0,
  //   0, 0, 1, 0,
  //   0, 0, 0, 1 ]
  Copy

copy

• copy(other: Matrix4): void

  Copies all elements from other matrix (mutates this)

  Parameters

  • other: Matrix4

    other matrix

  Returns void

  this instance, for method chaining

  Example

  const m = Matrix4.zero();
  const i = Matrix4.identity();
  m.set(i);
  console.log(m.elements);
  // [ 1, 0, 0, 0,
  //   0, 1, 0, 0,
  //   0, 0, 1, 0,
  //   0, 0, 0, 1 ]
  Copy

setIdentity

• setIdentity(): Matrix4

  Sets identity matrix (mutates this)

  Returns Matrix4

  this instance, for method chaining

  Example

  const m = Matrix4.zero();
  m.setIdentity();
  console.log(m.elements);
  // [ 1, 0, 0, 0,
  //   0, 1, 0, 0,
  //   0, 0, 1, 0,
  //   0, 0, 0, 1 ]
  Copy

setScale

• setScale(scale: Vector3): Matrix4

  Sets scale transformation matrix (mutates this)

  Parameters

  • scale: Vector3

    3D scale vector

  Returns Matrix4

  this instance, for method chaining

  Example

  const m = Matrix4.identity();
  const s = new Vector3(2, 3, 4);
  m.setScale(s);
  console.log(m.elements);
  // [ 2, 0, 0, 0,
  //   0, 3, 0, 0,
  //   0, 0, 4, 0,
  //   0, 0, 0, 1 ]
  Copy

setTranslation

• setTranslation(translation: Vector3): Matrix4

  Sets translation transformation matrix (mutates this)

  Parameters

  • translation: Vector3

    translation vector

  Returns Matrix4

  this instance, for method chaining

  Example

  const m = Matrix4.identity();
  const t = new Vector3(2, 3, 4);
  m.setTranslation(t);
  console.log(m.elements);
  // [ 1, 0, 0, 0,
  //   0, 1, 0, 0,
  //   0, 0, 1, 0,
  //   2, 3, 4, 1 ]
  Copy

setRotation

• setRotation(rotation: Quaternion): Matrix4

  Sets rotation matrix from quaternion (mutates this)

  Parameters

  • rotation: Quaternion

  Returns Matrix4

  this instance, for method chaining

  Example

  const m = Matrix4.zero();
  const q = Quaternion.identity();
  m.setRotation(q);
  console.log(m.elements);
  // [ 0, 0, 0, 0,
  //   0, 0, 0, 0,
  //   0, 0, 0, 0,
  //   0, 0, 0, 0 ]
  Copy

add

• add(other: Matrix4): Matrix4

  Adds by other matrix (mutates this)

  Parameters

  • other: Matrix4

    other matrix

  Returns Matrix4

  this instance, for method chaining

  Example

  const m1 = Matrix4.zero();
  const m2 = Matrix4.identity();
  m1.add(m2);
  console.log(m1.elements);
  // [ 1, 0, 0, 0,
  //   0, 1, 0, 0,
  //   0, 0, 1, 0,
  //   0, 0, 0, 1 ]
  Copy

subtract

• subtract(other: Matrix4): Matrix4

  Subtracts by other matrix (mutates this)

  Parameters

  • other: Matrix4

    other matrix

  Returns Matrix4

  this instance, for method chaining

  Example

  const m1 = Matrix4.zero();
  const m2 = Matrix4.identity();
  m1.subtract(m2);
  console.log(m1.lements);
  // [ -1,  0,  0,  0,
  //    0, -1,  0,  0,
  //    0,  0, -1,  0,
  //    0,  0,  0, -1 ]
  Copy

multiplyScalar

• multiplyScalar(scalar: number): Matrix4

  Multiplies all elements by scalar (mutates this)

  Parameters

  • scalar: number

  Returns Matrix4

  this instance, for method chaining

  Example

  const m = Matrix4.identity();
  m.multiplyScalar(2);
  console.log(m.elements);
  // [ 2, 0, 0, 0,
  //   0, 2, 0, 0,
  //   0, 0, 2, 0,
  //   0, 0, 0, 2 ]
  Copy

divideScalar

• divideScalar(scalar: number): Matrix4

  Divides all elements by scalar (mutates this)

  Parameters

  • scalar: number

  Returns Matrix4

  this instance, for method chaining

  Example

  const m = Matrix4.identity();
  m.divideScalar(2);
  console.log(m.elements);
  // [ 0.5,   0,   0,   0,
  //     0, 0.5,   0,   0,
  //     0,   0, 0.5,   0,
  //     0,   0,   0, 0.5 ]
  Copy

multiply

• multiply(other: Matrix4): Matrix4

  Multiplies this matrix by other matrix (mutates this)

  Parameters

  • other: Matrix4

    other matrix

  Returns Matrix4

  this instance, for method chaining

  Example

  const m1 = Matrix4.identity();
  const m2 = Matrix4.zero();
  m1.multiply(m2);
  console.log(m.elements);
  // [ 0, 0, 0, 0,
  //   0, 0, 0, 0,
  //   0, 0, 0, 0,
  //   0, 0, 0, 0 ]
  Copy

multiplyScale

• multiplyScale(scale: Vector3): Matrix4

  Multiplies scale matrix to this instance (mutates this)

  Parameters

  • scale: Vector3

    3D scale vector

  Returns Matrix4

  this instance, for method chaining

multiplyTranslation

• multiplyTranslation(position: Vector3): Matrix4

  Multiplies translation matrix to this instance (mutates this)

  Parameters

  • position: Vector3

    translation vector

  Returns Matrix4

  this instance, for method chaining

multiplyRotation

• multiplyRotation(rotation: Quaternion): Matrix4

  Multiplies rotation matrix to this instance (mutates this)

  Parameters

  • rotation: Quaternion

    rotation quaternion

  Returns Matrix4

  this instance, for method chaining

determinant

• determinant(): number

  Calculates determinant of this matrix (pure)

  Returns number

  determinant of this matrix

invert

• invert(): Matrix4 | null

  Sets inverse of this matrix to this instance (mutates this)

  Returns Matrix4 | null

  this instance for method chaining if this is invertible, null otherwise

transpose

• transpose(): Matrix4

  Transposes this matrix (mutates this)

  Returns Matrix4

  this instance, for method chaining

divide

• divide(other: Matrix4): Matrix4 | null

  Divides by other matrix (mutates this)

  Parameters

  • other: Matrix4

    other matrix

  Returns Matrix4 | null

  this instance for method chaining if other is invertible, null otherwise

lookAt

• lookAt(position: Vector3, target: Vector3, up: Vector3): Matrix4

  Sets view transformation matrix (mutates this)

  Parameters

  • position: Vector3

    camera position

  • target: Vector3

    camera target looking at

  • up: Vector3

    up vector of camera

  Returns Matrix4

  this instance, for method chaining

  Example

  const m = Matrix4.identity();
  const p = new Vector3(0, -2, 0);
  const t = Vector3.zero();
  const u = new Vector3(0, 0, 1);
  m.lookAt(p, t, u);
  Copy

orthographic

• orthographic(
      left: number,
      right: number,
      bottom: number,
      top: number,
      near: number,
      far: number,
      options?: ProjectionOptions,
  ): Matrix4

  Sets projection matrix of orthographic camera (mutates this)

  Parameters

  • left: number

    left boundary of the view frustum (negative X coordinate)

  • right: number

    right boundary of the view frustum (positive X coordinate)

  • bottom: number

    bottom boundary of the view frustum (negative Y coordinate)

  • top: number

    top boundary of the view frustum (positive Y coordinate)

  • near: number

    near clipping plane distance (positive value)

  • far: number

    far clipping plane distance (positive value)

  • Optionaloptions: ProjectionOptions

    options for orthographic projection matrix

  Returns Matrix4

  this instance, for method chaining

perspective

• perspective(
      verticalFov: number,
      near: number,
      far: number,
      aspect: number,
      options?: ProjectionOptions,
  ): Matrix4

  Sets projection matrix of perspective camera (mutates this)

  Parameters

  • verticalFov: number

    vertical field of view in radians

  • near: number

    near clipping plane distance

  • far: number

    far clipping plane distance

  • aspect: number

    aspect ratio (width / height)

  • Optionaloptions: ProjectionOptions

    options for perspective projection matrix

  Returns Matrix4

  this instance, for method chaining

  Example

  const m = Matrix4.identity();
  const fov = Math.PI / 4;
  const near = 0.01;
  const far = 4.0;
  const aspect = 300 / 150;
  
  // for OpenGL, WebGL
  m.perspective(fov, near, far, aspect);
  
  // for WebGPU, Vulkan, DirectX, Metal
  m.perspective(fov, near, far, aspect, {depthZeroToOne: true});
  Copy