Computing Specular Highlights

Introduction

Welcome back to the fourth lesson of Realistic Lighting with the Phong Model! We've made excellent progress implementing ambient and diffuse lighting components, creating a cube that exhibits natural directional shading and three-dimensional depth. Now we're ready to add the final and most visually striking component: specular highlights . These bright, mirror-like reflections are what make surfaces appear shiny and wet, from the glint on a polished apple to the gleam on a metallic surface. Specular lighting responds to both the light source's position and the viewer's perspective, creating highlights that move and dance as we navigate around our scene. By the end of this lesson, we'll complete the full Phong lighting model, transforming our matte-looking cube into a surface with convincing material properties that responds realistically to both illumination and viewing angle.

Understanding Specular Highlights

Specular highlights represent the mirror-like reflection of light sources on surfaces, creating the bright spots that make materials appear glossy, wet, or metallic. Unlike diffuse lighting, which scatters uniformly in all directions, specular reflection follows the law of reflection: light bounces off the surface at the same angle it arrives, but in the opposite direction. This directional behavior means that specular highlights are highly dependent on the viewer's position relative to the surface and light source. When we look at a shiny ball, the bright highlight moves as we change our viewing angle because we're seeing the direct reflection of the light source. In computer graphics, we simulate this phenomenon by calculating the angle between the reflected light ray and the direction toward the viewer's eye, creating highlights that appear most intense when these directions align perfectly.

The Mathematics of Reflection

\mathbf{R} = 2(\mathbf{N} \cdot \mathbf{L})\mathbf{N} - \mathbf{L}

Join the 1M+ learners on CodeSignal

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

Complete Phong Model Integration

Our rendering pipeline now implements the complete Phong lighting model, combining all three components to create surfaces with convincing material properties and realistic light interaction.

C++

while (!glfwWindowShouldClose(window)) {
    float currentTime = (float)glfwGetTime();
    float deltaTime = currentTime - lastTime;
    lastTime = currentTime;
    
    camera.processInput(window, deltaTime);
    
    // Create rotating model matrix
    glm::mat4 model = glm::rotate(glm::mat4(1.0f), currentTime, glm::vec3(0, 1, 0));
        
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    // Update all uniforms including camera position
    glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
    glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(camera.getViewMatrix()));
    glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(projection));
    glUniform3fv(viewPosLoc, 1, glm::value_ptr(camera.getPosition()));

    glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, 0);
    glfwSwapBuffers(window);
    glfwPollEvents();
}

while (!glfwWindowShouldClose(window)) {
    float currentTime = (float)glfwGetTime();
    float deltaTime = currentTime - lastTime;
    lastTime = currentTime;
    
    camera.processInput(window, deltaTime);
    
    // Create rotating model matrix
    glm::mat4 model = glm::rotate(glm::mat4(1.0f), currentTime, glm::vec3(0, 1, 0));
        
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    // Update all uniforms including camera position
    glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
    glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(camera.getViewMatrix()));
    glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(projection));
    glUniform3fv(viewPosLoc, 1, glm::value_ptr(camera.getPosition()));

    glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, 0);
    glfwSwapBuffers(window);
    glfwPollEvents();
}

The render loop now updates the camera position uniform each frame alongside the view matrix, ensuring that specular highlights respond correctly to camera movement. As the cube rotates and we navigate around it using the WASD keys and arrow keys, the specular highlights create dynamic bright spots that move across the surface in a physically plausible manner. The combination of rotation and camera movement provides multiple opportunities to observe how specular highlights behave differently from the static ambient and diffuse components we've implemented in previous lessons.

uniform vec3 lightPos = vec3(2.0, 0.0, 3.0); uniform vec3 viewPos; uniform vec3 ambientLight = vec3(0.2); void main() { vec3 N = normalize(vNormal); vec3 L = normalize(lightPos - vWorldPos); vec3 V = normalize(viewPos - vWorldPos); vec3 R = reflect(-L, N); // Specular calculation continues... }

Introduction

Understanding Specular Highlights

The Mathematics of Reflection

Join the 1M+ learners on CodeSignal

Computing View Direction and Reflection Vector

Implementing Specular Calculation

Passing Camera Position to Shaders

Complete Phong Model Integration

Observing the Enhanced Lighting

Conclusion and Next Steps