模拟光源 html5,光照渲染——用canvas模拟光照效果

光照

我们能看到物体，是因为光照射在物体上然后反射到我们的眼睛当中。其中的影响因素非常多：观察者的位置、光源的位置、光的颜色、物体表面的颜色、材质和粗糙程度等等。以后我们将会详细探究如何模拟物体的材质，在这篇文章中我们只讨论光源。

平行光源

太阳的尺度相对地球来说非常大，所以可以认为从太阳照射来的光线都是平行的，即太阳是一个平行光源。

模拟平行光源的光照非常简单，当光垂直照射到平面上，即光线方向和平面呈90度角时，这时光照是最强的。如果照射的角度不断变大(或者说光线和平面的夹角不断变小)，光照也会随之变弱，当光线方向完全和平面平行时，这时没有光能照射到平面上，光强变成了0。

可以总结出，平行光的光照情况和两个方向有关：光线的方向和受光照平面的朝向。

我们用一个垂直于平面的向量去描述平面的朝向，在图形学中，一般把这个向量称为“法向量”。

我们可以用向量的“点乘”运算来计算光强变化。

点乘也叫数量积，是接受在实数R上的两个向量并返回一个实数值标量的二元运算。点乘运算规则非常简单，将两个向量对应坐标的乘积求和就行了。

这里我们计算的是三维向量，我们用数组来表示向量，写一个简单的方法来计算点乘：

/**

* 点乘运算

* @param {Array} v1 向量v1

* @param {Array} v2 向量v2

* @return {number} 点乘结果

*/

function dot( v1, v2 ) {

return v1[ 0 ] * v2[ 0 ] + v1[ 1 ] * v2[ 1 ] + v1[ 2 ] * v2[ 2 ];

}

还有几个重要的向量运算我们也会用到，在这里我们提前定义好，为减小篇幅，这里省略掉具体实现，代码可以看最后的实例源码。

/**</