描边不只是「画个黑框」—— 轮廓线的语义分层系统

大多数开发者对赛璐璐描边的理解停留在「给模型套个黑边」。但在顶级赛璐璐游戏中，描边是一个多层语义系统：外轮廓、折痕线、交叉线、材质边界线——每种线条都有不同的生成逻辑、视觉特征和性能成本。

本文深入轮廓线渲染的技术深水区，从基础的边缘检测到复杂的程序化笔触生成，系统讲解每种描边类型的实现原理、优化策略和工业级最佳实践。

轮廓线分层理论：四种线条的语义与技术特征

在深入实现之前，首先建立「描边语义分类」的思维框架。手绘动画中的线条从不是单一的，不同类型的线条承载不同的视觉信息。

所有工业级赛璐璐渲染管线都在内部实现了这四种线条的独立控制。大多数开源框架只实现了单一的外轮廓线，这就是为什么「开源 Toon Shader 总是看起来有点廉价」的核心原因。

屏幕空间边缘检测：深度与法线差分的精度问题

屏幕空间后处理描边是中小团队最常用的描边方案，但其精度问题一直为人诟病。本节深入其底层原理和优化路径。

核心算法：Sobel 算子与 Roberts 算子

边缘检测的数学基础是对 G-Buffer 中的纹理做「空间差分计算」。Sobel 算子使用 3×3 采样核，Roberts 算子使用 2×2 采样核。

// Roberts 算子边缘检测（性能更优）
float SampleDepth(float2 uv) {
    return SAMPLE_TEXTURE2D(_CameraDepthTexture, sampler_CameraDepthTexture, uv).r;
}

float depthCenter = SampleDepth(uv);
float depthRight  = SampleDepth(uv + float2(_ScreenZ.x, 0));
float depthDown   = SampleDepth(uv + float2(0, _ScreenZ.y));

float edge = abs(depthCenter - depthRight) + abs(depthCenter - depthDown);
float outline = step(_EdgeThreshold, edge);

精度问题根源与解决方案

问题一：远处物体描边丢失

深度缓冲是非线性的——近处精度高，远处精度低。远处物体的微小深度差异会低于差分阈值，导致描边丢失。

解决方案：使用「深度感知阈值」——随着深度增加，降低边缘检测阈值。

// 深度感知的自适应阈值
float depth = Linear01Depth(SampleDepth(uv), _ZBufferParams);
float adaptiveThreshold = lerp(_EdgeThresholdNear, _EdgeThresholdFar, depth);
float outline = step(adaptiveThreshold, edge);

问题二：走样与锯齿

屏幕空间描边本质上是像素级计算，天然带有锯齿。MSAA 对后处理描边无效，因为描边是在 MSAA 解析之后生成的。

三种抗锯齿策略：①提高内部渲染分辨率（超采样）；②使用 Temporal AA（TAA）对描边进行时域累积；③在描边 Shader 中加入 3×3 的高斯模糊。对于大多数项目，TAA + 轻微模糊的组合性价比最高。

问题三：内轮廓断裂

纯深度差分只能检测外轮廓，无法检测模型自身的折痕线。

解决方案：同时对深度和法线纹理做差分，将两者的边缘检测结果相加。法线差分专门负责捕捉折痕线。

// 同时检测深度边缘和法线边缘
float3 normalCenter = SampleNormal(uv);
float3 normalRight  = SampleNormal(uv + float2(_ScreenZ.x, 0));
float normalEdge = 1 - saturate(dot(normalCenter, normalRight));

float finalEdge = depthEdge * _DepthEdgeWeight + normalEdge * _NormalEdgeWeight;

程序化笔触变形：用噪声模拟手绘不规则感

程序化描边的最大问题是「太完美了」——完美的直线、完美的等宽、完美的平滑。而真实手绘动画中的线条充满了「不完美」——轻微抖动、粗细变化、偶尔的断裂。正是这些不完美产生了「手绘感」。

笔触变形的三个层级

层级一：顶点噪声扰动

在几何体描边的顶点 Shader 中，对每个顶点的外扩方向加入微小的噪声偏移。这是成本最低的笔触效果。

// 顶点级噪声扰动
float noise = SimpleNoise(v.vertex.xyz * _NoiseFrequency);
float noiseOffset = noise * _NoiseAmplitude;
float3 offsetPos = v.vertex + v.normal * (_OutlineWidth + noiseOffset);

层级二：屏幕空间线条抖动

在像素 Shader 中对描边边缘加入屏幕空间的 Perlin 噪声，使描边边缘产生「手绘抖动」的视觉效果。

层级三：时间轴动画

随时间缓慢变化噪声参数，让描边产生「呼吸感」——就像手绘动画中每一帧的线条都不完全一样。Arc System Works 在《罪恶装备》中大量使用了这一技术。

// 时间变化的噪声
float timePhase = frac(_Time.y * _NoiseAnimationSpeed);
float noise = SimpleNoise(float3(v.vertex.xy * _NoiseFrequency, timePhase));
float3 offsetPos = v.vertex + v.normal * (_OutlineWidth + noise * _NoiseAmplitude);

笔触风格的参数化控制

建立「笔触风格参数面板」，让美术师可以调整：噪声频率（控制抖动密度）、噪声振幅（控制抖动幅度）、时间速度（控制呼吸感快慢）、细节层数（多层噪声叠加）。

Arc System Works 多层描边专利技术深度解析

《罪恶装备：斗士》和《龙珠飞龙》的描边系统代表了当前实时赛璐璐渲染的技术顶峰。虽然 ArcSys 的部分技术有专利保护，但其核心设计思路可以学习借鉴。

专利特征一：颜色感知描边宽度

ArcSys 的描边宽度不是恒定的——它会根据背景颜色的亮度动态调整。当背景是深色时，描边变细；当背景是浅色时，描边变粗。这确保了描边在任何背景下都有一致的「视觉重量」。

专利特征二：多层描边系统

不是一层描边，而是三层：
①最外层：粗黑边（主轮廓）
②中间层：颜色边（与材质颜色相关的内描边）
③最内层：高光边（强调体积的细亮边）
这三层描边在不同的距离和视角下有独立的衰减参数。

专利特征三：视角感知的描边方向

描边外扩方向不是简单的法线方向，而是经过视角校正后的方向。当模型旋转时，描边会动态调整外扩向量，确保从任何角度看都是连续完整的。

独立团队可复制的「去专利版」实现

虽然完整专利不可复用，但以下技术点是自由可用的：
①实现主描边 + 内描边的两层系统
②加入描边宽度随背景亮度的自适应调整
③对不同材质使用不同的描边颜色和宽度
这三点已能达到 ArcSys 80% 的视觉效果，而不会触及专利保护。

笔触纹理映射：将真实墨线纹理投射到 3D 轮廓

程序化噪声模拟的手绘感始终有「计算机感」。笔触纹理映射技术使用真实手绘扫描的墨线纹理，将其映射到 3D 轮廓上，产生最接近真实手绘的效果。

Tri-Planar 映射方案

使用三轴平面映射将 2D 笔触纹理投影到 3D 模型表面。这避免了 UV 展开的问题，同时确保线条在模型各个角度都有手绘质感。

// Tri-Planar 笔触纹理采样
float3 triplanarUV = positionWS * _StrokeTextureScale;
float3 strokeX = SAMPLE_TEXTURE2D(_StrokeTex, sampler_StrokeTex, triplanarUV.yz).r;
float3 strokeY = SAMPLE_TEXTURE2D(_StrokeTex, sampler_StrokeTex, triplanarUV.xz).r;
float3 strokeZ = SAMPLE_TEXTURE2D(_StrokeTex, sampler_StrokeTex, triplanarUV.xy).r;

// 基于法线方向混合三个平面的采样结果
float3 blendWeights = abs(normalWS);
blendWeights /= blendWeights.x + blendWeights.y + blendWeights.z;
float finalStroke = strokeX * blendWeights.x + strokeY * blendWeights.y + strokeZ * blendWeights.z;

笔触纹理的美术制作流程

1. 美术师用真实墨水笔在纸上绘制线条纹理，扫描进电脑
2. 在 Photoshop 中处理成无缝平铺纹理
3. 制作多种笔触变体（硬边、软边、干笔、湿笔）
4. 在 Shader 中根据材质类型选择不同的笔触纹理

适用场景与局限

笔触纹理映射特别适合「静止画面要求高、动画要求低」的场景，如叙事游戏、冒险游戏。在快速运动的物体上，纹理映射可能产生「游泳」的视觉问题，需要配合时间轴滚动纹理来抵消。

移动端轮廓线渲染：性能妥协的边界在哪里

移动端 GPU 的性能特性与 PC 截然不同，很多在 PC 上看起来「很轻」的描边技术在移动端会成为性能瓶颈。

移动端性能预算

对于大多数中端移动设备（骁龙 7 系列、天玑 8000 系列），描边系统的总性能预算应该控制在：
• 顶点处理时间 < 0.5 ms
• 像素处理时间 < 1.0 ms
• 额外带宽占用 < 100 MB/s

移动端优先的描边架构

策略一：单 Pass 描边替代多 Pass

多 Pass 描边在移动端的开销是灾难性的。改用几何着色器（Geometry Shader）在单个 Pass 内生成描边几何体，或完全使用后处理描边。

策略二：移动端专用的简化 Shader

为移动端创建专门的「描边简化版 Shader」：关闭噪声扰动、关闭多层描边、使用固定宽度而非视角感知宽度。视觉上损失 10%，但性能提升 50% 以上。

策略三：距离裁剪

超过一定距离（如 50 米）的物体完全关闭描边。移动端屏幕尺寸小，玩家在远距离无法感知像素级描边。这个简单的裁剪可以减少 60%–80% 的描边对象数量。

「伪赛璐璐」的边界

移动端优化有一个陷阱：当优化过度时，描边系统已经不再是真正的赛璐璐描边，而只是「带黑边的 3D 模型」。我们建议的边界是：至少保留外轮廓线 + 折痕线的两层系统，在此之上做优化，而不是退化为单一的外轮廓。

初级用户路径：四步搭建可用的多层描边系统

如果你之前只使用过单一的外轮廓描边，按照以下步骤快速升级到工业级的多层描边系统：

第一步：分离外轮廓与折痕线（1 小时）

在你的后处理描边 Shader 中，同时对深度纹理和法线纹理做边缘检测。为两者设置独立的权重参数和颜色参数。此时你已经有了两层描边系统。

第二步：加入深度感知自适应阈值（30 分钟）

实现前述的「自适应边缘检测阈值」，解决远处物体描边丢失的问题。这个改动的视觉提升效果极其明显，而代码成本很低。

第三步：添加材质 ID 边界线（1 小时）

在 G-Buffer 中开辟一个 8 位的通道存储材质 ID，在后处理阶段对这个通道做差分计算。这一层的线条通常设置为深灰色而非纯黑色，用于区分细节。

第四步：加入轻微的抗锯齿模糊（30 分钟）

在描边生成后，对描边区域应用一个小半径（1–2 像素）的高斯模糊。这可以显著减少锯齿感，而不会让描边看起来太「软」。

中级用户路径：程序化笔触系统的参数化设计框架

当基础多层描边系统工作稳定后，按照以下优先级投资于笔触的艺术化升级：

优先级一：顶点级噪声扰动

成本最低、ROI 最高的艺术化升级。只需要修改几何体描边的顶点 Shader，加入 3–5 行噪声代码。美术效果提升明显，几乎没有额外性能开销。

优先级二：时间轴呼吸感动画

让噪声随时间缓慢变化。这个改动只需要增加 1 行时间参数的代码，但能产生「活的线条」的视觉效果。注意动画速度要非常慢（每 2–4 秒一个周期），否则玩家会注意到线条在抖动。

优先级三：Tri-Planar 笔触纹理

对于有美术资源的团队，加入笔触纹理映射。这需要美术师制作手绘笔触纹理，Shader 侧的改动成本中等，但视觉效果提升最大。

优先级四：描边风格库系统

建立「描边风格预设库」：日系动画风、美式漫画风、极简铅笔风、水彩墨线风等等。每种风格对应一套不同的参数组合。这允许你的游戏在不同场景切换不同的描边风格，极大地丰富了视觉表达能力。

核心争议：程序化笔触能否真正「还原手绘质感」

这是赛璐璐技术社区中最有哲学意味的争论——计算机算法生成的「不规则感」，与人类手绘的「不完美感」，是否存在本质差异？

认为「可以还原」的论点

手绘线条的不规则性本质上是噪声——肌肉微振动、笔尖压力变化、纸张摩擦力波动。这些噪声模式可以被统计建模，程序化生成的线条在统计学意义上可以与手绘线条无法区分。ArcSys 的作品已经证明了这一点。

认为「无法还原」的论点

手绘线条的「灵魂」不是随机噪声，而是「有意图的不规则」——艺术家在每一画中做的艺术决策，是算法无法模拟的。程序化笔触无论多么复杂，本质上都是「无意义的抖动」，而手绘线条的抖动是「有意义的表达」。肉眼可以潜意识地感知到这一差异。

编辑观点

我们建议采取「混合策略」：程序化笔触负责 80% 的基础手绘感，关键帧（过场动画、角色特写）使用美术师手工调整的描边。对于 95% 的游戏内容，程序化笔触已经足够好；而对于那 5% 玩家记忆最深刻的关键画面，投入美术工时做手工强化。这是质量与成本的最优平衡点。