• 中文
    • English
  • 注册
  • 查看作者
    • 楚留香《一梦江湖》捏脸美术制作和渲染分析

      简介:前言: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的各项异性

      half aspect = sqrt(1.0f – Anisotropy * 0.99f);half anisoXRoughness = max(0.01f, roughness / aspect);half anisoYRoughness = max(0.01f, roughness * aspect);half anisoXRoughness_V = max(0.01f, roughness_V / aspect);half anisoYRoughness_V = max(0.01f, roughness_V * aspect);float D_GGXaniso( float RoughnessX, float RoughnessY, float NoH, float3 H, float3 X, float3 Y ){        float ax = RoughnessX * RoughnessX;        float ay = RoughnessY * RoughnessY;        float XoH = dot( X, H );        float YoH = dot( Y, H );        float d = XoH*XoH / (ax*ax) + YoH*YoH / (ay*ay) + NoH*NoH;        return 1 / ( PI * ax*ay * d*d );}

      总共由两层各项异性高光组成,一层是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向量,两个同时在发生对等的变化,用参照物来解释,两者就是静止的,就能达到我们最初要的效果,代码如下

      float3 RotateAroundYInDegreesCube(float3 vertex, float degrees){    half alpha = degrees * M_PI / 180.0;    half sina, cosa;    sincos(alpha, sina, cosa);    half2x2 m1 = half2x2(cosa, -sina, sina, cosa);    half2x2 m = half2x2(unity_WorldToObject[0][0], unity_WorldToObject[0][2], unity_WorldToObject[2][0], unity_WorldToObject[2][2]);    m = mul(m1, m);    half2x2 t = half2x2(1, unity_ObjectToWorld[0][3],1, unity_ObjectToWorld[2][3]);        //m = mul(m, t);            half3 rotate = half3 (mul(m, vertex.xz), vertex.y).xzy;            return rotate;}    float3 newDir = RotateAroundYInDegreesCube(dir, rotation);    float3 cubeMapData = DecodeHDR(texCUBElod(_Cubemap, float4(newDir, lodValue)), 1);

      扯远了,言归正传,继续分析楚留香
      光照模型应该也是基于物理,因为我在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,渲染流程方面如果有问题,希望各位引擎大佬多多指导。

      转自知乎 链接  作者ID马甲

      楚留香《一梦江湖》捏脸美术制作和渲染分析

    • 0
    • 0
    • 0
    • 309
    • 请登录之后再进行评论

      登录
      • 大版主
      • 小版主

      暂没有数据

      暂没有数据

    • 发表内容
    • 实时动态
    • 偏好设置
    • 到底部
    • 单栏布局 侧栏位置: