10 - OpenGL学习之光照贴图

结合上面几篇文章，我们现在来讲解今天课题 - 光照贴图；
像在OpenGL ES学习之材质中讲述的那样，我们模拟的都是一个均匀物体的材质，但是现实世界中，物体的组成是很复杂的，物体的每部分的材质都不一样，比如一台汽车，车窗部分是玻璃的，可以反射周围的环境，但是轮胎表面很粗糙，不会那么有光泽，所以它没有镜面高光。所以光依靠上述文章中的材质是无法模拟现实生活中的物体的。
在这里我们要拓展之前的文章，引入漫反射贴图和镜面光贴图。

示例代码已上传github

漫反射贴图

我们希望通过某种方式对物体的每个片段单独设置漫反射颜色。有能够让我们根据片段在物体上的位置来获取颜色值得系统吗？
这听起来很像在上篇文章中详细讨论过的纹理，通过纹理，我们可以对不同的片段设置不同的漫反射颜色，在光照场景中，我们称这个纹理为 漫反射贴图。
下面我们使用下面的图片，来模拟绘制一个立方体的木箱，这个是带有钢边框的。

漫反射贴图

顶点着色器如下：

#version 300 es 
precision mediump float;

struct Material {
    sampler2D diffuseMap;
    vec3 specular;
    float shineness; //高光反射

};

struct Light {
    vec3 diffuse;
    vec3 specular;
    vec3 ambient;

};

uniform Material material;
uniform Light light;

//光源位置
uniform vec3 lightPos;

//观察点（摄像机位置）
uniform vec3 viewPos;

//顶点位置（世界空间坐标系）
in vec3 fragPos;

//垂直于顶点的法线向量(世界空间坐标系)
in vec3 N;

in vec2 oTextCoord;

out vec4 fragColor;

void main() {
    //计算环境光照(漫反射贴图也用于环境反射)
    vec3 ambient = light.ambient *  vec3(texture(material.diffuseMap, oTextCoord));

    //计算漫反射
    vec3 norm = normalize(N);

    vec3 lightDirection = normalize(lightPos - fragPos);

    float diffu  = max(dot(norm,lightDirection), 0.0);

    vec3 diffuse = light.diffuse * diffu * vec3(texture(material.diffuseMap, oTextCoord));

    //计算环境反射
    vec3 viewDirection = normalize(viewPos - fragPos);

    vec3 reflectDirection =  reflect(-lightDirection,norm);

    float spec = pow( max(dot(viewDirection, reflectDirection), 0.0), material.shineness);
    vec3 specular = light.specular * spec * material.specular;

    fragColor = vec4((ambient + diffuse + specular), 1.0);
    
}

注意：
1.这里我们将材质中的环境光照和漫反射光照用2D纹理diffuseMap代替，在计算环境光照的时候，不要忘记了用diffuseMap采样纹理像素。

效果如下图：

漫反射贴图

这个时候可以看出来，已经有一些比较真实的效果了，但是这里有一个问题，就是木头的镜面反光太亮了，在真实世界中，木头应该对于光照的镜面高光是没有太大的效果的。所以这里需要对这个地方进行改进，这个就要用到镜面光贴图。

镜面光贴图

这里我们镜面光贴图是采用的下面的这张纹理：

镜面光贴图素材

这里我们可以看到这样图很有特点，中间的正方形是黑色的，边框模拟出裂纹等细节，我们学到这里可以知道，黑色的取样色素表示是vec(0.0,0.0,0.0),把它应用到材质的镜面反射，那么计算中间这块区域的时候，表明这块区域的顶点颜色不受镜面光影响，也就反应了真实世界中木头没有镜面反光的效果，而边框是有颜色的，模拟的就是钢铁的镜面光反射效果。
我们看顶点着色器的改动：

改变1

改动2

效果如下图:

镜面光贴图

这里大家可以看出来，经过处理后，木头部分不受镜面光反射效果。钢边框是有镜面光反射效果的，这样就比较接近真实效果了。

最后结合之前的知识，我们让这个箱子旋转起来，效果如图：

旋转

完整代码已上传github，具体实现细节，代码中有详细注释，这里就不做赘述了。最后，动起手来，跟着一起实现效果吧。