Vertex&Frag

1、Vertex&Frag

　　包含Vertex&Fragment 的Shader叫作頂點&像素着色器，在Vertex的功能函數中，咱們側重於幾何計算，如紋理座標，頂點座標等；在Fragment 的功能函數中，咱們側重於計算最終的顏色值，如光照後的效果等，注意這裏會對像素進行平滑插值。

2、Vertex&Frag 的結構

Shader "JQM/Test01"
{
	Properties
	{
	　　 ...
	}
	SubShader
	{
　　　　　　　...
	}
	SubShader
	{
　　　　　　　...
	}
	...
}

　　在第一行：Shader "JQM/Test01"，聲明瞭着色器的名字和路徑；而後在它的大括號內包含一個屬性和多個SubShader；

　　

 

　　在Shader的計算中，每一個Shader會根據計算機硬件系統本身的條件選擇一個合適SubShader運行。每個SubShader能夠包含多個Pass通道，每個Pass依次計算，多個Pass之間咱們會採用混合技術來合理使用，這樣能夠製做更多的特效，在Pass中，就是具體的計算方法了，Vertex&Frag就在Pass中。

    SubShader
    {
        Pass
        {
            ...
        }
        Pass
        {
            ...
        }
        ...
    }

 

3、Properties {} 屬性介紹

　　在Properties做用域中，包含着一些屬性，如紋理、顏色浮點值等，如下是屬性類型。可是要使用這些屬性值，須要在CG塊中聲明一次。Unity 聖典屬性

    Properties
    {
        _MyTexture ("Texture", 2D) = "white" {} //紋理
        _MyColor ("Some Color", Color) = (1,1,1,1) //顏色
        _MyVector ("Some Vector", Vector) = (0,0,0,0) //4維座標
        _MyFloat ("My float", Float) = 0.5 //浮點
        _MyRange ("My Range", Range(0,1)) = 0.5 //浮點
        _MyCubemap ("Cubemap", CUBE) = "" {} //立方體紋理
    }

4、Pass {} 介紹　　

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"

            struct VertexOutput
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
                
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            
            VertexOutput vert (appdata_full v)
            {
                VertexOutput o;
                ...
                return o;
            }
            
            fixed4 frag (VertexOutput i) : COLOR
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                ...
                return col;
            }
            ENDCG
        }

　　在Pass中，CGPROGRAM...ENDCG裏面，全部的功能代碼，都在該區域內。在CGPROGRAM...ENDCG中，先聲明頂點着色器vert和像素着色器frag，具體的計算在函數裏面。而後是包含Unity的Cg頭文件，一些內置變量在紋理裏面。還定義了本身的結構體用於頂點着色器向像素着色器傳遞信息。若是要使用屬性值，須要在該區域裏面聲明。

 

 5、完整例子解析 

以下圖：先經過頂點着色器，計算模型的座標和紋理，再傳入像素着色器計算顏色值。

*注意

_MainTex_ST 和 TransForm_Tex 是對應關係，計算紋理座標的偏移和平鋪。

裁剪空間的範圍是[-1,1],也就是在通過MVP矩陣後，o.pos.x/ o.pos.w 以及o.pos.y/ o.pos.w 的範圍都是[-1,1] 故能夠將裁剪空間座標轉換爲 相對屏幕位置的uv座標,以下o.uv = float2(( o.pos.x/o.pos.w+1)*0.5,(o.pos.y/o.pos.w+1)*0.5);

 

 

源代碼：

 1 Shader "JQM/VertexAndFrag"                                            //文件名和路徑
 2 {
 3     Properties                                                                        //屬性
 4     {
 5         _MainTex ("Texture", 2D) = "white" {}
 6     }
 7     SubShader                                                                    
 8     {
 9 
10         Pass
11         {
12             CGPROGRAM                                                        //Vertex&Frag 類型的shader 採用Cg語言
13             #pragma vertex vert
14             #pragma fragment frag
15             
16             #include "UnityCG.cginc"
17 
18             sampler2D _MainTex;                                            //屬性聲明
19             float4 _MainTex_ST;
20 
21             struct appdata
22             {
23                 float4 vertex : POSITION;
24                 float2 uv : TEXCOORD0;
25             };
26 
27             struct v2f
28             {
29                 float4 pos:SV_POSITION;
30                 float2 uv : TEXCOORD0;
31             };
32 
33             
34             v2f vert (appdata v)                                                //頂點程序        
35             {
36                 v2f o;
37                 o.pos = mul(UNITY_MATRIX_MVP, v.vertex);        //模型視圖投影矩陣，將模型座標轉到攝像機座標，在投影到屏幕的座標
38                 o.uv = TRANSFORM_TEX(v.uv, _MainTex);            //計算UV和貼圖之間的值
39                 return o;
40             }
41             
42             fixed4 frag (v2f i) : COLOR                                        //片斷程序，強制返回Color類型的顏色值
43             {
44                 // sample the texture
45                 fixed4 col = tex2D(_MainTex, i.uv);                    //紋理採樣
46                 return col;
47             }
48             ENDCG
49         }
50     }
51 }

View Code

 

圖像特效腳本