常用光照类型基本概念工作原理及其计算公式
在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的各种材质效果。比如金属、玻璃、木质或石刻效果等。
本文做如下假定:
我们讨论的是基于像素着色(per-pixel basis),每个pixel有它自己的位置向量,法线向量以及表面颜色(Surface color,在这里可以是来自纹理的颜色,也可以是RGB颜色(flat color));
表面颜色(Surface color)通常是由R,G,B三部分组成,在这个教程中,我们把它当作一个向量看待;
输入表面颜色(光照处理前的表面颜色,这里的“输入”可以理解为函数的输入参数的“输入”)只是普通的颜色(单纯的纹理颜色或者RGB颜色),而输出表面颜色(光照处理后的表面颜色)是光照作用于表面的合成颜色,如可以是有阴影,高光等效果的颜色。
这个教程中假设每个场景中只有一个灯光。对于多灯光的场合,对每一个灯光循环进行这些运算(环境光除外)。
Ambient Lighting 环境光
在真实生活里,有光源的房子里的物体不会是全黑的,即使这个表面是背对光源的,这是因为有环境光(可看作是光线在环境中经过充分传播后所形成的一种无方向的全局均匀光照)。我们认为场景中的物体,不论它在什么位置,总会受到一定数量的环境光照射。环境光照算法如下:
输入 | 输出 |
Col – 物体原表面颜色 AmbAmount – 场景中环境光的强弱程度 (介于0 到 1之间) | SurfaceColor – 环境光照作用之后的表面颜色 SurfaceColor = Col*AmbAmount |
环境光照效果图:
Lambert Shading 漫射光
现在我们真正开始考虑一束光照射在物体表面上的作用过程,我们使用最常见的光照算法-------漫反射光照着色(或者说郎伯特余弦定律或郎伯特着色),这个算法是将入射光与表面法线向量的点积当作漫反射光照强度因子,下面我们看看环境光照与漫射光照共同作用的算法:
输入 | 输出 |
LCol – 照射在表面上的漫射光 Pos – 表面上被照射的位置 LPos – 漫射光源的位置 N -表面上被照射的位置处的法向量 Col –物体原表面颜色 AmbAmount -场景中环境光的强弱程度 (0 to 1) | SurfaceColor -环境光照与漫射光照共同作用之后的表面颜色 VectorToLight = Normalise(LPos - Pos); DiffuseFactor = Dot(VectorToLight, Normal); //DiffuseFactor ranges from 0 to 1 //光线与表面法线夹角大于90度,想像下光线在背面射过来,正面肯定没有光照 if(DiffuseFactor < 0) then DiffuseFactor = 0; //环境光照与漫射光照共同作用 SurfaceColor = Col*AmbAmount + Col*DiffuseFactor*LCol; |
环境光与漫射光共同作用效果
Specular Highlights 镜面高光
现在我们考虑物体表面有光泽的效果,这种效果是将Phong反射模型,结合前面两个光照作用而成。这中光照效果计算需要知道观察者在场景中的位置,而先前的环境光照与漫射光照效果计算都与观察者所在位置无关的。
这种光照计算是这样的,首先我们计算入射光在表面处的反射光线,然后再将反射光线与视线(观察者的眼睛与表面观察点的连线)之间的点积值当作反射到观察者眼中的光照强度因子,因为表面上高亮的部分是反射光线反射到观察者眼睛或照相机中较多的地方,这些地方的反射光线与视线之间的夹角非常小,点积值就越大。
输入 | 输出 |
ViewPos – 观察者的位置 SpecAmount – 镜面光强弱. (from 0 to about 200) SpecCol – 镜面光颜色(通常为白色). LCol – 照射在表面上的漫射光 Pos – 表面上被照射的位置 LPos – 漫射光源的位置 N -表面上被照射的位置处的法向量 Col –物体原表面颜色 AmbAmount -场景中环境光的强弱程度 (0 to 1) | SurfaceColor -环境光照,漫射光照与镜面光共同作用之后的表面颜色 DiffuseFactor = ... //经前两个光照作用得来的颜色 DirectionToViewer = Normalise(ViewPos - Pos); VectorToLight = Normalise(LPos - Pos); //计算反射光 ReflectanceRay = 2 * Dot(N, VectorToLight) * N - VectorToLight; //计算镜面光照因子. 数学公式 SpecFac = (R dot N)^Spec SpecularFactor = Pow(Dot(ReflectanceRay, DirectionToViewer), SpecAmount); //环境光照,漫射光照与镜面光共同作用 SurfaceColor = Col*AmbFactor + Col*DiffuseFactor*LCol + SpecCol*SpecularFactor; |
环境光照,漫射光照与镜面光共同作用
[ 注意:可以在一个场景中使用多个漫射光照与镜面光作用 ]
Fresnel Term 菲涅尔准则
菲涅尔效果是根据观察者的观察表面来调整反射率来实现的。比如你从水面,油漆表面或者丝绸的正上方看,反射光泽的柔和效果基本没有,如果侧着或平着看的话,反射光泽的柔和效果就很明显,这就是菲涅尔效果。我们简单地通过点积操作计算表明法线与视线之间夹角的余弦值,再将这个值加权。对于较平滑表面,加权系数设置在1.0-5.0之间(油漆效果,丝绸等),对于比较凹凸的表面,加权系数设置为8.0或更高(水波,液体等)
输入 | 输出 |
ViewPos – 观察者的位置 FresAmount – 边缘或表面的尖锐程度. (油漆丝绸:1,液体: 2-8) FresCol - frenel 反射光 (通常使用reflection map or 类似的东西). LCol – 照射在表面上的漫射光 Pos – 表面上被照射的位置 LPos – 漫射光源的位置 N -表面上被照射的位置处的法向量 Col –物体原表面颜色 AmbAmount -场景中环境光的强弱程度 (0 to 1 | SurfaceColor -环境光照,漫射光照与镜面光,菲涅尔反射共同作用之后的表面颜色 DiffuseFactor = ... //环境光照,漫射光照作用得来的颜色 SpecularFactor = ... //镜面高光作用得来的颜色 DirectionToViewer = Normalise(ViewPos - Pos); //计算fresnel因子. 我们计算视线与表面法向量间夹角的余弦值(在[-1..1]之间),然后加一,移动到区间[0..2],然后再加权。 FresnelTerm = Pow(Dot(N, DirectionToViewer)+1, FresAmount); //确保因子的在正常范围内 if (FresnelTerm > 1) then FresnelTerm = 1; //无菲涅尔反射的场合: Ambient light, Diffuse Light and Specular Light NonReflective = Col*AmbFactor + Col*DiffuseFactor*LCol + SpecCol*SpecularFactor; Reflective = FresCol; //环境光照,漫射光照与镜面光,菲涅尔反射共同作用 SurfaceColor = NonReflective*(1-FresnelTerm) + Reflective*FresnelTerm; |
漫射无菲涅尔反射时效果
漫射有菲涅尔反射时效果
- 相关文章
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published
We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...NodeJS、Java和PHP性能考量和若干参考结论
首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...
CSS3弹性布局弹性流(flex-flow)属性详解和实例
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...
通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
HTTP/2背景和新特性简介
计算WebGL中的uniforms变量使用数
在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...
WebGL入门教程1 - 3D绘图基础知识
现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...
如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合
如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
更多...