1. 项目概述从“能用”到“好用”的轮廓高亮之路在Unity里给角色、道具或者关键交互物体加上一个发光轮廓这个需求太常见了。无论是为了突出可拾取物品还是强调被选中的目标Outline Effect轮廓效果几乎是每个项目UI/特效之外最常被用到的视觉增强手段之一。网上随便一搜从Asset Store的付费插件到GitHub上的开源方案选择多到让人眼花缭乱。但真正上手用起来尤其是想把效果做到“精致”而不是“凑合”坑立刻就来了。最让人头疼的两个问题一个是轮廓锯齿另一个是层级遮挡。锯齿问题让你的轮廓边缘看起来毛毛糙糙像是低分辨率下的马赛克瞬间拉低了整个画面的质感。而层级遮挡问题更诡异明明物体在前面轮廓却被后面的东西“吃掉”了一部分或者两个靠得很近的物体轮廓互相穿透、粘连在一起逻辑和视觉完全对不上。这两个问题不解决Outline Effect就永远只是个“Demo级”的功能上不了正式项目的台面。我自己在多个手游和PC项目中反复折腾过各种轮廓方案从最简单的摄像机额外渲染到复杂的CommandBuffer结合深度法线踩过的坑不计其数。这篇文章我就结合最常见的实现原理把轮廓锯齿和层级遮挡这两个顽疾的根因和解决方案彻底讲透。目标很简单让你拿到一套经过实战检验、可以直接集成到URP通用渲染管线或Built-in内置渲染管线项目中的稳健方案并且明白每一步背后的“为什么”。2. 轮廓效果核心原理与问题根源剖析在动手解决问题之前我们必须先搞清楚标准的Outline Effect是怎么工作的。知其然更要知其所以然这样遇到任何变种问题你都能自己分析。2.1 主流轮廓实现方案拆解目前社区里主流的轮廓实现抛开那些高度封装的商业插件其核心技术路线可以归纳为以下三种每一种都直接关联到后续的问题方案一基于法线外扩的顶点着色器这是最经典、性能也通常最好的方法。核心思想在物体的Shader里动手脚在顶点着色器阶段沿着顶点法线Normal方向将顶点位置向外挤出一点点。// 简化示例在顶点着色器中 v.vertex.xyz v.normal * _OutlineWidth;然后用另一个纯色比如白色渲染这个“膨胀”后的模型再渲染原本的模型盖在上面就得到了轮廓。优点是效率高一个DrawCall搞定如果使用双Pass Shader。致命缺点是轮廓宽度在屏幕空间不均匀透视下近大远小并且对于法线不连续的区域比如硬边或者非常薄的模型效果会断裂或异常。更重要的是它完全无法处理层级遮挡因为这只是单个物体的自我膨胀根本不关心场景中其他物体的存在。方案二基于后期处理的屏幕空间方法这是目前最流行、效果也最可控的方案。其流程通常分三步第一次渲染Mask Pass将所有需要轮廓的物体用特定的纯色如红色渲染到一张临时纹理Render Texture中。这次渲染只关心“谁需要轮廓”不关心物体原本的样子。模糊处理Blur Pass对这张Mask纹理进行高斯模糊Gaussian Blur或扩张Dilation操作。这一步决定了轮廓的宽度和柔和度。模糊半径越大轮廓越宽、越柔和。合成输出Composite Pass将模糊后的Mask纹理与摄像机正常渲染的画面进行混合。在模糊区域且不在原始物体区域内的部分叠加上轮廓颜色。方案三基于几何着色器或边缘检测这类方案相对小众比如在几何着色器中生成轮廓边或者用Sobel等算子对深度/法线纹理进行边缘检测。它们更适用于特定风格的渲染如卡通描边通用性稍弱且对移动平台支持可能有问题。对于我们今天要解决的锯齿和遮挡问题方案二屏幕空间后期处理是主战场。因为它的灵活性和效果最好但随之而来的问题也最典型。2.2 轮廓锯齿问题的根源分辨率与滤波锯齿专业术语叫“走样”Aliasing在轮廓效果里几乎100%源自分辨率不足和滤波方式不当。当你把需要轮廓的物体渲染到一张Mask纹理时这张纹理的分辨率是多少如果直接使用屏幕分辨率1:1那么在物体边缘一个像素要么完全被物体覆盖红色要么完全空白。经过模糊后这个硬边界会生成一个从有到无的渐变但这个渐变是基于像素级别的阶梯变化在斜边或曲线上就会看到明显的锯齿。更糟糕的是如果为了性能Mask纹理使用了低于屏幕的分辨率比如半分辨率那么锯齿会被进一步放大。此外模糊算法本身的质量也至关重要。一个简单的“盒子模糊”Box Blur会比“高斯模糊”产生更生硬的边缘和更明显的锯齿感。实操心得不要一上来就怀疑自己的Shader写错了。遇到锯齿第一个检查点就是Mask纹理的分辨率和滤波模式Filter Mode。确保至少使用Bilinear双线性滤波并且尽量使用全分辨率渲染Mask。2.3 层级遮挡问题的根源深度测试与渲染顺序层级遮挡问题比锯齿更“反直觉”。它的核心矛盾在于轮廓是屏幕空间效果但物体的遮挡关系是由深度缓冲Z-Buffer在3D空间决定的。想象一个场景玩家A站在一堵墙B后面。A有轮廓B没有。在Mask Pass中A被渲染成红色。在正常渲染中由于深度测试A被B挡住你看不到A。在合成阶段模糊后的A的轮廓红色区域会被叠加到最终画面上。结果你看到了墙后面角色的轮廓这在逻辑上是错误的轮廓“穿透”了遮挡物。另一种情况是两个都有轮廓的物体互相靠近时它们的Mask区域在模糊后会连成一片无法区分彼此看起来像一坨粘连的色块。这两个问题的本质都是轮廓的生成Mask没有考虑场景中其他物体无论是否有轮廓的深度遮挡关系。我们需要在屏幕空间计算轮廓时引入深度信息进行“裁剪”。3. 消除轮廓锯齿从像素级到亚像素级的平滑策略解决了理论问题我们进入实战。首先攻克锯齿。我的策略是分层推进从确保基础设置正确到应用高级平滑技术。3.1 基础设置检查清单90%的锯齿源于此在折腾复杂算法前请对照这份清单检查你的Outline Effect脚本或ShaderMask纹理分辨率确保你的Mask Render Texture的宽度和高度设置与摄像机目标分辨率一致或至少不低于0.75倍。绝对不要为了“优化”而在初期使用过低的如0.5倍分辨率。// 在C#脚本中创建Render Texture _outlineMaskRT new RenderTexture(Screen.width, Screen.height, 24, RenderTextureFormat.R8); _outlineMaskRT.filterMode FilterMode.Bilinear; // 关键纹理滤波模式Filter Mode将Mask纹理和用于模糊的中间纹理的filterMode设置为FilterMode.Bilinear。如果对质量要求极高可以考虑Trilinear但性能消耗会增大。Point模式是锯齿的罪魁祸首绝不能用于此类处理。抗锯齿MSAA如果项目开启了MSAA多重采样抗锯齿需要确保你的Render Texture也支持并启用了它。在URP中可能需要通过RenderTextureDescriptor来正确设置。有时直接将Mask Pass整合到URP的Renderer Feature中利用管线的原生MSAA是更稳妥的选择。3.2 高质量模糊算法的选择与实现模糊的质量直接决定了轮廓边缘的平滑度。我强烈推荐使用高斯模糊Gaussian Blur并且是两趟Two-Pass分离式的高斯模糊。为什么是两趟分离式高斯模糊普通的高斯模糊需要对每个像素周围NxN的区域进行采样计算量是O(N²)。分离式高斯模糊利用了一个数学特性二维高斯核可以分解为两个一维高斯核水平和垂直的连续应用。这样计算量就降到了O(2N)在保证相同模糊效果的同时性能提升一个数量级。在Shader中你需要两个PassPass 1 (Horizontal Blur)对Mask纹理进行水平方向的1D高斯模糊输出到一张临时纹理。Pass 2 (Vertical Blur)对上一张临时纹理进行垂直方向的1D高斯模糊输出最终模糊后的Mask。// 简化示例水平模糊片段着色器 fixed4 frag_horizontal (v2f i) : SV_Target { fixed4 col 0; float weightSum 0; // 假设使用7-tap高斯核_BlurOffset是像素偏移量 for (int j -3; j 3; j) { float weight gaussianWeights[j 3]; // 预计算的高斯权重 col tex2D(_MainTex, i.uv float2(_BlurOffset * j, 0)) * weight; weightSum weight; } return col / weightSum; }你需要根据轮廓的期望宽度来调整模糊半径采样次数和偏移量。一个常见的技巧是可以稍微使用比视觉需求更宽一点的模糊然后在合成时通过参数控制轮廓的“强度”或“阈值”这样能获得更柔和的边缘过渡。3.3 亚像素边缘平滑与后处理抗锯齿FXAA/TAA当基础设置和模糊都做到位后如果在高分辨率下仍能看到细微锯齿可以考虑在轮廓合成阶段引入亚像素Sub-pixel级别的平滑技术。一个有效的方法是在合成Shader中对模糊后的Mask纹理进行一个简单的颜色阈值软化。不要使用二值的cutoff如if(mask 0.5)而是使用smoothstep函数在阈值附近创建一个平滑的过渡区间。float outline smoothstep(_Threshold - _Softness, _Threshold _Softness, mask.r); fixed4 finalColor lerp(originalColor, _OutlineColor, outline);这里的_Softness参数即使设置得很小如0.05也能在亚像素级别平滑轮廓边缘的生成有效消除因为像素对齐而产生的生硬感。此外如果整个项目启用了FXAA快速近似抗锯齿或TAA时间性抗锯齿它们也能在一定程度上缓解轮廓的锯齿。但要注意渲染顺序轮廓效果必须在FXAA/TAA等全屏后处理之前应用。因为抗锯齿处理会混合相邻像素的颜色如果先抗锯齿再画轮廓轮廓的边缘又会被“柔化”一次可能变糊或扩散。正确的渲染队列顺序是正常渲染 - 轮廓合成 - 全屏抗锯齿 - 最终输出。避坑指南在URP中通过Renderer Feature添加轮廓效果时务必注意它的RenderPassEvent设置。通常应该设置在AfterRenderingOpaques之后但在BeforeRenderingPostProcessing之前以确保在Bloom、Vignette等效果之前但在某些抗锯齿效果之后。需要根据项目实际使用的后处理栈进行微调。4. 彻底解决层级遮挡深度感知的轮廓算法这是轮廓效果中最具挑战性也最能体现方案优劣的部分。一个不处理遮挡的轮廓系统是不完整的。下面我介绍两种逐级深入的解决方案。4.1 方案一深度测试法简单有效但有局限这是最直观的改进。思路是在生成轮廓Mask时不仅渲染颜色还同时写入深度。然后在最终合成阶段将轮廓像素的深度与场景深度缓冲中的深度进行比较。具体步骤创建带深度的Mask纹理将Mask Render Texture的格式设置为包含深度通道如RenderTextureFormat.DefaultDepth。修改Mask渲染Shader在渲染轮廓物体到Mask时像正常渲染一样输出深度值。合成阶段进行深度比较在合成Shader中采样_CameraDepthTextureUnity提供的场景深度图并与当前像素对应的Mask中的深度值比较。float sceneDepth LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.uv)); float outlineDepth LinearEyeDepth(outlineMaskDepth); // 如果轮廓像素的深度比场景深度大即在物体后面则丢弃该轮廓 if (outlineDepth sceneDepth _DepthBias) { outline 0.0; }_DepthBias是一个很小的偏移量如0.001用于处理深度精度问题导致的Z-fighting。优点实现相对简单能有效解决“轮廓穿透固体遮挡物”的问题。缺点只能处理“有”和“无”深度信息的对比。对于两个都有轮廓且互相靠近的物体它们的Mask在模糊后会融合深度信息也混合了无法正确区分边缘归属仍然会导致轮廓粘连。4.2 方案二ID缓冲法终极解决方案要完美解决所有遮挡和粘连问题必须引入物体级别的标识。这就是ID缓冲ID Buffer或模板缓冲Stencil Buffer方案。我更推荐ID缓冲因为它更灵活。核心思想为场景中每个需要轮廓的物体分配一个唯一的标识ID例如一个独特的颜色或整数。在轮廓处理的全流程中我们都基于这个ID来工作而不是基于一个统一的Mask颜色。详细实现流程渲染ID图ID Pass使用一个替换Shader将所有需要轮廓的物体渲染到一张纹理ID Map中。每个物体根据其唯一ID输出纯色如ID为1的输出红色(1,0,0)ID为2的输出绿色(0,1,0)。同时必须写入深度以确保ID图的遮挡关系正确。不需要轮廓的物体不渲染到此图中。处理ID图生成轮廓Mask对这张ID图进行之前提到的高质量模糊。但关键点来了模糊后每个像素的颜色是周围多个物体ID颜色的混合。例如红物体和绿物体边缘处会得到黄色(0.5, 0.5, 0)之类的混合色。我们不直接使用这个模糊结果作为Mask。而是遍历这个模糊后的ID图的每个像素分析其颜色分量。如果一个像素包含超过一个ID的颜色分量即R、G、B通道中有两个以上大于某个阈值那么这个像素就位于两个物体的边界处它应该被识别为轮廓。深度感知的轮廓裁剪现在我们有了一个“潜在轮廓区域”的图边界图。在最终合成时我们需要进行两次深度比较 a.场景深度 vs ID图深度与方案一相同确保轮廓不会出现在被非轮廓物体遮挡的地方。 b.物体自身边缘的深度连续性检测对于边界图上的一个像素我们可以采样其周围像素在ID图中的原始深度。如果深度差过大超过阈值说明此处是真正的物体内外边界如物体与背景如果深度差很小则可能是物体自身的褶皱或凹凸我们可以选择抑制这部分轮廓使轮廓更干净。合成与着色根据最终的、经过深度裁剪的轮廓区域图以及每个像素所关联的物体ID可以从模糊前的ID图中获取我们可以为轮廓着色。甚至可以做到不同物体拥有不同颜色的轮廓。优点完美解决粘连因为基于ID即使两个红色轮廓物体紧贴它们的ID不同在边界检测阶段也能被区分开。完美解决遮挡深度测试基于ID图逻辑清晰。功能强大可扩展支持多色轮廓、轮廓优先级等。缺点实现复杂需要维护物体ID到颜色的映射需要多张Render TextureID图、模糊图、深度图等。性能开销稍大多了一次全屏的ID图渲染和更复杂的片段着色器计算。实操心得对于大多数中小型项目如果轮廓物体数量不多10个方案一深度测试法结合良好的物体分层管理避免轮廓物体紧贴已经足够。对于大型项目、RTS游戏大量可选单位或需要极高视觉品质的项目方案二ID缓冲法是值得投资的终极方案。在URP中你可以通过自定义ScriptableRenderPass来优雅地组织这些渲染步骤。5. 在URP与Built-in管线中的实战配置理论讲完我们来点实在的。如何在Unity两大渲染管线中具体配置5.1 URP管线实现要点URP通过ScriptableRendererFeature和ScriptableRenderPass来扩展渲染流程这是实现屏幕空间轮廓效果最标准的方式。创建Renderer Feature在URP Renderer Asset中添加一个自定义的Renderer Feature。这个Feature负责创建和管理你的OutlineRenderPass。实现OutlineRenderPass在Configure方法中申请所需的Render TextureID图、模糊临时RT等。在Execute方法中按顺序执行 a. 使用DrawingSettings和FilteringSettings渲染所有轮廓物体到ID图使用一个特定的ShaderTagId如OutlineID。 b. 使用CommandBuffer.Blit配合材质球对ID图进行模糊处理。 c. 执行轮廓检测与合成。这里需要一个全屏Shader它采样模糊后的ID图、原始ID图、相机深度纹理和颜色纹理进行计算并输出最终画面。通过BlitterAPI或CommandBuffer.DrawProcedural来执行这个全屏绘制。Shader编写关键为轮廓物体编写一个Unlit或Simple Lit的Shader用于渲染ID图只需输出物体ID对应的颜色。编写核心的轮廓合成Shader。这个Shader需要包含我们前面讨论的所有逻辑ID边界检测、深度测试、平滑阈值等。排序与注入将OutlineRenderPass的渲染事件renderPassEvent设置为AfterRenderingOpaques。确保不透明物体都已渲染完毕深度纹理可用。5.2 Built-in管线实现要点在Built-in管线中通常通过OnRenderImage回调或CommandBuffer来实现。使用CommandBuffer推荐在摄像机渲染前创建一个CommandBuffer。使用CommandBuffer.GetTemporaryRT申请临时RT。使用CommandBuffer.SetRenderTarget和CommandBuffer.DrawRenderer将轮廓物体渲染到ID RT。使用CommandBuffer.Blit进行模糊和后处理。最后将CommandBuffer加入到摄像机的渲染队列中。材质球与Shader原理与URP类似但Built-in管线中访问深度纹理更直接_CameraDepthTexture。注意在摄像机上启用depthTextureMode DepthTextureMode.Depth;。性能考量Built-in管线中手动管理Render Texture的生命周期至关重要用完务必ReleaseTemporaryRT避免内存泄漏。对于移动平台务必检查模糊采样次数和RT分辨率防止带宽成为瓶颈。6. 常见问题排查与性能优化指南即使按照上述步骤实现在实际项目中仍会遇到各种稀奇古怪的问题。这里是我总结的“排错清单”和“优化锦囊”。6.1 问题排查速查表问题现象可能原因排查步骤与解决方案轮廓闪烁或抖动1. 每帧Render Texture重建导致ID不一致。2. 深度比较的Bias值设置不当Z-fighting。3. TAA等时间性特效与轮廓顺序冲突。1. 检查代码确保RT只在必要时如屏幕分辨率变化时重建使用RenderTexture.ReleaseTemporary并在同一帧内复用。2. 适当增加_DepthBias值如从0.001调到0.005。3. 调整轮廓Pass的渲染顺序到TAA之前。轮廓在某些角度消失1. 基于法线的外扩方案在物体背面或特定视角下顶点收缩。2. 屏幕空间方案的物体在Mask Pass中被视锥体裁剪Cull。1. 改用屏幕空间方案。如用法线方案确保在Shader中正确处理背面使用Cull Off或挤出方向基于视角修正。2. 检查Mask Pass摄像机的视锥体Frustum和裁剪平面Near/Far确保它们能包含所有轮廓物体。轮廓边缘有颜色污染1. 模糊采样时采样到了背景或其他物体的颜色如果Mask RT格式包含Alpha且未清除干净。2. 合成Shader中对Mask的采样使用了错误的UV或纹理环绕模式。1. 在渲染到Mask RT前用CommandBuffer.ClearRenderTarget明确清除为纯黑0,0,0,0。2. 确保模糊和合成Shader中纹理的Wrap Mode为Clamp防止边缘采样到另一侧。检查UV计算是否正确。移动设备上帧率骤降1. 模糊半径过大采样次数过多。2. 使用了高精度RT格式如ARGBFloat。3. 每帧轮廓物体列表更新频繁导致DrawCall波动。1. 将模糊半径减半或使用更高效的模糊如Kawase模糊。考虑使用半分辨率进行模糊处理。2. 将ID图格式改为R8单通道足矣。3. 对轮廓物体列表进行缓存非必要时不更新。6.2 性能优化实战技巧分辨率动态调整轮廓效果不需要和UI一样锐利。可以基于设备性能或当前帧率动态调整Mask纹理和模糊中间纹理的分辨率如从1.0倍降到0.75倍。这在移动端是立竿见影的优化。基于距离的轮廓淡化LOD为轮廓效果添加Level of Detail。当物体距离摄像机超过一定距离可以逐步减小轮廓宽度直至完全关闭轮廓。这不仅能提升性能也符合视觉规律。物体分组与合批如果使用ID缓冲法尽量让轮廓物体的ID是连续的并且材质属性如颜色可以通过MaterialPropertyBlock批量设置减少SetPass Call。模糊优化尝试Kawase模糊。它是一种近似高斯模糊的算法每次迭代采样4次通过多次迭代来达到较大的模糊半径在中等模糊效果下性能往往比标准高斯模糊更好。// Kawase Blur 核心采样一次迭代 fixed4 frag_kawase (v2f i) : SV_Target { fixed4 col 0; col tex2D(_MainTex, i.uv float2(0.0, _Offset)); col tex2D(_MainTex, i.uv float2(0.0, -_Offset)); col tex2D(_MainTex, i.uv float2(_Offset, 0.0)); col tex2D(_MainTex, i.uv float2(-_Offset, 0.0)); return col * 0.25; }避免每帧全屏模糊如果场景中轮廓物体很少且静止可以尝试只在轮廓物体移动或状态改变时更新其轮廓区域而不是每帧对整个Mask纹理进行全屏模糊。但这实现复杂度较高需权衡。实现一个无锯齿、正确处理遮挡的轮廓效果确实比想象中要复杂。它涉及对渲染管线、屏幕空间后处理、深度缓冲和图像滤波的深入理解。但一旦你打通了这条路径这套技术栈不仅可以用于轮廓其思想如ID缓冲、深度感知的后处理完全可以迁移到其他高级特效中比如物体高亮、交互描边、场景分割等。
)
