The Transformation Pipeline

The manual offset we just wrote is extremely limiting. We can't easily rotate the object or move it to a specific 3D coordinate. This is where the pipeline begins.

The first transformation moves an object from Local Space to World Space. We call this the Model Matrix. Let's use GLM to build and use this model matrix inside our Render() function.

We're working in 3D space and we want to use affine transformations with homogenous coordinates, so we'll use a 4x4 matrix. We start with an identity matrix:

This starting point represents no transformation at all, but we can add to it later. We can create this matrix by passing 1.0f to a glm::mat4 constructor:

1glm::mat4 Model{1.0f};

Next, we add the homogenous coordinate $w$ to our vertex. The glm::vec4 type makes this easy as it has a constructor that accepts a glm::vec3, as the first argument, and the $w$ value as the second. Since our vertices represent positions, we want them to be affected by translation, so we set $w=1$:

1// LocalVertex is a glm::vec3
2glm::vec4{LocalVertex, 1.0f};

We then use matrix multiplication to transform the glm::vec3 using our 4x4 matrix. As GLM uses a column-major format, the transformation matrix is the left side of the multiplication, whilst the vector is on the right.

1Model * glm::vec4{LocalVertex, 1.0f};

We finally provide RenderVertex() with our transformed (world-space) vertex rather than the local vertex. This new vertex is a glm::vec4, so we need to update our argument list, but the function body remains the same for now. Our complete code looks like this:

1// ...
2
3class Triangle {
4public:
5  // ...
6
7  void Render(SDL_Surface* Surface) {
8    // Create our transformation as an identity matrix
9    glm::mat4 Model{1.0f}; 
10    
11    // We'll implement transformations here in the next section
12    // ...
13
14    for (const glm::vec3& LocalVertex : Vertices) {
15      // Implement the transformation
16      glm::vec4 WorldVertex{
17        // - matrix on the left, vertex on the right
18        // - vertex is updated to a vec4, with w=1
19        Model * glm::vec4{LocalVertex, 1.0f}
20      };
21      
22      // Provide the transformed vertex
23      DrawVertex(Surface, LocalVertex);
24      DrawVertex(Surface, WorldVertex);
25    }
26  }
27
28private:
29  void DrawVertex(
30    SDL_Surface* Surface, const glm::vec3& Vertex
31    SDL_Surface* Surface, const glm::vec4& Vertex
32  ) {
33    // ... function body unchanged
34  }
35
36  // ...
37};

If you run the app now, we should see everything looks the same, but we're now ready to start implementing transformations:

To make creating transformation matrices easier, GLM provides a collection of helpful utilities, with names like translate(), rotate(), and scale().

These are available within the glm/ext/matrix_transform.hpp header. These functions take the matrix we want to update as the first argument, followed by additional arguments depending on the transformation type.

Translation

The glm::translate() function takes the matrix we want to update as the first argument, and a glm::vec3 representing the translation as the second argument.

In the following example, we translate our triangle into the location represented by a glm::vec3 called Position.

We've set $x=-1$ to move our triangle 1 unit in the negative $x$ direction within world space:

1// ...
2#include <glm/ext/matrix_transform.hpp>
3
4class Triangle {
5public:
6  // ...
7  void Render(SDL_Surface* Surface) {
8    glm::mat4 Model{1.0f};
9
10    // Move the triangle to Position 
11    Model = glm::translate(Model, Position); 
12
13    // ...
14  }
15
16private:
17  // ...
18  glm::vec3 Position{-1.0f, 0.0f, 0.0f}; 
19};

Our current DrawVertex() function converts this to a 100 pixel leftward movement in screen space:

Scale

The glm::scale() function accepts the matrix to update as the first argument, and a glm::vec3 representing the scale in each dimension as the second argument.

The glm::vec3 type can be constructed with a single floating point argument, which sets every component to that value. Below, we use this to make our triangle 50% bigger:

1// ...
2
3class Triangle {
4public:
5  // ...
6  void Render(SDL_Surface* Surface) {
7    glm::mat4 Model{1.0f};
8
9    Model = glm::translate(Model, Position);
10    Model = glm::scale(Model, glm::vec3{1.5f});
11
12    // ...
13  }
14// ..
15};

We still have our glm::translate() call, so our Model matrix contains both the translation and the scaling:

In this example, we apply a non-uniform scaling, stretching the triangle by a factor of 3 in the x dimension, but keeping its height and depth the same:

1// ...
2
3class Triangle {
4public:
5  // ...
6  void Render(SDL_Surface* Surface) {
7    glm::mat4 Model{1.0f};
8
9    Model = glm::translate(Model, Position);
10    Model = glm::scale(Model, glm::vec3{3.0f, 1.0f, 1.0f});
11
12    // ...
13  }
14// ..
15};

Rotation

Finally, we have glm::rotate() for rotation. 3D rotation is a little more complex than 2D rotations. In addition to how much we want the object rotated, we also need to provide the axis of that rotation.

To support this, glm::rotate() accepts three arguments:

1. The matrix to apply the transformation to
2. The angle of rotation, expressed in radians. We can use glm::radians() to convert from degrees to radians, and glm::degrees() to convert from radians to degrees.
3. The axis of rotation, expressed as a glm::vec3

Below, we add a 90 degree rotation to our triangle. We use $z$ as the axis of rotation, meaning the z components of our vectors will remain fixed. The rotation will be implemented by updating the x and y coordinates.

1// ...
2
3class Triangle {
4public:
5  // ...
6  void Render(SDL_Surface* Surface) {
7    glm::mat4 Model{1.0f};
8
9    Model = glm::translate(Model, Position);
10    Model = glm::scale(Model, glm::vec3{3.0f, 1.0f, 1.0f});
11    Model = glm::rotate(
12      Model,
13      glm::radians(90.0f),
14      glm::vec3{0.0f, 0.0f, 1.0f}
15    );
16
17    // ...
18  }
19// ..
20};

This transformation is effectively a 2D rotation in our current scene, as the x and y coordinates of our vertices are mapping to the x and -y axes of our SDL_Surface:

We're currently ignoring z, but we'll start using it in the next lesson when we implement depth within our scene.

Our scene is currently static, but we can modify our transformations using all the usual C++ techniques.

In the following example, we update our triangle's position using the arrow keys, its scale using the mouse wheel, and we animate it by updating its rotation on every Tick():

1// ...
2
3class Triangle {
4public:
5  // ...
6
7  void HandleEvent(SDL_Event& Event) {
8    if (Event.type == SDL_EVENT_KEY_DOWN) {
9      switch (Event.key.key) {
10        case SDLK_LEFT: Position.x -= 0.1f; break;
11        case SDLK_RIGHT: Position.x += 0.1f; break;
12        case SDLK_UP: Position.y += 0.1f; break;
13        case SDLK_DOWN: Position.y -= 0.1f; break;
14      }
15    } else if (Event.type == SDL_EVENT_MOUSE_WHEEL) {
16      if (Event.wheel.y > 0) Scale += 0.1f;
17      if (Event.wheel.y < 0) Scale -= 0.1f;
18    }
19  }
20
21  void Tick(float DeltaTime) {
22    Rotation += 90.0f * DeltaTime;
23  }
24
25  void Render(SDL_Surface* Surface) {
26    glm::mat4 Model{1.0f};
27
28    Model = glm::translate(Model, Position);
29    Model = glm::scale(Model, glm::vec3{Scale});
30    Model = glm::rotate(
31      Model,
32      glm::radians(Rotation),
33      glm::vec3{0.0f, 0.0f, 1.0f}
34    );
35
36    // ...
37  }
38
39private:
40  // ...
41  float Scale{1.5f};
42  float Rotation{90.0f}; // Degrees 
43};

Our ending point is provided in full below. We'll continue to build on this in the next lesson to implement depth and a virtual camera:

In this lesson, we started building a full graphics pipeline from scratch.

• Local Space: We defined vertices relative to the object itself.
• World Space: We used a model matrix to move, scale, and rotate the object in the world.
• Matrix Construction: We used GLM's translate, scale, and rotate functions to build our model matrix
• Matrix Multiplication: We transformed our local space vectors to world space vectors by multiplying them by our model matrix

In the next lesson, we'll continue our journey through the graphics pipeline. We'll introduce a view matrix to implement a virtual camera, and a projection matrix to give our scene 3D perspective.