5.2 完整案例：卡通描边效果

5.2 完整案例：卡通描边效果

本节摘要：本案例用"顶点沿法线外扩"的路线实现卡通描边：主体材质正常渲染，描边层把顶点沿法线方向推出一个可调宽度，再整体涂黑并剔除正面只留轮廓。案例覆盖两条主流路线的对比、完整节点清单、宽度随距离变化的调试，以及镂空模型的坑。

案例背景与路线选择

角色卡通常要一圈均匀的黑边勾出轮廓。实现描边有两条主流路线，动手之前先选路线，这决定了后面所有操作。

路线一：顶点挤出法。 把同一个模型渲染两遍：第一遍正常画；第二遍把所有顶点沿法线方向向外推一小段，整体涂成描边色，并且把朝向相机的面全部剔除——只剩背面外圈露在外面，看起来就是一圈轮廓线。特点：边缘宽度均匀、性能极好（描边层的片元计算几乎为零）、但硬边模型的法线在转折处断开，挤出的描边会在转折处断裂。

路线二：片元视角法。 正常渲染一遍，在片元阶段用菲涅尔近似判断"这个像素是否接近轮廓"，接近处涂描边色。特点：不依赖法线连续性、实现全在一张图里、但宽度受视角与模型比例影响，且本质是"画在表面的亮边"而非真正的外扩线。3.1 节做的那圈边缘光，其实就是这条路线的雏形——把平滑的辉光用 Step 收成硬边，就是描边了。

图：两条描边路线的原理对比

骨架版：路线一的完整节点清单

新建两个图：Body（主体）与 Outline（描边层），或者一张图里用关键字切换（第 7 章的做法），这里用最直白的两张图。

主体图就是一个普通 Unlit 图，Base Color 接颜色属性，不做任何特殊处理。描边图是重点，节点清单如下：顶点块的 Position 端口前插一条"法线乘宽度再相加"的链——Normal Vector 节点（Object 空间）输出接 Multiply 的 A，Multiply 的 B 接 Vector1 属性 OutlineWidth（默认 0.02），Multiply 输出接 Add 的 A，Add 的 B 接 Position 节点（Object 空间），Add 输出接顶点块 Position 端口。片元阶段把 Base Color 直接接一个黑色 Color。保存后创建描边材质。

关键的渲染设置在材质检查器上（图形设置面板里的材质表面选项）：Render Face 设为 Back（只画背面）——这一步不设，描边层会把整个模型盖成黑块，是本案例第一大坑。把描边材质和主体材质赋给同一个物体的两个 MeshRenderer？不，标准做法是物体保持一个渲染器，场景里再复制一个同位置的物体专门挂描边材质（或者用网格渲染器的多材质槽位）。

完整版：宽度、距离与硬边问题

跑通后有三个必然要面对的调试点。宽度调参：OutlineWidth 是物体空间的偏移比例，同一数值在大模型上看起来细、小模型上看起来粗，做角色库时把默认值定在 0.01 到 0.03 之间再逐模型微调。远处描边变粗：顶点外扩发生在裁剪之前，近大远小的投影会放大近处、相对放大远处占比——常见修正是在计算里乘一个"到相机距离"的衰减项（用 Position 与相机位置的距离做缩放），第 7 章封装时会把这个修正一并做进去。硬边断裂：立方体、Low Poly 角色这类法线不连续的模型，外扩后转折面彼此分离露出缝隙。两种补救：建模侧把硬边的顶点法线焊接成平滑法线；或对这类模型直接改用路线二。

变式与解读

解读一下这套设计的成本结构：描边层的片元计算只有一个颜色常量，成本几乎全在顶点阶段的加法与乘法——相当于给场景多画了一遍几何体的背面，顶点数翻倍、片元数几乎不变。对照路线二：几何数不变，但每个像素都多算了菲涅尔链。哪个更便宜取决于"模型顶点多还是屏幕占比大"：小屏幕占比的角色用路线一划算，占满屏的大物件反而该考虑路线二。

变式一：描边色不用纯黑，接一个与 Base Color 同色系但更深的颜色（美术上叫"同色描边"），画面整体感更强，日系卡通常用。变式二：宽度属性接 4.3 节的 Sine Time——描边宽度随时间呼吸，Boss 出场动画里的"威胁感描边"就是这个做法，注意呼吸幅度要小（0.02 上下浮动 0.01 以内），幅度大了像果冻。

⚠️ 镂空模型（飘带、锁链、网格物体）用路线一会露出内壁的描边层，视觉上是"包了一层黑塑料"。这类模型要么路线二，要么在描边层加 Alpha 裁剪与主体同步镂空——成本上升明显，先考虑换路线。

骨架版的节点数量与类型核查

描边图的节点清单核对一遍：Normal Vector、Multiply、Vector1 属性、Add、Position、黑色 Color，共六个节点加两个空间参数设置。全部是第一二档的低成本节点，描边层的片元阶段只有一个颜色常量——这是 5.2 节"成本在顶点不在像素"结论的出处。核算习惯从案例继续：每完成一个案例，把节点清单过一遍成本分层（8.1 节），三分钟的事，换来对效果代价的持续觉知。

问题：描边在角色关节处会断开吗？

会，这正是硬边断裂问题的角色版。关节是建模师手工焊接法线的重灾区，焊接不彻底的地方外扩描边出现裂缝。三个处理选项按代价排：建模侧补焊接（治本，需要建模配合）；描边宽度调小让裂缝不可见（治标，两分钟）；改用路线二（换方案，适合裂缝严重的模型）。与角色美术约定"交付模型前焊接检查"是团队里最划算的解法。

变式补充：宽度按重要性分层

给描边宽度做分层的变式：主角描边宽 0.03、精英怪 0.02、杂兵 0.015——同一张描边图，宽度属性分三档配置，视觉层级自动建立。更进一步，宽度接 2.2 节的脚本属性后可以按距离动态缩放：远处的角色描边收窄避免"黑线圈堆"，近处的展开保持存在感。属性接口的复利在描边上体现得特别直接：图不动，一整套视觉层级配置就完成了。

与后处理描边的边界

还有第三条描边路线值得知道名字：后处理描边（对整屏做边缘检测），它对全场景统一描边、风格极端统一，但无法按物体控制宽度与颜色，且全屏成本不低。三路线的分工：单体可控选顶点外扩，表面风格选片元视角法，全场景统一选后处理。本书不展开后处理描边的实现，判断时知道它的存在与代价即可。

本节要点回顾

• 先选路线再动手：均匀外轮廓用顶点外扩，风格化亮边用片元视角法。
• Back 剔除是命门：外扩层不设只画背面，整个模型变黑块。
• 成本在顶点不在像素：路线一几何翻倍片元几乎免费，与路线二互为镜像。
• 硬边模型慎用外扩：法线断裂处描边开缝，焊接法线或换路线。

描边走的是几何路线，下一节的全息扫描回到颜色路线：菲涅尔、扫描线、闪烁三要素叠加，正好把第 3、4 章的函数全部串进一个效果里。