webgl 23.为正方体添加环境光

上一节我们给正方体添加了漫反射，但物体背光的部分几乎完全是黑色的，我们可以再添加环境光让物体显示的更真实。

ambient light.png

非常简单了，直接把环境光加上就行了

<script id="vertex-shader" type="glsl">
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    attribute vec3 a_Normal;
    uniform vec3 u_LightColor;
    uniform vec3 u_LightDirection;
    uniform vec3 u_AmbientLight;
    uniform mat4 u_mvpMatrix;
    varying vec4 v_Color;

    void main() {
        gl_Position = u_mvpMatrix * a_Position;
        // 标准化（把长度变为 1 ）
        vec3 normal = normalize(a_Normal);
        float nDotL = max(dot(u_LightDirection, normal), 0.0);
        vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;
        vec3 ambient = u_AmbientLight * a_Color.rgb;
        v_Color = vec4(diffuse + ambient, a_Color.a);
    }
</script>

var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
// 设置环境光
gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);

思考：

1. 现在我们是针对每个顶点计算光照，光照后的颜色值还是会进行插值。要进行更加逼真的光照效果，可以在 fragment shader 中针对每个 fragment 计算光照，但这样性能肯定会有影响。

查看源码