常用光照类型基本概念工作原理及其计算公式
在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的各种材质效果。比如金属、玻璃、木质或石刻效果等。
本文做如下假定:
我们讨论的是基于像素着色(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; |
漫射无菲涅尔反射时效果
漫射有菲涅尔反射时效果
- 相关文章
踏得网精选2016年度10大最佳HTML5动画
踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...
A-Frame WebVR(网页虚拟现实)快速开发入门教程
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的
CSS3原生变量(Native Variables)新特性简介
对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效
在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
我们...HTML5动画背后的数学2 - 仿生智能算法综述
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...
粒子运动模拟 - Verlet积分算法简介
Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...
WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解
我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...
Three.js入门教程2 - 着色器(下)
这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。
Three.js入门教程2 - 着色器(上)
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
Three.js 开发基础知识 - 绘制3D对象
Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...
更多...