URP下UI灰度Shader实现：避开RectMask2D与Button踩坑-代码聚汇网

URP下UI灰度Shader实现：避开RectMask2D与Button踩坑

刘信华·2026-09-18·阅读 21 GEO检测（免费）

UnityURPUI变灰

|难度：普通|阅读约 38 分钟

最近做项目时接到一个需求：游戏里建筑升级冷却期间，对应UI按钮要变灰。我按老经验直接把Image的material换成一个灰度Shader，结果在URP管线下一打开界面，按钮整个变成一团半透明的黑块，我盯着屏幕愣了好一会儿。

“UI变灰”这件事看起来简单，实际在URP下埋着一堆坑：Shader写法、UGUI渲染管线、RectMask2D裁剪、Button反馈、TMP字体，任何一个环节被忽略都会翻车。这篇文章就是一次完整复盘，把我踩过的坑和最终沉淀下来的方案都写出来。适合正在做Unity URP项目、尤其是涉及按钮禁用、功能锁定、全局哀悼模式这类需求的朋友参考。

1. 变灰需求很常见，但方案选错就是给自己挖坑

1.1 哪些场景真的需要UI变灰

UI变灰不是单一需求，它至少能拆成下面几类：

功能锁定：建筑未解锁、技能未学习完成，图标保持灰置直到条件满足。
冷却中：技能或者道具处于CD，按钮置灰，倒计时结束后恢复。
对象失效：角色死亡、状态异常时，对应的操作按钮统一变为灰色不可用。
全局模式：游戏维护、哀悼日、特殊主题活动中，整个界面都要变成灰阶效果。

这几类场景对实现的要求完全不同。冷却中的按钮往往需要“从灰到彩”的渐变过渡，全局哀悼模式则需要一条代码瞬间影响所有UI，而不是一个一个改材质。如果一开始就选错了实现路径，后面会非常痛苦。

1.2 先别急着写Shader：四条实现路径怎么选

我在动手前习惯先盘一遍可行方案，UI变灰大概有四条路：

直接改Image.color：把组件颜色改成灰色。很多初学者会这么做，但对彩色贴图来说，这种“变灰”只是叠加了一层半透明灰，图片本身的饱和度还在，效果很假。只适合纯色块或者图形极其简单的场合。
替换整个UI材质为灰度材质：这是最通用的方案。用一张灰度Shader材质替换Image原来的材质，所有像素统一计算亮度，效果最干净。缺点是Shader如果写不好，UGUI的很多联动功能会失效。
用一个Shader参数在正常/灰度间插值：在Shader里加一个_GrayAmount，0是正常，1是全灰，中间值可以做平滑过渡。这是目前我认为性价比最高的方案，兼顾效果和扩展性。
全屏后处理做灰度遮罩：理论上可行，但你要处理屏幕空间的坐标映射、点击穿透、层级遮挡，在UI层面做后处理非常麻烦，一般不建议为了一个变灰功能去动整条渲染链。

做成表格对比更直观：

方案	实现成本	可控性	额外DrawCall	适合场景
改Image.color	最低	差	无	纯色UI
替换灰度材质	中	中	有	单按钮、局部状态
Shader参数插值	中高	高	有	需要渐变、可恢复的需求
全屏后处理	高	高	高	全局统一过滤

1.3 URP下为什么不能直接照搬内置管线的灰度Shader

网上能搜到很多内置渲染管线的灰度Shader，直接拷到URP项目里大概率编译报错。原因主要出在Shader库引用和渲染Pass的兼容性上。老Shader习惯用Lighting.cginc、AutoLight.cginc这些内置管线的库，URP里这些库结构变了，函数被拆分到Universal Render Pipeline对应的HLSL库中。URP官方推荐的是HLSL写法，使用Core.hlsl等库。

但这里有个特例：UGUI的UI Shader本身属于Unlit渲染，不参与光照计算，所以只要你从官方UI/Default这个Shader改起，用CGPROGRAM和UnityUI.cginc这套接口，在URP项目里反而能跑得很稳。这跟渲染管线的光照部分关系不大。换句话说，别自己从零写一个URP灰度Shader，直接在官方UGUI Shader上做加法，是最省事也最安全的路线。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 手写一个URP可用的UI灰度Shader，同时保住RectMask2D和Button反馈

2.1 灰度计算的底子：亮度公式

把彩色像素转成灰度的基础是计算亮度（Luminance）。人眼对红、绿、蓝三种颜色的敏感度不同，国际通用的亮度公式是：

code复制Gray = 0.299 * R + 0.587 * G + 0.114 * B

如果用三个通道取平均值的写法(R + G + B) / 3，画面会偏暗、偏闷，因为绿色在人眼中的感知权重远高于红色和蓝色。0.299/0.587/0.114这套系数是经过大量视觉实验得到的，做UI变灰直接用它就不会翻车。

这里还有一个容易忽略的点：变灰时alpha通道必须保留原始值。很多半透明图标、柔和阴影靠近边缘的透明度很低，如果灰阶计算时把alpha也覆盖成1，边缘会生硬变黑，非常难看。所以最终输出一定是：

code复制color.rgb = 灰度结果;
color.a = 原始alpha;

2.2 完整Shader：给官方UI/Default加一个开关位

下面这张Shader是我从Unity官方UI/Default改造出来的，在URP项目里可以直接使用：

hlsl复制Shader "UI/URP-Gray"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _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

        _ClipRect ("Clip Rect", Vector) = (0,0,1,1)
        _GrayAmount ("Gray Amount", Range(0, 1)) = 1
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask [_ColorMask]

        Pass
        {
            Name "Default"
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            #pragma multi_compile_local _ UNITY_UI_CLIP_RECT
            #pragma multi_compile_local _ UNITY_UI_ALPHACLIP

            #include "UnityCG.cginc"
            #include "UnityUI.cginc"

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 vertex        : SV_POSITION;
                fixed4 color         : COLOR;
                float2 texcoord      : TEXCOORD0;
                float4 worldPosition : TEXCOORD1;
            };

            sampler2D _MainTex;
            fixed4 _Color;
            fixed4 _TextureSampleAdd;
            float4 _ClipRect;
            float _GrayAmount;

            v2f vert(appdata_t v)
            {
                v2f OUT;
                OUT.worldPosition = v.vertex;
                OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
                OUT.texcoord = v.texcoord;
                OUT.color = v.color * _Color;
                return OUT;
            }

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

                #ifdef UNITY_UI_CLIP_RECT
                color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
                #endif

                #ifdef UNITY_UI_ALPHACLIP
                clip(color.a - 0.001);
                #endif

                float gray = dot(color.rgb, float3(0.299, 0.587, 0.114));
                color.rgb = lerp(color.rgb, gray.xxx, _GrayAmount);
                return color;
            }
            ENDCG
        }
    }
}

使用步骤：

在Project窗口右键创建Shader，把上面代码贴进去，保存。
创建材质，Shader选择UI/URP-Gray。
把材质拖给Image组件的Material属性。
调整Gray Amount，1就是全灰，0是正常颜色。

2.3 关键结构逐段拆解：PerRendererData、顶点色与Stencil

为什么我不建议从零写一套新Shader，而是粘着官方UI/Default改？因为UGUI对Shader有隐藏要求，少了哪块都会出问题。

[PerRendererData] _MainTex 是给UI系统用的标签。加了它之后，Image组件上设置Sprite会自动赋给Shader的主纹理，不需要你在材质面板手动指定。如果去掉这个标签，图集下会出现贴图错乱、按钮显示空白的问题。

顶点色相乘是Button反馈的核心。UGUI的Button在做Color Tint过渡时，本质是把按下/悬停的颜色乘到UI顶点色里，Shader里必须计算v.color * _Color，否则Button的高亮、禁用态颜色全部失效。这也是网上很多简化版灰度Shader放到Button上之后，点击效果完全消失的原因。

Stencil块不能删。UGUI的Mask组件靠Stencil实现裁剪，只要Shader的SubShader里没有这段Stencil配置，Mask就失效，挂在Mask下的变灰UI会无视裁剪区域直接显示出来。

unity_GUIZTestMode 是UGUI内部用的ZTest模式。UI系统会根据Canvas的渲染模式动态调整这个变量，用来处理不同UI层级的深度关系。如果改成普通的ZTest LEqual，多个Canvas叠加时可能被遮住或者穿透。

2.4 用ShaderGraph做行不行？有什么坑

ShaderGraph在URP里的地位很高，但做UI灰度Shader有几个比较坑的点。

第一个坑是顶点色。ShaderGraph默认不读取UGUI的顶点色，就算你连了Sprite Color节点，在不做自定义Vertex阶段处理的前提下，Button的Color Tint反馈依然会失效。所以你会发现用ShaderGraph做出来的变灰效果，静态看没问题，一放到Button上就发现高亮反馈没反应。

第二个坑是Stencil和裁剪。ShaderGraph的Unlit Master节点本身不提供Stencil配置入口，新版Graph Inspector里有一些设置项，但操作繁琐也容易漏，RectMask2D的裁剪通常需要自己拼一个Custom Function节点来调用UnityGet2DClipping，非常绕。

我的建议是：如果是个人项目跑个Demo，ShaderGraph可以试；如果是要上线的正式项目，直接手写Shader，稳定性和可控性都远胜于ShaderGraph。

3. 脚本侧控制：材质替换、渐变过渡与批量管理

3.1 直接改material会带来DrawCall问题

Shader准备好了，接下来需要考虑怎么从代码控制。

很多人第一反应是拿到一个Image组件然后image.material.SetFloat("_GrayAmount", 1)。这个写法本身没问题，问题在于UGUI里直接访问material属性会隐式创建一个材质的实例。如果一个界面上有30个Image需要统一变灰，就会多出30份材质实例，不仅内存浪费，还会导致Canvas重新合批，DrawCall上升。

正确做法是：一个变灰分组共享同一份材质实例。把所有需要变灰的Graphic收集起来，统一替换成同一个Material对象，改参数时也只改这一份材质。下面的脚本就是按这个思路写的：

csharp复制using UnityEngine;
using UnityEngine.UI;

public class UIGrayGroup : MonoBehaviour
{
    [Range(0f, 1f)] public float grayAmount = 0f;

    private Graphic[] graphics;
    private Material grayMaterial;
    private Material[] originalMaterials;
    private bool applied = false;

    private void Awake()
    {
        // Graphic会收集Image、RawImage、普通Text等组件
        graphics = GetComponentsInChildren<Graphic>(true);
        var shader = Shader.Find("UI/URP-Gray");
        if (shader != null)
        {
            grayMaterial = new Material(shader);
            grayMaterial.hideFlags = HideFlags.DontSave;
        }
    }

    public void SetGray(float amount)
    {
        grayAmount = Mathf.Clamp01(amount);
        if (grayMaterial == null) return;

        bool shouldApply = grayAmount > 0f;

        if (shouldApply && !applied)
        {
            originalMaterials = new Material[graphics.Length];
            for (int i = 0; i < graphics.Length; i++)
            {
                if (graphics[i] == null) continue;
                originalMaterials[i] = graphics[i].materialForRendering;
                graphics[i].material = grayMaterial;
            }
            applied = true;
        }
        else if (!shouldApply && applied)
        {
            for (int i = 0; i < graphics.Length; i++)
            {
                if (graphics[i] != null)
                    graphics[i].material = originalMaterials[i];
            }
            applied = false;
        }

        grayMaterial.SetFloat("_GrayAmount", grayAmount);
    }

    public void SetGrayImmediate(float amount)
    {
        SetGray(amount);
    }
}

使用时把脚本挂在UI面板的根节点上，调用SetGray(1f)整个面板统一变灰，SetGray(0f)恢复。注意，这个脚本没有处理TMP_Text，原因后面踩坑章节会说。

3.2 带渐变过渡的灰度开关

冷却结束、解锁完成这类场景，直接瞬间变回彩色会很生硬，一般要做渐变。用协程控制灰度值很简单：

csharp复制public void TweenTo(float target, float duration)
{
    StartCoroutine(TweenGray(target, duration));
}

private System.Collections.IEnumerator TweenGray(float target, float duration)
{
    float start = grayAmount;
    float t = 0f;
    while (t < 1f)
    {
        t += Time.deltaTime / duration;
        SetGray(Mathf.Lerp(start, target, Mathf.SmoothStep(0f, 1f, t)));
        yield return null;
    }
    SetGray(target);
}

这里用了Mathf.SmoothStep而不是直接Mathf.Lerp，目的是让灰度的起始和结束速度更自然，不会突然加速或者突然停顿。也可以用DOTween，核心思路一样，就是动画过程中不断更新_GrayAmount。

3.3 一大片UI统一变灰的高效姿势

如果整个主界面几十个UI元素都要变灰，不想每个分组挂脚本，可以做一个统一管理器。管理器启动时遍历所有Canvas，或者通过事件系统接收全局状态，然后调用UIGrayGroup的SetGray。

但这里有个性能小技巧：不是所有Graphic都需要走材质替换。如果某个Image本身就是纯色、半透明黑底这类简单资源，变灰与否视觉差异很小，可以跳过，减少材质替换的开销。遍历收集Graphic时判断一下graphic.color.a < 0.01f直接continue，效果不会受影响，但能少创建很多材质引用。

另外一个常见需求是——变灰之后不能让用户继续点击按钮。材质替换不管这个，你还需要把Button的interactable设为false，或者把Image的raycastTarget关掉，否则用户点到一个灰置按钮，鼠标事件依然被响应，这在项目里是逻辑BUG。

4. 我在URP下翻过的车：灰度实现中的排查实录

4.1 变灰后图层变黑、半透明边缘也变成半透明黑

现象是UI本身是正常的彩色图标，挂上灰度材质后整体发黑，半透明边缘的羽化感完全消失，像被墨水糊了一层。

排查顺序是这样的：

先检查Blend模式：Blend SrcAlpha OneMinusSrcAlpha正常。
再看alpha输出：发现很多网上的灰度Shader在fragment里写了return float4(gray, gray, gray, 1);，alpha被硬编码成了1。
人脸图标有羽化边缘，alpha从1渐降到0，强制写1之后边缘硬生生变成不透明黑边，混合后看起来就是一团黑。

修复方式就是保留原始alpha输出，只对rgb分量做灰度处理。这是最简单的坑，也是最常见的一个。

4.2 RectMask2D裁剪失效，越界内容露了出来

项目里有个长列表区域，外层套了RectMask2D做裁剪，列表项在滚动时只应该显示在区域内。给列表项挂上变灰材质后，滚动到区域外的列表项依然完整显示，没有跟随遮罩裁掉。

排查路径：

确认RectMask2D组件正常，没被禁用。
检查材质是否还挂在原Shader上。替换成灰度Shader后，发现该Shader的fragment里完全没有任何裁剪相关代码。
对比官方UI/Default，发现它用UNITY_UI_CLIP_RECT关键字配合UnityGet2DClipping来做RectMask2D裁剪。
我的灰度Shader里没有这段逻辑，RectMask2D自然失效。

修复方式参考上面2.2节的完整代码，主要是两点：加上#pragma multi_compile_local _ UNITY_UI_CLIP_RECT，以及在fragment里调用UnityGet2DClipping(IN.worldPosition.xy, _ClipRect)。

需要额外注意，这个多编译关键字不能漏。如果只用#ifdef没有对应的#pragma multi_compile，编译出来的Shader在真机上可能没有裁剪的keyword变体，编辑器里正常，打包后另一套行为。

4.3 Button高亮反馈丢失，点击后视觉效果全不对

按钮变灰后，按下和悬停应该还有高亮反馈，哪怕灰色状态也至少要有明暗变化。实际效果是点下去完全没反应。

排查后发现fragment里只做了tex2D(_MainTex, uv)一个采样，根本没有乘顶点色。UGUI的Button Color Tint过渡模式是通过修改顶点色实现的，顶点色的变化需要在Shader里手动乘进颜色计算，否则反馈无效。

修复就是先乘顶点色，再做灰度处理：

code复制half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;

这一步还能顺带解决另一个问题：当Button置为interactable = false时，UGUI会自动给顶点色乘一个灰色调，让按钮呈现出更自然的disabled状态，放大淡化效果。如果Shader不乘顶点色，这个隐形的UI反馈也会一起失效。

4.4 Text与TMP字体的变灰陷阱

普通Text组件可以用Graphic收集到，替换材质后就能变灰，但有一个隐藏风险：字体材质是共享的。如果直接修改Text的material，可能只是替换了该实例；但如果改的是font.material，场景里所有使用这个字体的Text全部会动。

TMP的坑更明显。TMP基于SDF字体贴图，它渲染依赖TextMeshPro/Distance Field这类专用Shader。把TMP文本的材质换成普通Sprite灰度Shader，字会变成模糊的黑块，原因就是SDF渲染需要特定的Shader流程，普通UI Shader根本不走这一套。

实际处理方式：

普通Text：给每个文字对象单独复制一份材质实例再改Shader，避免影响同字体的其他对象。
TMP：不换Shader，而是复制一份TMP默认材质，在其基础上做灰度处理，或者直接修改TMP文本的顶点颜色配合透明度。TMP自定义shader需求多的话，建议单独做一套TMP专用变灰材质。

所以我的UIGrayGroup脚本注释里才特意说明：当前版本覆盖Image、RawImage、普通Text，TMP需要单独扩展。

4.5 同一个Canvas下，一边变灰一边不变灰怎么处理

这是多分组场景下最常见的需求。界面左边栏某些按钮要进冷却变灰，右边功能按钮保持正常。

如果你把一份材质实例赋给所有Image，通过改_GrayAmount翻身，最后会发现所有用了这份材质的Image一起变灰。原因就是材质共享。

处理方式是按visual group维护不同的材质实例。比如A组用grayMaterial_A，B组用grayMaterial_B，更新A组时只改grayMaterial_A的_GrayAmount，B组完全不受影响。

代价是材质实例多了，Canvas的合批也会被拆分。我不建议为了追求完美合批把所有变灰、半灰、彩色的UI全塞同一个Canvas，实际项目里拆分两三个Canvas反而更好管理，DrawCall并不会因此爆炸。

5. 玩法不止一种：变灰的进阶玩法和性能优化

5.1 径向扩散的变灰效果

灰度不止能做开关，还能做区域扩散效果。比如某个技能图标从中心开始慢慢变灰，或者角色身上某个部位特效消失时，UI从外圈向中心变灰。只需要在Shader里加一个中心点和半径参数：

hlsl复制// Properties里增加
_GrayCenter ("Gray Center (UV)", Vector) = (0.5, 0.5, 0, 0)
_GrayRadius ("Gray Radius", Range(0, 1)) = 0.5
_GrayFeather ("Gray Feather", Range(0, 1)) = 0.1

// frag里，在灰度计算之后
float2 uv = IN.texcoord;
float d = distance(uv, _GrayCenter.xy);
float mask = smoothstep(_GrayRadius, _GrayRadius + _GrayFeather, d);
color.rgb = lerp(color.rgb, gray.xxx, _GrayAmount * mask);

_GrayCenter取值范围是0到1，对应贴图的UV坐标。脚本里给UI元素传入想要扩散的中心点，再单独tween_GrayRadius，就能做出由内向外一圈圈灰掉的效果。

5.2 带色调倾向的灰度怀旧风

灰度不一定非得是纯黑白灰，老照片、回忆杀这种场景经常需要偏黄的灰阶。在Shader里加一个_GrayTint颜色，灰度结果再乘色调：

hlsl复制_GrayTint ("Gray Tint", Color) = (1, 1, 1, 1)

color.rgb = lerp(color.rgb, gray * _GrayTint.rgb, _GrayAmount);

把_GrayTint调成暖黄色(1, 0.88, 0.72)就能得到偏复古的调子，调成冷蓝(0.75, 0.85, 1)又是另一种叙事氛围。这个改动对性能和DrawCall没有任何额外影响，属于“一行Shader代码创造新玩法”的典型。

5.3 全屏一键变灰的全局参数方案

最后分享一个我压箱底的小技巧：全局Float参数实现整片UI瞬间变灰。

在Shader里声明一个全局变量：

hlsl复制float _GlobalGray;
float totalGray = max(_GrayAmount, _GlobalGray);

然后所有灰度计算统一用totalGray，脚本里只需要一行：

csharp复制Shader.SetGlobalFloat("_GlobalGray", 0.8f);

整个项目里所有使用了这个Shader的UI会同时变为80%灰度，不需要获取任何GameObject引用，不需要遍历替换材质，不需要关心场景切换后有没有遗漏。

我在项目里用这个方案做全局哀悼模式和挂机状态，效果非常干净。需要注意这个变量是全局的，只要调用就是全场景生效，如果只想让某一片UI受影响，还是回到第3章的分组材质方案。

我现在的默认UI材质库就是基于这份灰阶Shader，按钮级变灰走_GrayAmount，全局模式走_GlobalGray，两个参数一配合，产品改需求时就再也不用加班改UI了。如果你也正被URP下的UI变灰折腾，按这套思路从官方Shader改一份存到公共库里，后续所有项目都能直接复用。