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

iefreer 发表于 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(2) negative(0) views1366 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


请先 登录 再评论.
相关文章
  • 2019年NodeJS框架Koa和Express选型比较

    Koa和Express都是NodeJS的主流应用开发框架。
    Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...

  • 3D场景中多相机拍摄的原理和意义

    一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
    3D相机渲染的基本原理是依靠颜色...

  • Blender2.7给平面模型添加纹理贴图

    在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

  • 深入理解CSS3滤镜(filter)功能和实例详解

    CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
    把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...

  • 使用HTML5 Canvas实现的界面元素截屏功能

    如果网站出现问题,常常需要截图来提交反馈,这个功能很实用。使用HTML5的Canvas可以实现这个目标。我们首先引入

  • HTTP1.1协议现状、问题和解决方案

    HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...

  • 纹理基础知识和过滤模式详解

    1、 为什么在纹理采样时需要texture filter(纹理过滤)。
    我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...

  • WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

    我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...

  • WebVR简介和常用资源链接

    什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...

  • Three.js入门教程2 - 着色器(上)

    之前我已经给出了一篇

  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...

  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...

  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Proce...

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 更多...