「ブループロトコル」を“劇場アニメクオリティ”たらしめる手法とは？ゲーム制作におけるアニメ表現技法を紹介【CEDEC2020】 OnlineGamer
"蓝色协议"是PC在线动作RPG标题，正在开发中，作为由班代Namco在线和班代Namco工作室联合项目团队"PROJECT SKY BLUE"的核心内容。 开发在虚幻引擎4中完成，其特点是压倒性的图形表达，如进入戏剧动画，以及利用在线游戏特点的多人动作。
在本届会议上，班代南科工作室的千家贤一、大村大辅、角广昭、长尾弘子、平山郁夫和杉山佳彦介绍了为戏剧动画质量的视觉表达而开发的这部作品，以及他们用什么制作方法构建了角色、背景和VFX。
首先，对该项目进行了概述。 "蓝色协议"的图形概念是"使游戏看起来宏伟而精致"。 然而，他说，他要求为细胞外观游戏创建资产，而所制作的资产的图像通常被剃光细节，而粗略的图像则被想象出来。 然而，在《蓝色协议》中，为了实现剧院动画质量的视觉表达，已经设计了各种方法。
然而，不幸的是，没有智能的方式来表达它，在这部作品中，我们通过积累每一个时刻和元素来实现它，这些时刻和元素感觉像动画一样。
首先，关于字符。 下图显示了字符表示的最终外观。 按顺序描述实现以实现此外观的元素。
在动画表达中变得重要的轮廓在后处理（后处理）中绘制。 在开发之初，它只表示了轮廓模型，但为了减小模型数据的大小和降低工作成本，他采用了后处理轮廓绘制。 使用来自摄像机的深度信息为模型轮廓绘制轮廓，然后使用顶点面颜色的亮度差异绘制不绘制的模型内部的线条。 如果亮度变大，则更厚，如果亮度较小，则显示绘制得更薄。
在模型重叠的部分（如关节），使用世界正常对比度绘制轮廓。 由于不能用顶点面颜色对手或手指等一个接一个部分进行着色，因此这种方法非常有效。
在轮廓模型中，我们采用一种使一般背面模型膨胀的方法。 特别是尖尖，当方向改变时，外观会变差，因此使用工具进行修改。 轮廓模型主要由下巴、嘴和耳朵等悬垂部分连接，整体上不使用，而是在针点使用。 由于头发也有许多复杂的不规则性，因此使用轮廓模型绘制头发束。
着色以不使用渐变的纯边界样式表示。 然而，由于对背景的熟悉和安装感觉的提高，从地面到胸部的阴影的渐变被轻轻地调整。
明暗的比例，因为有一个情况，在背光下，在5比5，一切都变得阴影，外观是平坦的。 因此，它以七比三表示明亮。
阴影颜色是自动创建的，但只是通过降低亮度，它变得浑浊，所以颜色被调整，以便颜色不会降低太多，同时移动色调和降低亮度。 此外，阴影部分始终使用纹理表示，并处理细节，即使在背光下仍然存在。 下巴下和服装的封闭部分被处理成容易变暗，帽子和头盔等阴影在后期处理（后处理）中表示。 此外，如果正上方有光源，则面部会产生不必要的阴影，因此皮肤材料上的光线角度将降低 50%。
接下来是头发的镜面反射表示。 在动画中，有各种各样的表达方式，对作品的个性有很大的影响。 在"蓝色协议"中，我们的目标是重现以下图像。 具体来说，在靠近相机的地方，镜面变小了。
问题是，当紫外线部署均匀地排列头发时，分配给一个蒙版的面积变小，边界部分的像素感觉已经消失。 为了解决这个问题，将镜面部分重新定位为单独的UV，以增加分配面积，并对纹理进行烘焙。 此外，对于如何确定镜面的扩展和收缩，在纹理导入期间确定每个高光的重心，通过距离移动 UV。 每个信息都用于纹理的每个通道。
实现的图像如下。 镜面的边界部分没有噪音，即使相机被拉动，细节仍然存在。
角色创作表示动画设置图的布局。 在这部作品的卡拉库里屏幕上，为了在屏幕上显示多个模型，每个摄像机都以不同的坐标拍摄。 拍摄的数据用作 2D 纹理。 服装的来来去去是一个资产，以降低成本，并隐藏干扰部分，把光圈骨在连接部分，使模型不干扰。
这部作品是一部网络游戏，由于屏幕上描绘着许多角色，面部表情与骨头相对应。 根据情绪，大约25个面部表情被创建，眼睛和嘴可以组合使用。
然后，对这部作品的效果表达所追求的目标进行了解释。
这部作品的效果是，许多不透明材料不传输，以动画表达为目标。 下图是半透明和不透明的区别。 使用不透明材料可以确认与细胞外观的亲和力正在增加。
但是，由于不使用不透明材料进行传输，因此屏幕的可见性降低，问题也同时发生。 由于这个游戏是在线游戏，许多情况下，多个角色和敌人战斗，效果重叠，阻碍游戏玩法。
为了解决这个问题，当摄像机成为特定距离时，正在逐步执行效果擦除过程。 这可以防止在多个效果重叠时降低可见性。
接下来，我们来谈谈如何创建与实时变化和多方向外观对应的效果。 在典型的动画效果中，人们经常使用连续号，但标题从不同角度实时查看，由于图案的循环感和相机位置的图片方向保持不变，因此给人一种单调的印象。
为了解决这个问题，我们结合流图，对纹理施加失真，溶解基于纹理的明暗，以表达随机感和动画擦除感。 此外，通过使用菲涅尔（模型面向相机的多少）来着色，即使从不同的角度看，效果也不同。
此外，在这部作品中，使用了一种称为"静态网格变形目标"的技术，该技术将顶点的移动信息存储在模型的 UV 通道中，并加载两个变形目标作为模型，并介绍了其应用示例。 提供三个拓扑不会更改的模型，并将其导出为静态网格变形目标。 然后，可以创建一个可变形的模型，随机生成它，并应用闪电纹理来产生闪电效果。
还介绍了斩首的效果作为其他用途。 在板中创建此效果时，根据角度，效果将消失。 因此，准备一个百吉饼模型，并设置它，以便粉碎尖端，以适应斩首行为，似乎能够创建与视线移动对应的斩首效果。
在后处理效果中，他的目标是重现从图片顶部应用渐变的"Para"，以减轻动画中单元格绘画的绘画感觉。 下图将后期效果设置为 10 倍，以便于理解。 考虑多功能性，帕拉的行为与太阳耀斑有关，以太阳为基准。
但是，在洞穴或建筑物中，由于即使屏幕上没有显示光源，也会显示来自光源的效果，因此除了光源的存在或不存在之外，还需要确定切换表达式。 因此，我们引入了一种机制，用于确定摄像机是否在阴影中，并在阳光和阴影下切换效果。
后效果有四种类型，按时区提供，并且根据时区重叠使用。
最后，对动画背景的制作进行了解释。
首先，关于背景资产。 背景资源使用基于物理的材料，但蓝色协议不是真实的，而是以动画背景艺术般的品味为目的的。 因此，他设计了减少详细信息量的方法。 然而，形状是坚定的，就像真实的东西。
这部作品的目标是像日本动画背景艺术一样的品味，但试图用手写完成它的成本增加，并产生质量因工人技能而异的问题。 因此，将纹理创建的主要工具从 Photoshop 更改为 Substance Painter。 通过提取看起来像动画背景艺术的元素并将其作为 Substance 材质，我们能够快速创建质量变化较少的纹理。
然后，介绍了使草原材料更接近动画表达的方法。 参考各种动画作品后，他着眼于三点："通过远离相机减少草地的纹理颜色信息"，"在整个草地上添加颜色不均匀"和"添加高光来表达被风照亮的草"。 下图显示了草原材料的应用变化。
与太阳耀斑相关的后期处理被介绍，但这部电影说，还有其他后期处理，旨在表达动画。 其中之一是 SNN 滤波器。 这是一个过滤器，通过把宽和平均值的接近像素信息，你可以粉碎细节像手写艺术。 下面是应用前后的比较图像。 SNN 过滤器使岩石信息变得像手写一样令人心碎。
阴影颜色现在由自定义功能着色，允许您在靠近摄像机和远离摄像机的位置更改颜色。 比较图像，如下图为阴影颜色，无阴影颜色。 在阴影颜色中，前面的阴影是蓝色的，远景的阴影是绿色的色调。
以上内容在本届会议上介绍。 压倒性的图形，这是"蓝色协议"的最大特点，诞生于一小堆小装置。 封闭β测试，目前正在开发的"蓝色协议"。 下次你可以玩这个游戏时，如果你回忆起你在这个会话中所接触的东西，你可能会发现它更有吸引力。
在会议开始时，我们澄清了这项工作的初始概念。 在规划阶段，这是科幻小说，所以封面和太空服的艺术是根据这个艺术创作的。
「BLUE PROTOCOLにおけるアニメ表現技法について」の内容をお届けする
蓝色协议现在也算是最强的三渲二游戏之一了，所以一直在等发售好扒，没想它还没正式上线就发了这东西，看来也是个和ARC一样乐于分享的团队……同时也让行业技术壁垒进一步得到了降低，大家饭碗更加不稳了。
但是藏着也没啥用，对你有威胁的人反正肯定都会知道的，还不如让大家都知道。藏技术本来就是件很无聊的行为，你自己独有的技术能有几个？又能起到多大效果？而你不说，当其他人不会说么？
不要违抗时代的步伐。
描边
它使用用模型扩边法绘制头部，并用后处理描边处理其他部分。
模型扩边用了单独储存共点平均法线的方式来修复分叉，是常见做法。它并没有继续解释，我在这补充一下，这个描边法线想在蒙皮网格上正常使用需要转到切线空间，或者直接储存在切线上。
如果想做得更好一点，还可以根据法线的角度方差来增强这部分的描线宽度，这样就能把发尖做出来。
后处理部分则是重点。后处理描边之前不适用主要是可控性差，而像二之国那样增加可控性会耗费比较高的成本。而它现在只用来绘制头部以外的部分，则降低了一定要求。
根据深度和粗细来控制线条的粗细是常用的做法，关键如何指定描边的粗细（通常内部会比外部细，小物体会比大物体细），而它没有给出任何解释。但即使是选择不控制粗细，至少也要通过Mask来屏蔽头部的后处理阴影。
我觉得或许是选择了多个采样点中深度最高的那个像素坐标的信息。这样做虽然在多个物体交会处会不准确，但大概率是OK的，毕竟大家的参数其实差别不大。颜色的定制也可以用这种方法，如果想节省带宽可以用LUT索引来取代具体的颜色值。
然后就是，它用的是外描边（忽略比自己深度低的部分的贡献），还是双侧都有？如果用外描边，好处就是和扩边描边表现比较一致，双侧则更容易实现描边的软过渡（消除锯齿）。但蓝色协议也可能是靠TAA来消除这部分锯齿的，所以不太好判断。我觉得是后者。
这部分用色彩差异来生成内部描边。不过蓝色协议其实这些物件都是单独建模了的，本来就能生成大部分描边，只是因为后处理的深度差异太低了，需要利用这些数据强化描线的粗细。另外，原文表示描线的粗细是由这张图的亮度差决定的，画面结果也确实像是这样。但是用这种方式定义宽度必然容易产生冲突，而看结果，大部分情况生成的描边都是等宽的（clamp到最大值了？）
我觉得他们应该放弃了精确定义不同部位的描线粗细差异，就算有参数应该也只是屏蔽描边用。毕竟真需要纠结细节的时候，也可以直接换普通扩边描边。
暗部和投影
它搞了一个逆光时亮部区域增大为70%来解决背部缺少光照的问题。
这是个办法，缺点就是逆光的时候轮廓光的感觉有点过强了，另一个方案是逆光扭转光源，缺点是转过阈值时会发生突变。
但这样做会导致亮部区域和自投影区域重叠了，那么它们实际上没有应用自投影？还是将自投影的Normal bais也一并扩大了？目前看，很可能是前者。但投影显然也是必须要有的，而他们用了固定的控制图和后处理阴影两种方式。
此图的蓝色区域就是降低光照阈值的依据。在正面能够看到阴影，但是光照从下方发射时阴影就会消失。这个方案其实效果并没有真实投影好，既然这样做就说明并没有真实投影。
这个帽子的投影其实是通过偏移采样深度图来生成的（偏移一定距离采样深度和当前深度比较，高的话就是阴影），可以看到它异常地和投影物边缘保持了等宽。这其实已经是一种常用技法了，需要预先生成pre-depth，不需后处理，嘴上说成后处理只是一种让人容易理解的说辞。而这个种影子其实最适合的地方是额发的投影。
要我说的话……正常的投影还是需要有的，只有正常的投影才能处理裙子投腿，头发投背这样的情景，虽然大部分情况自投影需要屏蔽，但只有一处用，也该有。而处理好屏蔽物体自投影的问题也可以做到不和70%亮部冲突，虽然确实麻烦。现在这样也是他们自己权衡后的结果吧。
至于身体上标记的固定阴影区域，他们采用了差异不大时候融合，差异大时变得更暗的做法，让逆光时候也能看到这些阴影细节，不失为一个折中的好办法。
一般天光其实都是顶光（为了生成较少的建筑阴影），所以直接打人脸上都会完蛋。蓝色协议是直接在人物身上将天光方向拉平了50%，也就是仰角最多45度。这样倒是有挺多好处的，而且可以回避在逆光时，巨乳会被顶光单独照亮的问题（我是用自投影解决的）。
但有一说一，其实身体不少部分都更适合用顶光照明，比如手臂肩膀，平光产生的垂直阴影部分太少了。所以比较好的方法其实是身体正常打光，脸部单独修（然后就会出现照亮巨乳的和暗处的脸部不协调的问题）。
嘛，毕竟没自投影，也只能这样。
其实还有个脸部法线修正的问题。虽然他们没说，但也不一定没修。其实一般模型只要做的足够平滑，光照稍微往上拉一点，就足够形成良好的明暗边线了。所以也不太好判断。
他们强调了因为贴图精度问题而没有使用法线纹理，所以暗部的定制只能用上面提到的固定暗部纹理来实现。头发上肯定用了（在发瓣边缘涂深），脸上用没用也不好说。
这个则是他们比较有价值的设计。通常情况，我们都是专门给一张暗部纹理来表示暗部的色指定，虽然不算麻烦但终究是一个美术工作量。但暗部到底应该是什么样的颜色其实是有规律的，对于纯色贴图尤其如此。
所以他们做了一个变色工具，看界面，第一排的Hue R YR Y GY G……表示的其实是色环，那么数值就是某个Hue的颜色在暗部应当进行的偏色。后面的Saturation和Value则应该对应饱和度和明度，表示的也是暗部应该增减的饱和度和明度值，分为8档绘制了变化曲线。
我不知道是离线生成还是实时计算，其实都行。实时可以用LUT。
它这样有个好处是可以更方便地做服装染色。
而且对非赛璐璐风格的作品帮助更大，因为那些作品的贴图绘制成本较高。
高光
边缘光他们采用了和投影类似的深度检测法，以便生成固定宽度的边缘光，根据光照方向决定偏移距离即可。这个边缘光主要还是面光时出现，用于勾勒人物边缘。
他们为了做一个头发光点搞这么麻烦也是奇了。他们的目标是让光点随着镜头距离而缩小，并不会根据镜头角度移动，整个过程也和法线无关，和一般人想实现的各向异性效果完全不同。但为了实现它，使用了UV2单独为这些高光元素准备UV，这并不是为了拉直UV，而是为了精度和留出可供缩放的空白区域。
然后用一张RGBA控制图来处理。R通道是基本亮度，GB通道记录的是当前像素距离光斑中心点的距离值，A通道不明，有可能是缩放幅度。
具体做法是，当渲染一个像素时，根据读取到的BG通道数据，和当前UV相加，得到光斑中心。然后反过来减这个BG值同时进行一个根据距离的缩放。数值放大的时候，光斑在视觉上就会缩小。
这种做法可以确保光斑的边缘形状和R通道保持一致。
但是……离线生成这张图就要做不少工作，必须让人手动指定每个光点的中心然后生成控制图，而且在固定距离看，人物光斑其实并没有任何变化。
但这种方式似乎是可以做和Normal挂钩的缩放的。一般做法不行，是因为光斑上每个像素点的Normal是不同的，根据Normal缩放的程度就不同，会导致光斑扭曲。但它这个方案，每个点都可以找到一个共同的中心点，只要使用这个中心点的Normal……
对，我取不到这个点的Normal，所以不行。
所以只能如此。
表情
他们这也是挺骚的。
骨骼搞这么多，应该是没有BlendShape做的快的，性能也很抱歉。估计只有在特写时才会开启，那样还行。
BlendShape其实也可以复用的，用SkinWarp一类可以让眉毛睫毛模型跟随脸部一起运动，而脸大家都一样的。
组合也可以通过Mask。
硬要用骨骼搞……是为了减少资源量，或者是为了适应捏脸？
我是不懂了，反正也不做捏脸，应该不会这么搞。
也可能是方便做连续的表情动画吧，BlendShape只能做成多个关键帧，用骨骼调这个或许更方便点。
特效
做不透明的特效应该算是一种风格指导吧。（当然并不是全都是不透明的）
不过必须是不透明特效才有下面的事情。
它们更多使用了体积模型来作为特效的载体，而如果是透明特效……会有排序问题。
这个顶点移动具体怎么弄的还不清楚，总之是为了实现更加有体积感，而非片状的特效。
下面这个是个由多个Mesh进行插值变化的特效，GGX以前也常这么玩的。
他们提到了一个使用不透明特效遇到的问题：多个特效叠加的时候特效遮挡太严重了。他们的方案是让特效移到远处有一个消隐的效果，应该是增加Cutout的值。
但效果也不算好吧，而网点抖动也可以做到让特效一定程度重叠。
估计他们就是要坚持这种不透明特效的感觉。
此外有一点我忘说了。不透明特效还有个好处是对taa更友好。taa的帧间混合是基于深度的，处理透明物体很容易瞎，表现出来是移动镜头透明度变低。为了避免这个问题需要让透明物体也写速度buffer，但透明物体覆盖住的物体就不行了，而它这种alphatest为主的方式就没这问题。
否则……估计只能放弃taa，那么高光边界就很难这么锐利而且没锯齿。那么就只能考虑模糊边界，或者想办法把msaa开起来，延迟部分就不好办。方案选择会有不少变化。
パラ
他们抛出这么个词然后假装我们都知道是啥意思。反正我是不知道。
它指的是上图左上角那块偏蓝的部分，有点类似屏幕暗角。在整个游戏里都始终存在存在，是蓝色协议的画面特色，也对其“动画感”的产生起到了很大的效用。
效果放大10倍的效果
这个效果基本是一个蓝色的变色遮罩，是一个软边的弧形，存在于屏幕上方，和太阳方向有关。
其实说白了，就是一个画遮罩进行区域调色的后处理特效。如果走正常动画流程，这一步都是肯定有的。所以如果你想做出和动画差不多的画面，当然也应该走这个流程。而且，这个东西不能用光照代替，因为光照是HDR下的，而后处理特效是LDR的。而调色只有在LDR才是对的。
它必须是一个后处理效果。但后处理效果一般不会再去画指定Mesh，只会给你一个参数调整工具，怎么设计这个效果就是个问题。
蓝色协议的剧情动画部分之所以亮眼，也是因为有这种效果：
无非就是各种遮罩圆的位置，硬软边。不太在乎性能是可能的。虽然他们什么都没说，只要知道是这是用后处理做的，就可以试试。只考虑固定过场是可以搞的。
后处理也是可以调用管线内容画Mesh的，定制能力足够就行。要效果就不要纠结这点性能。
场景
蓝色协议的场景其实基本就是写实场景，只做了一些微小的变化。它肯定不是最好的，但是目前的性价比不错。
他们基本走的就是传统PBR流程，模型法线什么都正常做。只是稍微调整了下基本色贴图。
走的也依然是Substance流程，只是专门设计了一些比较卡通的画笔，之后就用这些画笔铺量了。当然，设计这些画笔的时候还是要有一些“卡通化”设计的。AO的强度，大倒角，高饱和什么。但只要设计一次其他人就可以普通地执行了。
能落地的方案，才有意义。
然后它说了一些其他的卡通化方法，首先是草：
原图
根据距离改变草的颜色，远处的草纹理会变为纯色，而且变亮
加入云的阴影
增加草的运动，图看不出来
它还提到了给草地加入一些闪烁的两点，图上看不出来。
之后提到了SunFlare，应该是那个屏幕后处理效果。卡通渲染很依赖体积光，所以自然会有好的效果，假也没关系，假才是对的。
此外就是一个叫SNN的过滤器，谷歌搜SNN Filter就行了，我贴个shadertoy的地址。
[https://www.shadertoy.com/view/MlyfWd>www.shadertoy.com
是SNN和Kuwahara的对比，左边那个是SNN。
EN，72采样，计算量可以忽略，跑应该还是能跑。
旁边的Kuwahara应该是个类似的算法，64采样。
可以考虑降低下width。
它还有一个调整阴影色的方案。近处蓝色，远处变为绿色。
因为大概还是在用延迟管线做场景，如果可以自由定义阴影色就意味着要添加两张GBuffer这太夸张了。我觉得就是根据深度值插值两个颜色，并乘到间接光或者天光上。
来源：知乎
