您需要 登录 才可以下载或查看，没有账号？注册
x
本帖最后由 依依哟~ 于 2020-7-24 18:21 编辑
前言：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，渲染流程方面如果有问题，希望各位引擎大佬多多指导。
| 
评分
意天
小优小優...
zh0412
Qinye
愚不是渔...
小月儿
yang54
元素界王神...
大西几
恋の雪
最后一图漂亮
