unity shaderlab 颜色渐变效果 代码+注释_unity shader 多颜色

原理

两色渐变

如图，在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
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

多色渐变的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
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

}