学习OpenGL ES for Android（十二）— 光照贴图

待我称王封你为后i 2023-06-25 10:24 18阅读 0赞

在之前文章中，我们模拟了物体的独特的光照特效，但是在一个面上所有点的效果都是一样的，显然和现实情况还有差距。在现实世界中，大部分物体的表面都是有不同材质的，对光的反应也不相同。在光照场景中，通常有**漫反射**和**镜面光**贴图(Map)两种方式，来精确控制物体的漫反射分量和镜面光分量以模拟现实世界的物体。

### 漫反射贴图 ###

现在我们使用纹理来代替前面的纯色实现立方体的面，然后显示光照的效果。我们使用下面这样一幅图片来作为立方体的面，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70][]

这样显示出来的效果应该类似一个木箱。我们修改上篇的代码，在材质结构图中，把diffuse定义为sampler2D，并去掉ambient，且不再定义物体的颜色，

struct Material {
        sampler2D diffuse;
        vec3 specular;
        float shininess;
    };

计算结果时使用纹理的像素颜色（不包括透明度）来计算，

// 环境光照
        vec3 ambient = light.ambient* texture2D(material.diffuse, TextCoord).rgb;
        // 漫反射光照
        // 归一化光源线
        vec3 lightDir = normalize(light.position - fragPos);
        float diff = max(dot(norm, lightDir), 0.1);
        vec3 diffuse = diff * light.diffuse * texture2D(material.diffuse, TextCoord).rgb;
    
        // 镜面光照
        vec3 viewDir = normalize(-fragPos);
        vec3 reflectDir = reflect(-lightDir, norm);
        float spec = pow(max(dot(viewDir, reflectDir), 0.1), material.shininess);
        vec3 specular = spec * light.specular * material.specular;
        // 结果，使用ambient,diffuse,specular相加则为结合的效果
        vec3 result = ambient + diffuse + specular;
    
        gl_FragColor = vec4(result, 1.0);

此时光照的效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 1][]

### 镜面光贴图 ###

这时已经非常接近现实世界的物体光照效果了，但是我们看到箱子每个点的光照效果都相同，但是事实上应该不相同。我们看到箱子的中间部分是木头，周围的边框是钢铁，钢铁的反射是比木头的反射大得多的，此时我们需要引入镜面光贴图。先看下使用的贴图图片，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 2][]

使用这张图片的像素点计算时，黑色的部分没有反光，越是接近白色反光越大(实际上木头也有反光度的，这里我们暂时设置为黑色了，也可以自己把黑色ps为灰色的测试）。在代码方面，同样的我们定义specular为sampler2D，在计算镜面光照时使用我们的镜面贴图计算，关键代码如下，

struct Material {
        sampler2D diffuse;
        sampler2D specular;
        float shininess;
    };
    ...
    void main() {
        // 环境光照
        vec3 ambient = light.ambient* texture2D(material.diffuse, TextCoord).rgb;
        // 漫反射光照
        // 归一化光源线
        vec3 lightDir = normalize(light.position - fragPos);
        float diff = max(dot(norm, lightDir), 0.0);
        vec3 diffuse = diff * light.diffuse * texture2D(material.diffuse, TextCoord).rgb;
    
        // 镜面光照
        vec3 viewDir = normalize(-fragPos);
        vec3 reflectDir = reflect(-lightDir, norm);
        float spec = pow(max(dot(viewDir, reflectDir), 0.0), material.shininess);
        vec3 specular = spec * light.specular * texture2D(material.specular, TextCoord).rgb;
        // 结果
        vec3 result = ambient + diffuse + specular;
    
        gl_FragColor = vec4(result, 1.0);
    }

此时运行的效果如下，我们看到边缘的光照比较明显，中间的光线比较弱

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 3][]

本章对应文档[https://learnopengl-cn.github.io/02%20Lighting/04%20Lighting%20maps/][https_learnopengl-cn.github.io_02_20Lighting_04_20Lighting_20maps]，源码地址[https://github.com/jklwan/OpenGLProject/blob/master/sample/src/main/java/com/chends/opengl/renderer/light/LightMapsRenderer.java][https_github.com_jklwan_OpenGLProject_blob_master_sample_src_main_java_com_chends_opengl_renderer_light_LightMapsRenderer.java]

PS：因为着色器的代码比较多，把着色器的代码放到raw资源文件下了（也可以放在assets下，只是引入方式不同），这里推荐安装GLSL的插件GLSL Support。

练习题中改变镜面光贴图的图片，图片如果是彩色的，箱子被照到也会显示彩色；添加放射光贴图，见源码运行效果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191228151653989.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019122815274132.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191228160716365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191228160649186.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg==,size_16,color_FFFFFF,t_70
[https_learnopengl-cn.github.io_02_20Lighting_04_20Lighting_20maps]: https://learnopengl-cn.github.io/02%20Lighting/04%20Lighting%20maps/
[https_github.com_jklwan_OpenGLProject_blob_master_sample_src_main_java_com_chends_opengl_renderer_light_LightMapsRenderer.java]: https://github.com/jklwan/OpenGLProject/blob/master/sample/src/main/java/com/chends/opengl/renderer/light/LightMapsRenderer.java