Enhancing Surfaces with Normal Maps

Introduction

Welcome back to the sixth lesson of Realistic Lighting with the Phong Model! In our previous lesson, we successfully combined textures with lighting to create surfaces that display both rich visual detail and convincing three-dimensional illumination. Our textured cube now exhibits the complex interplay between material appearance and lighting that characterizes realistic rendering. However, while our textures provide color variation across surfaces, the underlying geometry remains perfectly smooth. Real-world materials exhibit surface irregularities like bumps, scratches, and fine details that catch and scatter light in complex ways. In this lesson, we'll learn to simulate these microscopic surface variations using normal mapping, a powerful technique that enhances perceived surface complexity without adding geometric detail. By manipulating surface normals through specialized textures called normal maps, we can create the illusion of intricate surface features that respond convincingly to lighting, transforming our smooth surfaces into materials that appear to have genuine physical depth and texture.

Understanding Normal Maps and Surface Detail

Normal mapping works by storing surface normal perturbations in a texture, allowing us to modify how light interacts with surfaces on a per-pixel basis . Unlike diffuse textures that store color information, normal maps contain encoded directional vectors that represent local variations in surface orientation. These variations create the illusion of bumps, grooves, and other surface features by altering the lighting calculations without changing the actual geometry . The technique is particularly powerful because it provides fine surface detail at minimal computational cost compared to increasing polygon density. When light hits a surface with a normal map, each pixel can have a slightly different normal vector, causing subtle variations in how light reflects and scatters. This creates the visual impression of surface roughness and complexity that our eyes interpret as real geometric detail, even though the underlying mesh remains geometrically simple.

Understanding Height Maps

There are many ways to create a normal map, but one of the most common is to start with a height map . A height map is a grayscale image where the brightness of each pixel represents the relative height or elevation of that point on the surface. Brighter pixels indicate raised areas, while darker pixels represent recessed or lower regions. This simple representation allows us to define surface variations across a 2D texture that can later be converted into directional information for lighting calculations. Here, we have taken our Cosmo texture and converted it to grayscale, effectively transforming it into a height map that captures the surface variations we want to simulate. The grayscale conversion preserves the essential contrast and detail from the original texture while providing the height information needed for normal map generation. Areas that were bright in the original texture remain bright in the height map, indicating raised surface features, while darker areas suggest depressions or valleys in the surface topology.

Join the 1M+ learners on CodeSignal

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

Fragment Shader Normal Map Sampling

Our fragment shader samples the normal map and transforms the retrieved normal from tangent space to world space for use in lighting calculations.

glsl

uniform sampler2D uNormalMap;
in mat3 vTBN;

void main() {
    vec3 texColor = texture(uTexture, vUV).rgb;
    
    // Sample normal map and convert from [0,1] to [-1,1]
    vec3 normalSample = texture(uNormalMap, vUV).rgb * 2.0 - 1.0;
    
    // Transform normal from tangent space to world space
    vec3 N = normalize(vTBN * normalSample);
    
    vec3 L = normalize(lightPos - vWorldPos);
    vec3 V = normalize(viewPos - vWorldPos);
    vec3 R = reflect(-L, N);
    // Continue with lighting calculations using modified normal...
}

uniform sampler2D uNormalMap;
in mat3 vTBN;

void main() {
    vec3 texColor = texture(uTexture, vUV).rgb;
    
    // Sample normal map and convert from [0,1] to [-1,1]
    vec3 normalSample = texture(uNormalMap, vUV).rgb * 2.0 - 1.0;
    
    // Transform normal from tangent space to world space
    vec3 N = normalize(vTBN * normalSample);
    
    vec3 L = normalize(lightPos - vWorldPos);
    vec3 V = normalize(viewPos - vWorldPos);
    vec3 R = reflect(-L, N);
    // Continue with lighting calculations using modified normal...
}

The normal map texture stores normal vectors in the range [0,1], so we convert them to the proper [-1,1] range using * 2.0 - 1.0. The sampled normalSample represents a perturbation in tangent space, where typically the Z component dominates (creating the characteristic blue color of normal maps), and the X and Y components represent surface variations. Multiplying the tangent space normal by the TBN matrix transforms it to world space coordinates, where our lighting calculations operate. The resulting world space normal N incorporates both the original surface orientation and the fine detail from the normal map. This modified normal is then used in all lighting calculations, creating the appearance of surface detail that responds naturally to light direction and viewer position.

Texture Binding in the Render Loop

Our rendering loop activates and binds both textures before drawing, ensuring that both the diffuse and normal map data are available to the fragment shader.

C++

while (!glfwWindowShouldClose(window)) {
    // Timing and input handling...
    
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    // Bind both textures to their respective units
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, diffuseTexture);
    glActiveTexture(GL_TEXTURE1);
    glBindTexture(GL_TEXTURE_2D, normalTexture);

    // Update uniforms and draw
    glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
    glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(camera.getViewMatrix()));
    glUniform3fv(viewPosLoc, 1, glm::value_ptr(camera.getPosition()));
    
    glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, 0);
}

while (!glfwWindowShouldClose(window)) {
    // Timing and input handling...
    
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    // Bind both textures to their respective units
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, diffuseTexture);
    glActiveTexture(GL_TEXTURE1);
    glBindTexture(GL_TEXTURE_2D, normalTexture);

    // Update uniforms and draw
    glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
    glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(camera.getViewMatrix()));
    glUniform3fv(viewPosLoc, 1, glm::value_ptr(camera.getPosition()));
    
    glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, 0);
}

We activate texture unit 0 and bind the diffuse texture, then switch to texture unit 1 and bind the normal map. This dual binding ensures that our fragment shader can simultaneously sample color from uTexture and normal perturbations from uNormalMap. The texture binding occurs before drawing but after clearing the framebuffer, maintaining the correct OpenGL state for rendering. Our uniform updates continue to provide the model matrix for object rotation, the view matrix for camera movement, and the camera position for specular highlight calculations. The combination of dual texture binding and proper uniform management provides all the data needed for normal-mapped Phong lighting.

Vertex Attribute Configuration for Extended Data

Our vertex attribute setup now handles the expanded vertex format that includes tangent vectors alongside the existing position, UV, and normal data.

C++

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

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

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

// Tangent attribute (location = 3)
glVertexAttribPointer(3, 3, GL_FLOAT, GL_FALSE, 11 * sizeof(float), (void *)(8 * sizeof(float)));
glEnableVertexAttribArray(3);

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

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

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

// Tangent attribute (location = 3)
glVertexAttribPointer(3, 3, GL_FLOAT, GL_FALSE, 11 * sizeof(float), (void *)(8 * sizeof(float)));
glEnableVertexAttribArray(3);

The vertex stride has increased to 11 floats per vertex to accommodate the additional tangent data. Each vertex attribute pointer extracts its specific data from the interleaved vertex array: positions at offset 0, UVs at offset 3, normals at offset 5, and tangents at offset 8. The tangent attribute at location 3 corresponds to the layout(location = 3) in vec3 aTangent declaration in our vertex shader. This configuration ensures that all necessary data reaches the vertex shader for TBN matrix construction. The careful alignment of vertex data layout with shader attribute locations is essential for proper normal mapping functionality.

Introduction

Understanding Normal Maps and Surface Detail

Understanding Height Maps

Join the 1M+ learners on CodeSignal

Creating a Normal Map

Tangent Space and the TBN Matrix

Extended Vertex Data with Tangent Vectors

Vertex Shader TBN Matrix Construction

Fragment Shader Normal Map Sampling

Loading Both Diffuse and Normal Textures

Texture Binding in the Render Loop

Vertex Attribute Configuration for Extended Data

Normal Map Lighting Only

Combined Texture and Normal Mapping

Conclusion