结合上面几篇文章，我们现在来讲解今天课题 - 光照贴图；
像在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),把它应用到材质的镜面反射，那么计算中间这块区域的时候，表明这块区域的顶点颜色不受镜面光影响，也就反应了真实世界中木头没有镜面反光的效果，而边框是有颜色的，模拟的就是钢铁的镜面光反射效果。
我们看顶点着色器的改动：
效果如下图:
这里大家可以看出来，经过处理后，木头部分不受镜面光反射效果。钢边框是有镜面光反射效果的，这样就比较接近真实效果了。
最后结合之前的知识，我们让这个箱子旋转起来，效果如图：
完整代码已上传github，具体实现细节，代码中有详细注释，这里就不做赘述了。最后，动起手来，跟着一起实现效果吧。
