---

前言

Unity中UI組件對Shader調色

---

一、原理

在Shader中直接暴露的Color屬性，不會與UI的Image組件中的Color形成屬性綁定。因為UI的Image組件中更改的顏色是頂點顏色，如果需要在修改組件中的顏色時，使Shader中的顏色也同時改變。那么就需要在應用程序階段傳入到頂點著色器的數(shù)據(jù)增加一個變量，用于給頂點著色器使用。

---

二、實現(xiàn)

1、在結構體 appdata 中，加入一個用COLOR語義的變量，用于代表傳入的頂點顏色

//定義一個語義為Color的4維向量，用于傳入頂點顏色,設置語義為COLOR后，這個變量就會與頂點顏色對應
struct appdata
{
//頂點信息
float4 vertex:POSITION;
float2 uv : TEXCOORD;
//這里定義一個語義為Color的4維向量，用于傳入頂點顏色,設置語義為COLOR后，這個變量就會與頂點顏色對應
fixed4 color:COLOR;
};

2、在結構體 v2f 中，加入一個用 TEXCOORD1語義定義變量，這里的語義其實沒有什么含義，主要作用是精度的不同。

在傳入到片元著色器的數(shù)據(jù)中，只有 SV_POSITION 語義是必要的，這個用于存儲轉化到裁剪坐標下的位置信息。

//存儲 頂點著色器輸入到片元著色器的信息
struct v2f
{
//裁剪空間下的位置信息（SV_POSITION是必須的）
float4 pos:SV_POSITION;
float2 uv : TEXCOORD;
//這里的語義主要代表精度不同，TEXCOORD 在這里只是代表高精度，可以使用COLOR語義，代表低精度
fixed4 color : TEXCOORD1;
};

3、在片元著色器中，讓頂點顏色 和 采樣后的紋理混合輸出即可

示例代碼：

Shader"MyShader/P1_1_4"
{Properties{//命名要按標準來，這個屬性才可以和Unity組件中的屬性產生關聯(lián)//比如說，在更改 Image 的源圖片時，同時更改這個[PerRendererData]_MainTex("MainTex",2D) = "white"{}[PerRendererData]_Color("Color",color) = (1,1,1,1)}SubShader{//更改渲染隊列（UI的渲染隊列一般是半透明層的）Tags {"Queue" = "TransParent"}//混合模式Blend SrcAlpha OneMinusSrcAlphaPass{CGPROGRAM#pragma vertex  vert#pragma fragment frag#include "UnityCG.cginc"//存儲 應用程序輸入到頂點著色器的信息struct appdata{//頂點信息float4 vertex:POSITION;float2 uv : TEXCOORD;//這里定義一個語義為Color的4維向量，用于傳入頂點顏色,設置語義為COLOR后，這個變量就會與頂點顏色對應fixed4 color:COLOR;};//存儲 頂點著色器輸入到片元著色器的信息struct v2f{//裁剪空間下的位置信息（SV_POSITION是必須的）float4 pos:SV_POSITION;float2 uv : TEXCOORD;//這里的語義主要代表精度不同，TEXCOORD 在這里只是代表高精度fixed4 color : TEXCOORD1;};sampler2D _MainTex;fixed4 _Color;v2f vert(appdata v){v2f o;//把頂點信息轉化到裁剪坐標下o.pos = UnityObjectToClipPos(v.vertex);o.uv = v.uv;o.color = v.color;return o;}fixed4 frag(v2f i) : SV_Target{fixed4 mainTex = tex2D(_MainTex,i.uv);return  mainTex * i.color;}ENDCG}}
}

效果（可以通過UI的Image組件中改變顏色，來對Shader調色了）：