Creating a 3D Perspective

Introduction

Welcome back to 3D Worlds and Matrix Transformations! Having completed three foundational lessons, we've mastered the art of dynamic transformations and can now animate objects in real time using GPU uniforms. Our spinning square has served us well, but it's time to make a dramatic leap: transitioning from flat, 2D-looking graphics to true 3D perspective rendering . In this fourth lesson, we'll implement a complete 3D camera system by introducing view and projection matrices alongside our existing model matrix. We'll replace our simple square with a colorful 3D cube and position a virtual camera to observe it from a realistic perspective. By the end of this lesson, we'll have a proper 3D scene with depth, perspective distortion, and all the visual cues that make objects appear truly three-dimensional rather than flat shapes rotating on a screen.

Understanding 3D Perspective

While our previous rotating square demonstrated dynamic transformations, it still appeared fundamentally flat because we were viewing it through an orthographic projection . In orthographic projection, objects maintain the same size regardless of their distance from the camera, which creates an unrealistic, engineering-drawing-like appearance. Perspective projection mimics how our eyes actually see the world: objects farther away appear smaller, parallel lines converge toward vanishing points, and depth becomes visually apparent. This is the difference between looking at a technical blueprint and looking through a window at the real world. To achieve true 3D perspective, we need three distinct transformation stages working together: the model matrix positions and orients our object in 3D space, the view matrix represents our camera's position and orientation, and the projection matrix defines how the 3D world gets flattened onto our 2D screen with realistic perspective distortion.

The Three Matrix Transformation Pipeline

Modern 3D graphics use a standardized three-matrix transformation pipeline that converts object coordinates through several coordinate spaces before reaching the screen. Each matrix serves a specific purpose in this chain of transformations. The model matrix transforms vertices from their local object space into world space, positioning and orienting the object within our 3D scene. The view matrix then transforms from world space into camera space, essentially moving the entire world relative to our camera's position and orientation. Finally, the projection matrix transforms from camera space into clip space, applying perspective distortion and defining what portion of the 3D world becomes visible on our 2D screen. This pipeline approach provides tremendous flexibility: we can move objects independently with their model matrices, position our camera anywhere in the world with the view matrix, and adjust our viewing frustum with the projection matrix, all without affecting each other.

Join the 1M+ learners on CodeSignal

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

Handling Dynamic Window Resizing

An important consideration when working with projection matrices is their dependency on the framebuffer's aspect ratio — as the window dimensions change, our projection matrix must adapt accordingly to maintain proper proportions.

When users resize the application window, we must therefore update our projection matrix to maintain the correct aspect ratio and prevent distortion. A callback function detects resize events and triggers projection matrix recalculation.

C++

void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    gFBW = width;
    gFBH = height;
    glViewport(0, 0, width, height);
    gProjUpdate = true;
}

// In the render loop, check for projection updates
if (gProjUpdate) {
    projection = glm::perspective(
        glm::radians(45.0f),
        static_cast<float>(gFBW) / static_cast<float>(gFBH),
        0.1f, 100.0f
    );
    glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(projection));
    gProjUpdate = false;
}

void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    gFBW = width;
    gFBH = height;
    glViewport(0, 0, width, height);
    gProjUpdate = true;
}

// In the render loop, check for projection updates
if (gProjUpdate) {
    projection = glm::perspective(
        glm::radians(45.0f),
        static_cast<float>(gFBW) / static_cast<float>(gFBH),
        0.1f, 100.0f
    );
    glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(projection));
    gProjUpdate = false;
}

The framebuffer callback updates our stored window dimensions and sets a flag indicating that the projection matrix needs recalculation. We also update the OpenGL viewport to match the new window size, ensuring our rendered image fills the entire window properly.

In the main render loop, we check for projection updates and recalculate the projection matrix with the new aspect ratio. This maintains the same field of view and depth range while adapting to the window's new proportions, preventing our 3D objects from appearing stretched or compressed when the window shape changes.

Building 3D Cube Geometry

To truly showcase our new 3D perspective system, we need genuine 3D geometry. Let's replace our flat square with a colorful cube that has actual depth and volume.

C++

float verts[] = {
    // Front face
    -0.5f, -0.5f,  0.5f, 1.0f, 0.0f, 0.0f, // front bottom left, red
     0.5f, -0.5f,  0.5f, 0.0f, 1.0f, 0.0f, // front bottom right, green
     0.5f,  0.5f,  0.5f, 0.0f, 0.0f, 1.0f, // front top right, blue
    -0.5f,  0.5f,  0.5f, 1.0f, 1.0f, 0.0f, // front top left, yellow
    
    // Back face
    -0.5f, -0.5f, -0.5f, 1.0f, 0.0f, 1.0f, // back bottom left, magenta
     0.5f, -0.5f, -0.5f, 0.0f, 1.0f, 1.0f, // back bottom right, cyan
     0.5f,  0.5f, -0.5f, 0.5f, 0.5f, 0.5f, // back top right, gray
    -0.5f,  0.5f, -0.5f, 1.0f, 0.5f, 0.0f  // back top left, orange
};

float verts[] = {
    // Front face
    -0.5f, -0.5f,  0.5f, 1.0f, 0.0f, 0.0f, // front bottom left, red
     0.5f, -0.5f,  0.5f, 0.0f, 1.0f, 0.0f, // front bottom right, green
     0.5f,  0.5f,  0.5f, 0.0f, 0.0f, 1.0f, // front top right, blue
    -0.5f,  0.5f,  0.5f, 1.0f, 1.0f, 0.0f, // front top left, yellow
    
    // Back face
    -0.5f, -0.5f, -0.5f, 1.0f, 0.0f, 1.0f, // back bottom left, magenta
     0.5f, -0.5f, -0.5f, 0.0f, 1.0f, 1.0f, // back bottom right, cyan
     0.5f,  0.5f, -0.5f, 0.5f, 0.5f, 0.5f, // back top right, gray
    -0.5f,  0.5f, -0.5f, 1.0f, 0.5f, 0.0f  // back top left, orange
};

Our cube consists of 8 vertices positioned at the corners of a unit cube centered at the origin. Each vertex includes both 3D position data and RGB color information, creating a vibrant, multi-colored cube where each corner displays a distinct color.

The front face vertices have positive Z coordinates (0.5), while the back face vertices have negative Z coordinates (-0.5), giving our cube actual depth along the Z-axis. This depth will become visually apparent once we apply perspective projection, as the front and back faces will appear at different distances from our camera.

Introduction

Understanding 3D Perspective

The Three Matrix Transformation Pipeline

Join the 1M+ learners on CodeSignal

Setting Up the View Matrix

Visualizing the Camera Space

Creating the Projection Matrix

Projecting the View Frustum

Handling Dynamic Window Resizing

Updating the Vertex Shader Pipeline

Managing Matrix Uniforms

Building 3D Cube Geometry

Defining Cube Face Triangles

Enabling Depth Testing

The 3D Perspective Result

Conclusion