上一节我们给正方体添加了漫反射，但物体背光的部分几乎完全是黑色的，我们可以再添加环境光让物体显示的更真实。
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);
思考：
- 现在我们是针对每个顶点计算光照，光照后的颜色值还是会进行插值。要进行更加逼真的光照效果，可以在 fragment shader 中针对每个 fragment 计算光照，但这样性能肯定会有影响。
