上一節(jié)我們給正方體添加了漫反射，但物體背光的部分幾乎完全是黑色的，我們可以再添加環(huán)境光讓物體顯示的更真實。

ambient light.png

非常簡單了，直接把環(huán)境光加上就行了

<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;
        // 標準化（把長度變?yōu)?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');
// 設置環(huán)境光
gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);

思考：

1. 現(xiàn)在我們是針對每個頂點計算光照，光照后的顏色值還是會進行插值。要進行更加逼真的光照效果，可以在 fragment shader 中針對每個 fragment 計算光照，但這樣性能肯定會有影響。

查看源碼