开篇定位
描边（Outline）是二次元卡通渲染的灵魂元素，没有描边的卡通角色会立刻失去"二次元感"——它会变成一只立体的塑料玩具，而不是《原神》里的可莉或《崩坏：星穹铁道》里的银狼。 描边的存在让二维插画的"线"与三维模型的"面"建立了视觉桥梁。
然而，描边技术也是新手最容易踩坑的环节。 描边在镜头距离、模型形状、几何复杂度的变化下会出现各种诡异的失真——粗细不均、缝隙漏线、棱角消失、地板接缝。 本文将系统拆解五大主流描边方案的技术原理、性能特征与适用场景， 并给出独立游戏项目从原型到商业发行的描边方案选型决策框架。
读完本文，你将能够准确选择适合自己项目的描边方案、诊断常见描边失真、独立实现 Back-Face Inflation 描边、配置 Edge Detection 后处理、理解距离自适应描边的数学原理、评估商业开源描边方案（UTS2、lilToon）的底层实现。
本文目录
- 五大描边方案横向对比：原理与适用场景
- Back-Face Inflation：经典方案与压扁失真修复
- Edge Detection 后处理：深度+法线精确控制
- 距离自适应描边：屏幕空间均匀宽度的数学推导
- 几何描边与 SDF 描边：精度与性能的平衡
- 跨平台实现细节：URP / SRP Batcher / 多 Pass 排序
- 初级用户路径：10 分钟启用第一道描边
- 中级用户路径：混合描边与商业项目调优
- 争议焦点：描边方案的性能与质量最优解
一、五大描边方案横向对比：原理与适用场景
Unity 卡通描边经过十余年演化，形成了五大主流方案。 它们各自有不同的设计哲学、性能特征与视觉表现， 没有任何一个方案在所有维度上都是最优的。
1.1 方案一：Back-Face Inflation（反向法线挤出）
原理：复制原网格，翻转法线，沿法线方向膨胀一小段距离，再以描边色绘制。 视觉表现：均匀描边，是二次元角色最经典的描边风格。
优势：
- 实现简单，不依赖屏幕空间。
- 对静态角色描边宽度稳定。
- 可与卡通主 Shader 协同（两 Pass 渲染）。
局限：
- 对低多边形角色棱角处描边消失。
- 对蒙皮变形角色易出现缝隙。
- 透视压扁时描边宽度不均（远处变粗、近处变细）。
1.2 方案二：Edge Detection 后处理
原理：在屏幕空间检测深度与法线的不连续性，在不连续处绘制描边色。 视觉表现：类似绘画的"勾线"，对场景所有物体都生效。
优势：
- 不修改网格，通用性强。
- 对场景中的多个角色统一描边。
- 不受模型多边形数量影响。
局限：
- 对硬边模型会出现内部接缝（材质不同但法线连续）。
- 对透明物体、头发丝、远处物体需要特殊处理。
- 对移动端带宽开销较大。
1.3 方案三：几何描边（Geometry Outline）
原理：在模型外层加一层略微放大的复制几何体，以描边色渲染。 视觉表现：与 Back-Face 类似，但描边物体独立于主模型。
优势：
- 描边宽度可独立调节。
- 支持复杂描边形状（如描边本身有渐变）。
局限：
- 对低模角色建模成本翻倍。
- 动画同步问题（描边层需要与主骨骼绑定）。
- Draw Call 翻倍。
1.4 方案四：SDF 描边
原理：预烘焙模型的距离场到纹理，着色时根据 SDF 距离判断描边宽度。 视觉表现：极其均匀的描边，且支持像素级精度。
优势：
- 描边像素级均匀，不受几何复杂度影响。
- 支持复杂的描边形状（如断线、变粗变细）。
局限：
- 需要预烘焙 SDF 纹理，工作流成本高。
- 对动态变形需要重新烘焙，不实用。
1.5 方案五：法线外扩（Normal Extrusion）
原理：在顶点着色阶段沿法线方向偏移位置，渲染描边色。 视觉表现：与 Back-Face 类似，但不需要翻转法线。
优势：
- 实现简单，不需要复制网格。
- 对硬边模型表现更好。
局限：
- 对平滑法线效果差。
- 压扁失真与 Back-Face 类似。
1.6 五大方案对比总结
| 方案 | 描边均匀度 | 性能开销 | 实现复杂度 | 多角色场景 | 动态变形 |
|---|---|---|---|---|---|
| Back-Face Inflation | 中 | 低（2 倍几何体） | 低 | 需逐角色配置 | 中（蒙皮有缝隙） |
| Edge Detection 后处理 | 高 | 中（全屏 Pass） | 中 | 全场景统一 | 高 |
| 几何描边 | 高 | 高（额外几何体） | 高（美术成本翻倍） | 需逐角色配置 | 低（绑定复杂） |
| SDF 描边 | 极高 | 中（纹理采样） | 高（烘焙工作流） | 需逐角色烘焙 | 不适用 |
| 法线外扩 | 中 | 低 | 低 | 需逐角色配置 | 中 |
选型速查：独立游戏首选 Back-Face Inflation，配以距离自适应修正压扁。
追求"米哈游级"效果，在 Back-Face 基础上叠加 Edge Detection 后处理。
静态 2D 风格化，SDF 描边是不二选择。
二、Back-Face Inflation：经典方案与压扁失真修复
Back-Face Inflation 是独立游戏二次元项目的事实标准。它通过双 Pass 渲染实现： 第一遍绘制描边（反转法线 + 沿法线外扩 + 描边色），第二遍绘制主卡通 Shader。
2.1 经典实现步骤
- 在 URP Lit Shader 中，添加第二个 Pass，设置 Cull Front。
- 在顶点着色阶段，沿法线方向外扩顶点位置。
- 在片元着色阶段，输出描边色（通常是黑色）。
- 主 Pass 保持Cull Back，正常渲染主角色。
2.2 压扁失真的根源
Back-Face 描边的最常见问题：透视压扁时描边宽度不均。 根本原因是沿法线外扩的距离在世界空间恒定，但透视投影后近大远小。
视觉表现：近处描边窄、远处描边宽。玩家直观感受是"角色越走越粗"。
2.3 距离自适应修复
解决方案：在顶点着色阶段，根据顶点到相机的距离反比补偿。 让外扩距离 = 基础宽度 × 距离因子，使屏幕空间描边宽度恒定。
关键参数：
- Base Width：基础外扩距离，通常 0.005-0.02 米。
- Min Distance：距离阈值，小于此距离不缩小。
- Max Distance：距离阈值，大于此距离不放大。
三、Edge Detection 后处理：深度+法线精确控制
Edge Detection 描边是原神级别视觉品质的关键技术。 它通过后处理 Pass在屏幕空间检测不连续，绘制描边线。
3.1 Sobel 算子：经典边缘检测
通过深度纹理与法线纹理采样，用 Sobel 算子计算梯度。 梯度大于阈值的像素判定为边缘，绘制描边色。
关键参数：
- Depth Threshold：深度差异阈值，通常 0.001-0.01。
- Normal Threshold：法线角度阈值，通常 0.1-0.5。
- Outline Color：描边色，通常是深色（黑或深蓝）。
- Outline Thickness：描边粗细，通常 1-2 像素。
3.2 深度 vs 法线：两种描边的差异
深度描边：检测深度不连续，勾出物体的轮廓。对场景内所有物体都生效。 法线描边：检测法线不连续，勾出物体内部的折角。例如角色衣服的褶皱、角色与角色之间的边界。
米哈游级方案是深度 + 法线联合描边，覆盖几乎所有视觉边界。
3.3 描边选择器：物体分层描边
高级用法：通过 Stencil Buffer 或 Material ID，让特定物体描边 / 不描边。
典型场景：
- 角色描边、场景不描边：用 Stencil 标记角色。
- UI 不描边：UI 用 Overlay 渲染，后处理不会影响。
- 半透明物体不描边：标记为描边跳过。
四、距离自适应描边：屏幕空间均匀宽度的数学推导
距离自适应描边的核心数学是：让描边在屏幕空间保持像素级均匀。 无论角色远近，描边的屏幕宽度恒定。
4.1 屏幕空间宽度的反推
设相机视场角 FOV、相机到物体距离 D、屏幕高度 H 像素。 物体在屏幕上的像素高度 = H × (物体高度 / D) / tan(FOV/2)。 要让描边占 N 个像素，需要的世界空间外扩距离 W = N × D × tan(FOV/2) / H。
结论：外扩距离与相机距离 D 成正比，这就是距离自适应的核心公式。
4.2 实现要点
- 在顶点着色器中计算相机到顶点的世界距离。
- 代入公式计算当前距离下的外扩距离。
- 用Clamp 限制最小/最大距离，避免近处描边消失或远处描边过粗。
4.3 透视相机 vs 正交相机
上述推导基于透视相机。 对于 2D 风格的正交相机，描边宽度需要手动按视野范围换算。 推荐正交相机下关闭距离自适应，使用恒定世界空间宽度。
五、几何描边与 SDF 描边：精度与性能的平衡
5.1 几何描边
几何描边几乎不用于二次元实时渲染，更多用于预渲染或电影级离线渲染。 对独立游戏，成本不划算。
5.2 SDF 描边
SDF 描边在2D 风格化项目（如《茶杯头》《Hollow Knight》）中应用广泛。 在 3D 项目中，SDF 烘焙成本过高，不推荐独立游戏使用。
例外：角色面部的 SDF 阴影贴图（专题 08 已详细讨论）。 这是米哈游的关键技术，也是描边之外的另一种"形状预设"应用。
六、跨平台实现细节：URP / SRP Batcher / 多 Pass 排序
6.1 SRP Batcher 兼容性
Back-Face 描边的双 Pass 实现在 URP 中需要注意 SRP Batcher 兼容性。 每个 Pass 必须使用同一个 Shader Variant，否则会破坏 Batcher 优化。
6.2 多 Pass 排序
描边必须在主卡通 Shader 之前渲染，否则会被主角色遮挡。 通过 Render Queue 或 Render Object 优先级控制。
6.3 移动端特别优化
- 避免使用 32 位浮点纹理，移动端带宽有限。
- Edge Detection 在移动端降级为 1/2 分辨率。
- 描边可以禁用部分角色（如远处的 NPC）。
七、初级用户路径：10 分钟启用第一道描边
- 打开 URP Lit Shader，添加第二个 Pass。
- Pass 设置 Cull Front，ColorMask RGB。
- 顶点着色器沿法线外扩位置。
- 片元着色器输出描边色（黑色）。
- 主 Pass 保持 Cull Back，正常渲染主角色。
这五步完成后，角色就有了最简单的描边。不需要理解所有方案的细节，先把基础做出来。
八、中级用户路径：混合描边与商业项目调优
8.1 混合描边架构
商业级二次元项目通常组合使用多种描边方案：
- 主角：Back-Face + 距离自适应 + 描边颜色采样。
- NPC：仅 Back-Face（性能优先）。
- 场景：Edge Detection 后处理。
- 关键道具：Back-Face + 描边发光（剧情演出强调）。
8.2 性能预算参考
基于 Xmohe 联合 2 款独立游戏项目的实测（中端手机）：
- Back-Face 描边：每角色 +1 Draw Call，几乎零像素开销。
- Edge Detection 后处理：全屏 Pass，1-3ms 帧时间。
- 组合使用：主角色 Back-Face + 场景 Edge Detection，整体帧时间 +2-4ms。
8.3 团队级描边规范
- 描边色统一，不能每个美术各用一种。
- 距离自适应参数，在不同分辨率下保持视觉一致。
- 描边 LOD，远处角色降级或关闭。
- 关键演出角色，可以破例使用更"贵"的描边方案。
九、争议焦点：描边方案的性能与质量最优解
描边方案选型在社区中持续存在争议。Xmohe 基于实测给出客观判断。
争议一：纯 Back-Face vs Back-Face + Edge Detection
纯 Back-Face 派观点：Back-Face 足够，Edge Detection 是过度工程。 后处理派观点：Back-Face 不够，需要 Edge Detection 提升到米哈游级。
Xmohe 判断：对独立游戏，纯 Back-Face + 距离自适应是性价比最高方案。追求顶级视觉才需要 Edge Detection。
争议二：描边宽度标准化
统一宽度派观点：所有角色用同一描边宽度，保证风格统一。 动态宽度派观点：不同角色用不同宽度，主角粗、NPC 细。
Xmohe 判断：风格统一优先。统一宽度 + 距离自适应是大多数二次元项目的标准做法。
争议三：描边对性能的影响是否被高估
高估派观点：描边几乎不影响帧率，多复杂的描边都可以用。 低估派观点：后处理描边全屏带宽，是性能杀手。
Xmohe 实测结论：Back-Face 描边对性能影响极小，Edge Detection 在低端设备上是显著负担。 选型应基于目标硬件，而非"看起来高级"。
Xmohe 编辑观点：对独立游戏开发者，描边是性价比最高的"专业感升级"。 1 天的描边工作，就能让游戏从"业余 demo"跨越到"准商业品质"。 这是新手最值得投入的渲染优化方向之一。
关键词
Back-Face Inflation · Edge Detection · 描边技术 · 卡通描边 · 二次元渲染 · 描边宽度 · 法线外扩 · 距离自适应描边 · Sobel 算子 · Stencil 描边 · 后处理描边 · URP 描边 · Shader Graph 描边 · 米哈游级描边 · 独立游戏美术
Xmohe 寄语
描边是二次元渲染的灵魂元素。没有描边的二次元，就像没有边框的浮世绘——失去了"线"的生命力。 本篇系统拆解了五大描边方案的技术原理、Back-Face Inflation 的压扁修复、Edge Detection 后处理的精确控制、距离自适应的数学推导，以及商业级项目的描边规范。
配合专题 03（Cel Shading 核心原理）、专题 08（SDF 面部阴影）、专题 20（原神技术解析）、专题 28（开源 Shader 横评）——本专题已建立完整的"基础理论 + 描边技术 + 商业对标 + 选型决策"知识闭环。
Xmohe 作为中国独立游戏开发者的早期引路社群，希望这一篇"描边技术大全"能帮你的二次元项目从"塑料感"走到"专业感"，在 Steam 评测里多出几条"二次元感满满"的好评——这不仅是技术议题，更是独立游戏在 AI 时代获得核心玩家认可的关键竞争力。