orillusion入门系列五 | 光照02
-
上一次了解到了光照的基本三类光源,这三类光源似乎在现实中不存在的,只是一种理想抽象,今天以光源为基础学习更多的光照功能,体验一下orilluson其它的光照功能。
现实生活中我们被各种光包围,在光源发出光之后,环境会吸收光,反射光,我们可以称之为环境光。今天我们将这些实际中会遇到的光照效果一一验证,通过orilluson可以入门3D的光照吗,带着疑问来动手作吧。太阳
场景作为一个空间的容器内置了天空的概念,天空中的太阳是直接光的典型元素,通常说的平行光在现实中很好的参照光源就是太阳。这里我们忽略场景的其它部分,就场景内置的太阳是环境光重要的一部分,现在来熟悉一下太阳的用法,这里要打起精神,竟然可以定制太阳。以我简陋的专业知识来推测,太阳似乎只是一个发光体加一个平行光源来实现的,既然引擎有这个便利的工具要实操起来。
我们先看一下太阳支持的主要参数:- displaySun:这是一个开关,是否显示太阳,经过实际测试后要特别注意,关闭后太阳的光照效果仍然存在,只是太阳本身的物体会隐藏。
- sunX:太阳本地的X坐标,调整这个参数太阳本体会移动,光照的方向和效果也会变化,与真实的太阳效果类似,配合Y坐标可以模拟太阳在天空移动的效果,所谓日升日落,斗转星移不在话下。
- sunY:与sunX类似,是太阳的Y坐标。
- sunRadius:设置太阳的半径。
- sunRadiance:曝光强度,默认是10,取值范围一般0至100,数值越大整个场景的光越强烈,数值越小整个场景越暗,直到为0时只有太阳有光亮,整个场景已经没有曝光度。
- sunBrightness:太阳本体的曝光强度,调整这个参数可以看到本体的亮度出现变化。
用法
AtmosphericScatteringSky 类是大气散射纹理,太阳的设置在这个类中,包括前面介绍的太阳参数。因为太阳是天空盒的属性,而天空盒一般加载在场景中,因此需要从场景开始。
这里只记录最核心的代码:// 创建一个场景对象 let scene3D:Scene3D = new Scene3D(); // envMap 是场景的环境贴图变量,这里将环境转换为大气散射类型 let sky = (scene.envMap as AtmosphericScatteringSky); // 以下参数可以参照前面的参数介绍 sky.sunX = 0.55; sky.sunY = 0.8; sky.eyePos = 3607; sky.sunRadius = 500; sky.sunRadiance = 0.8; sky.sunBrightness = 1; // ...
以上代码可以将一个场景的太阳进行配置,之后添加物体就会有阳光的可适配效果了。
GUIHelp
GUIHelp
是orilluson提供的一个界面调试工具,类似dat.gui的功能效果,所不同的是内部组件可供调试的组件已经封装在了各个组件中,所以如果要快速的借用引擎封装的调试功能推荐用这款工具。GUIHelp内部也是用dat.gui实现的,所以界面风格是一样的。GUIHelp的用法只需要引入对应的资源,调用GUIHelp.init()
初始化之后,就可以在需要的组件中开启和关闭调试了,具体哪些组件可以开启需要我们不断的去发现。
现在以GUIHelp工具开启天空盒太阳的设置效果,这样可以节省我们许多自定义的工作。// 初始化调试工具 GUIHelp.init() // 创建场景 let scene3D:Scene3D = new Scene3D(); // ... 配置天空盒 ... // 开启天空盒调试工具 scene3D.debugAtomSky();
以上代码只是关键的部分,领会思路就可以。
以下是运行效果:
其它
场景内还有参数可以配置环境光效果,例如scene.exposure设置曝光度,可以通过这个数值来动态的设置全场景的曝光强度。
全局光照
当学习到全局光照时我的心情即兴奋又悲伤,兴奋是因为场景内总是给人塑料感,缺乏真实感,全局光照效果让我感觉到真实而震撼,悲伤是这里面的理论太复杂,行业发展很快,不过好在这里不深入理论算法,只是借用引擎来体验效果,是不是显得容易多了。
所谓全局光照是与局部光照相对应的,通常认为全局光照是局部光照和间接光照的叠加。前面所介绍的由光直接照射效果称为局部光照,则物体反射而来的光为间接光照。
我们按照引擎全局光照的使用顺序展开配置项
全局光照的配置项路径在 Engine3D.engineSetting.globalIlluminationSetting 路径,支持的主要配置需要了解
- enable:全局光照的开关,默认是关闭的,如果需要使用全局光照,需要在初始化引擎是将该配置项设置为true。
- debug:调试全局光照组件开关,打开这个配置项在操作调试面板可以看到全局光照的参数,可以动态的调整,以前会显示探针的操作选项。
- offsetX:探针组的注册点在x轴的偏移量,关于探针后面会介绍。
- offsetY:探针组的注册点在y轴的偏移量。
- offsetZ:探针组的注册点在z轴的偏移量。
- probeXCount:探针在x轴的数量。
- probeYCount:探针在y轴的数量。
- probeZCount:探针在z轴的数量。
- indirectIntensity:间接光的光照强度,前面介绍了全局光照同时处理间接光照和反射,这个参数是对间接光照的强度设置。
- bounceIntensity:反射光的光照强度,是全局光照很重要的一个配置。
更多的参数可以参考官方文档
全局光照组件
全局光照功能引擎封装在了一个组件中GlobalIlluminationComponent,前面配置了全局光照相应的参数后,需要创建一个任意的Object3D容器对象,并将全局光照组件添加到对象中。此时再开启渲染时可以看到全局光照效果,但是全局光照比较耗费计算机性能,建议初始效果不要调的太明显。
示例代码
这里记录一下最基本的代码,避免完整的代码占用篇幅。
// 设置全局光照的配置 Engine3D.engineSetting.globalIlluminationSetting.enable = false; Engine3D.engineSetting.globalIlluminationSetting.debug = true; Engine3D.engineSetting.globalIlluminationSetting.probeYCount = 6; Engine3D.engineSetting.globalIlluminationSetting.probeXCount = 6; Engine3D.engineSetting.globalIlluminationSetting.probeZCount = 6; Engine3D.engineSetting.globalIlluminationSetting.probeSpace = 36; Engine3D.engineSetting.globalIlluminationSetting.offsetX = -4; Engine3D.engineSetting.globalIlluminationSetting.offsetY = 29; Engine3D.engineSetting.globalIlluminationSetting.offsetZ = 7; Engine3D.engineSetting.globalIlluminationSetting.indirectIntensity = 2; Engine3D.engineSetting.globalIlluminationSetting.probeSize = 32; Engine3D.engineSetting.globalIlluminationSetting.octRTSideSize = 32; Engine3D.engineSetting.globalIlluminationSetting.autoRenderProbe = true; // 需要打开阴影,并实时计算才能观察到效果 Engine3D.engineSetting.shadowSetting.shadowBound = 2; Engine3D.engineSetting.shadowSetting.shadowBias = -0.0008; Engine3D.engineSetting.shadowSetting.debug = false; Engine3D.engineSetting.shadowSetting.autoUpdate = true; Engine3D.engineSetting.shadowSetting.updateFrameRate = 1; // 其它初始化代码,例如相机,场景等 ... // 添加全局光照组件 let giObj= new Object3D(); giObj.addComponent(GlobalIlluminationComponent); scene.addChild(giObj); // 添加两个物体,具体代码省略,前面的相关代码太多了 ...
运行后效果如下:
这里我添加了一个立方体和一个球体,在中间白色的区域是开启了全局光照的范围,能够看到更有了真实感,调整右侧面板可以观察所有的参数效果。
阴影
有光自然有阴影,阴影需要配置的方面比较少,前面已经用过许多次这里专门记录一下使用思路。
阴影的配置
在尝试使用光照阴影相关的功能时,遇到过几个问题是因为对阴影的配置不了解,这里把遇到问题的配置项进行一个记录。
阴影的配置路径在Engine3D.engineSetting.shadowSetting下。- debug:调试开关,打开这个开关可以在控制面板操作参数值,仍然是依赖引擎的GUIHelp工具实现。
- autoUpdate:阴影是否自动更新,这个配置项非常重要,在试用光照阴影效果时尝试过移动物体但阴影不动,打开这个开会会自动更新阴影。
产生阴影
目前只有平行光源会产生阴影,平行光组件需要将castShadow打开,在物体材质上调整光照的角度会产生阴影的效果。
对比
普通阴影和全局光照的阴影效果有很大的差别,这里将两个效果做个对比,上面是普通阴影,下面是开启了全局光照的效果。
同样的材质和光照强度以及场景环境,下面加了全局光照有了更厚重逼真的感觉,这差距好比女人之间八卦产生的友谊和男人之间战斗建立的友谊一样大。小结
光照是非常核心又非常高级的部分,在3D中渲染效果的好坏以及性如何和对光的处理有直接的关系,从上一次的三种光源可以使场景内有光,根据不同的用途可不同的光源,到今天学习的环境光,使场景内有了一轮太阳,尽管这轮太阳是天空盒材质的,不过不影响我们把它当成一个光源,到最后的全局光照使的场景内的环境更真实逼真,全局光照还有许多特性和新技术,需要不断的去学习接受挑战。
作为3D新手,后续会不断的记录学习过程,期待与你一起学习一起飞!