Unity中 UI Shader的基本功能

---

前言

Unity中 UI Shader的基本功能

一、实现思路

1、暴露一个 2D 类型的属性来接受UI的纹理

//命名要按标准来，这个属性才可以和Unity组件中的属性产生关联
//比如说，在更改 Image 的源图片时，同时更改这个
[PerRendererData]_MainTex(“MainTex”,2D) = “white”{}

2、设置shader的层级为TransParent半透明渲染层级，一般UI都是在这个渲染层级

//更改渲染队列（UI的渲染队列一般是半透明层的）
Tags {“Queue” = “TransParent”}

3、更改混合模式，是 UI 使用的纹理，该透明的地方透明

//混合模式
Blend SrcAlpha OneMinusSrcAlpha

二、代码实现

Shader"MyShader/P1_1_1"
{
    Properties
    {
        //命名要按标准来，这个属性才可以和Unity组件中的属性产生关联
        //比如说，在更改 Image 的源图片时，同时更改这个
        
        [PerRendererData]_MainTex("MainTex",2D) = "white"{}
    }
    SubShader
    {
        //更改渲染队列（UI的渲染队列一般是半透明层的）
        Tags {"Queue" = "TransParent"}
        //混合模式
        Blend SrcAlpha OneMinusSrcAlpha
        Pass
        {
            CGPROGRAM
            #pragma vertex  vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            //存储 应用程序输入到顶点着色器的信息
            struct appdata
            {
                //顶点信息
                float4 vertex:POSITION;

                float2 uv : TEXCOORD;
            };
            //存储 顶点着色器输入到片元着色器的信息
            struct v2f
            {
                //裁剪空间下的位置信息
                float4 pos:SV_POSITION;
                float2 uv : TEXCOORD;
            };
            
            sampler2D _MainTex;
            
            v2f vert(appdata v)
            {
                v2f o;
                //把顶点信息转化到裁剪坐标下
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }
            fixed4 frag(v2f i) : SV_Target
            {
                fixed4 mainTex = tex2D(_MainTex,i.uv);
                return  mainTex;
            }
            
            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

属性设置：

效果：