Loading and Applying Textures

Introduction

Welcome back to Interactive Camera and Texturing! We've reached lesson 3, marking significant progress in our journey through interactive 3D graphics. In our previous lessons, we built a robust camera system that responds to both movement and look controls, allowing us to navigate through 3D space with complete freedom. Now, we're ready to take the next major step: bringing our 3D scenes to life with textures . Texturing transforms plain geometric surfaces into visually rich objects that can represent real-world materials, patterns, or artistic designs. Today, we'll learn how to load external images, apply them to 3D geometry, and integrate texture mapping seamlessly with our existing camera system to create compelling visual experiences.

Understanding Texture Mapping Fundamentals

Texture mapping is the process of applying 2D images onto 3D surfaces to create the illusion of detail and material properties. Think of it like wrapping a photograph around a box: the image gets stretched and positioned to cover the geometric surface. In computer graphics, we accomplish this through UV coordinates (also called ST coordinates), which create a mapping between 2D image pixels and 3D surface points. The term UV represents the coordinate system of the texture image, where U is the horizontal axis and V is the vertical axis. They are labeled this way to avoid confusion with other coordinate axes. These coordinates typically range from 0.0 to 1.0, where (0,0) represents the bottom-left corner of the image and (1,1) represents the top-right corner. By assigning UV coordinates to each vertex of our geometry, we tell the GPU exactly how to stretch and position the texture across our 3D surfaces.

Updating Vertex Data for Texture Coordinates

To enable texture mapping, we must expand our vertex data to include UV coordinates alongside position information. Previously, our vertex data included RGB color values for each vertex to specify its color. Now, we replace those RGB values with UV coordinates, which will be used to map the texture image onto the geometry. Our enhanced vertex array now contains five values per vertex: C++ float verts[] = {// Front face -0.5f, -0.5f, 0.5f, 0.0f, 0.0f, // bottom left 0.5f, -0.5f, 0.5f, 1.0f, 0.0f, // bottom right 0.5f, 0.5f, 0.5f, 1.0f, 1.0f, // top right -0.5f, 0.5f, 0.5f, 0.0f, 1.0f, // top left // ... additional faces with UV coordinates}; Each vertex now includes three position values (X, Y, Z) followed by two UV values (U, V). For the front face, notice how the UV coordinates form a square mapping: bottom-left (0,0), bottom-right (1,0), top-right (1,1), and top-left (0,1). This creates a direct correspondence between the texture image and the face geometry, ensuring the image appears correctly oriented on the surface.

Join the 1M+ learners on CodeSignal

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

C++

glBindVertexArray(vao);
glBindBuffer(GL_ARRAY_BUFFER, vbo);
glBufferData(GL_ARRAY_BUFFER, sizeof(verts), verts, GL_STATIC_DRAW);

// Position attribute (location = 0)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void *)0);
glEnableVertexAttribArray(0);

// UV attribute (location = 1)
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void *)(3 * sizeof(float)));
glEnableVertexAttribArray(1);

glBindVertexArray(vao);
glBindBuffer(GL_ARRAY_BUFFER, vbo);
glBufferData(GL_ARRAY_BUFFER, sizeof(verts), verts, GL_STATIC_DRAW);

// Position attribute (location = 0)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void *)0);
glEnableVertexAttribArray(0);

// UV attribute (location = 1)
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void *)(3 * sizeof(float)));
glEnableVertexAttribArray(1);

glsl

#version 450 core
layout(location = 0) in vec3 aPos;
layout(location = 1) in vec2 aUV;

uniform mat4 uModel;
uniform mat4 uView;
uniform mat4 uProjection;
out vec2 vUV;

void main() {
    vUV = aUV;
    gl_Position = uProjection * uView * uModel * vec4(aPos, 1.0);
}

#version 450 core
layout(location = 0) in vec3 aPos;
layout(location = 1) in vec2 aUV;

uniform mat4 uModel;
uniform mat4 uView;
uniform mat4 uProjection;
out vec2 vUV;

void main() {
    vUV = aUV;
    gl_Position = uProjection * uView * uModel * vec4(aPos, 1.0);
}

glsl

#version 450 core
in vec2 vUV;
out vec4 FragColor;

uniform sampler2D uTexture;

void main() {
    FragColor = texture(uTexture, vUV);
}

#version 450 core
in vec2 vUV;
out vec4 FragColor;

uniform sampler2D uTexture;

void main() {
    FragColor = texture(uTexture, vUV);
}

C++

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

C++

// Load image using stb_image
stbi_set_flip_vertically_on_load(true);
int width, height, nrChannels;
unsigned char *data = stbi_load("texture.jpg", &width, &height, &nrChannels, 0);
if (data)
{
    GLenum format = (nrChannels == 4) ? GL_RGBA : GL_RGB;
    // ... texture creation code follows
}
else
{
    std::cerr << "Failed to load texture" << std::endl;
}

// Load image using stb_image
stbi_set_flip_vertically_on_load(true);
int width, height, nrChannels;
unsigned char *data = stbi_load("texture.jpg", &width, &height, &nrChannels, 0);
if (data)
{
    GLenum format = (nrChannels == 4) ? GL_RGBA : GL_RGB;
    // ... texture creation code follows
}
else
{
    std::cerr << "Failed to load texture" << std::endl;
}

C++

GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);

// Set texture wrapping/filtering options
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);

GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);

// Set texture wrapping/filtering options
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);

C++

// Get the location of the texture sampler uniform in the shader
GLint texLoc = glGetUniformLocation(shaderProgram, "uTexture");

// Bind texture
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture);

// Set texture uniform
glUniform1i(texLoc, 0); // Texture unit 0

// Render geometry
glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, 0);

// Get the location of the texture sampler uniform in the shader
GLint texLoc = glGetUniformLocation(shaderProgram, "uTexture");

// Bind texture
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture);

// Set texture uniform
glUniform1i(texLoc, 0); // Texture unit 0

// Render geometry
glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, 0);

C++

glBindVertexArray(vao);
glBindBuffer(GL_ARRAY_BUFFER, vbo);
glBufferData(GL_ARRAY_BUFFER, sizeof(verts), verts, GL_STATIC_DRAW);

// Position attribute (location = 0)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void *)0);
glEnableVertexAttribArray(0);

// UV attribute (location = 1)
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void *)(3 * sizeof(float)));
glEnableVertexAttribArray(1);

glsl

#version 450 core
layout(location = 0) in vec3 aPos;
layout(location = 1) in vec2 aUV;

uniform mat4 uModel;
uniform mat4 uView;
uniform mat4 uProjection;
out vec2 vUV;

void main() {
    vUV = aUV;
    gl_Position = uProjection * uView * uModel * vec4(aPos, 1.0);
}

glsl

#version 450 core
in vec2 vUV;
out vec4 FragColor;

uniform sampler2D uTexture;

void main() {
    FragColor = texture(uTexture, vUV);
}

C++

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

C++

// Load image using stb_image
stbi_set_flip_vertically_on_load(true);
int width, height, nrChannels;
unsigned char *data = stbi_load("texture.jpg", &width, &height, &nrChannels, 0);
if (data)
{
    GLenum format = (nrChannels == 4) ? GL_RGBA : GL_RGB;
    // ... texture creation code follows
}
else
{
    std::cerr << "Failed to load texture" << std::endl;
}

C++

GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);

// Set texture wrapping/filtering options
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);

C++

// Get the location of the texture sampler uniform in the shader
GLint texLoc = glGetUniformLocation(shaderProgram, "uTexture");

// Bind texture
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture);

// Set texture uniform
glUniform1i(texLoc, 0); // Texture unit 0

// Render geometry
glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, 0);

Introduction

Understanding Texture Mapping Fundamentals

Updating Vertex Data for Texture Coordinates

Join the 1M+ learners on CodeSignal

Configuring Vertex Attributes for UV Data

Modifying the Vertex Shader for Texture Support

Creating the Fragment Shader for Texture Sampling

Setting Up the STB Image Library

Loading Images with STB Image Library

Creating and Configuring OpenGL Texture Objects

Integrating Textures with the Rendering Pipeline

Complete Application with Textured Camera Navigation

Conclusion and Next Steps