OpenGL高级版本学习日志4：网格光照渲染实战

1. 前言

在之前的两章内容，我们已经介绍了光照模型的使用以及三维模型的导入。接下来，我们希望利用这些内容，来编写一个简单的三维模型光照渲染程序，将光照效果施加在载入的三维模型上，如下图所示。左图为加入光照效果后的显示结果，可以看到三维模型的立体感更好。右图为没有光照的效果，可以看到失去了立体质感。那么接下来，我们就具体介绍下如何实现光照对模型的渲染。

2. 在shader中加入光照

我们首先介绍下顶点着色器的修改：

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
layout (location = 2) in vec2 aTexCoords;
layout (location = 3) in vec3 aObjectColor;

out vec3 FragPos;
out vec3 Normal;
out vec2 TexCoords;
out vec3 ObjectColor;

uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main()
{
    FragPos = vec3(model * vec4(aPos, 1.0));
    Normal = mat3(transpose(inverse(model))) * aNormal;  
    TexCoords = aTexCoords;
    ObjectColor = aObjectColor;   
    gl_Position = projection * view * model * vec4(aPos, 1.0);
}

相对上一章的内容，我们只是增加了颜色。在三维模型显示那一章，模型本身的颜色信息被纹理取代。这里，为了更加直观的看到光照渲染的信息，我们增加了颜色向量。在片段着色器，我们将用颜色替换纹理。

#version 330 core
out vec4 FragColor;

in vec3 Normal;  
in vec3 FragPos;  
in vec2 TexCoords;
in vec3 ObjectColor;

uniform vec3 lightPos; 
uniform vec3 viewPos; 
uniform vec3 lightColor;
uniform sampler2D texture_diffuse1;

void main()
{ 
    //ambient
    float ambientStrength = 0.3;
    vec3 ambient = ambientStrength * lightColor;
  	
    // diffuse 
    vec3 norm = normalize(Normal);
    vec3 lightDir = normalize(lightPos - FragPos);
    float diff = max(dot(norm, lightDir), 0.0);
    vec3 diffuse = diff * lightColor;
    
    // specular
    float specularStrength = 0.6;
    vec3 viewDir = normalize(viewPos - FragPos);
    vec3 reflectDir = reflect(-lightDir, norm);  
    float spec = pow(max(dot(viewDir, reflectDir), 0.0), 64);
    vec3 specular = specularStrength * spec * lightColor;
  
    vec3 lightCombination= (ambient + diffuse + specular) * ObjectColor;

    FragColor = vec4(lightCombination, 1.0);    
    //FragColor = texture(texture_diffuse1, TexCoords);

}

可以看到的是，我们在片段着色器中加入了光照模型，并最终得到每一点的颜色信息。为了方便起见，这里我们注释掉了纹理信息。

基于该片段着色器，我们渲染了几副图形学论文经常会用到的色差图，如下图所示。注：色差图基于测地距离计算获得。

如果我们将上述代码中最后的颜色赋值，叠加上纹理效果，那么最终我们就得到了带有纹理与光照组合的渲染，如下图所示。左图为加了光照的结果，右图为没有光照的结果。