用大量的细节打磨，探索出制作组最希望达到的效果。
译/一光流
在当今市场上，3D卡渲染无疑是技术竞争最火热的领域。 之前有很多厂商分享过他们基于不同引擎的3D卡渲染实现技术。
几个月前，葡萄老师分享了一款由万代南宫出品的基于UE4的赛璐珞3D卡牌渲染产品《蓝色协议》，提到了它的风格选择、实现思路以及相关的基本技巧。
在前不久于日本举办的CEDEC 2021开发者大会上，万代南梦宫工作室的执行技术总监Takayoshi Oi以《实装》为题3d手绘角色，进一步分享了赛璐珞3D卡牌实现中的《蓝色协议》。 渲染时，针对UE4引擎的技术改造。
在大井隆义看来，一般的赛璐珞着色方式要么不使用游戏引擎自带的光照系统，自己处理光照，要么对引擎渲染的图像进行后期处理，使其看起来像动画。 这种技术已经有很多参考资料，但是不修改引擎的方法有好有坏。
比如在UE4中，不使用光照系统就相当于放弃了UE4自身画面表现极其丰富的特性，而改用后期处理就相当于在已经渲染好的东西上多加了一层额外的性能处理。 . 所以Bandai Namco Studio尝试的是：如何在不限制UE4功能的情况下，为想要的渲染效果做最少的引擎修改。
01
光处理
首先是用于阴影生成的光照。 《蓝色协议》的独特之处在于，一种角色模型对应两种普通数据。 一个是模型数据本身的法线，一个是美工绘制的法线。 下图右上为模型法线，右下为手绘法线。
直观对比可以看出，模型的法线呈现出丰富的3D角色立体感，而另一组法线则显得模糊，尤其是角色面部的细节层次感不强。
原因是在一般的动画作品中，从大多数角度看，人脸的阴影都会通过与光源相对的脸颊边缘的简单线条来区分。 至于鼻子等突出的位置，大多数情况下，阴影不会聚焦（具体情况因画风而异）。 因此，使用相对模糊的法线数据反而可以呈现出更接近动画风格的阴影表现。
此外，人物的脸部也用于捏脸，一共分为6个部分。 如果将这些部分单独计算为一个对象进行输入，则每个部分都会显示出自己的边缘，因此需要将它们作为一个整体包含进去输入，这样边缘部分的法线才能顺利连接起来。
通过手绘法线的数据和主光源的数据，可以计算出人物的阴影。 《蓝色协议》使用的皮肤阴影在动画方面属于一级阴影。 要实现这个效果，首先需要准备一个二值化处理后的mask（将图像上像素点的灰度值设置为0或255，即黑白）。 确保无论存在多少光源，只有主光源会影响角色的阴影。
然后用主光源和手绘法线得到的二值化阴影数据进行对比，亮处使用人物基础色，暗处使用阴影色进行着色。 这样一个角色的动画风格的阴影就完成了一大半。 这里的关键是人物阴影只受主光源的影响。
当存在主光源以外的点光源时，为保证不产生扰人的阴影效果，灯光效果需要忽略法线，只呈现与光源的距离关系。 这种情况下，亮度偏高比较常见，需要重新调整。 下面的幻灯片也是亮度过高的示例。
天空光和间接光也是如此，渲染时基本忽略头发法线3d手绘角色，这样可以将外界光对颜色的影响控制到最小。 虽然并非完全没有影响，但这种方法优先考虑角色自身颜色的渲染。 毕竟在蓝天的衬托下，底色是蓝色的。 如果影响到人物是蓝色的，会显得很奇怪。
此外，高光（镜面光）元素也经过一系列特殊处理，其中最明显的就是头发。 高光处理时，先将Blinn-Phong模型二值化后生成高光掩码，贴在高光出现的部分。 头发中间部分的亮点圆而小，周围的部分细长。 这些形状差异是通过基于距对象重心的距离扩展或收缩高光遮罩来实现的。
需要注意的是，即使人物轮廓不逆光，也需要用边光处理3D动画，加强与背景分离的立体效果。 边缘光的处理是根据深度缓冲区的内容，用索贝尔滤波器提取边缘数据，然后增强其亮度。 但是，这种方法需要额外的渲染管道。
此外，在滤镜阶段，可以通过偏移调整轮廓的粗细，也可以沿轮廓添加边缘光。 并且在不需要边缘光照的地方（例如，由于角色背面的光源等产生阴影的地方），可以实现进一步的遮罩。
02
轮廓线的处理
轮廓在动画风格中占有非常重要的地位，其处理也是需要下功夫的。
轮廓线的处理由深度值决定，然后通过索贝尔滤波器检测边缘部分，在深度值较大的一侧绘制轮廓线。 字符数据中，vertex color 2是等高线使用的数据，通过ID排列存储不同部位、不同粗细的数据，绘制等高线时会用到。 在像脸部这样不想要轮廓线的地方，可以调整深度值，让它更不容易出现轮廓线。
通过反转深度值，您可以指定不希望轮廓出现的位置。
值得注意的是，轮廓可以想象地绘制在角色的外部。 这是因为当画面太小时，如果轮廓画在物体内部，会使物体显得更小。
另外，上面提到的part ID也会在物体边界部分的轮廓线上进行计算，即通过ID检测出边缘，然后在深度值较大的一侧绘制轮廓线。
但是在手指等深度值差异较小，难以分配ID的地方，就需要使用通过法线判断轮廓线的方法。 同时手绘的法线也提前准备好了，这些数据也会在这里合成。
《蓝色协议》的人物也会表现出眉毛出现在头发上的效果，这在动画和原画中很常见，模拟了透过头发看到眉毛的效果。 从技术上讲，就是先做一个眉毛形状的面具，防止头发遮住眉毛。 也就是说，就是为了这个效果，多加了一层渲染管线。
另外轮廓线不兼容Temporal AA，容易模糊，所以需要Responsive AA抗锯齿处理。 Responsive AA会使用模板，尽可能的保留当前图像的轮廓，进而达到类似Temporal AA的效果。 虽然抗锯齿的效果会弱一些，但是对于张力比较强的图片效果会更好。
另外，外界物体的阴影有时会落在人物身上，但人物自身的阴影除了面部阴影外不会用到，所以在处理人物的阴影贴图时（比如落在人物身上的阴影）地面），仅使用角色本身的阴影。
但是，该游戏使用了诸如 selfshadow 之类的东西。 即使用offsetshadow将相邻物体的深度数据与平时人像的深度数据进行比较，然后写一个二进制buffer用于区分基本色和阴影色。 这样阴影就会散开。
最后采用漫反射后处理对亮部进行漫反射。 这个函数也可以用Bloom来代替，但是会和特效部分的Bloom处理冲突，所以项目组最终选择在另一边使用这个函数。
经过这一系列的处理，就实现了《蓝色协议》的3D赛璐珞风格。 当然，这也是在原有的UE4渲染管线之上，多了一个多层处理过程，延迟渲染的6G-buffers的几乎所有通道都用上了。 在大井隆义看来，要做好赛璐珞动画风格的3D渲染，绝对不是一件简单的事情。
Bandai Namco Studio这次对UE4引擎的修改基本上集中在渲染通道的增加上游戏策划，其他的引擎升级问题勉强解决。 而这些改造更倾向于实现创作者的想法和追求，而不是对实物真实性的追求。 “换成这样，是不是会让你心情好一点？” 这种不断探索的愿望，是大井隆义最重要的思考。
03
结语
在葡萄君之前的文章中，我提到了这款产品的技术探索思路：用大量的细节打磨，探索出制作组最希望达到的效果。
这就决定了《蓝色协议》不会简单套用市面上的某个模板。 其实不难发现，自从《蓝色协议》曝光的两年时间里，这款产品的精妙技术手法发生了很大的变化，我也很想看看这款产品最后会是什么样子，以及它将呈现什么水平的技术。
而每次看到类似的技术分享，葡萄老师都忍不住期待起来。 在3D卡渲染已经成为标配和入场券的国内市场，何时才能迎来一波风格和细节工艺差异化明显的产品？ . 也希望这种技术分享能够在这波浪潮到来之前给开发者提供一些不一样的思路。
