Transformations in WebGL

Master 3D space manipulation with matrix transformations and coordinate systems.

🚀 Interactive Demo

Understanding Coordinate Spaces

World Space

  • • Global coordinate frame reference
  • • Origin at scene center
  • • Used for camera positioning

Local Space

  • • Object-specific coordinate frame
  • • Origin at object center
  • • Basis for relative transformations

Matrix Transformation Demo

Transformation Matrices Explained

Translation Matrix

[
    1, 0, 0, x,
    0, 1, 0, y,
    0, 0, 1, z,
    0, 0, 0, 1
]

Moves objects along world axes by vector (x,y,z)

Rotation Matrix

[
    cosθ, -sinθ, 0, 0,
    sinθ, cosθ, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1
]

Rotates around Z-axis by θ radians

Transformation Pipeline

Local Space

Object's native coordinate system

World Space

Transformed using model matrix

Camera Space

Transformed using view matrix

Screen Space

Final transformation using projection