WebGL中光照模型

一、目的

       在场景内模拟出几道光源，这些光源本身不需要是可见的，但它们发出的光必须能够作用于3D物体的表面，让物体面对光源的那一侧显得明亮，同时背对光源的部分变得阴暗。要指定一系列的光源，然后让这些光源可以作用于我们 的3D场景内的任何一个部分。  

二、实现技术    

       WebGL是通过向着色器中写入代码实现这些效果的。更进一步的说，要做的就是向顶点着色器和片元着色器写入代码来处理光照。需要计算出光照对每个顶点的影响，并以此来调整顶点的颜色。

       逐顶点光照：基于每个顶点来处理光照效果，顶点间像素的光照效果都是由线性插值来实现

       逐像素光照（逐片元光照）：每个像素都独立计算出光照效果

 

       光照类型

       一种是从特定方向射入并只会照亮面对入射方向的物体，我们称之为平行光（directional light）。

       一种是来自所有方向并且会照亮所有物体，不管这些物体的朝向如何，我们称之为环境光（ambient light）。当然在真实世界里，这只是平行光照到其他物体上，比如空气、灰尘等等，然后反射出来的散射而已。需要把它单独作为一个光照模型列出来。

      

       反射类型

       漫反射（Diffuse）：无论光的入射角度如何，都会向所有方向发生反射。反射光的亮度只和光线的入射角度有关，与观察角度无关。光线越平行于 物体表面，则反射光越弱，表面越暗；光线越垂直于表面，反射光越强，表面越亮。漫反射是我们通常想到一个物体受到光照时需要首先想到的。

       镜面反射（Specular）：这就像镜子一样，反射光将按照和入射角相同的角度反射出来。这种情况下，你看到的物体反射出来的光的亮度，取决于 你的眼睛和光反射的方向是否在同一直线上；也就是说，反射光的亮度不仅与光线的入射角有关，还与你的视线和物体表面之间的角度有关。镜面反射通常会造成物 体表面上的“闪烁”和“高光”现象，镜面反射的强度也与物体的材质有关，无光泽的木材很少会有镜面反射发生，而高光泽的金属则会有大量镜面反射。

 

      法向量随着模型视图矩阵变换而变换。默认模型每个点的法向量已经有了，模型的移动和缩放不应该改变法向量，旋转会改变法向量。所以要对法向量进行处理，去掉平移缩放对它的影响，而保留旋转对法向量的改变。

      var normalMatrix = mvMatrix.inverse().transpose();

      让法线向量永远指向正确方向的正规解决方法是：使用模型视图矩阵的左上角3×3矩阵的逆转置矩阵，这样可以去掉矩阵中非正交的因素。形象的说, 就是只保留旋转，而不能对向量做缩放和移动，否则会这会改变向量的方向，这并不是变换矩阵想要做的。

     

      光照反射模型：

      Lambertian reflection model（朗伯光照反射模型）只考虑了光照的漫反射情况，没有考虑环境光和镜面反射；与之相对应的是Phong reflection model相对应，考虑了环境光、漫反射以及镜面反射。

      着色法：
      Goraud shading(高洛德着色法)是在顶点着色器中计算顶点颜色，然后将顶点颜色通过varying变量插值传递给片元着色器，是对color进行插值；Phong shading（冯氏着色法）是在顶点着色器中将顶点的法向量normal通过varying变量插值传递给片元着色器，然后在片元着色器中根据插值生成 的normal以及其他信息生成颜色，是对normal进行插值。

http://blog.csdn.net/sunqunsunqun/article/details/8576339

 

http://blog.csdn.net/doctorsc/article/details/6287059?reload

 

 

补充知识：

向量运算：

点积：

 

叉积：又称为向量积。

向量积|c|=|a×b|=|a| |b|sin<a,b>

即c的长度在数值上等于以a，b，夹角为θ组成的平行四边形的面积。

c的方向垂直于a与b所决定的平面，c的指向按右手规则从a转向b来确定。

a×b=(aybz-azby)i+(azbx-axbz)j+(axby-aybx)k,为了帮助记忆，利用三阶行列式，写成

|i j k |

|ax ay az|

|bx by bz|

 

逆矩阵：设A是数域上的一个n阶方阵，若在相同数域上存在另一个n阶矩阵B，使得： AB=BA=E。 则我们称B是A的逆矩阵，而A则被称为可逆矩阵。

 

转置矩阵：把矩阵A的行换成相应的列，得到的新矩阵称为A的转置矩阵，记作A'或A。