Vertex transformations

Objects in a WebGL scene go through different transformations before we can see them on our screen. Each transformation is encoded by a 4x4 matrix, as we will see later. How do we multiply vertices that have three components (x,y,z) by a 4x4 matrix? The short answer is that we need to augment the cardinality of our tuples by one dimension. Each vertex then will have a fourth component called the homogenous coordinate. Let's see what they are and why they are useful.

Homogeneous coordinates

Homogeneous coordinates are a key component of any computer graphics program. Thanks to them, it is possible to represent affine transformations (rotation, scaling, shear, and translation) and projective transformations as 4x4 matrices.

In Homogeneous coordinates, vertices have four components: x, y, z, and w. The first three components are the vertex coordinates in Euclidian Space. The fourth is the perspective component. The 4-tuple (x,y,z,w) take us to a new space: The Projective...