1. 项目概述为什么我们需要一个独立的UGUI外描边方案在Unity的UI开发中给文字或图片添加描边效果是提升视觉层次感和辨识度的常见需求。Unity自带的UGUI组件比如TextMeshPro确实提供了内置的描边功能。但用过的人都知道这个内置描边有几个“硬伤”一是性能开销大尤其是在移动端一个带描边的文本其Draw Call和顶点数会成倍增加二是效果单一只能做等宽的、颜色均匀的描边想做渐变、发光或者更复杂的边缘效果就无能为力了三是控制粒度粗你很难精细地控制描边的扩散方式、抗锯齿效果或者针对不同材质做特殊处理。特别是从Unity 2017版本开始Unity的渲染管线、Shader编写规范都发生了一些变化一些老旧的、基于屏幕后处理或者多重Mesh叠加的描边方案在新的环境下可能会遇到兼容性问题或者无法适配URP/HDRP等可编程渲染管线。因此一个基于Shader实现的、独立于UGUI原生组件的描边方案就成了很多追求效果和性能的项目的刚需。这个方案的核心目标就是用一份自定义的Shader接管UI元素的边缘绘制在单次绘制调用内实现高质量、可定制且高性能的描边效果。它适合所有使用UGUI进行界面开发并对UI视觉效果有较高要求的开发者。无论你是想优化现有项目的UI性能还是想实现一些炫酷的UI外发光、霓虹灯效果这个基于Shader的方案都能给你提供一个清晰、可扩展的实现路径。接下来我将从设计思路、Shader原理、具体实现到避坑技巧完整地拆解这个方案。2. 方案核心设计思路与选型考量实现一个UI描边从原理上无非几种思路多重绘制、顶点扩张、后处理。我们需要从中选出最适合UGUI和当前Unity版本的那一个。2.1 主流方案对比与取舍1. 多重Mesh绘制UGUI内置方案原理这是最直观的方法复制多份相同的Mesh通过修改顶点位置向外偏移和颜色设置为描边色在底层多次绘制。TextMeshPro的描边就是这么干的。它的优点是逻辑简单与UI系统耦合度低。但缺点极其明显每个描边像素都对应额外的顶点和三角形一个简单的文字开启描边后顶点数可能暴涨4-8倍Draw Call也随之增加对性能是毁灭性的打击在移动端或复杂UI界面中基本不可用。2. 屏幕后处理Image Effect通过渲染完UI的相机抓取一张屏幕纹理然后用一个全屏Shader识别UI元素的边缘通常通过颜色或深度差并在边缘处绘制描边。这种方案的优点是与UI复杂度无关无论屏幕上多少UI后处理的开销基本固定。但缺点同样致命它难以区分UI层级可能会把不该描边的元素也描上对半透明UI的处理很棘手更重要的是它无法与UI的Mask、RectMask2D等裁剪组件很好地协作容易穿帮。3. 基于顶点扩张的Shader方案我们的选择这是目前公认最适合UGUI的高性能描边方案。其核心思想是在顶点着色器阶段将每个顶点沿着其法线或简单计算出的外扩方向向外移动一段距离然后在片段着色器中通过判断纹理坐标是否在原图范围内来决定是绘制本体还是描边。优点仅增加极少的Shader计算开销顶点数和Draw Call保持不变性能最优。效果精确完全受UI层级和裁剪管理。可定制性极强可以轻松实现渐变、模糊、图案描边等高级效果。缺点实现相对复杂需要理解顶点变换和纹理采样。对于非常复杂的图形如带有空洞的字体简单的顶点外扩可能无法产生完美的描边需要更复杂的算法如SDF有向距离场。为什么在Unity2017后更推荐此方案Unity 2017及之后的版本对ShaderLab语法和标准着色器有了更明确的规范同时SRP可编程渲染管线开始普及。基于顶点/片元的Shader拥有最好的跨管线兼容性。无论是内置管线、URP还是HDRP我们都可以通过编写对应的Unlit或Sprite Shader变体来适配确保了方案的长期可用性和可移植性。2.2 我们的Shader方案架构设计我们的目标是编写一个通用的UI描边Shader它可以被赋予任何Image或TextMeshPro - Text组件需配合TMP自带的材质替代功能。其工作流程如下材质准备创建一个使用我们自定义Shader的材质球并设置好描边颜色、宽度等参数。顶点着色器接收模型空间顶点位置、UV等信息。计算顶点的外扩方向通常使用顶点法线或通过顶点到模型中心的向量近似计算。根据“描边宽度”参数将顶点位置沿外扩方向偏移。这里的关键是偏移量需要在投影空间Clip Space保持恒定宽度否则透视相机会导致描边粗细不均。我们通常将宽度转换到世界空间或视图空间的一个固定单位。片段片元着色器采样主纹理获取原始颜色和透明度Alpha。判断当前片元像素的纹理坐标是否在“原始图形”的范围内。一个经典的技巧是在顶点着色器中我们传递两套UV信息——一套是原始UV另一套是经过轻微收缩的“内UV”。在片段着色器中如果当前片元的内UV在有效范围如0到1内则绘制本体否则绘制描边色。处理抗锯齿让描边边缘平滑过渡。参数控制通过Shader的Properties块暴露参数给Unity编辑器如_OutlineColor描边颜色、_OutlineWidth描边宽度、_OutlineSoftness边缘柔化度等。这个架构确保了我们在一个Pass内完成所有工作性能开销最小同时为效果定制留下了充足的空间。3. Shader实现细节与核心代码解析下面我将以一个适用于Unity内置渲染管线的Unlit Shader为例逐步拆解关键代码。这个Shader稍作修改即可用于URP使用HLSL和SRP Batcher或HDRP。3.1 Shader属性与变量定义首先我们在Shader的Properties块中定义可供美术或策划调节的参数。Shader Custom/UI/Outline { Properties { [PerRendererData] _MainTex (Sprite Texture, 2D) white {} _Color (Tint, Color) (1,1,1,1) // 核心描边参数 _OutlineColor (Outline Color, Color) (0,0,0,1) _OutlineWidth (Outline Width, Range(0, 10)) 2 _OutlineSoftness (Outline Softness, Range(0, 1)) 0.2 // 高级参数用于处理复杂形状 _UseAlphaClip (Use Alpha Clip, Range(0,1)) 1 _AlphaThreshold (Alpha Threshold, Range(0,1)) 0.01 // UI Shader必备参数 _StencilComp (Stencil Comparison, Float) 8 _Stencil (Stencil ID, Float) 0 _StencilOp (Stencil Operation, Float) 0 _StencilWriteMask (Stencil Write Mask, Float) 255 _StencilReadMask (Stencil Read Mask, Float) 255 _ColorMask (Color Mask, Float) 15 [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip (Use Alpha Clip, Float) 0 }_OutlineWidth这里的范围是0-10单位是像素吗并不是。在Shader中直接使用像素单位是困难的因为顶点位置在投影空间。我们通常将其作为一个缩放因子。在实际顶点偏移计算时我们会将其转换为一个与屏幕分辨率或视图空间相关的比例值。例如可以乘以一个固定的系数如0.001再结合视图空间下的转换。[PerRendererData]这个标签对于UI Shader非常重要。它告诉Unity这个纹理属性可能会被每个使用此材质的Renderer单独设置例如不同的Image使用不同的Sprite。这对于合批Batching优化至关重要。_Stencil系列参数这是UGUI实现Masking遮罩功能的基石。我们的Shader必须包含这些参数并正确处理模板测试才能与Mask或RectMask2D组件协同工作。3.2 顶点着色器实现智能顶点外扩顶点着色器的任务是计算每个顶点最终在屏幕上的位置。对于描边我们需要生成两套位置信息一套用于原始图形一套用于描边区域。但更高效的做法是只计算外扩后的位置然后在片段着色器中进行区分。v2f vert(appdata_t IN) { v2f OUT; UNITY_SETUP_INSTANCE_ID(IN); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT); UNITY_TRANSFER_INSTANCE_ID(IN, OUT); // 1. 计算顶点外扩方向 // 方法A使用法线如果Mesh有法线信息。UI的Quad通常有简单的法线。 float3 outlineOffset IN.normal * _OutlineWidth * 0.001; // 0.001是一个经验缩放系数 // 方法B更通用计算从模型中心到顶点的方向近似外扩方向。 // float3 outlineOffset normalize(IN.vertex.xyz) * _OutlineWidth * 0.001; // 2. 将偏移应用到模型空间顶点 float4 modifiedVertex IN.vertex; modifiedVertex.xyz outlineOffset; // 3. 将模型空间顶点变换到裁剪空间 #ifdef UNITY_UI_CLIP_RECT OUT.worldPosition modifiedVertex.xyz; #endif OUT.vertex UnityObjectToClipPos(modifiedVertex); // 关键变换 // 4. 传递纹理坐标 OUT.texcoord IN.texcoord; OUT.color IN.color * _Color; // 5. 计算并传递“内缩UV”用于片段着色器判断内外 // 原理将UV从[0,1]范围向中心收缩。收缩量由描边宽度和纹理尺寸决定。 float2 texelSize float2(1.0 / _MainTex_TexelSize.z, 1.0 / _MainTex_TexelSize.w); // 近似获取纹理像素大小 float2 inwardBias _OutlineWidth * texelSize * 0.5; // 收缩半个描边宽度 OUT.texcoordInner IN.texcoord * (1 - 2 * inwardBias) inwardBias; // 线性映射到内缩范围 // 计算并传递裁剪空间位置用于某些特效 OUT.clipPos OUT.vertex; return OUT; }关键点解析UnityObjectToClipPos这个内置函数负责将顶点从模型空间变换到裁剪空间是顶点变换的核心。我们对外扩后的顶点进行这个变换。外扩方向的计算使用法线(IN.normal)是最物理准确的方式前提是UI网格导入了法线。对于简单的Quad法线通常是(0,0,1)或(0,0,-1)这会导致所有顶点朝同一方向外扩形成“膨胀”效果而非“描边”。因此对于UI描边方法B从中心到顶点的方向通常更有效它能产生正确的放射状外扩。更高级的实现会预计算每个顶点的外扩向量并存储在顶点颜色或另一套UV中。内缩UV的计算OUT.texcoordInner是这个方案的灵魂。我们在顶点阶段预先计算好一个收缩后的UV范围。在片段阶段如果当前像素的原始UV(IN.texcoord)落在这个内缩范围内说明它属于原始图形内部否则就属于描边区域。_MainTex_TexelSize是Unity提供的纹理像素大小信息帮助我们进行与纹理分辨率相关的计算使描边宽度在不同分辨率的Sprite上表现一致。3.3 片段着色器判断与混合片段着色器决定每个像素最终的颜色。fixed4 frag(v2f IN) : SV_Target { UNITY_SETUP_INSTANCE_ID(IN); // 1. 采样主纹理 half4 color tex2D(_MainTex, IN.texcoord) * IN.color; // 2. Alpha裁剪可选用于硬边缘 #ifdef UNITY_UI_ALPHACLIP clip (color.a - _AlphaThreshold); #endif // 3. 核心逻辑判断像素属于本体还是描边 // 计算当前像素UV到内缩UV边界的距离在各轴上的最小值 float2 distanceToInnerEdge; distanceToInnerEdge.x min(IN.texcoord.x - 0.0, 1.0 - IN.texcoord.x); // 到原始UV左右边界的距离 distanceToInnerEdge.y min(IN.texcoord.y - 0.0, 1.0 - IN.texcoord.y); // 到原始UV上下边界的距离 // 更精确的判断计算到内缩矩形边界的符号距离 float2 innerMin IN.texcoordInner; float2 innerMax 1.0 - IN.texcoordInner; // 假设对称内缩 // 简化版使用step函数进行硬判断 float isInner step(IN.texcoordInner.x, IN.texcoord.x) * step(IN.texcoord.x, 1.0 - IN.texcoordInner.x) * step(IN.texcoordInner.y, IN.texcoord.y) * step(IN.texcoord.y, 1.0 - IN.texcoordInner.y); // 4. 混合颜色 half4 finalColor color; if (isInner 0.5) // 如果像素在内缩区域外即描边区域 { // 绘制描边色并继承本体的Alpha值以实现平滑过渡 finalColor.rgb _OutlineColor.rgb; // 边缘柔化处理根据到边界的距离进行Alpha插值 float minEdgeDistance min(distanceToInnerEdge.x, distanceToInnerEdge.y); float softFactor saturate(minEdgeDistance / _OutlineSoftness); // _OutlineSoftness控制柔化范围 finalColor.a color.a * _OutlineColor.a * softFactor; } else { // 绘制本体 finalColor color; } // 5. 处理UI遮罩关键 #ifdef UNITY_UI_CLIP_RECT finalColor.a * UnityGet2DClipping(IN.worldPosition.xy, _ClipRect); #endif #ifdef UNITY_UI_ALPHACLIP clip (finalColor.a - 0.001); #endif return finalColor; }关键点解析判断逻辑我们使用step函数构建了一个二进制判断。step(a, b)在ba时返回1否则返回0。四个step相乘只有当前UV在所有维度上都位于内缩UV范围内时isInner才为1。这是一种性能较好的硬边缘判断。边缘柔化硬判断会产生锯齿感。我们通过计算像素到原始UV边界的最近距离(minEdgeDistance)并用_OutlineSoftness参数进行平滑插值(saturate(minEdgeDistance / _OutlineSoftness))来实现边缘的抗锯齿AA效果。softFactor在边界处为0向内逐渐变为1使得描边的Alpha值平滑过渡。UI遮罩集成#ifdef UNITY_UI_CLIP_RECT和UnityGet2DClipping是UGUI裁剪功能的核心。它根据UI元素的_ClipRect通常由Mask组件设置来裁剪像素。这是我们的Shader能与其他UI组件正确交互的保证必须保留。颜色混合注意在描边区域我们替换了RGB颜色为_OutlineColor.rgb但保留了原始纹理采样结果的Alpha值(color.a)并进行柔化处理。这样做的目的是让描边能够平滑地融入背景特别是在图形边缘有半透明细节时。4. 在Unity中的完整配置与使用流程有了Shader代码我们需要在Unity中将其投入使用。这个过程涉及到材质创建、参数调节以及与UGUI组件的结合。4.1 创建材质与基础配置创建Shader文件在Project窗口中右键Create - Shader - Unlit Shader然后将上面的代码复制进去并重命名为UIOutline.shader。创建材质球在Project窗口中右键Create - Material命名为UIOutlineMat。在Inspector面板中将Shader选择为我们刚创建的Custom/UI/Outline。配置材质参数Outline Color设置描边的颜色。Outline Width调整描边的粗细。你会发现这个值的影响是非线性的需要根据实际效果微调。通常2-5之间能获得较好的效果。Outline Softness设置为0.1-0.3可以让边缘看起来更柔和消除锯齿。将_MainTex的默认值保持为white或者拖入一个默认的Sprite纹理。4.2 应用于UGUI Image组件将材质应用到普通的Image组件上是最简单的。在Hierarchy中创建一个UI - Image。为其Source Image属性指定一个Sprite例如一个圆形或一个图标。在Inspector面板的Image组件底部找到Material属性。将我们创建的UIOutlineMat材质球拖拽赋值。立即你就能看到这个Image带上了描边效果。调整材质球上的_OutlineWidth和_OutlineColor参数效果会实时更新。注意直接给Image赋材质会打断UI的合批Batching。因为Unity的UI默认使用一个共享的UI/Default材质进行合批。一旦使用自定义材质这个Image就无法与其他使用默认材质的UI元素合批了可能会增加Draw Call。对于需要大量描边UI的项目建议将多个使用相同描边材质的UI元素放在一起它们之间仍然可以合批。4.3 应用于TextMeshPro文本组件TextMeshProTMP是UGUI更强大的文本解决方案。让它使用我们的描边Shader需要多一步。创建TMP字体材质实例你不能直接把我们的材质赋给TMP文本。需要先让TMP生成一个基于我们Shader的材质。在Scene中创建一个UI - Text - TextMeshPro对象。在它的Inspector面板中找到Font Asset下方的Material Preset区域。点击Material Preset旁边的齿轮图标选择Create Material Preset。这会在和Font Asset相同的目录下创建一个新的材质实例。选中这个新创建的材质实例在Inspector中将它的Shader替换为我们的Custom/UI/Outline。配置TMP材质参数现在这个TMP材质实例拥有了我们Shader的所有属性。设置好描边颜色、宽度等。你会发现TMP文本立刻拥有了描边效果而且性能远优于TMP自带的描边因为顶点数没有增加。应用到其他文本你可以将这个配置好的材质实例拖拽到其他TMP文本组件的Material Preset上快速复用效果。重要提示TMP的字符网格是动态生成的其顶点外扩方向的计算可能比普通Image的Quad更复杂。我们之前Shader中使用的“从中心到顶点的方向”近似法对于TMP这种每个字符独立网格的情况效果可能不完美尤其是在笔画拐角处。对于生产环境一个更稳健的方案是在TMP生成网格时将每个顶点的外扩方向或UV预先计算好并存入顶点颜色或第二套UV中然后在Shader中直接读取使用。这需要修改或扩展TMP的网格生成逻辑复杂度较高但能获得最完美的描边效果。5. 性能优化与高级效果拓展一个基础的描边Shader实现后我们还需要关注其性能和扩展性。5.1 性能优化要点精度选择在移动端尽量使用half或fixed精度在支持的情况下代替float特别是在片段着色器中。例如将float4 color改为half4 color。避免分支片段着色器中的if语句在某些GPU架构上性能较差。我们可以用lerp线性插值函数来替代条件判断。上面的代码可以改写为float isOutline 1.0 - isInner; // 计算描边因子 finalColor.rgb lerp(color.rgb, _OutlineColor.rgb, isOutline); finalColor.a color.a * lerp(1.0, _OutlineColor.a * softFactor, isOutline);这样消除了if分支在某些情况下能提升性能。控制渲染队列UI Shader通常使用QueueTransparent和IgnoreProjectorTrue。确保你的Shader的Tags设置正确避免不必要的渲染开销。合批考量如前所述自定义材质会打断合批。一个优化策略是使用材质属性块MaterialPropertyBlock。你可以让所有描边UI使用同一个材质实例但通过脚本在运行时为每个UI设置不同的_OutlineColor等属性。这样可以保持合批。不过UGUI对MaterialPropertyBlock的支持有限需要谨慎测试。5.2 实现渐变与发光等高级效果我们的Shader框架很容易扩展出酷炫的效果。渐变描边在Properties中添加_OutlineColor2第二个颜色。在片段着色器中根据像素到图形中心的距离或UV的某个方向使用lerp在_OutlineColor和_OutlineColor2之间进行插值。可以添加一个_OutlineGradientScale参数来控制渐变的速度。发光Glow效果 发光可以看作是一种更宽、更柔和的、且可能带有颜色渐变的描边。将_OutlineWidth调大。显著增加_OutlineSoftness的值例如0.5以上让边缘非常模糊。在描边颜色的Alpha通道上应用一个衰减曲线如指数衰减使得离本体越远发光越弱。这可以通过在柔化因子softFactor上应用一个pow函数来实现。图案描边添加一个_OutlineTex描边图案纹理属性。在片段着色器的描边区域不仅使用纯色还采样_OutlineTex。纹理坐标可以使用世界空间坐标、屏幕空间坐标或者基于模型UV进行变换后的坐标从而产生流动、旋转等动态图案效果。// 示例简单的屏幕空间图案描边 float2 screenUV IN.clipPos.xy / IN.clipPos.w * 0.1 _Time.y * 0.1; // 缩放并加入时间流动 half4 pattern tex2D(_OutlineTex, screenUV); finalColor.rgb pattern.rgb * _OutlineColor.rgb; // 图案与颜色混合6. 常见问题排查与实战心得在实际项目中使用这个Shader你肯定会遇到一些坑。以下是我总结的常见问题及解决方案。6.1 描边粗细不一致或闪烁问题描述在摄像机移动或UI缩放时描边宽度看起来在变化或闪烁。根本原因顶点外扩量在模型空间或世界空间计算但未考虑透视投影的影响。在透视相机下离相机越远的物体其顶点在裁剪空间的移动量对屏幕像素的影响越小。解决方案确保外扩计算在视图空间View Space或裁剪空间Clip Space的XY平面上进行并最终作用于裁剪空间坐标。一种常见技巧是在顶点着色器中先将顶点变换到裁剪空间然后直接修改其裁剪空间坐标的xy分量即屏幕像素位置偏移量使用一个基于_OutlineWidth和屏幕高度的固定像素值。OUT.vertex UnityObjectToClipPos(IN.vertex); // 正常变换 // 在裁剪空间进行像素级偏移 float2 clipSpaceOffset _OutlineWidth * _ScreenParams.zw * 2.0; // _ScreenParams.zw是1/屏幕宽高 clipSpaceOffset * OUT.vertex.w; // 乘以w分量以抵消透视影响这是关键 OUT.vertex.xy clipSpaceOffset * float2(1, _ScreenParams.y / _ScreenParams.x); // 考虑宽高比这种方法能保证描边在任何视角和距离下都保持相同的屏幕像素宽度。6.2 描边与Mask或RectMask2D冲突问题描述UI元素在Mask区域内描边部分被错误地裁剪掉了或者跑到了Mask外面。根本原因Shader中的模板测试(Stencil)或裁剪矩形(_ClipRect)逻辑没有正确处理。我们的外扩顶点可能超出了Mask定义的裁剪区域被硬件裁剪掉了。解决方案确保Shader包含正确的Stencil和ClipRect逻辑如前文代码所示必须保留UNITY_UI_CLIP_RECT相关的代码块和UnityGet2DClipping函数调用。理解裁剪顺序Mask的裁剪是基于渲染时像素的屏幕位置。我们的顶点外扩是在顶点着色器完成的只要外扩后的顶点坐标仍在合理的范围内裁剪逻辑就能正常工作。问题可能出在偏移过大导致顶点坐标溢出。可以尝试减小_OutlineWidth或检查外扩计算是否导致顶点位置异常。使用两个Pass一个更复杂但绝对可靠的方法是使用两个Pass渲染。第一个Pass渲染描边关闭深度写入和模板写入但进行模板测试第二个Pass渲染UI本体。这样描边Pass的像素输出不会影响模板缓冲区从而避免干扰后续的Mask测试。但这会增加一倍渲染开销需权衡使用。6.3 文字描边在笔画交叉处出现空洞或粘连问题描述在TMP文字上特别是笔画复杂的字体描边在笔画交叉的角落处可能断开空洞或过度填充粘连。根本原因简单的顶点法线外扩或中心向外扩方向在形状的凹角Concave Corner和凸角Convex Corner处理不佳。凹角处顶点外扩方向是发散的导致覆盖不足空洞凸角处是汇聚的导致过度填充粘连。解决方案使用SDFSigned Distance Field字体这是最完美的解决方案。TMP本身就支持SDF字体。SDF在纹理中存储了每个像素到字形边界的距离信息。在Shader中我们可以通过采样SDF图用一个简单的距离阈值比较就能生成完美平滑、任意宽度的描边且毫无性能损失。实现SDF描边的Shader是另一个主题但其原理类似float distance tex2D(_FaceTex, uv).a; if (distance _OutlineThreshold) { output _OutlineColor; }。如果必须使用普通纹理字体可以考虑在建模/字体生成工具中预先为网格生成好的顶点外扩向量存储在切线或顶点颜色中或者在Shader中使用更复杂的几何方法如沿着边沿法线外扩但这实现成本很高。对于大多数情况接受轻微的不完美或者将_OutlineSoftness调高来模糊化角落缺陷是更实际的选择。6.4 在URP/HDRP中的适配问题描述上面基于内置管线的Shader在URP中无法编译或无效。解决方案URP和HDRP使用不同的Shader库和编写规范。URP适配你需要创建一个URP Unlit Shader模板。核心逻辑不变但需要包含Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl等头文件。使用Varyings和Attributes结构体代替appdata_t和v2f。使用VertexPositionInputs和VertexOutput相关函数进行坐标变换。在SubShader的Tags中将RenderPipelineUniversalPipeline。片段着色器的输出结构体也不同。HDRP适配更为复杂通常建议使用HDRP提供的Unlit或Sprite主节点在Shader Graph中构建因为HDRP的Shader框架差异更大。但原理相通在Shader Graph中你可以通过Position节点获取顶点位置经过一系列计算后输出到Vertex Position实现顶点偏移通过采样纹理和条件判断在片段阶段混合颜色。我个人在实际项目中的体会是对于UI描边如果项目已经升级到URP并且主要使用TMP那么优先采用TMP自带的SDF功能并配合其Softness模拟描边往往是开发效率、效果质量和性能三者平衡的最佳选择。我们的自定义Shader方案其最大价值在于为普通的UGUI Image组件提供了高性能描边能力以及为实现那些超越常规描边的、极具创意的自定义UI效果如动态流光边缘、图案边框等提供了底层支持。它更像是一把瑞士军刀在需要的时候能解决特定问题但在处理批量文字描边这种通用需求时评估SDF等替代方案总是明智的第一步。
1. 项目概述为什么我们需要一个独立的UGUI外描边方案在Unity的UI开发中给文字或图片添加描边效果是提升视觉层次感和辨识度的常见需求。Unity自带的UGUI组件比如TextMeshPro确实提供了内置的描边功能。但用过的人都知道这个内置描边有几个“硬伤”一是性能开销大尤其是在移动端一个带描边的文本其Draw Call和顶点数会成倍增加二是效果单一只能做等宽的、颜色均匀的描边想做渐变、发光或者更复杂的边缘效果就无能为力了三是控制粒度粗你很难精细地控制描边的扩散方式、抗锯齿效果或者针对不同材质做特殊处理。特别是从Unity 2017版本开始Unity的渲染管线、Shader编写规范都发生了一些变化一些老旧的、基于屏幕后处理或者多重Mesh叠加的描边方案在新的环境下可能会遇到兼容性问题或者无法适配URP/HDRP等可编程渲染管线。因此一个基于Shader实现的、独立于UGUI原生组件的描边方案就成了很多追求效果和性能的项目的刚需。这个方案的核心目标就是用一份自定义的Shader接管UI元素的边缘绘制在单次绘制调用内实现高质量、可定制且高性能的描边效果。它适合所有使用UGUI进行界面开发并对UI视觉效果有较高要求的开发者。无论你是想优化现有项目的UI性能还是想实现一些炫酷的UI外发光、霓虹灯效果这个基于Shader的方案都能给你提供一个清晰、可扩展的实现路径。接下来我将从设计思路、Shader原理、具体实现到避坑技巧完整地拆解这个方案。2. 方案核心设计思路与选型考量实现一个UI描边从原理上无非几种思路多重绘制、顶点扩张、后处理。我们需要从中选出最适合UGUI和当前Unity版本的那一个。2.1 主流方案对比与取舍1. 多重Mesh绘制UGUI内置方案原理这是最直观的方法复制多份相同的Mesh通过修改顶点位置向外偏移和颜色设置为描边色在底层多次绘制。TextMeshPro的描边就是这么干的。它的优点是逻辑简单与UI系统耦合度低。但缺点极其明显每个描边像素都对应额外的顶点和三角形一个简单的文字开启描边后顶点数可能暴涨4-8倍Draw Call也随之增加对性能是毁灭性的打击在移动端或复杂UI界面中基本不可用。2. 屏幕后处理Image Effect通过渲染完UI的相机抓取一张屏幕纹理然后用一个全屏Shader识别UI元素的边缘通常通过颜色或深度差并在边缘处绘制描边。这种方案的优点是与UI复杂度无关无论屏幕上多少UI后处理的开销基本固定。但缺点同样致命它难以区分UI层级可能会把不该描边的元素也描上对半透明UI的处理很棘手更重要的是它无法与UI的Mask、RectMask2D等裁剪组件很好地协作容易穿帮。3. 基于顶点扩张的Shader方案我们的选择这是目前公认最适合UGUI的高性能描边方案。其核心思想是在顶点着色器阶段将每个顶点沿着其法线或简单计算出的外扩方向向外移动一段距离然后在片段着色器中通过判断纹理坐标是否在原图范围内来决定是绘制本体还是描边。优点仅增加极少的Shader计算开销顶点数和Draw Call保持不变性能最优。效果精确完全受UI层级和裁剪管理。可定制性极强可以轻松实现渐变、模糊、图案描边等高级效果。缺点实现相对复杂需要理解顶点变换和纹理采样。对于非常复杂的图形如带有空洞的字体简单的顶点外扩可能无法产生完美的描边需要更复杂的算法如SDF有向距离场。为什么在Unity2017后更推荐此方案Unity 2017及之后的版本对ShaderLab语法和标准着色器有了更明确的规范同时SRP可编程渲染管线开始普及。基于顶点/片元的Shader拥有最好的跨管线兼容性。无论是内置管线、URP还是HDRP我们都可以通过编写对应的Unlit或Sprite Shader变体来适配确保了方案的长期可用性和可移植性。2.2 我们的Shader方案架构设计我们的目标是编写一个通用的UI描边Shader它可以被赋予任何Image或TextMeshPro - Text组件需配合TMP自带的材质替代功能。其工作流程如下材质准备创建一个使用我们自定义Shader的材质球并设置好描边颜色、宽度等参数。顶点着色器接收模型空间顶点位置、UV等信息。计算顶点的外扩方向通常使用顶点法线或通过顶点到模型中心的向量近似计算。根据“描边宽度”参数将顶点位置沿外扩方向偏移。这里的关键是偏移量需要在投影空间Clip Space保持恒定宽度否则透视相机会导致描边粗细不均。我们通常将宽度转换到世界空间或视图空间的一个固定单位。片段片元着色器采样主纹理获取原始颜色和透明度Alpha。判断当前片元像素的纹理坐标是否在“原始图形”的范围内。一个经典的技巧是在顶点着色器中我们传递两套UV信息——一套是原始UV另一套是经过轻微收缩的“内UV”。在片段着色器中如果当前片元的内UV在有效范围如0到1内则绘制本体否则绘制描边色。处理抗锯齿让描边边缘平滑过渡。参数控制通过Shader的Properties块暴露参数给Unity编辑器如_OutlineColor描边颜色、_OutlineWidth描边宽度、_OutlineSoftness边缘柔化度等。这个架构确保了我们在一个Pass内完成所有工作性能开销最小同时为效果定制留下了充足的空间。3. Shader实现细节与核心代码解析下面我将以一个适用于Unity内置渲染管线的Unlit Shader为例逐步拆解关键代码。这个Shader稍作修改即可用于URP使用HLSL和SRP Batcher或HDRP。3.1 Shader属性与变量定义首先我们在Shader的Properties块中定义可供美术或策划调节的参数。Shader Custom/UI/Outline { Properties { [PerRendererData] _MainTex (Sprite Texture, 2D) white {} _Color (Tint, Color) (1,1,1,1) // 核心描边参数 _OutlineColor (Outline Color, Color) (0,0,0,1) _OutlineWidth (Outline Width, Range(0, 10)) 2 _OutlineSoftness (Outline Softness, Range(0, 1)) 0.2 // 高级参数用于处理复杂形状 _UseAlphaClip (Use Alpha Clip, Range(0,1)) 1 _AlphaThreshold (Alpha Threshold, Range(0,1)) 0.01 // UI Shader必备参数 _StencilComp (Stencil Comparison, Float) 8 _Stencil (Stencil ID, Float) 0 _StencilOp (Stencil Operation, Float) 0 _StencilWriteMask (Stencil Write Mask, Float) 255 _StencilReadMask (Stencil Read Mask, Float) 255 _ColorMask (Color Mask, Float) 15 [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip (Use Alpha Clip, Float) 0 }_OutlineWidth这里的范围是0-10单位是像素吗并不是。在Shader中直接使用像素单位是困难的因为顶点位置在投影空间。我们通常将其作为一个缩放因子。在实际顶点偏移计算时我们会将其转换为一个与屏幕分辨率或视图空间相关的比例值。例如可以乘以一个固定的系数如0.001再结合视图空间下的转换。[PerRendererData]这个标签对于UI Shader非常重要。它告诉Unity这个纹理属性可能会被每个使用此材质的Renderer单独设置例如不同的Image使用不同的Sprite。这对于合批Batching优化至关重要。_Stencil系列参数这是UGUI实现Masking遮罩功能的基石。我们的Shader必须包含这些参数并正确处理模板测试才能与Mask或RectMask2D组件协同工作。3.2 顶点着色器实现智能顶点外扩顶点着色器的任务是计算每个顶点最终在屏幕上的位置。对于描边我们需要生成两套位置信息一套用于原始图形一套用于描边区域。但更高效的做法是只计算外扩后的位置然后在片段着色器中进行区分。v2f vert(appdata_t IN) { v2f OUT; UNITY_SETUP_INSTANCE_ID(IN); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT); UNITY_TRANSFER_INSTANCE_ID(IN, OUT); // 1. 计算顶点外扩方向 // 方法A使用法线如果Mesh有法线信息。UI的Quad通常有简单的法线。 float3 outlineOffset IN.normal * _OutlineWidth * 0.001; // 0.001是一个经验缩放系数 // 方法B更通用计算从模型中心到顶点的方向近似外扩方向。 // float3 outlineOffset normalize(IN.vertex.xyz) * _OutlineWidth * 0.001; // 2. 将偏移应用到模型空间顶点 float4 modifiedVertex IN.vertex; modifiedVertex.xyz outlineOffset; // 3. 将模型空间顶点变换到裁剪空间 #ifdef UNITY_UI_CLIP_RECT OUT.worldPosition modifiedVertex.xyz; #endif OUT.vertex UnityObjectToClipPos(modifiedVertex); // 关键变换 // 4. 传递纹理坐标 OUT.texcoord IN.texcoord; OUT.color IN.color * _Color; // 5. 计算并传递“内缩UV”用于片段着色器判断内外 // 原理将UV从[0,1]范围向中心收缩。收缩量由描边宽度和纹理尺寸决定。 float2 texelSize float2(1.0 / _MainTex_TexelSize.z, 1.0 / _MainTex_TexelSize.w); // 近似获取纹理像素大小 float2 inwardBias _OutlineWidth * texelSize * 0.5; // 收缩半个描边宽度 OUT.texcoordInner IN.texcoord * (1 - 2 * inwardBias) inwardBias; // 线性映射到内缩范围 // 计算并传递裁剪空间位置用于某些特效 OUT.clipPos OUT.vertex; return OUT; }关键点解析UnityObjectToClipPos这个内置函数负责将顶点从模型空间变换到裁剪空间是顶点变换的核心。我们对外扩后的顶点进行这个变换。外扩方向的计算使用法线(IN.normal)是最物理准确的方式前提是UI网格导入了法线。对于简单的Quad法线通常是(0,0,1)或(0,0,-1)这会导致所有顶点朝同一方向外扩形成“膨胀”效果而非“描边”。因此对于UI描边方法B从中心到顶点的方向通常更有效它能产生正确的放射状外扩。更高级的实现会预计算每个顶点的外扩向量并存储在顶点颜色或另一套UV中。内缩UV的计算OUT.texcoordInner是这个方案的灵魂。我们在顶点阶段预先计算好一个收缩后的UV范围。在片段阶段如果当前像素的原始UV(IN.texcoord)落在这个内缩范围内说明它属于原始图形内部否则就属于描边区域。_MainTex_TexelSize是Unity提供的纹理像素大小信息帮助我们进行与纹理分辨率相关的计算使描边宽度在不同分辨率的Sprite上表现一致。3.3 片段着色器判断与混合片段着色器决定每个像素最终的颜色。fixed4 frag(v2f IN) : SV_Target { UNITY_SETUP_INSTANCE_ID(IN); // 1. 采样主纹理 half4 color tex2D(_MainTex, IN.texcoord) * IN.color; // 2. Alpha裁剪可选用于硬边缘 #ifdef UNITY_UI_ALPHACLIP clip (color.a - _AlphaThreshold); #endif // 3. 核心逻辑判断像素属于本体还是描边 // 计算当前像素UV到内缩UV边界的距离在各轴上的最小值 float2 distanceToInnerEdge; distanceToInnerEdge.x min(IN.texcoord.x - 0.0, 1.0 - IN.texcoord.x); // 到原始UV左右边界的距离 distanceToInnerEdge.y min(IN.texcoord.y - 0.0, 1.0 - IN.texcoord.y); // 到原始UV上下边界的距离 // 更精确的判断计算到内缩矩形边界的符号距离 float2 innerMin IN.texcoordInner; float2 innerMax 1.0 - IN.texcoordInner; // 假设对称内缩 // 简化版使用step函数进行硬判断 float isInner step(IN.texcoordInner.x, IN.texcoord.x) * step(IN.texcoord.x, 1.0 - IN.texcoordInner.x) * step(IN.texcoordInner.y, IN.texcoord.y) * step(IN.texcoord.y, 1.0 - IN.texcoordInner.y); // 4. 混合颜色 half4 finalColor color; if (isInner 0.5) // 如果像素在内缩区域外即描边区域 { // 绘制描边色并继承本体的Alpha值以实现平滑过渡 finalColor.rgb _OutlineColor.rgb; // 边缘柔化处理根据到边界的距离进行Alpha插值 float minEdgeDistance min(distanceToInnerEdge.x, distanceToInnerEdge.y); float softFactor saturate(minEdgeDistance / _OutlineSoftness); // _OutlineSoftness控制柔化范围 finalColor.a color.a * _OutlineColor.a * softFactor; } else { // 绘制本体 finalColor color; } // 5. 处理UI遮罩关键 #ifdef UNITY_UI_CLIP_RECT finalColor.a * UnityGet2DClipping(IN.worldPosition.xy, _ClipRect); #endif #ifdef UNITY_UI_ALPHACLIP clip (finalColor.a - 0.001); #endif return finalColor; }关键点解析判断逻辑我们使用step函数构建了一个二进制判断。step(a, b)在ba时返回1否则返回0。四个step相乘只有当前UV在所有维度上都位于内缩UV范围内时isInner才为1。这是一种性能较好的硬边缘判断。边缘柔化硬判断会产生锯齿感。我们通过计算像素到原始UV边界的最近距离(minEdgeDistance)并用_OutlineSoftness参数进行平滑插值(saturate(minEdgeDistance / _OutlineSoftness))来实现边缘的抗锯齿AA效果。softFactor在边界处为0向内逐渐变为1使得描边的Alpha值平滑过渡。UI遮罩集成#ifdef UNITY_UI_CLIP_RECT和UnityGet2DClipping是UGUI裁剪功能的核心。它根据UI元素的_ClipRect通常由Mask组件设置来裁剪像素。这是我们的Shader能与其他UI组件正确交互的保证必须保留。颜色混合注意在描边区域我们替换了RGB颜色为_OutlineColor.rgb但保留了原始纹理采样结果的Alpha值(color.a)并进行柔化处理。这样做的目的是让描边能够平滑地融入背景特别是在图形边缘有半透明细节时。4. 在Unity中的完整配置与使用流程有了Shader代码我们需要在Unity中将其投入使用。这个过程涉及到材质创建、参数调节以及与UGUI组件的结合。4.1 创建材质与基础配置创建Shader文件在Project窗口中右键Create - Shader - Unlit Shader然后将上面的代码复制进去并重命名为UIOutline.shader。创建材质球在Project窗口中右键Create - Material命名为UIOutlineMat。在Inspector面板中将Shader选择为我们刚创建的Custom/UI/Outline。配置材质参数Outline Color设置描边的颜色。Outline Width调整描边的粗细。你会发现这个值的影响是非线性的需要根据实际效果微调。通常2-5之间能获得较好的效果。Outline Softness设置为0.1-0.3可以让边缘看起来更柔和消除锯齿。将_MainTex的默认值保持为white或者拖入一个默认的Sprite纹理。4.2 应用于UGUI Image组件将材质应用到普通的Image组件上是最简单的。在Hierarchy中创建一个UI - Image。为其Source Image属性指定一个Sprite例如一个圆形或一个图标。在Inspector面板的Image组件底部找到Material属性。将我们创建的UIOutlineMat材质球拖拽赋值。立即你就能看到这个Image带上了描边效果。调整材质球上的_OutlineWidth和_OutlineColor参数效果会实时更新。注意直接给Image赋材质会打断UI的合批Batching。因为Unity的UI默认使用一个共享的UI/Default材质进行合批。一旦使用自定义材质这个Image就无法与其他使用默认材质的UI元素合批了可能会增加Draw Call。对于需要大量描边UI的项目建议将多个使用相同描边材质的UI元素放在一起它们之间仍然可以合批。4.3 应用于TextMeshPro文本组件TextMeshProTMP是UGUI更强大的文本解决方案。让它使用我们的描边Shader需要多一步。创建TMP字体材质实例你不能直接把我们的材质赋给TMP文本。需要先让TMP生成一个基于我们Shader的材质。在Scene中创建一个UI - Text - TextMeshPro对象。在它的Inspector面板中找到Font Asset下方的Material Preset区域。点击Material Preset旁边的齿轮图标选择Create Material Preset。这会在和Font Asset相同的目录下创建一个新的材质实例。选中这个新创建的材质实例在Inspector中将它的Shader替换为我们的Custom/UI/Outline。配置TMP材质参数现在这个TMP材质实例拥有了我们Shader的所有属性。设置好描边颜色、宽度等。你会发现TMP文本立刻拥有了描边效果而且性能远优于TMP自带的描边因为顶点数没有增加。应用到其他文本你可以将这个配置好的材质实例拖拽到其他TMP文本组件的Material Preset上快速复用效果。重要提示TMP的字符网格是动态生成的其顶点外扩方向的计算可能比普通Image的Quad更复杂。我们之前Shader中使用的“从中心到顶点的方向”近似法对于TMP这种每个字符独立网格的情况效果可能不完美尤其是在笔画拐角处。对于生产环境一个更稳健的方案是在TMP生成网格时将每个顶点的外扩方向或UV预先计算好并存入顶点颜色或第二套UV中然后在Shader中直接读取使用。这需要修改或扩展TMP的网格生成逻辑复杂度较高但能获得最完美的描边效果。5. 性能优化与高级效果拓展一个基础的描边Shader实现后我们还需要关注其性能和扩展性。5.1 性能优化要点精度选择在移动端尽量使用half或fixed精度在支持的情况下代替float特别是在片段着色器中。例如将float4 color改为half4 color。避免分支片段着色器中的if语句在某些GPU架构上性能较差。我们可以用lerp线性插值函数来替代条件判断。上面的代码可以改写为float isOutline 1.0 - isInner; // 计算描边因子 finalColor.rgb lerp(color.rgb, _OutlineColor.rgb, isOutline); finalColor.a color.a * lerp(1.0, _OutlineColor.a * softFactor, isOutline);这样消除了if分支在某些情况下能提升性能。控制渲染队列UI Shader通常使用QueueTransparent和IgnoreProjectorTrue。确保你的Shader的Tags设置正确避免不必要的渲染开销。合批考量如前所述自定义材质会打断合批。一个优化策略是使用材质属性块MaterialPropertyBlock。你可以让所有描边UI使用同一个材质实例但通过脚本在运行时为每个UI设置不同的_OutlineColor等属性。这样可以保持合批。不过UGUI对MaterialPropertyBlock的支持有限需要谨慎测试。5.2 实现渐变与发光等高级效果我们的Shader框架很容易扩展出酷炫的效果。渐变描边在Properties中添加_OutlineColor2第二个颜色。在片段着色器中根据像素到图形中心的距离或UV的某个方向使用lerp在_OutlineColor和_OutlineColor2之间进行插值。可以添加一个_OutlineGradientScale参数来控制渐变的速度。发光Glow效果 发光可以看作是一种更宽、更柔和的、且可能带有颜色渐变的描边。将_OutlineWidth调大。显著增加_OutlineSoftness的值例如0.5以上让边缘非常模糊。在描边颜色的Alpha通道上应用一个衰减曲线如指数衰减使得离本体越远发光越弱。这可以通过在柔化因子softFactor上应用一个pow函数来实现。图案描边添加一个_OutlineTex描边图案纹理属性。在片段着色器的描边区域不仅使用纯色还采样_OutlineTex。纹理坐标可以使用世界空间坐标、屏幕空间坐标或者基于模型UV进行变换后的坐标从而产生流动、旋转等动态图案效果。// 示例简单的屏幕空间图案描边 float2 screenUV IN.clipPos.xy / IN.clipPos.w * 0.1 _Time.y * 0.1; // 缩放并加入时间流动 half4 pattern tex2D(_OutlineTex, screenUV); finalColor.rgb pattern.rgb * _OutlineColor.rgb; // 图案与颜色混合6. 常见问题排查与实战心得在实际项目中使用这个Shader你肯定会遇到一些坑。以下是我总结的常见问题及解决方案。6.1 描边粗细不一致或闪烁问题描述在摄像机移动或UI缩放时描边宽度看起来在变化或闪烁。根本原因顶点外扩量在模型空间或世界空间计算但未考虑透视投影的影响。在透视相机下离相机越远的物体其顶点在裁剪空间的移动量对屏幕像素的影响越小。解决方案确保外扩计算在视图空间View Space或裁剪空间Clip Space的XY平面上进行并最终作用于裁剪空间坐标。一种常见技巧是在顶点着色器中先将顶点变换到裁剪空间然后直接修改其裁剪空间坐标的xy分量即屏幕像素位置偏移量使用一个基于_OutlineWidth和屏幕高度的固定像素值。OUT.vertex UnityObjectToClipPos(IN.vertex); // 正常变换 // 在裁剪空间进行像素级偏移 float2 clipSpaceOffset _OutlineWidth * _ScreenParams.zw * 2.0; // _ScreenParams.zw是1/屏幕宽高 clipSpaceOffset * OUT.vertex.w; // 乘以w分量以抵消透视影响这是关键 OUT.vertex.xy clipSpaceOffset * float2(1, _ScreenParams.y / _ScreenParams.x); // 考虑宽高比这种方法能保证描边在任何视角和距离下都保持相同的屏幕像素宽度。6.2 描边与Mask或RectMask2D冲突问题描述UI元素在Mask区域内描边部分被错误地裁剪掉了或者跑到了Mask外面。根本原因Shader中的模板测试(Stencil)或裁剪矩形(_ClipRect)逻辑没有正确处理。我们的外扩顶点可能超出了Mask定义的裁剪区域被硬件裁剪掉了。解决方案确保Shader包含正确的Stencil和ClipRect逻辑如前文代码所示必须保留UNITY_UI_CLIP_RECT相关的代码块和UnityGet2DClipping函数调用。理解裁剪顺序Mask的裁剪是基于渲染时像素的屏幕位置。我们的顶点外扩是在顶点着色器完成的只要外扩后的顶点坐标仍在合理的范围内裁剪逻辑就能正常工作。问题可能出在偏移过大导致顶点坐标溢出。可以尝试减小_OutlineWidth或检查外扩计算是否导致顶点位置异常。使用两个Pass一个更复杂但绝对可靠的方法是使用两个Pass渲染。第一个Pass渲染描边关闭深度写入和模板写入但进行模板测试第二个Pass渲染UI本体。这样描边Pass的像素输出不会影响模板缓冲区从而避免干扰后续的Mask测试。但这会增加一倍渲染开销需权衡使用。6.3 文字描边在笔画交叉处出现空洞或粘连问题描述在TMP文字上特别是笔画复杂的字体描边在笔画交叉的角落处可能断开空洞或过度填充粘连。根本原因简单的顶点法线外扩或中心向外扩方向在形状的凹角Concave Corner和凸角Convex Corner处理不佳。凹角处顶点外扩方向是发散的导致覆盖不足空洞凸角处是汇聚的导致过度填充粘连。解决方案使用SDFSigned Distance Field字体这是最完美的解决方案。TMP本身就支持SDF字体。SDF在纹理中存储了每个像素到字形边界的距离信息。在Shader中我们可以通过采样SDF图用一个简单的距离阈值比较就能生成完美平滑、任意宽度的描边且毫无性能损失。实现SDF描边的Shader是另一个主题但其原理类似float distance tex2D(_FaceTex, uv).a; if (distance _OutlineThreshold) { output _OutlineColor; }。如果必须使用普通纹理字体可以考虑在建模/字体生成工具中预先为网格生成好的顶点外扩向量存储在切线或顶点颜色中或者在Shader中使用更复杂的几何方法如沿着边沿法线外扩但这实现成本很高。对于大多数情况接受轻微的不完美或者将_OutlineSoftness调高来模糊化角落缺陷是更实际的选择。6.4 在URP/HDRP中的适配问题描述上面基于内置管线的Shader在URP中无法编译或无效。解决方案URP和HDRP使用不同的Shader库和编写规范。URP适配你需要创建一个URP Unlit Shader模板。核心逻辑不变但需要包含Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl等头文件。使用Varyings和Attributes结构体代替appdata_t和v2f。使用VertexPositionInputs和VertexOutput相关函数进行坐标变换。在SubShader的Tags中将RenderPipelineUniversalPipeline。片段着色器的输出结构体也不同。HDRP适配更为复杂通常建议使用HDRP提供的Unlit或Sprite主节点在Shader Graph中构建因为HDRP的Shader框架差异更大。但原理相通在Shader Graph中你可以通过Position节点获取顶点位置经过一系列计算后输出到Vertex Position实现顶点偏移通过采样纹理和条件判断在片段阶段混合颜色。我个人在实际项目中的体会是对于UI描边如果项目已经升级到URP并且主要使用TMP那么优先采用TMP自带的SDF功能并配合其Softness模拟描边往往是开发效率、效果质量和性能三者平衡的最佳选择。我们的自定义Shader方案其最大价值在于为普通的UGUI Image组件提供了高性能描边能力以及为实现那些超越常规描边的、极具创意的自定义UI效果如动态流光边缘、图案边框等提供了底层支持。它更像是一把瑞士军刀在需要的时候能解决特定问题但在处理批量文字描边这种通用需求时评估SDF等替代方案总是明智的第一步。
