简介:前言:2年前楚留香的问世,可以说直接惊艳了整个游戏圈,尤其是MMO的制作团队,那个时候大家都还在分析《镇魔曲》,研究NPR,研究《镇魔曲》的天气系统,刚研究的差不多的时候,突然蹦出来一个楚留香,直接将手机游 …
前言:2年前楚留香的问世,可以说直接惊艳了整个游戏圈,尤其是MMO的制作团队,那个时候大家都还在分析《镇魔曲》,研究NPR,研究《镇魔曲》的天气系统,刚研究的差不多的时候,突然蹦出来一个楚留香,直接将手机游戏的画面品质提升了不止一个档次,然后国内带起了一波PBR热。时隔两年本以为追的差不多,谁知道7.26版本,楚留香又迈进了一大步,尤其捏脸界面,可以媲美pc游戏。(ps:一开始觉得国内研发团队也就只有《天刀手游》可以拼一下,从天刀前期放出的资料来看的确很棒,尤其角色,但是楚留香的更新偏偏放在天刀内测的前一天,赚足了天刀的眼球)。作为技术人员,尤其TA,对于画面好的游戏产品,我们肯定第一时间进行学习。
分析工具:GPA,ninjaripper
分析平台:PC包
GPA用来分析渲染流程,提取相关贴图资源,GPA截下来模型,不带UV,所以改用ninjaripper用来提取游戏内的模型。
一、渲染流程 楚留香的渲染流程是标准的前向渲染,其绘制过程大致如下
1、绘制ShadowMap
2、不透明物体
3、深度图
4、透明物体
5、后处理
6、UI界面
1.头发制作
a:模型部分
可以看出,楚留香将头发的模型分为两部分,很明显一部分是用来绘制半透,一部分是用来修正半透产生的透明排序错乱问题。这样手工分出的好处是可以完整保留发丝半透效果,不会因为同一模型绘制两遍,有一遍因为CutOff的方式会遗留部分锯齿。将容易产生透明排序错乱的部分,头顶,前发帘儿单独扣除,用不透明方式进行渲染
b:贴图部分
贴图的制作规范可以看出是横平竖直,为了配合各向异性的特点,高光方向沿着切线方向流动,模型展UV的时候贴图要对应上切线和副切线,也就是UV的U方向和V方向。需要注意的是,头发贴图最好做成直发,这样即使单个头发丝只占纹理图的一行纹素,也不会因为贴图问题产生锯齿。之前美术为了头发更加丰富,也不知道在哪儿拔下一张如下贴图
放到八猴里打开超级抗锯齿,一看,效果不赖,放到unity一看,效果毛毛糙糙,不堪入目,然后锅甩到了shader,一开始我也以为是CutOff硬切造成的锯齿,最后发现,贴图资源本身就有很大的锯齿
这明显就是一张大图缩小后,纹素不够造成的锯齿,贴图大小有限制,没办法用大小来填充纹素,就直接做成直发吧
从楚留香上面截下来的图可以分为下面几部分
一张BaseColor一张Normal 一张Mix贴图
Mix贴图R,G,B分别存放的应该是粗糙度,金属度,AO
c、shader部分
光照模型部分高光看着像是用的GGX的各向异性,有明显的拖尾感,kajiya的各项异性两层高光叠加也能做出这种效果,但我觉得不可能是这么暴力的方式。
看到buffer里面这几个熟悉的变量cRoughnessX,cRoughnessY,cAnisotropicScale,80%可以确定用的就是GGX的各项异性
总共由两层各项异性高光组成,一层是light产生的,另外一层我们称之为镜头高光,可以理解为随着视角方向变化的一个动态光源,目的是为了弥补在移动端,IBL不给力情况下,打的一盏补光,为的是在转动镜头的时候在被光面也能看到材质上的高光。
理论上,两层高光肯定要做NdotL夹角运算,在背光面镜头光最亮,离light产生的高光越近,镜头光越弱,这样不会因为两层高光叠加而产生曝光的情况
但是观察楚留香头发镜头产生的高光并没有衰减,所以怀疑并没有做夹角运算,只是在总的高光输出的时候做了一个(0,1)之间的截断
镜头高光在移动端,尤其是角色上面,基本所有的效果都有镜头高光的身影。
2.眉毛部分
a、模型部分
可以看出楚留香眉毛制作不是单纯的一个半透明的片进行叠加,为了让眉毛更有立体感,除了脸本身的diffuse贴图上有一层眉毛之外,上面又使用多层半透片叠加的方式
b、贴图部分
3、眼睛部分
a、模型部分
可以看出眼睛的制作分为三部分模型,分别是半球(眼睛主体)+泪痕和角膜+睫毛
泪痕和角膜:其实就是一个只带高光的混合模式为Add的半透明片,这样既可以模拟出泪痕效果,又可以模拟出角膜,使得在侧面看的时候眼球不那么平,可以说是一举两得
分享一种3A级泪痕的制作方法
b、贴图部分
贴图分为三张分别也是Diffuse,Normal,Mix
Mix的三个通道猜测应该分别为AO,(不确认)CavityMap?,和Mask贴图
c、shader部分
可以看出,这个也是由light高光+镜头高光组成,但是没有搞明白那些小点是怎么来的,看着也不像cubemap上产生的,而且这么多点感觉会让人犯密集恐惧症。其实个人觉得眼睛高光部分主要由cubemap产生来产生会更好一些,尤其是在侧面,这样高光会更有细节感。
cubemap的制作要类似这种,保证图里面有强烈的对比度,亮度变化不要太近
如果用这种方法需要注意的是,在旋转人物的时候,高光点是没办法随着人物旋转移动的,这样造成影响就是,在正面的时候可能调的效果很好,一旋转,眼睛就没有了灵性,为了保证高光点能一直随着人物旋转而移动,类似用uv方式贴在模型上的贴图。我们知道对于cubemap的采样是通过reflect向量来采的,所以你模型的Rotation和Position不管有啥变化都不会影响reflect,影响它的只有normal和view,所以我们只能通过把模型角度的变化赋予reflect向量,两个同时在发生对等的变化,用参照物来解释,两者就是静止的,就能达到我们最初要的效果,代码如下
扯远了,言归正传,继续分析楚留香
光照模型应该也是基于物理,因为我在buffer里看到这个
因为没有单独的粗糙度图,而是用一个常量来模拟整体的粗糙度,镜头的远近变化会使得高光要不特别大要不特别小,贴图式的roughness,因为mipmap的存在,可以避免这种问题,所以猜测cRoughnessLow,cRoughnessHight专门用来避免这种情况。再细节的东西就先不分析了!
4、脸
脸的部分分为皮肤和妆容,皮肤是最重要的也是楚留香整个画质提升的关键,一开始觉得楚留香用了什么黑科技,或者用了5S,因为之前看文章说楚留香已经在正向渲染实现了SSR,那么5S剩下的2S应该也有办法解决,但是通过截帧发现,皮肤部分还是一张熟悉的BRDF图,为啥效果这么好,我现在还没想明白,即使想明白肯定也需要很长一篇文章来分析,再加上美术这边又添加了各种需求了,时间紧迫,今天先不分析这部分了,先分析一下妆容吧!
a、模型部分
模型部分并没有特别的地方,一开始动作那边说嘴角的微表情动画,骨骼是做不出来的,怀疑做的是顶点动画,做顶点动画要不模型上有顶点色要不有一张烘焙好的顶点动画图,但是我在拔资源的时候并没有发现这两样东西,最后发现嘴角周围的顶点分布很密集,猜测是为了让骨骼蒙皮的时候更细致一些,这样可能会做成微表情的效果
b、妆容贴图部分
可以看到妆容部分主要由三张贴图来实现,当然暂时先不算换的各种样式的眉毛,唇彩,a是用来区分调节脸部的各个区域,b是用来做sparkle效果(也就是亮闪闪的效果),c很明显就是sparkle分布的区域了
另外唇彩的贴图这就得完全靠美术的化妆功底了,听说每个妆容的搭配都请了专业的化妆师来指导,怪不得这么好看。
c、shader部分
sparkle制作方法很简单,可以参考如下的链接
一开始只看到视频的时候,还以为用的是《闪耀暖暖》动态生成亮点方式,但是做到一半发现动态生成的亮点,在模型有动画的时候闪的亮瞎了我的狗眼,所以猜测还是采样生成的,等截下帧发现,果然是这样。
总共由三层构成,可以分别调节大小,颜色和亮度,需要注意的是,mipmap可能层级选择需要改一下,因为我发现利用默认的层级选择,随着距离增加,闪点衰减的有点厉害,到最后完全没有了,而楚留香远近变化不是很大,即使很远,亮点也是存在,当然肯定也不能mipmap关掉,远了之后也会亮瞎我的狗眼,还需要进一步测试
唇彩颜色和脸纹形状,将脸本身的贴图和这些小贴图的对准UV位置,合成一张RT。
5、后处理
以后补上,美术已经拿着刀站在我身边了,赶紧做需求去了
后记:本人是美术转的TA,渲染流程方面如果有问题,希望各位引擎大佬多多指导。
转自知乎
|
请登录之后再进行评论