添加环境光使正方体显示更真实

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

ambient light.png

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

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); }

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

思考：

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

查看源码