立方体添加点光源

添加平行光是直接定义光线照射物体的方向，点光源的光线是发散的，无法直接定义它的光线方向，不过只要定义好点光源的位置坐标，然后与某个顶点的位置坐标进行减法运算，计算结果就是光源射到该顶点的方向。 这很好理解，在三维空间中两个点确定一条直线，几何体顶点代表一个点，点光源的位置代表一个点，直线所在的方向就是光线的方向，在三维笛卡尔坐标系中，把两个顶点的xyz三个分量相减就可以得到一个表示直线方向的向量， 把该向量和顶点法向量作为dot()点积函数的参数，可以计算出光线入射角余弦值然后代入漫反射光照模型公式可以得到新的顶点颜色，渲染管线利用新的顶点颜色进行插值计算可以得到立方体表面每一个像素的值。

添加点光源位置、颜色数据

WebGL顶点着色器声明两个变量u_lightPosition、u_lightColor分别表示点光源的位置和颜色。

// uniform声明点光源颜色变量
uniform vec3 u_lightColor;
// uniform声明点光源位置变量
uniform vec3 u_lightPosition;

给点光源颜色变量u_lightColor、位置变量u_lightPosition传递数据。

/**
 * 传入点光源颜色数据、位置数据
 **/
gl.uniform3f(u_lightColor, 1.0, 1.0, 1.0);
gl.uniform3f(u_lightPosition, 2.0, 3.0, 4.0);

点光源与顶点方向计算

点光源的光线是发散的，点光源与每一顶点连线的方向都需要单独计算。

vec3(gl_Position) - u_lightPosition用来计算光线方向，然后利用内置函数 normalize()归一化向量数据，vec3(gl_Position)和gl_Position.xyz的写法是等效的，都是为了提取vec4类型顶点数据前三个分量，返回的数据类型是vec3，比如vec2(vec4)就是提取vec4的前两个分量。

// 计算点光源照射顶点的方向并归一化
vec3 lightDirection = normalize(vec3(gl_Position) - u_lightPosition);
// 计算平行光方向向量和顶点法向量的点积
float dot = max(dot(lightDirection, normal), 0.0);