Implementing GLM Transformations

Introduction

Welcome back to 3D Worlds and Matrix Transformations! You've successfully completed the first lesson, where we explored the mathematical foundations of transformation matrices. Now it's time to move from theory to practice as we implement these concepts using real code. In this second lesson, we'll integrate the GLM (OpenGL Mathematics) library into our application and use it to create our first rotating object. We'll take those beautiful matrix concepts from the previous lesson and see them come to life as we build a rotation matrix on the CPU and apply it directly to vertex positions. By the end of this lesson, we'll have a colorful square spinning at 45 degrees, demonstrating the power of matrix transformations in action.

What is GLM

GLM stands for OpenGL Mathematics, and it's essentially a C++ library that brings the mathematical power of GLSL (OpenGL Shading Language) directly to our CPU code. As you may recall from our previous lesson, we discussed how matrices can elegantly represent rotations, translations, and scaling operations. GLM provides us with ready-made functions to create these transformation matrices without having to write the mathematical computations ourselves. The beauty of GLM lies in its design philosophy: it mirrors the syntax and functionality that we would use in shader code, making it easy to transfer mathematical concepts between CPU and GPU operations. Instead of manually constructing a 4\times4 rotation matrix by calculating sine and cosine values, we can simply call glm::rotate() and let the library handle the mathematical details. GLM is a header-only library, which means we don't need to link against any compiled binaries. We simply include the headers we need, and the compiler incorporates the necessary code directly into our application.

Including GLM Headers

Let's start by examining the GLM headers we need for our transformation work. The library is organized into different modules, each providing specific mathematical functionality. C++ #include <glm/glm.hpp> #include <glm/gtc/matrix_transform.hpp> The first header, glm/glm.hpp, provides the core GLM functionality, including vector types like glm::vec3 and matrix types like glm::mat4 . This gives us the basic mathematical data structures we'll use to represent positions, colors, and transformation matrices. The second header, glm/gtc/matrix_transform.hpp, contains the transformation functions we discussed in our previous lesson: glm::rotate(), glm::translate(), and glm::scale() . These functions create the actual transformation matrices that will modify our 3D objects.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

C++

glm::vec3 positions[] = {
    glm::vec3(0.5f, 0.5f, 0.0f),   // top right
    glm::vec3(0.5f, -0.5f, 0.0f),  // bottom right  
    glm::vec3(-0.5f, -0.5f, 0.0f), // bottom left
    glm::vec3(-0.5f, 0.5f, 0.0f)   // top left
};

glm::vec3 colors[] = {
    glm::vec3(1.0f, 0.0f, 0.0f), // red
    glm::vec3(0.0f, 1.0f, 0.0f), // green
    glm::vec3(0.0f, 0.0f, 1.0f), // blue
    glm::vec3(1.0f, 1.0f, 0.0f)  // yellow
};

C++

glm::mat4 rotationMatrix = glm::rotate(glm::mat4(1.0f), glm::radians(45.0f), glm::vec3(0, 0, 1));

glm::mat4 rotationMatrix = glm::rotate(glm::mat4(1.0f), glm::radians(45.0f), glm::vec3(0, 0, 1));

C++

float verts[24]; // 4 vertices * 6 floats per vertex (3 pos + 3 color)
for (int i = 0; i < 4; i++) {
    glm::vec4 rotatedPos = rotationMatrix * glm::vec4(positions[i], 1.0f);
    
    verts[i * 6] = rotatedPos.x;     // x position
    verts[i * 6 + 1] = rotatedPos.y; // y position  
    verts[i * 6 + 2] = rotatedPos.z; // z position
    verts[i * 6 + 3] = colors[i].r;  // red
    verts[i * 6 + 4] = colors[i].g;  // green
    verts[i * 6 + 5] = colors[i].b;  // blue
}

float verts[24]; // 4 vertices * 6 floats per vertex (3 pos + 3 color)
for (int i = 0; i < 4; i++) {
    glm::vec4 rotatedPos = rotationMatrix * glm::vec4(positions[i], 1.0f);
    
    verts[i * 6] = rotatedPos.x;     // x position
    verts[i * 6 + 1] = rotatedPos.y; // y position  
    verts[i * 6 + 2] = rotatedPos.z; // z position
    verts[i * 6 + 3] = colors[i].r;  // red
    verts[i * 6 + 4] = colors[i].g;  // green
    verts[i * 6 + 5] = colors[i].b;  // blue
}

C++

glm::vec3 positions[] = {
    glm::vec3(0.5f, 0.5f, 0.0f),   // top right
    glm::vec3(0.5f, -0.5f, 0.0f),  // bottom right  
    glm::vec3(-0.5f, -0.5f, 0.0f), // bottom left
    glm::vec3(-0.5f, 0.5f, 0.0f)   // top left
};

glm::vec3 colors[] = {
    glm::vec3(1.0f, 0.0f, 0.0f), // red
    glm::vec3(0.0f, 1.0f, 0.0f), // green
    glm::vec3(0.0f, 0.0f, 1.0f), // blue
    glm::vec3(1.0f, 1.0f, 0.0f)  // yellow
};

C++

glm::mat4 rotationMatrix = glm::rotate(glm::mat4(1.0f), glm::radians(45.0f), glm::vec3(0, 0, 1));

C++

float verts[24]; // 4 vertices * 6 floats per vertex (3 pos + 3 color)
for (int i = 0; i < 4; i++) {
    glm::vec4 rotatedPos = rotationMatrix * glm::vec4(positions[i], 1.0f);
    
    verts[i * 6] = rotatedPos.x;     // x position
    verts[i * 6 + 1] = rotatedPos.y; // y position  
    verts[i * 6 + 2] = rotatedPos.z; // z position
    verts[i * 6 + 3] = colors[i].r;  // red
    verts[i * 6 + 4] = colors[i].g;  // green
    verts[i * 6 + 5] = colors[i].b;  // blue
}

Introduction

What is GLM

Including GLM Headers

Join the 1M+ learners on CodeSignal

Creating GLM Data Types

Building Rotation Matrices

Applying Transformations to Vertices

Rendering Our Square

Conclusion