1. 项目概述为什么要在UI上“无中生有”地做流光在Unity UI开发中特效是提升视觉反馈和沉浸感的关键。我们经常遇到这样的需求一个按钮需要高亮提示一个进度条需要动态填充光效或者一个图标需要呼吸般的脉动感。传统做法是什么找美术同学要序列帧动画或者要一张精心绘制的流光贴图然后在UI Image组件里播放动画或滚动UV。这方法稳吗稳。但问题也很明显资源依赖强、调整不灵活、性能有开销特别是多实例时而且一旦设计需求变动比如“流光角度从45度改成30度”、“光带再宽一点”你就得回去找美术返工沟通成本和迭代周期都上来了。所以这个项目的核心价值就出来了用Shader在运行时“计算”出流光效果彻底摆脱对预制贴图的依赖。你听到的“不用贴图”就是这个意思。这不是炫技而是实打实的生产力提升。通过编写一个自定义的UI Shader我们可以用几行代码定义光带的颜色、宽度、流动速度和角度所有参数都能在材质球Material上实时调节美术和策划在编辑器里拖拖滑块就能看到效果程序也无需反复打包资源。这种动态生成的效果在应对UI皮肤切换、主题色变化等场景时优势巨大。这个实战项目适合谁如果你是一个Unity开发者已经熟悉了基本的UI搭建但对Shader感到神秘又向往想亲手写一个能实际用在项目里的效果那这就是为你准备的。我们将从最基础的Shader语法讲起手把手带你推导算法最终实现一个高度可定制、性能友好的UI流光Shader。你会发现Shader没那么可怕它只是一套描述“每个像素该怎么画”的规则。2. 核心原理拆解流光效果是如何被“算”出来的在深入代码之前我们必须搞清楚目标。我们想要的流光本质上是一条倾斜的、有宽度的、颜色渐变的亮带在UI元素上周期性扫过。用贴图是实现它的“结果”而用Shader是实现它的“过程”。这个过程可以分解为几个核心数学问题。2.1 核心思路倾斜的梯度与周期性运动想象一下我们要在一个矩形的UI控件上画光。如果光带是水平的那很简单我们只关心像素的垂直坐标V坐标让亮度随着V坐标变化即可。但现在光带是倾斜的比如30度角。这就意味着我们不能单纯用U或V坐标而需要用一个“投影”的思想。关键算法点积投影我们把整个UI的UV坐标系0,0到1,1想象成一个二维平面。一条穿过原点、方向为(cosθ, sinθ)的直线θ是我们的流光角度就代表了光带的中轴线。对于UV平面上的任意一个像素点(u, v)我们如何知道它离这条中轴线有多远呢数学上这可以通过计算该点到直线的“有向距离”来实现。一个高效的方法是使用点积Dot Product。我们构造一个单位方向向量dir (cosθ, sinθ)。那么像素点pos (u-0.5, v-0.5)注意这里将UV中心移到(0.5,0.5)是为了让效果基于UI中心对称在dir方向上的投影长度proj dot(pos, dir)。这个proj值非常有用它的大小代表了像素点沿光带方向上的“进度”。它的正负代表了像素点在中轴线的哪一侧。如何形成光带我们并不直接使用proj作为亮度因为那会形成一条无限细的线。我们需要宽度。假设我们设定的光带宽度为width比如0.2。我们可以认为在[-width/2, width/2]这个区间内的proj值对应的像素是位于光带内部的。那么一个像素的“光带内位置强度”可以表示为strength 1.0 - abs(proj) / (width/2)这样在光带中心 (proj0) 时强度为1在光带边缘 (proj±width/2) 时强度为0。这就形成了一个梯度的、有宽度的条带。2.2 让光“流”起来时间与相位静态的光带不是我们想要的。我们需要它动起来也就是“流”。这如何实现让整个判断标准随着时间移动即可。我们可以引入一个时间变量_Time.yUnity内置的秒级时间。让光带的中轴线沿着其垂直方向即法线方向随时间平移。在Shader中这可以简化为给投影值proj加上一个随时间变化的偏移量offset。offset _Time.y * _Speed那么判断像素是否在光带内的计算就变成了flow proj offsetstrength 1.0 - abs(flow) / (width/2)但这会产生一个问题offset会无限增大flow值会超出合理范围导致效果可能不连续。为了解决这个问题我们引入周期函数。常用的方法是使用frac函数取小数部分。我们让offset是周期性的例如phase frac(_Time.y * _Speed)flow proj - phase * (1.0 width)// 减号是为了让光从左上方向右下方流动的视觉习惯 这样phase在0到1之间循环flow的值域也被限制在了一个周期范围内光带就会周而复始地平滑流动。2.3 颜色与边缘柔化有了strength它只是一个0到1的灰度值。我们需要把它映射成颜色。通常流光会有主色和边缘衰减。我们可以定义两个颜色_Color流光主色和_ColorEdge边缘色通常是主色的淡色或白色。然后进行插值lerp(_ColorEdge, _Color, strength)但这还不够我们希望光带中心最亮向两侧平滑衰减到透明。这就需要用到平滑步进函数smoothstep。smoothstep(min, max, x)会在x处于min和max之间时返回一个0到1的平滑过渡值。 我们可以用strength来控制平滑区间生成一个平滑的亮度遮罩maskmask smoothstep(0.0, _Softness, strength)这里_Softness是一个控制边缘羽化程度的参数。mask值再乘以我们插值得到的颜色最后与UI原本的颜色纹理采样或纯色进行混合通常是加法混合Additive流光效果就叠加上了。注意性能考量。我们所有的计算都在片段着色器Fragment Shader中进行且运算量很小几次向量运算、点积、简单函数。这对于现代GPU来说几乎可以忽略不计比采样一张贴图并进行UV动画的性能开销可能更低尤其是在大量UI元素使用同一材质球时Shader的指令数优化和批处理优势会更明显。3. Shader完整实现与逐行解析理论清晰了现在我们来动手写这个名为 “UIFlow” 的Shader。我们将使用Unity的ShaderLab语言并基于UI默认的UI/Default着色器进行修改以确保它能正确处理UI的矩形裁剪Rect Mask、透明度混合等特性。3.1 属性定义与变量声明首先在Shader的Properties块中定义所有需要在材质面板上调节的参数。Properties { [PerRendererData] _MainTex (Sprite Texture, 2D) white {} _Color (Tint, Color) (1,1,1,1) // 流光专属参数 _FlowColor (Flow Color, Color) (1, 0.8, 0.2, 1) // 流光主色默认金黄色 _FlowColorEdge (Flow Edge Color, Color) (1, 1, 1, 0.5) // 流光边缘色默认淡白色半透 _FlowWidth (Flow Width, Range(0.01, 0.5)) 0.15 // 流光宽度范围控制防止过宽或过窄 _FlowSoftness (Flow Softness, Range(0.001, 0.2)) 0.05 // 边缘柔化程度 _FlowSpeed (Flow Speed, Range(-2, 2)) 1.0 // 流动速度可为负值表示反向流动 _FlowAngle (Flow Angle, Range(0, 360)) 45 // 流光角度0-360度全覆盖 _FlowIntensity (Flow Intensity, Range(0, 2)) 1.0 // 流光强度用于控制整体亮度 // UI默认所需的属性 _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 }参数设计思路解析_FlowWidth范围限制在0.01到0.5。太窄0.01可能因精度问题几乎看不见太宽0.5可能覆盖整个UI失去“光带”感。0.1-0.2是比较常用的视觉舒适区间。_FlowAngle0-360度。0度代表水平向右90度代表垂直向上以此类推。这样设计符合美术人员的直觉。_FlowSpeed允许负值。这样在材质面板上直接调负值就能立即反转流动方向非常方便。_FlowIntensity这是一个总控开关。有时我们只想在代码里控制流光的显隐或者做闪烁动画。将其与最终颜色相乘设为0即可完全关闭流光避免通过激活/禁用材质球的方式来控制。接下来在CGPROGRAM段中声明对应的变量并定义顶点着色器的输入输出结构体。CGINCLUDE #include UnityCG.cginc #include UnityUI.cginc struct appdata_t { float4 vertex : POSITION; float4 color : COLOR; float2 texcoord : TEXCOORD0; UNITY_VERTEX_INPUT_INSTANCE_ID }; struct v2f { float4 vertex : SV_POSITION; fixed4 color : COLOR; float2 texcoord : TEXCOORD0; float4 worldPosition : TEXCOORD1; // 用于UI位置计算 UNITY_VERTEX_OUTPUT_STEREO }; // 声明与Properties对应的变量 sampler2D _MainTex; fixed4 _Color; fixed4 _FlowColor; fixed4 _FlowColorEdge; float _FlowWidth; float _FlowSoftness; float _FlowSpeed; float _FlowAngle; float _FlowIntensity; float4 _MainTex_ST; // 纹理的缩放偏移 // UI Masking相关变量 fixed4 _TextureSampleAdd; float4 _ClipRect; bool _UseClipRect; bool _UseAlphaClip; ENDCG3.2 顶点着色器准备数据顶点着色器的任务很简单变换顶点位置传递UV和颜色信息。v2f vert(appdata_t IN) { v2f OUT; UNITY_SETUP_INSTANCE_ID(IN); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT); OUT.worldPosition IN.vertex; OUT.vertex UnityObjectToClipPos(IN.vertex); // 模型空间到裁剪空间 OUT.texcoord TRANSFORM_TEX(IN.texcoord, _MainTex); // 应用纹理的缩放偏移 OUT.color IN.color * _Color; // 叠加顶点色和材质色 return OUT; }3.3 片段着色器核心算法实现这里是流光效果的魔法发生地。我们将逐步计算。fixed4 frag(v2f IN) : SV_Target { // 1. 采样UI原始纹理和颜色 half4 color (tex2D(_MainTex, IN.texcoord) _TextureSampleAdd) * IN.color; // 2. 计算基于中心点的UV坐标 // 将UV从[0,1]映射到[-0.5, 0.5]让效果基于中心对称 float2 centeredUV IN.texcoord - float2(0.5, 0.5); // 3. 根据角度计算方向向量 // 将角度转换为弧度然后计算余弦和正弦 float rad _FlowAngle * UNITY_PI / 180.0; float2 flowDir float2(cos(rad), sin(rad)); // 单位方向向量 // 4. 计算像素点在流光方向上的投影值有向距离 float projection dot(centeredUV, flowDir); // 5. 生成流动的相位 // 使用frac确保相位在[0,1)循环乘以系数控制一个周期内光带扫过的范围 // 这里 (1.0 _FlowWidth) 确保光带能完全移出屏幕避免残留 float phase frac(_Time.y * _FlowSpeed); float flow projection - phase * (1.0 _FlowWidth); // 6. 计算基础强度距离光带中心线的归一化距离 float halfWidth _FlowWidth * 0.5; float strength 1.0 - abs(flow) / halfWidth; // 7. 生成平滑的遮罩 float mask smoothstep(0.0, _FlowSoftness, strength); // 8. 计算流光颜色 // 根据强度在边缘色和主色之间插值再乘以遮罩和总强度 half4 flowColor lerp(_FlowColorEdge, _FlowColor, saturate(strength)); flowColor * mask; flowColor * _FlowIntensity; // 9. 混合到最终颜色 // 使用加法混合Additive使流光变亮。也可以尝试屏幕混合Screen color.rgb flowColor.rgb * flowColor.a; // 预乘Alpha混合 // 10. 应用UI系统的矩形裁剪RectMask2D #ifdef UNITY_UI_CLIP_RECT color.a * UnityGet2DClipping(IN.worldPosition.xy, _ClipRect); #endif // 11. 应用UI系统的Alpha裁剪可选 #ifdef UNITY_UI_ALPHACLIP clip(color.a - 0.001); #endif return color; } ENDCG代码关键点解读centeredUV这是所有计算的基石。将UV原点移到中心使得无论流光角度如何效果都从UI中心放射状计算视觉上更均衡。如果你希望流光从特定角落开始可以调整这个基准点。flowDir方向向量必须是单位向量长度为1这是点积投影计算正确的前提。cos和sin函数确保了这一点。phase的计算frac(_Time.y * _Speed)是最简单的循环方式。但这里有一个非常重要的技巧flow projection - phase * (1.0 _FlowWidth)。为什么是(1.0 _FlowWidth)因为projection的理论范围在[-0.5*sqrt(2), 0.5*sqrt(2)]大约[-0.707, 0.707]。为了让光带能从一个方向完全出现再完全从另一方向消失我们需要让一个周期的位移量大于UI对角线的长度约1.414。这里使用1.0 _FlowWidth是一个经验值能保证在各种角度和宽度下光带都能平滑地循环进出。你可以根据实际效果微调这个系数。smoothstep的运用这是实现边缘柔化的核心。_FlowSoftness越小光带边缘越硬越大则羽化范围越宽光带看起来越柔和、弥散。颜色混合我们采用了color.rgb flowColor.rgb * flowColor.a;这是预乘Alpha的加法混合。它简单高效能产生“变亮”的效果非常适合流光。如果希望效果更柔和可以尝试color.rgb lerp(color.rgb, color.rgb flowColor.rgb, flowColor.a);或其他混合模式。3.4 完整的Shader代码框架将以上部分组合并放入正确的SubShader和Pass中。注意我们需要继承UI的渲染状态特别是混合模式Blend SrcAlpha OneMinusSrcAlpha和关闭深度写入ZWrite Off。Shader UI/Flow { Properties { ... } // 如上文所述 SubShader { Tags { QueueTransparent IgnoreProjectorTrue RenderTypeTransparent PreviewTypePlane CanUseSpriteAtlasTrue } Cull Off Lighting Off ZWrite Off ZTest [unity_GUIZTestMode] Blend SrcAlpha OneMinusSrcAlpha // UI标准混合模式 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile __ UNITY_UI_CLIP_RECT #pragma multi_compile __ UNITY_UI_ALPHACLIP // 变量声明和函数实现 ... // 如上文的CGINCLUDE内容 ENDCG } } FallBack UI/Default }4. 在Unity中的使用与参数调节指南Shader写好了怎么用起来这比写Shader简单多了但也有一些注意事项。4.1 创建材质与赋予UI在Project视图中右键 - Create - Material命名为 “Mat_UIFlow”。选中这个材质球在Inspector面板顶部将Shader选择为我们刚创建的 “UI/Flow”。在Scene中创建一个Image或RawImage。将Mat_UIFlow材质球拖拽到该UI元素的Material属性栏中。此时你应该能看到UI元素上出现了默认角度45度的金黄色流光。如果没看到请检查Image的Color是否不是纯黑纯黑背景上加法混合的流光可能不明显可以尝试将Image调为灰色。确保_FlowIntensity大于0。检查_FlowWidth是否过小。4.2 参数调节实战心得材质面板上的参数每一个都对应着视觉上的直观变化。这里分享一些调节技巧_FlowAngle(角度)这是最常调的参数。0度是水平向右90度是垂直向上。注意由于我们基于中心对称UV计算180度和0度在视觉上是反向的。通常30-60度之间的倾斜角最具动感。_FlowWidth(宽度)控制光带的粗细。对于按钮上的高光0.05-0.1的细光带比较精致对于进度条或大背景可以调到0.2-0.3。注意宽度太大会让光带失去“扫过”的感觉更像是一个静态的渐变区域。_FlowSoftness(柔化)这个参数和宽度配合使用。宽度较小时柔化值也要相应调小如0.01否则光带会过于模糊甚至看不见。宽度较大时可以适当增加柔化如0.05-0.1让光晕更自然。一个经验公式Softness ≈ Width * 0.3作为起始点。_FlowSpeed(速度)控制流动快慢。1.0是比较舒缓的速度。对于需要强烈提示的按钮可以调到1.5-2.0对于背景装饰0.3-0.8的慢速更合适。负速度会让光反向流动可以创造出“汇聚”或“呼吸”的变体效果。_FlowColor与_FlowColorEdge(颜色)主色决定流光的色调边缘色影响光晕的氛围。常见的搭配是科技蓝主色(0.2, 0.6, 1.0, 1)边缘色(0.8, 0.9, 1.0, 0.3)能量金主色(1.0, 0.7, 0.1, 1)边缘色(1.0, 1.0, 0.8, 0.5)霓虹粉主色(1.0, 0.2, 0.6, 1)边缘色(1.0, 0.8, 0.9, 0.4)关键技巧边缘色的Alpha值通常设置得比主色低这样光晕才能自然淡出。主色饱和度可以高一些边缘色倾向于白色或淡色以模拟“光芯亮、光晕柔”的效果。_FlowIntensity(强度)这是你的总开关和动态调节器。你可以通过代码在运行时修改这个值来实现流光的“激活”、“闪烁”或“淡入淡出”动画。// 示例在UI脚本中控制流光强度闪烁 public Material flowMaterial; // 拖拽赋值 public float blinkSpeed 2.0f; void Update() { float intensity Mathf.PingPong(Time.time * blinkSpeed, 1.0f); flowMaterial.SetFloat(_FlowIntensity, intensity); }重要提示材质实例化。如果一个材质球被多个UI元素共用你在运行时通过代码修改其属性所有使用该材质的UI都会一起变化。如果需要对单个UI进行独立控制你必须在代码中动态创建材质实例。Image image GetComponentImage(); // 创建当前材质的一个实例仅影响这个Image Material matInstance new Material(image.material); image.material matInstance; // 现在可以安全地修改 matInstance 的属性了 matInstance.SetFloat(_FlowIntensity, 0.5f);5. 效果扩展与高级技巧基础流光实现了但我们可以让它更强大、更灵活。这里分享几个实用的扩展方向。5.1 添加噪声扰动让流光更“有机”纯色平滑的流光有时看起来有点“假”像塑料。我们可以引入一些噪声Noise来扰动光带的形状或强度模拟更自然的光效比如电流、火焰边缘等。实现思路在计算strength或mask之前对flow值或最终的mask值施加一个基于UV和时间的噪声扰动。首先需要一个简单的噪声函数。我们可以使用内置的tex2D采样一张噪声贴图或者用程序化噪声如正弦波叠加。在Properties中添加参数_FlowNoiseScale (Noise Scale, Range(0.5, 10)) 3.0 _FlowNoiseStrength (Noise Strength, Range(0, 0.5)) 0.1 _FlowNoiseSpeed (Noise Speed, Range(0, 2)) 0.5在片段着色器中加入噪声计算以采样噪声贴图为例假设我们有一张名为_NoiseTex的灰度噪声图// 计算噪声UV叠加时间和缩放 float2 noiseUV IN.texcoord * _FlowNoiseScale float2(0, _Time.y * _FlowNoiseSpeed); float noiseValue tex2D(_NoiseTex, noiseUV).r; // 取R通道值在0~1 noiseValue noiseValue * 2.0 - 1.0; // 映射到[-1, 1] // 用噪声扰动flow值 float flowNoisy flow noiseValue * _FlowNoiseStrength * _FlowWidth; // 然后用 flowNoisy 代替原来的 flow 去计算 strength float strength 1.0 - abs(flowNoisy) / halfWidth;这样光带的边缘就会产生不规则的波动效果立刻生动起来。_FlowNoiseStrength控制扰动的幅度_FlowNoiseScale控制噪声的“颗粒”大小。5.2 制作呼吸灯Pulse效果呼吸灯是另一种常见需求即光带的亮度周期性强弱变化而不是线性流动。实现思路我们不需要让光带平移即不需要phase而是让它的整体强度_FlowIntensity或主色Alpha值随时间正弦变化。在Properties中添加呼吸参数_PulseSpeed (Pulse Speed, Range(0, 3)) 1.0 _PulseMinIntensity (Pulse Min, Range(0, 1)) 0.3 _PulseMaxIntensity (Pulse Max, Range(0, 2)) 1.0在片段着色器中计算脉冲强度float pulseFactor (sin(_Time.y * _PulseSpeed) 1.0) * 0.5; // 映射到[0,1] float pulseIntensity lerp(_PulseMinIntensity, _PulseMaxIntensity, pulseFactor); // 在最终混合前将脉冲强度乘到流光颜色上 flowColor * pulseIntensity; // 或者更精细地控制让主色和边缘色受不同强度的脉冲影响 // flowColor lerp(_ColorEdge, _Color, strength * pulseIntensity) * mask;你可以通过一个复选框[Toggle]_UsePulse来切换流动模式和呼吸模式让一个Shader具备两种效果。5.3 性能优化与多平台兼容性思考我们的Shader虽然不复杂但在移动端或WebGL平台仍需注意。精度选择在移动端尽量使用half或fixed精度代替float特别是在片段着色器中。例如颜色、强度等参数可以声明为fixed4和fixed。避免复杂函数sin,cos,frac在我们的Shader中是必要的且开销不大。但如果加入了复杂的噪声函数如Perlin噪声就需要评估性能。移动端可以考虑使用纹理采样的噪声。批处理BatchingUnity UI默认会尝试合批。使用自定义Shader时要确保其渲染状态如混合模式、深度测试与标准UI Shader一致并且材质球参数相同这样才能最大化合批几率降低Draw Call。变体管理我们使用了#pragma multi_compile来处理UI裁剪。如果你的Shader未来要加入很多可开关的功能如USE_NOISE,USE_PULSE会产生大量的Shader变体增加构建时间和包体。对于UI Shader建议功能尽量统一或者为不同的复杂效果创建不同的Shader文件而不是用一个超级Shader通过宏切换所有功能。6. 常见问题与调试技巧实录在实际使用中你肯定会遇到各种奇怪的现象。这里记录了几个我踩过的坑和解决方法。6.1 问题流光效果在UI边缘被“切断”或不完整现象光带流动到Image的边界时突然消失或显示不完整。原因最可能的原因是UV计算基于的是IN.texcoord而UI的默认Mesh矩形的UV范围严格是[0,1]。当centeredUV的绝对值超过0.5时计算仍在进行但光带部分已经画到了Mesh的几何边界之外。如果UI控件被RectMask2D或Canvas的Rect裁剪超出的部分就会被切掉。解决方案检查RectMask2D如果父级有RectMask2D确保它的范围足够大能容纳流光溢出的部分。或者将流光强度在靠近边缘时衰减。修改UV计算范围不推荐一个取巧的办法是让centeredUV的计算基于一个比实际UV稍大的虚拟范围但这会改变光带在UI内的相对位置和比例可能不符合设计预期。最佳实践在设计UI时为需要流光的元素预留一些“出血”空间。或者接受这种边缘裁剪将其作为效果的一部分通过调整_FlowWidth和起始位置让光带主要在UI内部区域流动。6.2 问题角度设置为90度或270度时光带不流动或闪烁现象当_FlowAngle设置为90垂直向上或270垂直向下时光带静止不动或抖动。排查打印或调试flowDir向量。在90度时flowDir (cos90°, sin90°) (0, 1)。此时projection dot(centeredUV, float2(0,1)) centeredUV.y。这意味着光带完全由V坐标决定。如果UI是正方形的那么从底部到顶部centeredUV.y的范围是[-0.5, 0.5]。问题出在flow projection - phase * (1.0 _FlowWidth)。当光带垂直时其“长度”在投影方向上的跨度就是V坐标的差值1.0。而我们位移的步长phase * (1.0 _FlowWidth)大于1.0这可能导致在一个时间步长内光带“跳”过了整个UI区域在视觉上表现为闪烁或看似静止因为每次都在屏幕外。解决方案动态调整位移系数。可以根据flowDir向量的绝对值来估算UI在该方向上的投影长度并以此作为位移周期的参考。一个简化的修正方法是// 估算投影方向上的UI最大跨度 float span abs(flowDir.x) abs(flowDir.y); // 对于矩形这是一个近似值 float cycleLength span _FlowWidth; // 确保光带能移出 float flow projection - phase * cycleLength;更精确的做法是计算UI矩形在flowDir方向上的投影长度但这需要将UI的尺寸信息传入Shader实现起来更复杂。对于大多数情况使用固定系数(1.0 _FlowWidth)在非极端角度下工作良好。如果确实需要完美的垂直/水平效果可以单独为这两个角度做特殊处理。6.3 问题在Overlay模式的Canvas下流光显示异常现象Canvas渲染模式为Screen Space - Overlay时流光可能特别亮、颜色不对或与其他UI元素混合异常。原因Screen Space - Overlay模式下UI是最后渲染的且深度测试被禁用。我们的加法混合color.rgb ...可能会因为帧缓冲中已有的颜色值而产生过亮多次叠加或颜色偏移。解决方案确保混合模式正确我们的Pass使用的是Blend SrcAlpha OneMinusSrcAlpha这是UI的标准透明混合。加法混合是在片段着色器内部用代码实现的。这通常是安全的。检查HDR和Gamma空间如果项目开启了HDR高动态范围加法混合可能导致颜色值超过1.0clamp在Tonemapping后出现异常。对于UI通常应在非HDR的摄像机下渲染或在Shader输出前对颜色进行saturate操作。使用更保守的混合如果出现过曝可以尝试将内部的加法混合改为屏幕混合Screen Blend的近似公式// 替代简单的 color.rgb ... half3 blendedRGB 1.0 - (1.0 - color.rgb) * (1.0 - flowColor.rgb * flowColor.a); color.rgb lerp(color.rgb, blendedRGB, flowColor.a);这能产生更柔和、不易过曝的变亮效果。6.4 问题如何让流光只出现在UI的特定形状如圆形图标上需求UI Image使用的是一张圆形精灵Sprite希望流光只在圆形区域内显示而不是整个方形包围盒。解决方案利用Alpha通道。有两种主流方法使用精灵的Alpha通道这是最简单的方法。确保你的圆形精灵图片边缘是透明的。在Shader中在最终输出前将流光颜色乘以精灵纹理的Alpha值。// 在采样_MainTex后color.a 就是精灵的形状Alpha flowColor * color.a; // 让流光也遵循精灵的形状 color.rgb flowColor.rgb * flowColor.a;这样流光在透明区域将不可见。使用额外的遮罩纹理如果形状更复杂或者你想动态控制显示区域可以添加一张_MaskTex。在Properties中定义它并在片段着色器中采样用其灰度值来调制flowColor。这种方法更灵活但需要额外的纹理资源。6.5 调试工具将中间变量可视化当效果不如预期时最有效的调试方法是将Shader中的中间变量如projection,strength,mask直接作为颜色输出看看它们的值是否在预期范围内。你可以临时修改片段着色器的返回语句// 调试显示 projection 值映射到0-1 // float debug projection 0.5; // 从[-0.5,0.5]映射到[0,1] // return fixed4(debug, debug, debug, 1); // 调试显示 strength 值 // return fixed4(strength, strength, strength, 1); // 调试显示 mask 值 // return fixed4(mask, mask, mask, 1); // 正常返回 return color;通过观察这些灰度图你可以清晰地看到光带的形状、位置和强度分布从而快速定位是方向向量计算错了还是宽度参数设得不对或者是smoothstep的区间有问题。这是Shader调试的黄金法则。
1. 项目概述为什么要在UI上“无中生有”地做流光在Unity UI开发中特效是提升视觉反馈和沉浸感的关键。我们经常遇到这样的需求一个按钮需要高亮提示一个进度条需要动态填充光效或者一个图标需要呼吸般的脉动感。传统做法是什么找美术同学要序列帧动画或者要一张精心绘制的流光贴图然后在UI Image组件里播放动画或滚动UV。这方法稳吗稳。但问题也很明显资源依赖强、调整不灵活、性能有开销特别是多实例时而且一旦设计需求变动比如“流光角度从45度改成30度”、“光带再宽一点”你就得回去找美术返工沟通成本和迭代周期都上来了。所以这个项目的核心价值就出来了用Shader在运行时“计算”出流光效果彻底摆脱对预制贴图的依赖。你听到的“不用贴图”就是这个意思。这不是炫技而是实打实的生产力提升。通过编写一个自定义的UI Shader我们可以用几行代码定义光带的颜色、宽度、流动速度和角度所有参数都能在材质球Material上实时调节美术和策划在编辑器里拖拖滑块就能看到效果程序也无需反复打包资源。这种动态生成的效果在应对UI皮肤切换、主题色变化等场景时优势巨大。这个实战项目适合谁如果你是一个Unity开发者已经熟悉了基本的UI搭建但对Shader感到神秘又向往想亲手写一个能实际用在项目里的效果那这就是为你准备的。我们将从最基础的Shader语法讲起手把手带你推导算法最终实现一个高度可定制、性能友好的UI流光Shader。你会发现Shader没那么可怕它只是一套描述“每个像素该怎么画”的规则。2. 核心原理拆解流光效果是如何被“算”出来的在深入代码之前我们必须搞清楚目标。我们想要的流光本质上是一条倾斜的、有宽度的、颜色渐变的亮带在UI元素上周期性扫过。用贴图是实现它的“结果”而用Shader是实现它的“过程”。这个过程可以分解为几个核心数学问题。2.1 核心思路倾斜的梯度与周期性运动想象一下我们要在一个矩形的UI控件上画光。如果光带是水平的那很简单我们只关心像素的垂直坐标V坐标让亮度随着V坐标变化即可。但现在光带是倾斜的比如30度角。这就意味着我们不能单纯用U或V坐标而需要用一个“投影”的思想。关键算法点积投影我们把整个UI的UV坐标系0,0到1,1想象成一个二维平面。一条穿过原点、方向为(cosθ, sinθ)的直线θ是我们的流光角度就代表了光带的中轴线。对于UV平面上的任意一个像素点(u, v)我们如何知道它离这条中轴线有多远呢数学上这可以通过计算该点到直线的“有向距离”来实现。一个高效的方法是使用点积Dot Product。我们构造一个单位方向向量dir (cosθ, sinθ)。那么像素点pos (u-0.5, v-0.5)注意这里将UV中心移到(0.5,0.5)是为了让效果基于UI中心对称在dir方向上的投影长度proj dot(pos, dir)。这个proj值非常有用它的大小代表了像素点沿光带方向上的“进度”。它的正负代表了像素点在中轴线的哪一侧。如何形成光带我们并不直接使用proj作为亮度因为那会形成一条无限细的线。我们需要宽度。假设我们设定的光带宽度为width比如0.2。我们可以认为在[-width/2, width/2]这个区间内的proj值对应的像素是位于光带内部的。那么一个像素的“光带内位置强度”可以表示为strength 1.0 - abs(proj) / (width/2)这样在光带中心 (proj0) 时强度为1在光带边缘 (proj±width/2) 时强度为0。这就形成了一个梯度的、有宽度的条带。2.2 让光“流”起来时间与相位静态的光带不是我们想要的。我们需要它动起来也就是“流”。这如何实现让整个判断标准随着时间移动即可。我们可以引入一个时间变量_Time.yUnity内置的秒级时间。让光带的中轴线沿着其垂直方向即法线方向随时间平移。在Shader中这可以简化为给投影值proj加上一个随时间变化的偏移量offset。offset _Time.y * _Speed那么判断像素是否在光带内的计算就变成了flow proj offsetstrength 1.0 - abs(flow) / (width/2)但这会产生一个问题offset会无限增大flow值会超出合理范围导致效果可能不连续。为了解决这个问题我们引入周期函数。常用的方法是使用frac函数取小数部分。我们让offset是周期性的例如phase frac(_Time.y * _Speed)flow proj - phase * (1.0 width)// 减号是为了让光从左上方向右下方流动的视觉习惯 这样phase在0到1之间循环flow的值域也被限制在了一个周期范围内光带就会周而复始地平滑流动。2.3 颜色与边缘柔化有了strength它只是一个0到1的灰度值。我们需要把它映射成颜色。通常流光会有主色和边缘衰减。我们可以定义两个颜色_Color流光主色和_ColorEdge边缘色通常是主色的淡色或白色。然后进行插值lerp(_ColorEdge, _Color, strength)但这还不够我们希望光带中心最亮向两侧平滑衰减到透明。这就需要用到平滑步进函数smoothstep。smoothstep(min, max, x)会在x处于min和max之间时返回一个0到1的平滑过渡值。 我们可以用strength来控制平滑区间生成一个平滑的亮度遮罩maskmask smoothstep(0.0, _Softness, strength)这里_Softness是一个控制边缘羽化程度的参数。mask值再乘以我们插值得到的颜色最后与UI原本的颜色纹理采样或纯色进行混合通常是加法混合Additive流光效果就叠加上了。注意性能考量。我们所有的计算都在片段着色器Fragment Shader中进行且运算量很小几次向量运算、点积、简单函数。这对于现代GPU来说几乎可以忽略不计比采样一张贴图并进行UV动画的性能开销可能更低尤其是在大量UI元素使用同一材质球时Shader的指令数优化和批处理优势会更明显。3. Shader完整实现与逐行解析理论清晰了现在我们来动手写这个名为 “UIFlow” 的Shader。我们将使用Unity的ShaderLab语言并基于UI默认的UI/Default着色器进行修改以确保它能正确处理UI的矩形裁剪Rect Mask、透明度混合等特性。3.1 属性定义与变量声明首先在Shader的Properties块中定义所有需要在材质面板上调节的参数。Properties { [PerRendererData] _MainTex (Sprite Texture, 2D) white {} _Color (Tint, Color) (1,1,1,1) // 流光专属参数 _FlowColor (Flow Color, Color) (1, 0.8, 0.2, 1) // 流光主色默认金黄色 _FlowColorEdge (Flow Edge Color, Color) (1, 1, 1, 0.5) // 流光边缘色默认淡白色半透 _FlowWidth (Flow Width, Range(0.01, 0.5)) 0.15 // 流光宽度范围控制防止过宽或过窄 _FlowSoftness (Flow Softness, Range(0.001, 0.2)) 0.05 // 边缘柔化程度 _FlowSpeed (Flow Speed, Range(-2, 2)) 1.0 // 流动速度可为负值表示反向流动 _FlowAngle (Flow Angle, Range(0, 360)) 45 // 流光角度0-360度全覆盖 _FlowIntensity (Flow Intensity, Range(0, 2)) 1.0 // 流光强度用于控制整体亮度 // UI默认所需的属性 _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 }参数设计思路解析_FlowWidth范围限制在0.01到0.5。太窄0.01可能因精度问题几乎看不见太宽0.5可能覆盖整个UI失去“光带”感。0.1-0.2是比较常用的视觉舒适区间。_FlowAngle0-360度。0度代表水平向右90度代表垂直向上以此类推。这样设计符合美术人员的直觉。_FlowSpeed允许负值。这样在材质面板上直接调负值就能立即反转流动方向非常方便。_FlowIntensity这是一个总控开关。有时我们只想在代码里控制流光的显隐或者做闪烁动画。将其与最终颜色相乘设为0即可完全关闭流光避免通过激活/禁用材质球的方式来控制。接下来在CGPROGRAM段中声明对应的变量并定义顶点着色器的输入输出结构体。CGINCLUDE #include UnityCG.cginc #include UnityUI.cginc struct appdata_t { float4 vertex : POSITION; float4 color : COLOR; float2 texcoord : TEXCOORD0; UNITY_VERTEX_INPUT_INSTANCE_ID }; struct v2f { float4 vertex : SV_POSITION; fixed4 color : COLOR; float2 texcoord : TEXCOORD0; float4 worldPosition : TEXCOORD1; // 用于UI位置计算 UNITY_VERTEX_OUTPUT_STEREO }; // 声明与Properties对应的变量 sampler2D _MainTex; fixed4 _Color; fixed4 _FlowColor; fixed4 _FlowColorEdge; float _FlowWidth; float _FlowSoftness; float _FlowSpeed; float _FlowAngle; float _FlowIntensity; float4 _MainTex_ST; // 纹理的缩放偏移 // UI Masking相关变量 fixed4 _TextureSampleAdd; float4 _ClipRect; bool _UseClipRect; bool _UseAlphaClip; ENDCG3.2 顶点着色器准备数据顶点着色器的任务很简单变换顶点位置传递UV和颜色信息。v2f vert(appdata_t IN) { v2f OUT; UNITY_SETUP_INSTANCE_ID(IN); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT); OUT.worldPosition IN.vertex; OUT.vertex UnityObjectToClipPos(IN.vertex); // 模型空间到裁剪空间 OUT.texcoord TRANSFORM_TEX(IN.texcoord, _MainTex); // 应用纹理的缩放偏移 OUT.color IN.color * _Color; // 叠加顶点色和材质色 return OUT; }3.3 片段着色器核心算法实现这里是流光效果的魔法发生地。我们将逐步计算。fixed4 frag(v2f IN) : SV_Target { // 1. 采样UI原始纹理和颜色 half4 color (tex2D(_MainTex, IN.texcoord) _TextureSampleAdd) * IN.color; // 2. 计算基于中心点的UV坐标 // 将UV从[0,1]映射到[-0.5, 0.5]让效果基于中心对称 float2 centeredUV IN.texcoord - float2(0.5, 0.5); // 3. 根据角度计算方向向量 // 将角度转换为弧度然后计算余弦和正弦 float rad _FlowAngle * UNITY_PI / 180.0; float2 flowDir float2(cos(rad), sin(rad)); // 单位方向向量 // 4. 计算像素点在流光方向上的投影值有向距离 float projection dot(centeredUV, flowDir); // 5. 生成流动的相位 // 使用frac确保相位在[0,1)循环乘以系数控制一个周期内光带扫过的范围 // 这里 (1.0 _FlowWidth) 确保光带能完全移出屏幕避免残留 float phase frac(_Time.y * _FlowSpeed); float flow projection - phase * (1.0 _FlowWidth); // 6. 计算基础强度距离光带中心线的归一化距离 float halfWidth _FlowWidth * 0.5; float strength 1.0 - abs(flow) / halfWidth; // 7. 生成平滑的遮罩 float mask smoothstep(0.0, _FlowSoftness, strength); // 8. 计算流光颜色 // 根据强度在边缘色和主色之间插值再乘以遮罩和总强度 half4 flowColor lerp(_FlowColorEdge, _FlowColor, saturate(strength)); flowColor * mask; flowColor * _FlowIntensity; // 9. 混合到最终颜色 // 使用加法混合Additive使流光变亮。也可以尝试屏幕混合Screen color.rgb flowColor.rgb * flowColor.a; // 预乘Alpha混合 // 10. 应用UI系统的矩形裁剪RectMask2D #ifdef UNITY_UI_CLIP_RECT color.a * UnityGet2DClipping(IN.worldPosition.xy, _ClipRect); #endif // 11. 应用UI系统的Alpha裁剪可选 #ifdef UNITY_UI_ALPHACLIP clip(color.a - 0.001); #endif return color; } ENDCG代码关键点解读centeredUV这是所有计算的基石。将UV原点移到中心使得无论流光角度如何效果都从UI中心放射状计算视觉上更均衡。如果你希望流光从特定角落开始可以调整这个基准点。flowDir方向向量必须是单位向量长度为1这是点积投影计算正确的前提。cos和sin函数确保了这一点。phase的计算frac(_Time.y * _Speed)是最简单的循环方式。但这里有一个非常重要的技巧flow projection - phase * (1.0 _FlowWidth)。为什么是(1.0 _FlowWidth)因为projection的理论范围在[-0.5*sqrt(2), 0.5*sqrt(2)]大约[-0.707, 0.707]。为了让光带能从一个方向完全出现再完全从另一方向消失我们需要让一个周期的位移量大于UI对角线的长度约1.414。这里使用1.0 _FlowWidth是一个经验值能保证在各种角度和宽度下光带都能平滑地循环进出。你可以根据实际效果微调这个系数。smoothstep的运用这是实现边缘柔化的核心。_FlowSoftness越小光带边缘越硬越大则羽化范围越宽光带看起来越柔和、弥散。颜色混合我们采用了color.rgb flowColor.rgb * flowColor.a;这是预乘Alpha的加法混合。它简单高效能产生“变亮”的效果非常适合流光。如果希望效果更柔和可以尝试color.rgb lerp(color.rgb, color.rgb flowColor.rgb, flowColor.a);或其他混合模式。3.4 完整的Shader代码框架将以上部分组合并放入正确的SubShader和Pass中。注意我们需要继承UI的渲染状态特别是混合模式Blend SrcAlpha OneMinusSrcAlpha和关闭深度写入ZWrite Off。Shader UI/Flow { Properties { ... } // 如上文所述 SubShader { Tags { QueueTransparent IgnoreProjectorTrue RenderTypeTransparent PreviewTypePlane CanUseSpriteAtlasTrue } Cull Off Lighting Off ZWrite Off ZTest [unity_GUIZTestMode] Blend SrcAlpha OneMinusSrcAlpha // UI标准混合模式 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile __ UNITY_UI_CLIP_RECT #pragma multi_compile __ UNITY_UI_ALPHACLIP // 变量声明和函数实现 ... // 如上文的CGINCLUDE内容 ENDCG } } FallBack UI/Default }4. 在Unity中的使用与参数调节指南Shader写好了怎么用起来这比写Shader简单多了但也有一些注意事项。4.1 创建材质与赋予UI在Project视图中右键 - Create - Material命名为 “Mat_UIFlow”。选中这个材质球在Inspector面板顶部将Shader选择为我们刚创建的 “UI/Flow”。在Scene中创建一个Image或RawImage。将Mat_UIFlow材质球拖拽到该UI元素的Material属性栏中。此时你应该能看到UI元素上出现了默认角度45度的金黄色流光。如果没看到请检查Image的Color是否不是纯黑纯黑背景上加法混合的流光可能不明显可以尝试将Image调为灰色。确保_FlowIntensity大于0。检查_FlowWidth是否过小。4.2 参数调节实战心得材质面板上的参数每一个都对应着视觉上的直观变化。这里分享一些调节技巧_FlowAngle(角度)这是最常调的参数。0度是水平向右90度是垂直向上。注意由于我们基于中心对称UV计算180度和0度在视觉上是反向的。通常30-60度之间的倾斜角最具动感。_FlowWidth(宽度)控制光带的粗细。对于按钮上的高光0.05-0.1的细光带比较精致对于进度条或大背景可以调到0.2-0.3。注意宽度太大会让光带失去“扫过”的感觉更像是一个静态的渐变区域。_FlowSoftness(柔化)这个参数和宽度配合使用。宽度较小时柔化值也要相应调小如0.01否则光带会过于模糊甚至看不见。宽度较大时可以适当增加柔化如0.05-0.1让光晕更自然。一个经验公式Softness ≈ Width * 0.3作为起始点。_FlowSpeed(速度)控制流动快慢。1.0是比较舒缓的速度。对于需要强烈提示的按钮可以调到1.5-2.0对于背景装饰0.3-0.8的慢速更合适。负速度会让光反向流动可以创造出“汇聚”或“呼吸”的变体效果。_FlowColor与_FlowColorEdge(颜色)主色决定流光的色调边缘色影响光晕的氛围。常见的搭配是科技蓝主色(0.2, 0.6, 1.0, 1)边缘色(0.8, 0.9, 1.0, 0.3)能量金主色(1.0, 0.7, 0.1, 1)边缘色(1.0, 1.0, 0.8, 0.5)霓虹粉主色(1.0, 0.2, 0.6, 1)边缘色(1.0, 0.8, 0.9, 0.4)关键技巧边缘色的Alpha值通常设置得比主色低这样光晕才能自然淡出。主色饱和度可以高一些边缘色倾向于白色或淡色以模拟“光芯亮、光晕柔”的效果。_FlowIntensity(强度)这是你的总开关和动态调节器。你可以通过代码在运行时修改这个值来实现流光的“激活”、“闪烁”或“淡入淡出”动画。// 示例在UI脚本中控制流光强度闪烁 public Material flowMaterial; // 拖拽赋值 public float blinkSpeed 2.0f; void Update() { float intensity Mathf.PingPong(Time.time * blinkSpeed, 1.0f); flowMaterial.SetFloat(_FlowIntensity, intensity); }重要提示材质实例化。如果一个材质球被多个UI元素共用你在运行时通过代码修改其属性所有使用该材质的UI都会一起变化。如果需要对单个UI进行独立控制你必须在代码中动态创建材质实例。Image image GetComponentImage(); // 创建当前材质的一个实例仅影响这个Image Material matInstance new Material(image.material); image.material matInstance; // 现在可以安全地修改 matInstance 的属性了 matInstance.SetFloat(_FlowIntensity, 0.5f);5. 效果扩展与高级技巧基础流光实现了但我们可以让它更强大、更灵活。这里分享几个实用的扩展方向。5.1 添加噪声扰动让流光更“有机”纯色平滑的流光有时看起来有点“假”像塑料。我们可以引入一些噪声Noise来扰动光带的形状或强度模拟更自然的光效比如电流、火焰边缘等。实现思路在计算strength或mask之前对flow值或最终的mask值施加一个基于UV和时间的噪声扰动。首先需要一个简单的噪声函数。我们可以使用内置的tex2D采样一张噪声贴图或者用程序化噪声如正弦波叠加。在Properties中添加参数_FlowNoiseScale (Noise Scale, Range(0.5, 10)) 3.0 _FlowNoiseStrength (Noise Strength, Range(0, 0.5)) 0.1 _FlowNoiseSpeed (Noise Speed, Range(0, 2)) 0.5在片段着色器中加入噪声计算以采样噪声贴图为例假设我们有一张名为_NoiseTex的灰度噪声图// 计算噪声UV叠加时间和缩放 float2 noiseUV IN.texcoord * _FlowNoiseScale float2(0, _Time.y * _FlowNoiseSpeed); float noiseValue tex2D(_NoiseTex, noiseUV).r; // 取R通道值在0~1 noiseValue noiseValue * 2.0 - 1.0; // 映射到[-1, 1] // 用噪声扰动flow值 float flowNoisy flow noiseValue * _FlowNoiseStrength * _FlowWidth; // 然后用 flowNoisy 代替原来的 flow 去计算 strength float strength 1.0 - abs(flowNoisy) / halfWidth;这样光带的边缘就会产生不规则的波动效果立刻生动起来。_FlowNoiseStrength控制扰动的幅度_FlowNoiseScale控制噪声的“颗粒”大小。5.2 制作呼吸灯Pulse效果呼吸灯是另一种常见需求即光带的亮度周期性强弱变化而不是线性流动。实现思路我们不需要让光带平移即不需要phase而是让它的整体强度_FlowIntensity或主色Alpha值随时间正弦变化。在Properties中添加呼吸参数_PulseSpeed (Pulse Speed, Range(0, 3)) 1.0 _PulseMinIntensity (Pulse Min, Range(0, 1)) 0.3 _PulseMaxIntensity (Pulse Max, Range(0, 2)) 1.0在片段着色器中计算脉冲强度float pulseFactor (sin(_Time.y * _PulseSpeed) 1.0) * 0.5; // 映射到[0,1] float pulseIntensity lerp(_PulseMinIntensity, _PulseMaxIntensity, pulseFactor); // 在最终混合前将脉冲强度乘到流光颜色上 flowColor * pulseIntensity; // 或者更精细地控制让主色和边缘色受不同强度的脉冲影响 // flowColor lerp(_ColorEdge, _Color, strength * pulseIntensity) * mask;你可以通过一个复选框[Toggle]_UsePulse来切换流动模式和呼吸模式让一个Shader具备两种效果。5.3 性能优化与多平台兼容性思考我们的Shader虽然不复杂但在移动端或WebGL平台仍需注意。精度选择在移动端尽量使用half或fixed精度代替float特别是在片段着色器中。例如颜色、强度等参数可以声明为fixed4和fixed。避免复杂函数sin,cos,frac在我们的Shader中是必要的且开销不大。但如果加入了复杂的噪声函数如Perlin噪声就需要评估性能。移动端可以考虑使用纹理采样的噪声。批处理BatchingUnity UI默认会尝试合批。使用自定义Shader时要确保其渲染状态如混合模式、深度测试与标准UI Shader一致并且材质球参数相同这样才能最大化合批几率降低Draw Call。变体管理我们使用了#pragma multi_compile来处理UI裁剪。如果你的Shader未来要加入很多可开关的功能如USE_NOISE,USE_PULSE会产生大量的Shader变体增加构建时间和包体。对于UI Shader建议功能尽量统一或者为不同的复杂效果创建不同的Shader文件而不是用一个超级Shader通过宏切换所有功能。6. 常见问题与调试技巧实录在实际使用中你肯定会遇到各种奇怪的现象。这里记录了几个我踩过的坑和解决方法。6.1 问题流光效果在UI边缘被“切断”或不完整现象光带流动到Image的边界时突然消失或显示不完整。原因最可能的原因是UV计算基于的是IN.texcoord而UI的默认Mesh矩形的UV范围严格是[0,1]。当centeredUV的绝对值超过0.5时计算仍在进行但光带部分已经画到了Mesh的几何边界之外。如果UI控件被RectMask2D或Canvas的Rect裁剪超出的部分就会被切掉。解决方案检查RectMask2D如果父级有RectMask2D确保它的范围足够大能容纳流光溢出的部分。或者将流光强度在靠近边缘时衰减。修改UV计算范围不推荐一个取巧的办法是让centeredUV的计算基于一个比实际UV稍大的虚拟范围但这会改变光带在UI内的相对位置和比例可能不符合设计预期。最佳实践在设计UI时为需要流光的元素预留一些“出血”空间。或者接受这种边缘裁剪将其作为效果的一部分通过调整_FlowWidth和起始位置让光带主要在UI内部区域流动。6.2 问题角度设置为90度或270度时光带不流动或闪烁现象当_FlowAngle设置为90垂直向上或270垂直向下时光带静止不动或抖动。排查打印或调试flowDir向量。在90度时flowDir (cos90°, sin90°) (0, 1)。此时projection dot(centeredUV, float2(0,1)) centeredUV.y。这意味着光带完全由V坐标决定。如果UI是正方形的那么从底部到顶部centeredUV.y的范围是[-0.5, 0.5]。问题出在flow projection - phase * (1.0 _FlowWidth)。当光带垂直时其“长度”在投影方向上的跨度就是V坐标的差值1.0。而我们位移的步长phase * (1.0 _FlowWidth)大于1.0这可能导致在一个时间步长内光带“跳”过了整个UI区域在视觉上表现为闪烁或看似静止因为每次都在屏幕外。解决方案动态调整位移系数。可以根据flowDir向量的绝对值来估算UI在该方向上的投影长度并以此作为位移周期的参考。一个简化的修正方法是// 估算投影方向上的UI最大跨度 float span abs(flowDir.x) abs(flowDir.y); // 对于矩形这是一个近似值 float cycleLength span _FlowWidth; // 确保光带能移出 float flow projection - phase * cycleLength;更精确的做法是计算UI矩形在flowDir方向上的投影长度但这需要将UI的尺寸信息传入Shader实现起来更复杂。对于大多数情况使用固定系数(1.0 _FlowWidth)在非极端角度下工作良好。如果确实需要完美的垂直/水平效果可以单独为这两个角度做特殊处理。6.3 问题在Overlay模式的Canvas下流光显示异常现象Canvas渲染模式为Screen Space - Overlay时流光可能特别亮、颜色不对或与其他UI元素混合异常。原因Screen Space - Overlay模式下UI是最后渲染的且深度测试被禁用。我们的加法混合color.rgb ...可能会因为帧缓冲中已有的颜色值而产生过亮多次叠加或颜色偏移。解决方案确保混合模式正确我们的Pass使用的是Blend SrcAlpha OneMinusSrcAlpha这是UI的标准透明混合。加法混合是在片段着色器内部用代码实现的。这通常是安全的。检查HDR和Gamma空间如果项目开启了HDR高动态范围加法混合可能导致颜色值超过1.0clamp在Tonemapping后出现异常。对于UI通常应在非HDR的摄像机下渲染或在Shader输出前对颜色进行saturate操作。使用更保守的混合如果出现过曝可以尝试将内部的加法混合改为屏幕混合Screen Blend的近似公式// 替代简单的 color.rgb ... half3 blendedRGB 1.0 - (1.0 - color.rgb) * (1.0 - flowColor.rgb * flowColor.a); color.rgb lerp(color.rgb, blendedRGB, flowColor.a);这能产生更柔和、不易过曝的变亮效果。6.4 问题如何让流光只出现在UI的特定形状如圆形图标上需求UI Image使用的是一张圆形精灵Sprite希望流光只在圆形区域内显示而不是整个方形包围盒。解决方案利用Alpha通道。有两种主流方法使用精灵的Alpha通道这是最简单的方法。确保你的圆形精灵图片边缘是透明的。在Shader中在最终输出前将流光颜色乘以精灵纹理的Alpha值。// 在采样_MainTex后color.a 就是精灵的形状Alpha flowColor * color.a; // 让流光也遵循精灵的形状 color.rgb flowColor.rgb * flowColor.a;这样流光在透明区域将不可见。使用额外的遮罩纹理如果形状更复杂或者你想动态控制显示区域可以添加一张_MaskTex。在Properties中定义它并在片段着色器中采样用其灰度值来调制flowColor。这种方法更灵活但需要额外的纹理资源。6.5 调试工具将中间变量可视化当效果不如预期时最有效的调试方法是将Shader中的中间变量如projection,strength,mask直接作为颜色输出看看它们的值是否在预期范围内。你可以临时修改片段着色器的返回语句// 调试显示 projection 值映射到0-1 // float debug projection 0.5; // 从[-0.5,0.5]映射到[0,1] // return fixed4(debug, debug, debug, 1); // 调试显示 strength 值 // return fixed4(strength, strength, strength, 1); // 调试显示 mask 值 // return fixed4(mask, mask, mask, 1); // 正常返回 return color;通过观察这些灰度图你可以清晰地看到光带的形状、位置和强度分布从而快速定位是方向向量计算错了还是宽度参数设得不对或者是smoothstep的区间有问题。这是Shader调试的黄金法则。
![[C++]内存管理：串顺序存储的内存回收](http://pic.xiahunao.cn/yaotu/[C++]内存管理：串顺序存储的内存回收)
