WebGL学习笔记(八):光照

局部光照与全局光照

局部光照

只考虑光源到模型表面的照射效果,运算量较小;html

全局光照

考虑到环境中全部表面和光源相互做用的照射效果,即让没有直接受光照射的位置也会受周围反射光的影响,运算量较大;git

Phong反射模型

Phong光照模型是真实图形学中提出的第一个有影响的光照明模型,该模型只考虑物体对直接光照的反射做用,认为环境光是常量,没有考虑物体之间相互的反射光,物体间的反射光只用环境光表示。Phong光照模型属于简单光照模型。github

Phong光照模型是由环境反射、漫反射和镜面反射相互做用获得的光照效果。less

环境反射

环境光,是没有方向的光,也不考虑观察者的视线方向,能够直接做用于模型的每个点上,由于Phong反射模型是没有考虑物体之间相互的反射光的,因此使用环境光来简单的模拟一下物体之间相互的反射光;编辑器

漫反射

漫反射是模拟光照到粗糙的物体表面的效果,会考虑到光的射入方向,可是不考虑观察者的视线方向,垂直射入的光线会比斜着射入的光线更加的明亮;spa

点积的应用

对三角形面片的法线和漫反射的射入光线两个向量取点积,能够获得一个值(若是该值为0,表示两向量相互垂直),经过点积就能够肯定当前面片的光照亮度。3d

镜面反射

镜面反射是模拟光照到光滑的物体表面的效果,会产生明亮的斑点或强光,除了须要考虑到光的射入方向也要考虑观察者的视线方向;code

光泽度

光泽度也会影响到镜面反射的最终结果。htm

公式

ka为环境反射系数,kd为漫反射系数,ks为镜面反射系数,对全部特定光源求和,并有kd+ks=1。由上式看出,一旦反射光中三种份量的颜色以及它们的系数ka,kd和ks肯定之后,从景物表面上某点达到观察者的反射光颜色就仅仅和光源入射角和视角有关。所以能够说,Phong光照模型其实是纯几何模型。blog

若是有多个光线,则将每一个光线的结果进行累加便可。

代码实现

有两种方式来实现,一种是光照代码写在顶点着色器中,还有一种是光照代码写在片断着色器中,下面咱们分别看看两种方式的实现效果:

顶点着色器实现:https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_6/index.html

片断着色器实现:https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_7/index.html

经过上面的例子,能够看出来,因为顶点的数量较少,因此片断实现的光照更加的真实。

法线

咱们程序中,为每一个面指定了一个法线,在实际的使用中,通常来讲是每一个顶点都有一个法线;

法线可使用叉乘来进行运算:

// 能够经过下面的代码获取法线, a 和 b 两个向量能够肯定一个面,out即为该面的法线
glMatrix.vec3.cross(out, a, b)

法线通常在3D编辑器中输出模型时,就会存在了,通常不用再程序中运算;

光源的类型

常见的光源类型有下面3种:

点光源

通常是离模型较近的光源,向四周发射,好比室内的吊灯之类,咱们上面代码中已经实现;

平行光

通常是离模型较远的光源,只有一个方向,好比太阳光;

示例:https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_8/index.html

聚光灯

手电筒或汽车灯光之类的光源,锥形光源;

示例:https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_9/index.html