Unity 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中变量类型之间匹配关系如下：

ShaderLab属性类型CG变量类型Color, Vectorfloat4, half4, fixed4Range, Floatfloat, half, fixed2Dsampler2DCubesamplerCube3Dsampler3D

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