webgl 25.用点光源为正方体添加光照

前面两节我们用平行光为正方体添加了光照，这节我们用一个点光源来为正方体添加光照。

point lighted cube.png

平行光只需要一个光线方向和光线颜色就可以描述。而点光源的光线方向是不确定的，取决于点光源的位置和照射到物体上的位置。所以这里的重点是针对每个顶点重新计算光线方向。

我们要把点光源位置和 model matrix 传进去来计算每个顶点的光线方向

uniform vec3 u_LightPosition;
uniform mat4 u_ModelMatrix;

之后就可以计算出每个顶点的光线方向了

// 针对每个顶点计算光线方向
vec4 vertexPosition = u_ModelMatrix * a_Position;
vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));

现在的正方体看起来其实还不是特别的真实，因为只针对每个顶点计算了光线方向，最终的颜色在各个顶点之间进行了插值，而实际上正方体上每一个点上的光线方向都是不同的。要更加逼真的光照效果下节我们来看针对每个 fragment 计算光照。

完整代码

查看源码