Combining and Inverting 3D Transformations Using Matrices

The article builds on previous explanations of matrix‑based 2D and 3D transforms, showing why matrices are used: they allow multiple transforms to be merged into a single matrix, simplifying calculations for many points.

Combination and Inverse Transforms

By multiplying matrices (e.g., B * A = C ), two successive transforms A and B can be combined into a single matrix C, so applying C to a position yields the same result as applying A then B.

Because column vectors are used, the order is B * A * position , meaning B appears before A in the multiplication chain.

An example combines a rotation matrix A with a translation matrix B, resulting in matrix C that contains both rotation and translation components.

Inverse Transform

Using the inverse of a matrix (e.g., negating the translation part) can undo a previous transform, such as rotating right 90° and then applying the inverse to rotate left 90°.

Rotation About the Center

To rotate an object around its own center, three steps are required: translate the object to the origin (matrix T), apply the rotation matrix R, then translate back using the inverse of T (matrix T⁻¹). The combined matrix M = T⁻¹ * R * T is derived and shown.

3D Translation Matrix

The 3D translation matrix extends the 2D version:

[ 1 0 0 dx 0 1 0 dy 0 0 1 dz 0 0 0 1 ]

Scaling Matrix

Uniform scaling along the X, Y, Z axes uses a diagonal matrix:

[ sx 0 0 0 0 sy 0 0 0 0 sz 0 0 0 0 1 ]

Arbitrary‑Direction Scaling

For scaling along an arbitrary unit vector N with factor k, the vector V is decomposed into components parallel (V∥) and perpendicular (V⊥) to N. Only V∥ is scaled, yielding the final formula V' = V + (k‑1)(V·N)N and the corresponding matrix.

Rotation Matrices

Separate rotation matrices for the X, Y, and Z axes are presented, each leaving the axis of rotation unchanged. The matrices are orthogonal, so their inverses equal their transposes, which is computationally efficient.

JavaScript Implementation

The following class provides static methods to generate 4×4 rotation matrices for each axis:

class Mat4 {
  static fromXRotation(rad) {
    const s = Math.sin(rad);
    const c = Math.cos(rad);
    return [
      1, 0, 0, 0,
      0, c, s, 0,
      0, -s, c, 0,
      0, 0, 0, 1
    ];
  }
  static fromYRotation(rad) {
    const s = Math.sin(rad);
    const c = Math.cos(rad);
    return [
      c, 0, -s, 0,
      0, 1, 0, 0,
      s, 0, c, 0,
      0, 0, 0, 1
    ];
  }
  static fromZRotation(rad) {
    const s = Math.sin(rad);
    const c = Math.cos(rad);
    return [
      c, s, 0, 0,
      -s, c, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1
    ];
  }
}

Applying these matrices to a WebGL cube makes it rotate, revealing the benefit of matrix‑based transforms over manually updating each vertex.

Rotation About an Arbitrary Axis Through the Origin

The article derives the rotation matrix for an arbitrary unit axis N using the decomposition of vectors into parallel and perpendicular components, the cross product W = N × V⊥, and the Rodrigues rotation formula, resulting in a 4×4 matrix that rotates any point around N.

Summary

The piece demonstrates how matrices enable concise representation of complex 3D transformations, how they can be combined and inverted, and why they are essential for efficient graphics programming. Linear transforms preserve the origin and straight lines; affine transforms extend this by including translation.

Future articles will cover perspective projection and camera implementation using similar matrix techniques.