很多时候我们做NPR渲染尤其是日式卡渲的时候，都知道描边是很重要的一个组成部分，手游上通常使用法线外扩的技术来实现这一效果，仅此而已。但是实际情况又是如何呢，下文结合现有二次元项目以及此领域相关历史背景、理论发展、工程实践诸多方面的一些综合性思考，希望可以抛砖引玉。

首先我想先把问题思考清楚：描边的本质是什么，它从何而来(Where)，用来做什么(What)，怎么做(How)，未来将如何发展。

一、What & Where

1、描边本质

• NPR VS PBR

  - PBR有完备的物理公式Rendering Equation(Kajiya 1986)支撑，所有的技术都是围绕此方程展开，程序员实现了正确的公式，美术制作出正确的Albedo/Roughness/Metalic贴图，就可以获取一个相对物理正确的效果。本质是因为PBR是真实3D世界的模拟，追求的是共性的抽象（公式）。

  - NPR本质是2维绘画（比如日式漫画、国画、油画等等）的模拟，属于艺术的范畴，艺术追求的是特性，也就是风格，千篇一律是无艺术价值的。所以利用共性思维来研究艺术，就是一种本末倒置思想。看似过于完美的线条，也绝对不是人的手笔。所以怎么样使用计算机，可以做好NPR这件事情就是我们要探讨的问题。

• NPR中描边的是什么

  - 描边本质上是一种线条。

  - 由于赛璐璐风格的画面以色块为主，当两个遮挡关系很明显的组件颜色很接近时，如果没有线条，那么二者将丢失遮挡关系，进而导致画面层次丢失，最终造成视觉混淆。简而言之：线条的作用就是增强对比，维护遮挡关系。

  - 使用线条来绘画，是历史决定的。笔墨纸作为早期的创作者能够掌控的工具，以线条为主要载体（文字、绘画），能够高效的进行内容表达。

  - 每个人的差异化，以掌控工具的形式表达出来，被其他人认可，便形成了风格。

2、从何而来

中国画用线条表现物象的手法称为“白描”，或称为“线描”。最初，白描是以粗细均匀的线条为主的。

但经过历朝历代的发展，已经演化出来不同的艺术风格。

与此类似，当前的NPR线条也是以均匀线条主导，所以未来要做真正的风格化，历史可以作为我们的指路明灯。

"线条有粗细、曲直、连续、疏密几类主要变化。
其中画中的线条通过穿插、重叠、藏露表现画而层次，
通过快慢、转折、顿挫表现运动的节奏和韵律，
通过疏密表现画面的黑白色阶."——《解构二次元以及游戏实现方式》

白描里的描法

参考 绘画中的线条艺术

我们再来看看传统黑白格漫画的绘制过程

b站链接

基本上都要遵循"故事->分镜->草稿->线稿->上色"这么个过程

在不同漫画家的手下，线条逐渐成为作者的特性标签。

参考荒木的NARUTO

荒木作为日本目前最具个人特色的漫画家，他的作品，不用署名，一眼基本都可以看出是他画的。

• 二次元的本质依然是内容传达，漫画/动画由于历史原因成为了内容载体，最终演化成为了艺术家的风格标签。

• 随着计算机的普及，绘制这个过程又出现了新的形式(手绘板，各种辅助绘制软件加持)。

二、How

我们如果要在计算机上实现风格化的卡通画面，应当如何去做呢。

罗生门

有一天策划同学想做一款二次元风格的游戏，有一天，他找了4位不同专业的同学，想了解下描边应该怎么实现。

• 美术同学：描边就是画画。

• CV同学: 描边就是边缘检测，再进行卷积。

• CG同学: 描边就是在3维空间中判断多边形和视角的关系。

• TA: 描边就是法线外扩。……

虽然这只是个段子，但是你会发现，其实不同职能(业)，解决同样问题的方式会不太一样。

• 艺术家通过抽象事物之间的独有特性，使用线条/颜色或者是其他方式，进行艺术表达。

- 直截了当的使用笔或是手写板。

• 科学家通过抽象事物之间的共有关系，使用计算机解决通用问题（物理模拟）。

- 使用程序模拟线条，甚至基于现有风格进行抽象，尝试使用机器模拟艺术家的风格。

最终我们选择的方式成为定势后，想要突破当前的困境，就需要看看其他领域，同样的问题是怎么处理的。而一个好的解决方案，可以综合各家之长，在有限的硬件资源上，达到最好的效果。

---

通常来说，计算机模拟的线条基本都是基于Geometry表达的网格数据和所处的场景信息(ViewMap/Gbuffer)。根据应用场景通常有以下技术类型：

1、传统的可见性线条提取+视线剔除。

• Blender Freestyle

• PSoft Pencil +

2、将几何&Mask信息写入Gbuffer，基于ScreenSpace进行逐像素的卷积(filtering)，同时进行线条提取和线条着色。常用于基于Deferred管线的传统日式PC/主机游戏。

• 《二之国》

• 《蓝色协议》

3、基于GPU光栅化管线，借助Vetex&Fragment Shader，常用于Forward管线下的Mobile游戏。

• 《Guilty Gear Xrd》

• …

---

思路一：基于模型结构的线条模拟

1. 基于CPU的线条模拟

理论上，计算机模拟线条的思路和方法包含下面几个步骤。

• 线条定义

• 线条提取

• 线条绘制

线条定义和提取

我们以Blender的FreeStyle为例，了解下线条的常见类型。

参考链接：
https://docs.blender.org/manual/en/2.92/render/freestyle/parameter_editor/line_set.html#edge-types

• Silhouettes View相关

  Draws silhouettes around your closed objects by rendering lines where the surface normal transitions between pointing toward and away from the camera.

  提取时设V为视向量，N1,N2是边的两个相邻的法向量，当(N1·V)*(N2·V) < 0的line。

• Contours View 相关

  Draws lines around each object, separating it from other objects behind it, or the scene background.

  通常用来提取外轮廓。External Contours会把相同的object进行merge，只包含最外层轮廓。提取算法

• Creases View 无关

  Crease是在给定的阈值角度(图例135°)的前提下，夹角<=阈值的那些"折缝"边。

• Borders View 无关

  遍历所有lines，如果某一条边仅和一个面相邻，那么这条边就是Border

• Edge Mark(Custom)

  用户自己标记的那些line

线条的绘制(Shade)

基于笔刷的勾线方法，通常分为以下几步，以Freestyle render为例。

《Programmable Rendering of Line Drawing from 3D Scenes》 GRABLI 2010

这是条可编程的NPR渲染管线，Select Chain Split Shade是Programmable Stage.

1、Collect Scene Properties(depth, normal, line……)

2、Select: 抽取Feature lines生成View Map

3、Split: 基于ViewMap分割不希望连接边

4、Chain: 基于ViewMap连接不希望分割的边

5、Shade: 基于ViewMap对线条进行着色处理，完善笔触信息

最终可以达到如下效果：

问题：性能开销较大，可以用于CG品质渲染，但不适合直接在游戏中使用。

除了CG上的应用，有些4格漫画场景的绘制，也在一定程度上融合了工具的自动化流程。

另外，靠程序生成线稿步骤，艺术家们再进行后续阶段的创作，也是一种比较可行的辅助方案。

demo：(CGWorld 2018.6)

还有就是拿来实验了下《永远七日之都》的安

2、基于Project Matrix的顶点偏移

• 早期自研手游实现的描边线条算法，当时(2014年左右)可能连模型法线都不舍得用的条件下，采用的屏幕空间顶点偏移法。图示来源于《永远七日之都》

- Pass1 绘制相应mesh的stencil mask，关闭color write

- Pass2-3-4 计算3组偏移量(x, y, z), (-x, y, z), (0, -y, z)，分别对mesh的Project Matrix进行 移动，开启 color write，同时基于1的mask，绘制移动后的mesh作为线条使用。

- Pass5 取消Pass1的stencil mask，恢复之前的状态。

• 

• 常用于选中角色这种非常驻状态的标记应用。基本不符合二次元风格化描边线条需求。

3、Triangle Shell Technique

参考论文Raskar 1999 《Image Precision Silhouette Edges》

论文提出了利用背面translation（图中是往camera方向前移），借助z-test把Backface作为描边线条使用。

此外，论文还提出了View-Dependent的描边线条思路，通过将Backface推出z/(V·N)，保持Edge在V上的投影维持不变。

此方法也就是手游上应用最广泛的法线外扩法

来自GUILTY GEAR Xrd

整个流程大概描述如下：

• 添加美术的控制力

 （1）控制粗细

A、使用顶点色/uv作为mask，修正以下

- 线条宽度，比如发尖处勾线会逐渐变细

- 线条顶点的z bias，控制线条的visibility

B、结合摄像机距离，进行粗细的自适应

- 拉远线条不会线性变细，拉近不会增粗

- 控制线条宽度(screen space)在一定的变化范围

（2）控制颜色

A、纯色线条

B、结合Diffuse的混色线条

（3）控制转角

A、硬边问题的处理，基本都是利用平滑法线思路解决，把当前顶点的平均法线，bake 到其对应的tangent space后储存到顶点色当中。

B、转角变细，使用顶点色控制。

C、添加美术的控制力，max中自动生成平滑法线后，可以进行二调。

《永七日文版》目前的描边线条正是采样了此方案，以丽为例，注意头发尖端的线条变化。

同样的，方案也有其对应的问题：

• 内部细节缺失。

• <数据冗余>点法线分拆面法线。拆一次点，数据double。

• <数据冗余>双套法线顶点色不够用加uv？

• 第二套法线不随skin动

- 扩展cpuskin or gpu skin实时算？

- 类似法线贴图做法保存到切线空间?

4、Geometry Shader

上述方案问题：不能在非边缘的尖锐折线处产生勾线。 而这些折线在硬表面模型上是很常见。

贺甲： “ 为了解决这个问题，我们添加一个预处理过程来提取这些边缘，并将它们保存到额外的 Mesh 资源中，并使用 Geometry shader 绘制它们。对于这些折线我们使用了和 Backface 法类似的调整参数，从而使它们看起来完全相同。增加了折线的绘制之后，我们可以看到右侧的图片捕获到了更多的勾线细节。”

《米哈游技术总监首次分享：移动端高品质卡通渲染的实现与优化方案》

猜测 基于此流程实现 参考方案《Two Fast Methods for High-Quality Line Visibility》：

（1）【预处理 Edge提取】扫描每条边索引(index0,index1) 邻接面共2个顶点(index2, index3)的索引, 将4元组作为顶点数据保存, 构造为新的顶点Rect Mesh。（比如写入顶点色）

（2）Render Line index Mesh

• VS阶段: 需借助原始mesh顶点StructBuffer，在vs中拿到Rect的索引后，获取对应的边和邻接面，判断是否为Edge，再根据参数，调整edge对应顶点的位置（譬如法线外扩）。

• GS阶段: Draw Outline Rectangele. 如果为edge，则对edge上的两个顶点升维成为线条，绘制对应宽度的矩形。

• FS阶段：对line进行着色处理，可选添加笔触(Strokes)，以实现可控的风格化。

（3）上述过程的扩展性较高，可以根据线条规则生成完全的线条，亦可调整线条判定规则生成局部细节。

面向手机端的发展：由于手机上对GS支持较差，像Metal都没有GS这么个阶段，与此同时随着目前GPU计算的发展，Compute Shader正日益强势，因此基于CS进行线条生成，甚至完善风格化，也许可以打开新的世界（实践部分有尝试）。

思路二 手绘线条

1、贴图绘制

解决游戏中，实时渲染的内描边问题。给与美术最大控制力，直接绘制到贴图上。

我们看看一些日式游戏的做法。

《永七日文版》贴图：也会有一些手绘线条在贴图上

问题：一般贴图上只要存在斜线就一定有锯齿，在镜头拉近时特别明显，因为内线条一般都只有1-2个像素。

2、本村线

为了解决锯齿的问题，罪恶装备GGX的本村氏提出了一种uv绘制法

本村线：一种纹理，其中作为线条给出的实线仅由垂直和水平线组成”

问题：UV线条非常耗时，通常需要大概三个月时间才能制作一个角色，尤其是复杂的布线，需要非常有经验的美术来应用此方案。和美术有仇可以拉这个。

---

▼▼▼

二次元描边技术现状和发展（下）

▲▲▲