Unity Shader入门精要笔记（六）：由一个简单的顶点/片元着色器谈起_shader 顶点 将矩形映射成狐

本系列文章由Aimar_Johnny编写，欢迎转载，转载请标明出处，谢谢。

http://blog.csdn.net/lzhq1982/article/details/74129759

本系列笔记使用的Unity版本是5.5.2，和书上的区别就是_Object2World已经变成unity_ObjectToWorld，_World2Object也变成了unity_WorldToObject，但即使用书上的例子也没问题，Unity会自行转换。当然版本差别太大就不保证了。

1、一个简单的顶点/片元着色器

有关Unity的知识这里就不说了，比如咋建场景，建材质啥的。这里我们建一个球体，建一个材质，把材质丢给球体，然后建个Unity Shader，一般都要先选个Shader模板，Unity Shader基础这篇里我提到过目前提供的模板类型，我们要用顶点/片元着色器，所以选Unlit Shader和Image Effect Shader都可以。然后我们改写成下面这样：

Shader "Custom/Simple Shader" {
 
	SubShader {
        Pass {
            CGPROGRAM
 
            #pragma vertex vert
            #pragma fragment frag
            
            float4 vert(float4 v : POSITION) : SV_POSITION {
                return mul(UNITY_MATRIX_MVP, v.vertex);
            }
 
            fixed4 frag() : SV_Target {
                return fixed4(1.0, 1.0, 1.0, 1.0);
            }
 
            ENDCG
        }
    }
}

把shader丢到材质上，然后我们看到效果如下：

这是一个最简单不过的Shader了，Unity Shader结构请看Unity Shader基础，这里我不解释了。首先我定义了该Shader的名字："Custom/Simple Shader"。然后这里没用到Properties语义块，不是必须的，我们没定义任何属性。然后声明了SubShader和Pass，我们也没进行任何渲染设置和标签设置。接着是CGPROGRAM和ENDCG之间的CG代码，这是我们的重点。先是这两行：

#pragma vertex vert
#pragma fragment frag

它们告诉Unity，顶点着色器函数是vert，片元着色器函数是frag，当然函数名你可以完全自己定义。对应下面的函数就行。接着我们看vert部分：

float4 vert(float4 v : POSITION) : SV_POSITION {
    return mul(UNITY_MATRIX_MVP, v.vertex);
}

这就是顶点着色器部分，它是逐顶点执行的。其中输入参数v包含了顶点的位置，这是由POSITION语义指定的。它的返回值是float4类型，mul(UNITY_MATRIX_MVP, v.vertex)只是把顶点变换到裁剪空间，所以输出的是裁剪空间该顶点的位置。POSITION和SV_POSITION是CG/HLSL的语义，在这里是不可以省略的，它们告诉系统需要哪种输入值，以及输出的是什么。例如这里POSITION说明输入的是顶点坐标，SV_POSITION说明输出的是裁剪空间的顶点坐标。如果没有语义，渲染器就不知道用户输入输出是什么。再看片元着色器：

fixed4 frag() : SV_Target {
    return fixed4(1.0, 1.0, 1.0, 1.0);
}

本例frag函数没有任何输入。输出是fixed4类型的变量。颜色值一般用fixed4类型就够了。然后使用SV_Target语义，说明输出颜色存储到一个渲染目标（render target）中。fixed4(1.0, 1.0, 1.0, 1.0)只是返回一个白色值。颜色分量在[0, 1]之间，(0, 0, 0)表示黑，(1, 1, 1)表示白。所以最后我们得到了一个白色的球。

2、更多的模型数据

上面例子我们用POSITION语义得到了模型的顶点位置。但我们时常还需要顶点的纹理坐标，法线，切线等数据，所以一个单一的输入参数肯定不行，就需要一个结构体了。我们修改上面的代码如下：

Shader "Custom/Simple Shader" {
 
	SubShader {
        Pass {
            CGPROGRAM
 
            #pragma vertex vert
            #pragma fragment frag
 
            struct a2v {
            	//POSITION语义：用模型空间顶点坐标填充vertex变量
                float4 vertex : POSITION;
                //NORMAL语义：模型空间的法线填充normal变量
		        float3 normal : NORMAL;
		        //TEXCOORD0语义：用模型的第一套纹理坐标填充texcoord变量
		        float4 texcoord : TEXCOORD0;
            };
            
            float4 vert(a2v v) : SV_POSITION {
                return mul(UNITY_MATRIX_MVP, v.vertex);
            }
 
            fixed4 frag() : SV_Target {
                return fixed4(1.0, 1.0, 1.0, 1.0);
            }
 
            ENDCG
        }
    }
}

从上面代码看出，我们只是比第一个代码多定义了一个结构a2v，并把a2v结构变量作为参数传入顶点着色器，结构体里面定义了顶点着色器需要的模型数据。注释写的很明白，我就不解释了。Unity支持的顶点着色器输出的语义有POSITION(位置)，TANGENT(切线)，NORMAL(法线)，TEXCOORD0， TEXCOORD1，TEXCOORD2，TEXCOORD3（一系列纹理坐标），COLOR(颜色)，等。

那么，填充到POSITION,TANGENT,NORMAL这些语义中的数据是从哪来的呢？是由使用该材质的Mesh Render组件提供的。每帧调用Draw Call的时候，Mesh Render会把它渲染的模型数据发送给Unity Shader。模型是由三角形面片组成的，三角形面片由3个顶点构成，每个顶点就包含着上面那些数据。

3、顶点和片元之间的通信
在渲染流水线中我们知道，顶点数据经过顶点着色器的一系列变换，输出的数据要交给片元着色器进行光栅化阶段。我们上面说的模型顶点坐标，法线，纹理坐标等数据是怎么传给片元着色器的呢，我们还需要定义一个结构体，我们对上面的代码改动如下。

Shader "Custom/Simple Shader" {
	SubShader {
        Pass {
            CGPROGRAM
 
            #pragma vertex vert
            #pragma fragment frag
            
			struct a2v {
                float4 vertex : POSITION;
				float3 normal : NORMAL;
				float4 texcoord : TEXCOORD0;
            };
            
            //使用一个结构体来定义顶点着色器的输出和片元着色器的输入
            struct v2f {
		        //SV_POSITION语义：pos里包含了顶点在裁剪空间中的位置
                float4 pos : SV_POSITION;
		        //COLOR0语义：可以用于存储颜色信息
                fixed3 color : COLOR0;
            };
            
            v2f vert(a2v v) {
		        //声明输出结构v2f
            	v2f o;
            	o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
		        //这是把v.normal（法线数据）转换成颜色信息存在o.color中
            	o.color = v.normal * 0.5 + fixed3(0.5, 0.5, 0.5);
                return o;
            }
	    
   	        //v2f结构作为参数传递给片元着色器
            fixed4 frag(v2f i) : SV_Target {
		        //将插值后的i.color显示到屏幕上
                return fixed4(i.color, 1.0);
            }
 
            ENDCG
        }
    }
}

上面的代码声明了一个结构体v2f，用于顶点着色器的输出和片元着色器的输入，从而实现信息的传递。v2f中每个变量都需要语义，而且至少要包含SV_POSITION。否则渲染器得不到裁剪空间的坐标，也就无法显示在屏幕上。上例中我们把法线数据转化成颜色了，法线范围是[-1, 1]，颜色范围是[0, 1]，所以上面用先乘0.5，再加0.5的办法进行了转换。最后把转换后的颜色插值后显示在了屏幕上。不要忘了插值哦，忘了的童鞋就回去看 Unity Shader基础。

4、使用属性

材质提供给我们一个可以方便调节Unity Shader中参数的方式，我们可以在Shader中声明属性，并在顶点/片元着色器中使用这些属性，这些属性会在材质面板中显示出来，我们可以通过材质面板调它们并且实时显示效果。比如上例，我们想在材质面板显示一个颜色拾取器，从而直接控制模型在屏幕上显示的颜色。

Shader "Custom/Simple Shader" {
	Properties {
            //声明一个Color类型的属性
		_Color ("Color Tint", Color) = (1, 1, 1, 1)
	}
	SubShader {
        Pass {
            CGPROGRAM
 
            #pragma vertex vert
            #pragma fragment frag
            
            //Cg代码中，我们需要定义一个与属性名称和类型都匹配的变量
            fixed4 _Color;
 
			struct a2v {
                float4 vertex : POSITION;
				float3 normal : NORMAL;
				float4 texcoord : TEXCOORD0;
            };
            
            struct v2f {
                float4 pos : SV_POSITION;
                fixed3 color : COLOR0;
            };
            
            v2f vert(a2v v) {
            	v2f o;
            	o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
            	o.color = v.normal * 0.5 + fixed3(0.5, 0.5, 0.5);
                return o;
            }
 
            fixed4 frag(v2f i) : SV_Target {
            	fixed3 c = i.color;
                //使用_Color属性控制输出颜色
            	c *= _Color.rgb;
                return fixed4(c, 1.0);
            }
 
            ENDCG
        }
    }
}

上面代码我们添加了Properties语义块，属性就声明在其中，_Color ("Color Tint", Color) = (1, 1, 1, 1)：我们声明了一个变量_Color，注意它的名字要与程序中名字一致，然后对应材质面板上的名字是"Color Tint"，类型是Color，这要写在一对括号里，然后等号后面是默认值，这里是白色。然后在CG中我们也要定义这个变量_Color，对应的类型是fixed4，与Properties中它的类型Color相匹配。

ShaderLab中属性的类型和CG中变量类型之间匹配关系如下：

至此我们的第一个Shader就写完了，是不是感觉很简单，下一篇我们重点总结一下Unity为我们提供的内置变量和语义，以及一些相关知识的介绍。