咨询电话:400-810-1418服务与监督电话:400-810-1418转接2
  • 相关推荐
  • 大气渲染技术解析!如何在游戏中模拟出千变万化的天空?
  • 如何利用Unity3D打造虚拟现实场景?
  • U3D实时渲染教程之角色头发各向异性表达(上)
  • 引擎里面常见的渲染方式分享
  • 如何用mapbox几分钟做一张分析图?
  • Unity制作魔法火焰特效图文教程
  • U3D实时渲染教程之角色头发各向异性表达(下)

    发布时间:2020-09-21 10:26:51

    大家好,我是麦田。上次跟大家分享了 U3D实时渲染教程之角色头发各向异性表达(上)  ,今天带来后半部分U3D实时渲染教程之角色头发各向异性表达(下)。

    1、回顾

    接上次一说到,我们知道了公式,回忆一下:

    1.png

    也用图表搞了一个简单的光照模型。

    2.png

    我对公式重新简单梳理:

    3.webp.jpg

    上次有看官留言到:

    4.png4-2.png

    这里讲一下为什么会选择副切线,因为头发的UV是从V方向铺开的。

    2、运用

    透明是一切混乱的开端。

    这里读者必须要理解几个概念:

    深度写入

    颜色写入

    深度测试

    渲染队列

    渲染排序

    这里没法花很大的篇幅讲解,具体直接看乐乐入门书的第8章

    只能简单的概括一下,对于半透的东西,渲染排序是很严谨的。透明物体的渲染一直是图形学方面比较蛋疼的地方。

    对于透明物体的渲染,就不能像渲染不透明物体那样多快好省,因为透明物体不会写深度,也就是说透明物体之间的穿插关系是没有办法判断的,所以半透明的物体在渲染的时候一般都是采用从后向前的方法进行渲染。

    由于透明物体多了,透明物体不写深度,那么透明物体之间就没有所谓的可以通过深度测试来剔除的优化,每个透明物体都会走像素阶段的渲染,会造成大量的Over Draw。这也就是粒子特效特别耗费性能的原因。

    5.png

    下面,我开了双Pass来解决渲染次序这个问题,即:

    第一个Pass只渲染背面关闭深度

    第二个Pass只渲染正面开启深度

    由于Unity会顺序执行SubShader中的各个Pass,因此我们可以保证背面总是在正面被渲染之前渲染,从而可以保证正确的深度渲染关系。

    6-1.png6-2.png

    对于不会代码的美术同学,没关系,贴心的ASE具备双Pass的功能(虽然最多只支持到双Pass,我觉得挺良心了)

    7.png

    Pass1:

    8.png

    Pass2:

    9.png

    下面,展示一下我用的模型和贴图:

    mask:

    10.png

    Diffuse:

    主要用来提Alpha的,虽然可以合到上边的Mask的A通道内,太懒,就没合

    11.png

    Normal

    12.png

    美术篇开始:

    先定义一个法线,转到世界空间,然后使用Mask的G通道与之相乘,要记得归一化。

    13.png

    然后将其与我们的世界空间下的副切线加在一起,同时,我也Public了一个float类型的值,给进去,是为了能够更好的偏移高光位置。可以自行脑补下高光上下偏移,最后记得归一化。

    14.png

    输入灯光方向+视口(观察)方向

    15.png

    将他们Dot(点积)后平方,一减后开方,到这一步发现,我们已经几乎完成了Kajiya-Kay光照模型的公式

    16.png16-2.png

    为了做出柔和过度的高光,观察一下下图,1.区域很亮,2.区域柔和。

    新Public 四个值,并且使用Pow来约束他们范围强度,使用Mask的B通道乘进去,做出头发的黑白区域,然后将他们与颜色相乘后叠加(Add)在一起

    17-1.png17-2.png

    接下来,使用观察方向和世界法线做一次Pow,来控制高光两边的范围

    18.png

    将其叠加在一起,使用一个常量控制强度。

    19.png

    颜色部分,我构建了一个类似lambert的lerp来插值两个颜色,为的是模拟受光面到暗面的过渡效果,即透气感。

    20.png

    到了提Alpha的时候了,顺便控制一下Alpha的强度

    21.png

    我们将插值后的Color和高光区域叠加,与平行光颜色强度相乘。 让他受光照影响

    22.png

    最后,我们和alpha组合,分别输出到pass1和pass2

    23.png

    我们挂起FrameDebugger

    24.png

    可以看一下他的渲染顺序

    先渲染了Pass1,即剔除前面的

    25.png

    再渲染了Pass2剔除了背面的

    26.png26-2.png26-3.png

    程序部分我就不详细介绍了,重在思路。因为这次相比上一篇节点和程序的版本,有些地方有优化改动,Shader脚本还没来得及改动。如果需要脚本等到下一篇文章的时候再发出来吧。

    如果有错误,还请斧正。如果需要高清的图表,模型贴图等文件,联系我就好。

    最后的最后,最近在研究URP渲染管线,有同好可以一起交流探讨URP和Shader。

    来源:Thepoly 公众号