Unity中如何实现图片两侧向黑色的横向渐变淡出效果？

一、Shader Graph可视化实现步骤 #

适合不想写代码的新手，通过节点连线完成效果：

1. 创建Unlit Shader Graph（如果用URP/HDRP，对应选择管线的Graph模板）
2. 在Blackboard面板添加两个属性：
   • 类型为Texture2D的_MainTex（用于挂载目标图片）
   • 类型为Float的_FadeWidth，设置范围0~0.5（控制两侧渐变的宽度）
3. 拖出Sample Texture 2D节点，将_MainTex和默认的UV节点连接到该节点的输入
4. 处理渐变遮罩：
   • 拖出UV节点，用Split节点提取其X分量（左右方向的UV坐标）
   • 第一个Smoothstep节点：Min设为0，Max设为_FadeWidth，Value设为UV的X分量，得到左侧渐变系数
   • 第二个Smoothstep节点：Min设为1，Max设为1 - _FadeWidth，Value设为UV的X分量，得到右侧渐变系数
   • 用Multiply节点将两个渐变系数相乘，得到最终的遮罩值
5. 将Sample Texture 2D的RGB输出与遮罩值相乘，结果连接到Base Color输出端口
6. 保存Shader Graph，创建Material并关联该Shader，把目标图片拖到_MainTex，调整_FadeWidth即可看到效果

二、手写基础Shader实现 #

如果想理解底层逻辑，用以下简单的Unlit Shader代码：

Shader "Custom/EdgeFade"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _FadeWidth ("Fade Width", Range(0, 0.5)) = 0.1
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _FadeWidth;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // 采样原图颜色
                fixed4 col = tex2D(_MainTex, i.uv);
                
                // 计算左右边缘的平滑渐变遮罩
                float leftFade = smoothstep(0, _FadeWidth, i.uv.x);
                float rightFade = smoothstep(1, 1 - _FadeWidth, i.uv.x);
                float fadeMask = leftFade * rightFade;
                
                // 让边缘颜色按遮罩系数变暗（乘0就是纯黑，乘1保留原图）
                col.rgb *= fadeMask;

                return col;
            }
            ENDCG
        }
    }
}

使用方法： #

1. 在Unity中创建新的Shader，替换为上述代码
2. 创建Material并选择该Shader，将目标图片拖到Texture属性
3. 在Inspector面板调整Fade Width参数，控制两侧渐变的宽度

内容的提问来源于stack exchange，提问作者MrToenails