unity shaderlab 顏色漸變效果 代碼+註釋

原理

兩色漸變

如圖，在uv座標系中像素（x，y）的取值範圍是（0，0） - （1，1）
設置_pos1的值作爲區域限制，取值範圍（0，1），然後判斷當前像素的y值是否處於0-_pos1的區間，如果是就替換爲_color1 - color2的過度色，否則就直接使用_color2的顏色
_color1 - color2中的過度色，由0 -_pos1的比值定位，注意uv座標系中左下角是原點右上角是重點，所以獲取0 -_pos1的比值時需要用1減去。否則就是倒置的效果。

多色漸變

再次添加_pos屬性，設置新的區域並計算插值

效果圖

兩色漸變的shader代碼

Shader "Custom/lineColor" 
{
	//該shader共3個顏色，可調節三個顏色，與中間顏色的縱向域
	//unity可見的屬性
    Properties
    {
         _MainTex ("貼圖", 2D) = "white" {}
         _Color1 ("顏色1", Color) = (1.0, 0.0, 0.0, 1.0)
         _Color2 ("顏色2", Color) = (0.0, 1.0, 0.0, 1.0)
		[PowerSlider(1)] _Pos1("第二個顏色位置", Range(0.0, 1.0)) = 0.2
    }
	
    SubShader
    {
        Pass
        { 
        	//透明隊列
            Tags {"Queue" = "Transparent" "RenderType"="Transparent" }
            //常規透明混合
            Blend SrcAlpha OneMinusSrcAlpha
            CGPROGRAM
            //定義頂點、片元渲染器，引入工具宏
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
			//程序傳入頂點渲染器的參數
            struct a2v
            {
                float4 pos: POSITION;
                float2 uv : TEXCOORD0;
            };
			//頂點渲染器傳入片元渲染器
            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 pos: SV_POSITION;
            };
			//定義參數：貼圖、三個顏色、位置
			sampler2D _MainTex;
            fixed4 _Color1;
            fixed4 _Color2;
			float _Pos1;
			//頂點渲染器  
            v2f vert (a2v v)
            {
                v2f o;
                //頂點座標 從模型空間轉爲裁剪空間
                o.pos = UnityObjectToClipPos(v.pos);
                o.uv = v.uv;
                return o;
            }
            //片元渲染器
            fixed4 frag (v2f i) : SV_Target
            {
            	//像素顏色
                fixed4 col;
                //插值
                float lp = 0.0;
				// 如果當前像素位置處於 0 - _Pos1 的範圍內，就使用color1與color2的插值計算顏色
				if (i.uv.y >= _Pos1)
				{
					// 插值 = 當前像素在pos1範圍內的比重 = 在當前像素點的y值 / _Pos1界限值 
					lp = (1 - i.uv.y) / (1 - _Pos1);
					//像素輸出的顏色 = _Color1 - _Color2之間，處於lp位置的顏色
					//lerp 三個參數爲起始值，終止值，比重
					col = lerp(_Color1, _Color2, lp);
				}
				// 否則就使用第二個顏色
				else
				{
					col = _Color2;
				}
				//合成貼圖、uv與顏色
                return tex2D(_MainTex, i.uv) * col;
            }
            ENDCG
        }
    }
}

多色漸變的shader代碼

Shader “Custom/lineColor”
{
//該shader共3個顏色，可調節三個顏色，與中間顏色的縱向域
//unity可見的屬性
Properties
{
_MainTex (“貼圖”, 2D) = “white” {}
_Color1 (“顏色1”, Color) = (1.0, 0.0, 0.0, 1.0)
_Color2 (“顏色2”, Color) = (0.0, 1.0, 0.0, 1.0)
_Color3 (“顏色3”, Color) = (0.0, 0.0, 1.0, 1.0)
[PowerSlider(1)] _Pos1(“第二個顏色起始位置”, Range(0.0, 1.0)) = 0.2
[PowerSlider(1)] _Pos2(“第三個顏色起始位置”, Range(0.0, 1.0)) = 0.5
}

SubShader
{
    Pass
    { 
    	//透明隊列
        Tags {"Queue" = "Transparent" "RenderType"="Transparent" }
        //常規透明混合
        Blend SrcAlpha OneMinusSrcAlpha
        CGPROGRAM
        //定義頂點、片元渲染器，引入工具宏
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
		//程序傳入頂點渲染器的參數
        struct a2v
        {
            float4 pos: POSITION;
            float2 uv : TEXCOORD0;
        };
		//頂點渲染器傳入片元渲染器
        struct v2f
        {
            float2 uv : TEXCOORD0;
            float4 pos: SV_POSITION;
        };
		//定義參數：貼圖、三個顏色、位置
		sampler2D _MainTex;
        fixed4 _Color1;
        fixed4 _Color2;
		fixed4 _Color3;
		float _Pos1;
		float _Pos2;
		//頂點渲染器  
        v2f vert (a2v v)
        {
            v2f o;
            //頂點座標 從模型空間轉爲裁剪空間
            o.pos = UnityObjectToClipPos(v.pos);
            o.uv = v.uv;
            return o;
        }
        //片元渲染器
        fixed4 frag (v2f i) : SV_Target
        {
        	//像素顏色
            fixed4 col;
            //插值
            float lp = 0.0;
			// 如果當前像素位置處於 0 - _Pos1 的範圍內，就使用color1與color2的插值計算顏色
			if (i.uv.y >= _Pos1)
			{
				// 插值 = 當前像素在pos1範圍內的比重 = 在當前像素點的y值 / _Pos1界限值 
				lp = (1 - i.uv.y) / (1 - _Pos1);
				//像素輸出的顏色 = _Color1 - _Color2之間，處於lp位置的顏色
				//lerp 三個參數爲起始值，終止值，比重
				col = lerp(_Color1, _Color2, lp);
			}
			// 如果當前像素位置處於_Pos2座標點以上，就使用color2與color3的插值
			else if (i.uv.y <= _Pos2)
			{
				lp = i.uv.y / _Pos2;
				col = lerp(_Color3, _Color2, lp);
			}
			// 否則就使用第二個顏色
			else
			{
				col = _Color2;
			}
			//合成貼圖、uv與顏色
            return tex2D(_MainTex, i.uv) * col;
        }
        ENDCG
    }
}

}