漸變到自定義顏色

圖片漸變到自定義顏色

Shader "DanDan/Sprite/Gradient"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)
        // 自定義顏色
        _ToColor ("ToColor",Color) = (1,1,1,1)
        [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
    }

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

        Cull Off
        Lighting Off
        ZWrite Off
        Blend One OneMinusSrcAlpha

        Pass
        {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile _ PIXELSNAP_ON
            #include "UnityCG.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;
            };

            fixed4 _Color;

            v2f vert(appdata_t IN)
            {
                v2f OUT;
                OUT.vertex = UnityObjectToClipPos(IN.vertex);
                OUT.texcoord = IN.texcoord;
                OUT.color = IN.color * _Color;
                #ifdef PIXELSNAP_ON
                OUT.vertex = UnityPixelSnap (OUT.vertex);
                #endif

                return OUT;
            }

            sampler2D _MainTex;
            sampler2D _AlphaTex;
            float _AlphaSplitEnabled;

            // 獲取同名顏色的值
            float4 _ToColor;

            fixed4 SampleSpriteTexture (float2 uv)
            {
                fixed4 color = tex2D (_MainTex, uv);

                // _ToColor 就是 自定義顏色  
                color = lerp(color,_ToColor, uv.x);

#if UNITY_TEXTURE_ALPHASPLIT_ALLOWED
                if (_AlphaSplitEnabled)
                    color.a = tex2D (_AlphaTex, uv).r;
#endif //UNITY_TEXTURE_ALPHASPLIT_ALLOWED

                return color;
            }

            fixed4 frag(v2f IN) : SV_Target
            {
                fixed4 c = SampleSpriteTexture (IN.texcoord) * IN.color;
                c.rgb *= c.a;
                return c;
            }
        ENDCG
        }
    }
}

效果：

這裏的 Lerp處理：

color = lerp(color,_ToColor, uv.x);

也可以把 uv.x 改成 uv.y

x：從左到右
y：從上到下

---

兩個自定義顏色之間的漸變實現

大體上和上面一致，增加一個顏色輸入

        // 初始顏色
        _FromColor("FromColor",Color) = (1,1,1,1)

        float4 _FromColor;

修改 SampleSpriteTexture 函數

fixed4 SampleSpriteTexture (float2 uv)
            {
                fixed4 color = tex2D (_MainTex, uv);

                color = lerp(_FromColor,_ToColor, uv.x) * color;

#if UNITY_TEXTURE_ALPHASPLIT_ALLOWED
                if (_AlphaSplitEnabled)
                    color.a = tex2D (_AlphaTex, uv).r;
#endif //UNITY_TEXTURE_ALPHASPLIT_ALLOWED

                return color;
            }

不同光源的結果都是相加的，而光源作用在材質上就是相乘

效果：

---

四個自定義顏色之間的漸變實現

首先定義四個點的顏色，左上顏色、右上顏色、左下顏色、右下顏色

    // 四個點的顏色設置
    _LeftTopColor("LeftTopColor",Color) = (1,1,1,1)
    _LeftBottomColor("LeftBottomColor",Color) = (1,1,1,1)
    _RightTopColor("RightTopColor",Color) = (1,1,1,1)
    _RightBottomColor("RightBottomColor",Color) = (1,1,1,1)

總體來說，要進行三次插值操作，分別是:

• 左上顏色到右上顏色基於 uv.x 的插值
• 左下顏色到右下顏色基於 uv.x 的插值
• 以上兩個插值結果基於 uv.y 的插值(從下到上)

再次修改 SampleSpriteTexture 函數

float4 _LeftTopColor;
float4 _LeftBottomColor;
float4 _RightTopColor;
float4 _RightBottomColor;

fixed4 SampleSpriteTexture (float2 uv)
{
    fixed4 color = tex2D (_MainTex, uv);

    fixed4 topLeft2RightColor = lerp(_LeftTopColor,_RightTopColor,uv.x);
    fixed4 bottomLeft2RightColor = lerp(_LeftBottomColor,_RightBottomColor,uv.x);
    fixed4 bottom2TopColor = lerp(bottomLeft2RightColor,topLeft2RightColor,uv.y);

    color = bottom2TopColor * color;

#if UNITY_TEXTURE_ALPHASPLIT_ALLOWED
    if (_AlphaSplitEnabled)
        color.a = tex2D (_AlphaTex, uv).r;
#endif //UNITY_TEXTURE_ALPHASPLIT_ALLOWED

    return color;
}

效果：