常用光照类型基本概念工作原理及其计算公式

techbrood 发表于 2018-11-16 15:09:01

标签: webgl, light, color

- +

在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的各种材质效果。比如金属、玻璃、木质或石刻效果等。


本文做如下假定:


  • 我们讨论的是基于像素着色(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


环境光照效果图:

 ambient.png

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;


环境光与漫射光共同作用效果

 diffuse.png

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;


环境光照,漫射光照与镜面光共同作用

specular.png

[ 注意:可以在一个场景中使用多个漫射光照与镜面光作用 ]

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;


 diffuse2.png

漫射无菲涅尔反射时效果                    

fresnel.png

漫射有菲涅尔反射时效果


possitive(4) views4982 comments2

发送私信

最新评论

iefreer 2018-11-16 15:51:26

菲涅尔方程推导说明:https://www.brown.edu/research/labs/mittleman/sites/brown.edu.research.labs.mittleman/files/uploads/lecture13_0.pdf


iefreer 2018-11-16 15:37:37

https://en.wikipedia.org/wiki/Fresnel_equations


请先 登录 再评论.
相关文章
  • ARCore基本概念和工作原理简介

    谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...

  • WebGL、Asm.js和WebAssembly概念简介

    随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

  • JavaScript事件模型图解

    在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
    event是用户操作网页时发生的交互动作,比如clic...

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

  • 使用SVG和CSS3创建圆形进度条动画

    圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • 如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象

    我们之前使用CSS3实现过

  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...

  • inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...

  • 更多...