描边技术总览和常见商业游戏中的描边方案（上）-网易游学-为热爱赋能

描边技术总览和常见商业游戏中的描边方案（上）

Ashley

2021-12-1333993次浏览

0评论

37收藏

12点赞

一、前言

最近在做描边技术相关的调研工作，在这期间收集并整理了一些相关方面的资料、也通过学习官方分享、第三方分享或截帧的方式了解到当前常见NPR游戏中所使用的描边技术。本文最主要的目的是写下我对这些资料的记录和分析、希望能够在前辈的基础上挖掘到更深的内容，同时也希望能够对后来的人起到启发的作用。

本文内容是对目前常见的描边技术做一个整理。每一个技术都会有相对详细的解释以及个人分析，终极目标是即便第一次接触描边的同学也能够领会得到其中的知识。希望这篇介绍描边相关理论知识的文章，能够对目前或将来进行描边工作的同学有启发的作用。

另外每章里都会给出参考资料，虽然不像普通文章或论文那么方便就是了。

【注：关于术语上的说明】

本文会把内外描边统称为描边，在《Real-Time Rendering》同样把其统称为Outline，如果要细分描边类型则还可分为boundary、crease、material edge、contour edge、silhouette等。本文只关注内、外两种描边。如下图，橘红色是外描边，青紫色是内描边（Rendered by Blender Freestyle）：

二、基于模型的方式

1. Procedural Geometry Silhouetting

小标题名字取自《Real-Time Rendering 4th》15.2.2章。

中文一般称为“法线外扩法”、“背面膨胀法”，日文资料中会称作「背面法」，它们指的是同一个技术

下称作“法线外扩法”

法线外扩法可以说是风格化渲染中最常见的描边技术，并且这项技术早在可编程渲染管线前的固定渲染管线就已经出现了。下图是2004年由Ubisoft制作、登录PlayStation2平台的游戏《XIII》。人物身上的外描边的做法是引擎创建并渲染一个新的且比原模型大一些的物体，并且只渲染背面（即Cull Front，相当于渲染一个球体里面的那面，目的可以说是为了不覆盖原来的渲染结果）。

算法非常简单，因此即便是到了可编程渲染管线年代时仍然采用同样的算法——直接在Vertex Shader中对顶点进行操作。不必再像《XIII》一样创建稍微大一些的模型。算法分为两个Pass，具体如下：

第一个Pass：正常绘制物体
第二个Pass：
- Vertex Shader阶段将顶点向顶点法线方向移动一定距离
- Rasterization阶段将Cull Mode设置为Cull Front

问题1：出现了意料之外的描边，或者不想在某个地方看到描边

由于模型的复杂性（尤其是头发这种有复杂凹凸关系的模型），在使用法线外扩法时往往会出现不太想要的描边。为了防止出现这些不受欢迎的描边，可以给每个顶点设置一个Depth Bias值、将顶点埋进里面从而被遮挡住。《罪恶装备Xrd》里就将这个信息写入了顶点色B通道中。

问题2：描边出现断裂，或者出现了看起来很奇怪的描边

出现这个问题的原因是每个面的法线都是垂直于平面的，所以在边角处就连接不上了。一般这种问题的解决方案是另外存储一套平滑法线。具体做法是计算与该点位置相同的所有点的法线的平均值并存储在顶点上。蓝色协议里就有提到用这种方式来解决头发的描边断裂问题，图中蓝色的线条是法线：

问题3：我想给线条注入灵魂！想要有粗细变化，还想要有颜色！

由于法线外扩法是基于模型的，所以实际上对线条还是有较高的自由度来控制。如果想要做到有粗细变化的描边，可以参考罪恶装备Xrd中将粗细变化的数值写入顶点色当中。实际上就是一个外扩系数：数值越大，越向外扩，线条越粗。

至于线条的颜色，如果顶点色或者其他UV通道够用，可以将描边颜色写进顶点里面。或者采样一张专门的BaseColor贴图也能够达到同样的目的。不过似乎没找到类似修改线条颜色的例子，可能觉得黑色描边最明显吧。

2、Fresnel Equation

也可以稍微运用Fresnel Equation（菲涅尔方程）来实现类似描边的效果，上图使用了UE4材质自带的Fresnel节点。通常描边就发生在物体的边缘上，而越靠近边缘时顶点法线与摄像机向量间的点乘越靠近0，因此可以判断这个点乘结果来判断是否为描边。

但是这个效果太不稳定了，尤其是平面会出现大片的描边，因为平面上的法线都一样。这种方法更适合用于那些球形物体。

3、Geometry Shader/Compute Shader

“Backface勾线方法虽然可以做到较为细致的勾线还原。但他也有着自身的固有缺陷，那就是不能在非边缘的尖锐折线处产生勾线。而这些折线在硬表面模型上是很常见。”

PS：上图是原文中的截图，在崩崩崩里面好像没看到实装

上面两种方式都只能在边缘处渲染出描边，但是无论是漫画还是动画中，那些非边缘处的描边也是一个提升风格化质感的一个重要影响因素。对于这种描边，米哈游在Unite2018中分享了一种基于Geometry Shader的做法。

按照原文中的说法，他们首先通过预处理的方式提取那些感兴趣的边缘，保存到额外的Mesh资源上。在渲染时通过Geometry Shader将这些边缘绘制出来。

顺着这个思路、不把问题想复杂的话，那么原文所指的额外的Mesh资源本身就是Line而不是Triangle的集合，那么可以直接Draw这个Mesh就能得到渲染的边、而不用靠Geometry。但是Unity好像也只能绘制三角面片，所以猜测是把是否为边的信息标记在顶点上、在Geometry Shader中判断这个信息从原来的三角面片输入降维输出边。

另外不确定Unity的SRP能不能指定Topology Type，如果可以的话同样可以指定为Line的Topology Type来避免使用Geometry Shader。不过考虑到崩崩崩是2016年发行的游戏、当时SRP还不成熟，所以也用不了SRP。

不过不管怎么说，出于性能跟兼容性问题还是尽量避免使用Geometry Shader的好。但是这种思路还是非常不错的，因为这种方式对线条的控制也有很高的自由度，并且相比起法线外扩法可以创造更多细节。而且目前Compute Shader已经相当成熟且普及了，所以考虑用Compute Shader＋软光栅的方式说不定也是一条走得通的道路。

问题1：我想要有五颜六色、不同粗细的线条

和法线外扩法一样，由于是额外的Mesh资源，所以可以将颜色存储在顶点色上、或者采样特别的贴图当作描边颜色。

线条的粗细可以考虑GS阶段中得到边之后再升维成两个三角形组成的矩形、通过控制矩形四个顶点的位置就能做到不同粗细的线条。

4、Blender Freestyle

Blender的Freestyle是一个专门用来绘制NPR线条的渲染引擎，能够渲染得到影视级别的描边。但是缺点是显而易见的，它并不能在实时游戏中跑起来。。。之所以在这篇文章里插入Freestyle，是因为Geometry Shader描边的方式（下简称GS）跟Freestyle实在是太像了。基本都是基于以下的步骤进行的：

1、线条检测

Freestyle是离线系统，每帧都会重新检测；GS通过预处理得到线条

2、线条筛选、连接、断裂

Freestyle中通过Line set来筛选出那些符合条件的线条，同时连接或断裂他们；GS同样可以根据一些条件筛选、连接、断裂线条，例如与摄像机的关系

3、线条笔触与风格化

Freestyle通过Line style对第二步的线条进行风格化，例如虚实线、颜色、贴图等；GS在这一点上没那么方便

4、线条绘制

如下图中，Line Set里筛选出了Silhouette的线条类型、Line Style使用红色来绘制那些筛选出来的线条：

Silhouette是一种类似轮廓线的线条类型，更多的线条类型与定义参考 Line Set-Edge Types — Blender Manual

由于Freestyle是离线的渲染引擎，这里就不作过多的介绍，更多的使用方法请参阅参考资料。

5、总结

总的来说，法线外扩法已经是业界内常用的手段了，即便是三渲二巅峰的《罪恶装备》和即将公测的《蓝色协议》都是使用的这种方式，并且能够得到很不错的结果。再者对于线条有相当高的自由度可以进行操作，例如像蓝色协议一样使用额外的轮廓模型进行法线外扩法，做到更精确的控制、也可以像罪恶装备一样仍然使用原来的模型、通过顶点色对线条进行一定的美术控制。

但是法线外扩法会需要更多的空间存储模型、也会额外增加一个Pass渲染描边、而且描边效果往往只有边缘才有。mihoyo提到的Geometry Shader是一个绘制非边缘描边的不错的手段，只是GS后续应该会越来越少甚至不会再使用了。如果能够做到CS＋软光栅话相信能够逼近Freestyle的效果。