Homogeneous coordinates are a key component of any computer-graphics program. These coordinates make it possible to represent affine transformations (such as 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 four-tuple (x, y, z, w) take us to a new space: the Projective Space.

Homogeneous coordinates make it possible to solve a system of linear equations where each equation represents a line that is parallel with all the others in the system. Remember that in Euclidian Space, a system like that does not have solutions, because there are no intersections. However, in Projective Space, this system has a solution—the lines will intersect at infinity. This fact is represented by the perspective component having a value of 0. A good analogy of this idea is the image of train tracks: parallel lines that converge at the vanishing point when you look at them in the distance:

It's easy to convert from Homogeneous coordinates to non-Homogeneous, old-fashioned, Euclidean coordinates. All you need to do is divide the coordinate by w:

Consequently, if you want to go from Euclidean to Projective space, you add the fourth component, w, and make it 1:

In fact, this is what we've been doing throughout the first three chapters of this book! Let's go back to one of the shaders we discussed in the last chapter: the Phong vertex shader. The code looks as follows:

#version 300 es
precision mediump float;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat4 uNormalMatrix;

in vec3 aVertexPosition;
in vec3 aVertexNormal;

out vec3 vVertexNormal;
out vec3 vEyeVector;

void main(void) {
  // Transformed vertex position
  vec4 vertex = uModelViewMatrix * vec4(aVertexPosition, 1.0);

  // Transformed normal position
  vVertexNormal = vec3(uNormalMatrix * vec4(aVertexNormal, 0.0));

  // Eye vector
  vEyeVector = -vec3(vertex.xyz);

  // Final vertex position
  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}

Please note that for the aVertexPosition attribute, which contains a vertex of our geometry, we create a four-tuple from the three-tuple that we receive. We do this with the ESSL construct, vec4(). ESSL knows that aVertexPosition is a vec3 and therefore, we only need the fourth component to create a vec4.

There is one more thing to note about Homogeneous coordinates: while vertices have a Homogeneous coordinate, w = 1, vectors have a Homogeneous coordinate, w = 0. This is because in the Phong vertex shader, the line that processes the normals looks like this:

vVertexNormal = vec3(uNormalMatrix * vec4(aVertexNormal, 0.0));

To code vertex transformations, we will use Homogeneous coordinates unless indicated otherwise. Now, let's see the different transformations that our geometry undergoes to be displayed on screen.