javascript:void(0)

什么是Shader

Shader（着色器）是一段能够针对3D对象进行操作、并被GPU所执行的程序。Shader并不是一个统一的标准，不同的图形接口的Shader并不相同。OpenGL的着色语言是GLSL， NVidia开发了Cg，而微软的Direct3D使用高级着色器语言（HLSL）。而Unity的Shader 是将传统的图形接口的Shader（由 Cg / HLSL编写）嵌入到独有的描述性结构中而形成的一种代码生成框架，最终会自动生成各硬件平台自己的Shader，从而实现跨平台。

Unity Shader 其实并不难，初学者往往很迷惑是因为它有太多固定的命令和结构，而这些命令又需要我们对3D渲染有一定的了解才能知道它们是做什么的。

Shader种类

OpenGL和Direct3D都提供了三类着色器：

  • 顶点着色器：处理每个顶点，将顶点的空间位置投影在屏幕上，即计算顶点的二维坐标。同时，它也负责顶点的深度缓冲（Z-Buffer）的计算。顶点着色器可以掌控顶点的位置、颜色和纹理坐标等属性，但无法生成新的顶点。顶点着色器的输出传递到流水线的下一步。如果有之后定义了几何着色器，则几何着色器会处理顶点着色器的输出数据，否则，光栅化器继续流水线任务。
  • 像素着色器(Direct3D)，常常又称为片断着色器(OpenGL)：处理来自光栅化器的数据。光栅化器已经将多边形填满并通过流水线传送至像素着色器，后者逐像素计算颜色。像素着色器常用来处理场景光照和与之相关的效果，如凸凹纹理映射和调色。名称片断着色器似乎更为准确，因为对于着色器的调用和屏幕上像素的显示并非一一对应。举个例子，对于一个像素，片断着色器可能会被调用若干次来决定它最终的颜色，那些被遮挡的物体也会被计算，直到最后的深度缓冲才将各物体前后排序。
  • 几何着色器：可以从多边形网格中增删顶点。它能够执行对CPU来说过于繁重的生成几何结构和增加模型细节的工作。Direct3D版本10增加了支持几何着色器的API, 成为Shader Model 4.0的组成部分。OpenGL只可通过它的一个插件来使用几何着色器。

Unity Shader 分为 表面着色器（Surface Shader）和 顶点片段着色器（Vertex And Fragment Shader）。

  • 表面着色器（Surface Shader）是Unity提出的一个概念。编写着色器与光照的交互是复杂的，光源有很多类型，不同的阴影选项，不同的渲染路径(正向和延时渲染)，表面着色器将这一部分简化。Unity建议使用表面着色器来编写和光照有关的Shader。
  • 顶点片段着色器（Vertex And Fragment Shader）和OpenGL，Direct3D中的顶点着色器和片段着色器没有什么区别。顶点片段着色器比表面着色器使用更自由也更强大，当然光照需要自行处理。Unity也允许在里面编写几何着色器，一般用得不多。
Shader程序结构

Unity3D Shader 入门_2d

Shader语法：

<code class="hljs r has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">//Shader语法：
Shader <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"name"</span> { [Properties] Subshaders [Fallback] [CustomEditor] }

//Properties 语法
Properties { Property [Property <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>] }

// Subshader 语法
Subshader { [Tags] [CommonState] Passdef [Passdef <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>] }

// Pass 语法
Pass { [Name and Tags] [RenderSetup] }

// Fallback 语法
Fallback <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"name"</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>
  • 属性定义（Property Definition）：定义Shader的输入，这些输入可以在材质编辑的时候指定
  • 子着色器（SubShader）：一个Shader可以有多个子着色器。这些子着色器互不相干且只有一个会在最终的平台运行。编写多个的目的是解决兼容性问题。Unity会自己选择兼容终端平台的Shader运行。
  • 回滚（Fallback）：如果子着色器在终端平台上都无法运行，那么使用Fallback指定的备用Shader，俗称备胎。
  • Pass：一个Pass就是一次绘制。对于表面着色器，只能有一个Pass，所以不存在Pass节。顶点片段着色器可以有多个Pass。多次Pass可以实现很多特殊效果，例如当人物被环境遮挡时还可以看到人物轮廓就可以用多Pass来实现。
  • Cg代码：每个Pass中都可以包含自定义的Cg代码，从CGPROGRAM开始到ENDCG结束。

基本的表面着色器示例：

<code class="language-c hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    Shader <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Custom/NewShader"</span> {
        Properties {
            _MainTex (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Base (RGB)"</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>D) = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"white"</span> {}
        }
        SubShader {
            Tags { <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"RenderType"</span> = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Opaque"</span> }
            LOD <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>

            CGPROGRAM
            <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#pragma surface surf Lambert</span>

            sampler2D _MainTex;

            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">struct</span> Input {
                float2 uv_MainTex;
            };

            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> surf (Input IN, inout SurfaceOutput o) {
                half4 c = tex2D (_MainTex, IN.uv_MainTex);
                o.Albedo = c.rgb;
                o.Alpha = c.a;
            }
            ENDCG
        }
        FallBack <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Diffuse"</span>
    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>

基本的顶点片段着色器示例：

<code class="language-c hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Shader <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"VertexInputSimple"</span> {
  SubShader {
    Pass {
      CGPROGRAM
      <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#pragma vertex vert</span>
      <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#pragma fragment frag</span>
      <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#include "UnityCG.cginc"</span>

      <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">struct</span> v2f {
          float4 pos : SV_POSITION;
          fixed4 color : COLOR;
      };

      v2f vert (appdata_base v)
      {
          v2f o;
          o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
          o.color.xyz = v.normal * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span> + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>;
          o.color.w = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>;
          <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> o;
      }

      fixed4 frag (v2f i) : SV_Target { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> i.color; }
      ENDCG
    }
  } 
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul>
Shader 输入

Shader的输入有两个来源，一是通过属性定义，一是通过Shader.SetGlobalXXX方法全局设置。

  • 属性定义变量：属性定义中的变量是Shader参数的主要设置方式。 它是随材质变化的，每个使用该Shader的材质都可以在Inspector或者脚本中设置这些参数。这些参数除了在Shader的Properties段中定义外，还需要在Cg中声明方可使用。例如上面表面着色器的例子中我们定义了_MainTex这个类型为2D的属性，还需要在Cg中声明 sampler2D _MainTex。

  • 全局变量：Shader有一组SetGlobalXXX方法，可以对Shader的在Cg中定义而没有在属性中定义的uniform变量进行设置。这个设置是全局的，所有定义了该uniform的Shader都会受到影响。例如我们希望场景随着时间变化而改变颜色，就可以给场景所使用到的Shader设置统一的全局颜色变量，然后在脚本中通过设置该颜色来改变场景的颜色。在角色释放技能时场景变黑也可以使用这个方法。

Unity shader 中允许定义的属性类型有：

关键字 类型 对应Cg类型 例
Float 浮点数 float _MyFloat (“My float”, Float) = 0.5
Range 浮点数 (在指定范围内) float _MyRange (“My Range”, Range(0.01, 0.5)) = 0.1
Color 浮点四元组 float4 _MyColor (“Some Color”, Color) = (1,1,1,1)
Vector 浮点四元组 float4 _MyVector(“Some Vector”,Vector) = (1,1,1,1)
2D 2的阶数大小的贴图 sampler2D _MyTexture (“Texture”, 2D) = “white” {}
Rect 非2的阶数大小的贴图 sampler2D _MyRect(“My Rect”, Rect) = “white” {}
CUBE CubeMap samplerCUBE _MyCubemap (“Cubemap”, CUBE) = “” {}

注：CubeMap 是6张有联系的2D贴图的组合主要用来做反射效果（比如天空盒和动态反射）

SubShader

SubShader中除了Pass，有两个标签值得关注：LOD和Tags

LOD

LOD是 Level of Detail的简写，确切地说是Shader Level of Detail的简写，因为Unity中还有一个模型的LOD概念，这是两个不同的东西。我们这里只介绍Shader中LOD，模型的LOD请参考这里。

Shader LOD 就是让我们设置一个数值，这个数值决定了我们能用什么样的Shader。可以通过Shader.maximumLOD或者Shader.globalMaximumLOD 设定允许的最大LOD，当设定的LOD小于SubShader所指定的LOD时，这个SubShader将不可用。通过LOD，我们就可以为某个材质写一组SubShader，指定不同的LOD，LOD越大则渲染效果越好，当然对硬件的要求也可能越高，然后根据不同的终端硬件配置来设置 globalMaximumLOD来达到兼顾性能的最佳显示效果。

Unity内建Shader定义了一组LOD的数值，我们在实现自己的Shader的时候可以将其作为参考来设定自己的LOD数值

  • VertexLit及其系列 = 100
  • Decal, Reflective VertexLit = 150
  • Diffuse = 200
  • Diffuse Detail, Reflective Bumped Unlit, Reflective Bumped VertexLit = 250
  • Bumped, Specular = 300
  • Bumped Specular = 400
  • Parallax = 500
  • Parallax Specular = 600

Tag

SubShader可以被若干的标签（tags）所修饰，而硬件将通过判定这些标签来决定什么时候调用该着色器。 
比较常见的标签有：

  • Queue 
    这个标签很重要，它定义了一个整数，决定了Shader的渲染的次序，数字越小就越早被渲染，早渲染就意味着可能被后面渲染的东西覆盖掉看不见。 
    预定义的Queue有：
名字 值 描述
Background 1000 最早被调用的渲染，用来渲染天空盒或者背景
Geometry 2000 这是默认值，用来渲染非透明物体（普通情况下，场景中的绝大多数物体应该是非透明的）
AlphaTest 2450 用来渲染经过Alpha Test的像素，单独为AlphaTest设定一个Queue是出于对效率的考虑
Transparent 3000 以从后往前的顺序渲染透明物体
Overlay 4000 用来渲染叠加的效果，是渲染的最后阶段（比如镜头光晕等特效）
  • RenderType 
    “Opaque”或”Transparent”是两个常用的RenderType。如果输出中都是非透明物体，那写在Opaque里；如果想渲染透明或者半透明的像素，那应该写在Transparent中。这个Tag主要用ShaderReplacement，一般情况下这Tag好像也没什么作用。

CommonState

SubShader中可以定义一组Render State，基本上就是一些渲染的开关选项，他们对该SubShader的所有的Pass都有效，所以称Common。这些Render State也可以在每个Pass中分别定义，将在Pass中详细介绍。

Pass

Render State

Render State主要就是控制渲染过程的一些开关选项，例如是否开启alpha blending ，是否开启depth testing。 
常用的Render State有：

  • Cull 
    用法：Cull Back | Front | Off 
    多边形表面剔除开关。Back表示背面剔除，Front表示正面剔除，Off表示关闭表面剔除即双面渲染。有时候如裙摆，飘带之类很薄的东西在建模时会做成一个面片，这就需要设置Cull Off来双面渲染，否则背面会是黑色。

  • ZWrite 
    用法：ZWrite On | Off 
    控制当前对象的像素是否写入深度缓冲区（depth buffer），默认是开启的。一般来说绘制不透明物体的话ZWrite开启，绘制透明或半透明物体则ZWrite关闭。 
    深度缓冲区：当图形处理卡渲染物体的时候，每一个所生成的像素的深度（即 z 坐标）就保存在一个缓冲区中。这个缓冲区叫作 z 缓冲区或者深度缓冲区，这个缓冲区通常组织成一个保存每个屏幕像素深度的 x-y 二维数组。如果场景中的另外一个物体也在同一个像素生成渲染结果，那么图形处理卡就会比较二者的深度，并且保留距离观察者较近的物体。然后这个所保留的物体点深度保存到深度缓冲区中。最后，图形卡就可以根据深度缓冲区正确地生成通常的深度感知效果：较近的物体遮挡较远的物体。 
    理解了深度缓冲区也就理解了为什么绘制透明或半透明物体需要关闭ZWrite, 如果不关闭，透明物体的depth也会被写入深度缓冲区，从而会剔除掉它后面的物体，后面的物体就不会被渲染，看不见后面的物体还能叫透明吗？因此我们使用Alpha blending的时候需要设置ZWrite Off。

  • ZTest 
    用法：ZTest (Less | Greater | LEqual | GEqual | Equal | NotEqual | Always) 
    控制如何进行深度测试，也就是上面说的图形处理卡比较二者的深度的比较方法。默认是LEqual。 
    值得一提的是使用Aplha blending的时候ZWrite需要关闭但是ZTest是要开启的，因为如果透明物体前面还有不透明物体，透明物体还是应该被遮挡剔除的。

  • Blend 
    混合。控制了每个Shader的输出如何和屏幕上已有的颜色混合。 
    用法： 
    Blend Off： 关闭混合 
    Blend SrcFactor DstFactor：最终颜色 = Shader产生的颜色 × SrcFactor + 屏幕上原来的颜色 × DstFactor
    Blend SrcFactor DstFactor, SrcFactorA DstFactor：和上面一样，只是Alpha通道使用后面两个参数计算 
    常用的Blend模式有： 
    Blend SrcAlpha OneMinusSrcAlpha // Alpha blending 
    Blend One One // Additive 
    Blend OneMinusDstColor One // Soft Additive 
    Blend DstColor Zero // Multiplicative 
    Blend DstColor SrcColor // 2x Multiplicative 
    具体参考这里

Unity5开始下列固定功能的Shader命令被标记为过时了，这些命令的功能现在建议在Shader(Cg)中通过代码来实现，这里列出是为了方便阅读以前写的Shader：

  • Lighting On | Off
  • Material { Material Block }
  • SeparateSpecular On | Off
  • Color Color-value
  • ColorMaterial AmbientAndDiffuse | Emission
  • Fog { Fog Block }
  • AlphaTest (Less | Greater | LEqual | GEqual | Equal | NotEqual | Always) CutoffValue
  • SetTexture textureProperty { combine options }
Surface Shader

Surface Shader 隐藏了很多光照处理的细节，它的设计初衷是为了让用户仅仅使用一些指令（#pragma）就可以完成很多事情，并且封装了很多常用的光照模型和函数。相比底层的Vertex And Fragment Shader，Suface Shader的限制比较多，它只能有一次Pass。如果做一些常规的功能又需要光照，可以用Surface Shader写，比较快速便捷。如果要写比较高级的Shader还是建议使用Vertex Shader 和 Fragment Shader。 
Surface Shader主要有两部分组成，一个是#pragma后面的指令，一个是surf函数。 
pragma的语法是 #pragma surface surfaceFunction lightModel [optionalparams] 
- surfaceFunction 通常就是名为surf的函数, 函数名可以自己取 
surf函数原型是：void surf (Input IN, inout SurfaceOutput o) 
- lightModel是Unity内置的光照模型，可以是Lambert，Blinn-Phong等。 
- optionalparams: 包含很多指令 详细参数参考这里

surf函数主要有一个Input结构的输入和SurfaceOutput结构的输出。

Input

Input 结构需要在Shader中定义。它可以包含如下字段, 如果你定义了这些字段就可以在surf函数中使用它们(好神奇的黑科技)

  • 多个贴图的uv坐标，名字必须符合格式uv+贴图名。例如 float2 uv_MainTex
  • float3 viewDir - 视图方向( view direction)值。为了计算视差效果(Parallax effects)，边缘光照(rim lighting)等，需要包含视图方向( view direction)值。
  • float4 with COLOR semantic - 每个顶点(per-vertex)颜色的插值。
  • float4 screenPos - 屏幕空间中的位置。 为了反射效果，需要包含屏幕空间中的位置信息。比如在Dark Unity中所使用的 WetStreet着色器。
  • float3 worldPos - 世界空间中的位置。
  • float3 worldRefl - 世界空间中的反射向量。如果表面着色器(surface shader)不写入法线(o.Normal)参数，将包含这个参数。 请参考这个例子：Reflect-Diffuse 着色器。
  • float3 worldNormal - 世界空间中的法线向量(normal vector)。如果表面着色器(surface shader)不写入法线(o.Normal)参数，将包含这个参数。
  • float3 worldRefl; INTERNAL_DATA - 世界空间中的反射向量。如果表面着色器(surface shader)不写入法线(o.Normal)参数，将包含这个参数。
  • float3 worldNormal; INTERNAL_DATA -世界空间中的法线向量(normal vector)。如果表面着色器(surface shader)不写入法线(o.Normal)参数，将包含这个参数。

SurfaceOutput

SurfaceOutput 描述了表面的特性（光照的颜色反射率、法线、散射、镜面等），这个结构是固定的，不需要在Shader中再定义。

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">struct</span> SurfaceOutput {
    half3 Albedo;       <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//反射率，一般就是在光照之前的原始颜色</span>
    half3 Normal;       <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//法线</span>
    half3 Emission;     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//自发光，用于增强物体自身的亮度，使之看起来好像可以自己发光</span>
    half Specular;      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//镜面</span>
    half Gloss;         <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//光泽</span>
    half Alpha;         <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//透明</span>
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

Unity5 由于引入了基于物理的光照模型，所以新增加了两个Output

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">struct <span class="hljs-constant" style="box-sizing: border-box;">SurfaceOutputStandard</span>
{
    fixed3 <span class="hljs-constant" style="box-sizing: border-box;">Albedo</span>;      <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> base (diffuse <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">or</span> specular) color
    fixed3 <span class="hljs-constant" style="box-sizing: border-box;">Normal</span>;      <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> tangent space normal, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> written
    half3 <span class="hljs-constant" style="box-sizing: border-box;">Emission</span>;
    half <span class="hljs-constant" style="box-sizing: border-box;">Metallic</span>;      <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>=non-metal, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>=metal
    half <span class="hljs-constant" style="box-sizing: border-box;">Smoothness</span>;    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>=rough, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>=smooth
    half <span class="hljs-constant" style="box-sizing: border-box;">Occlusion</span>;     <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> occlusion (default <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>)
    fixed <span class="hljs-constant" style="box-sizing: border-box;">Alpha</span>;        <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> alpha <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> transparencies
};
struct <span class="hljs-constant" style="box-sizing: border-box;">SurfaceOutputStandardSpecular</span>
{
    fixed3 <span class="hljs-constant" style="box-sizing: border-box;">Albedo</span>;      <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> diffuse color
    fixed3 <span class="hljs-constant" style="box-sizing: border-box;">Specular</span>;    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> specular color
    fixed3 <span class="hljs-constant" style="box-sizing: border-box;">Normal</span>;      <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> tangent space normal, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> written
    half3 <span class="hljs-constant" style="box-sizing: border-box;">Emission</span>;
    half <span class="hljs-constant" style="box-sizing: border-box;">Smoothness</span>;    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>=rough, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>=smooth
    half <span class="hljs-constant" style="box-sizing: border-box;">Occlusion</span>;     <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> occlusion (default <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>)
    fixed <span class="hljs-constant" style="box-sizing: border-box;">Alpha</span>;        <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> alpha <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> transparencies
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>

Unity提供了一些基本的SurfaceShader的例子，有助于我们理解输入输出是如何被使用的。 
Unity提供的SurfaceShader的例子

Vertex Shader

如果不想使用Surface Shader而直接编写opengl和Direct3D中常见的顶点着色器和片段着色器，可以通过Cg代码段嵌入到Pass中：

<code class="language-c hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">  Pass {
      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// ... the usual pass state setup ...</span>

      CGPROGRAM
      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// compilation directives for this snippet, e.g.:</span>
      <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#pragma vertex vert</span>
      <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#pragma fragment frag</span>

      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// the Cg/HLSL code itself</span>

      ENDCG
      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// ... the rest of pass setup ...</span>
  }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>

其中vert就是顶点着色器函数，frag就是片段着色器函数。一般来说，可以在顶点着色器中进行的计算就不应该放到片段着色器中去算，因为顶点着色器是逐顶点计算的而片段着色器是逐像素计算的，一个模型顶点总比表明像素少很多吧。

编写顶点和片段着色器一般需要包含Unity预定义的一个帮助文件UnityCG.cginc，里面预定义了一些常用的结构和方法。Windows版Unity这个文件位于({unity install path}/Data/CGIncludes/UnityCG.cginc。 Mac版位于/Applications/Unity/Unity.app/Contents/CGIncludes/UnityCG.cginc。

在代码中我们只需要添加 #include "UnityCG.cginc"就可以使用里面的结构和方法。

Input

顶点着色器的原型是 v2f vert (appdata v) 
appdata 是输入，可以自己定义也可以使用Unity预定义的。Unity在UnityCG.cginc预定义了三种常用的输入结构：appdata_base，appdata_tan，appdata_full。

<code class="language-c hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">struct</span> appdata_base {
    float4 vertex : POSITION;
    float3 normal : NORMAL;
    float4 texcoord : TEXCOORD0;
};

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">struct</span> appdata_tan {
    float4 vertex : POSITION;
    float4 tangent : TANGENT;
    float3 normal : NORMAL;
    float4 texcoord : TEXCOORD0;
};

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">struct</span> appdata_full {
    float4 vertex : POSITION;
    float4 tangent : TANGENT;
    float3 normal : NORMAL;
    float4 texcoord : TEXCOORD0;
    float4 texcoord1 : TEXCOORD1;
    float4 texcoord2 : TEXCOORD2;
    float4 texcoord3 : TEXCOORD3;
<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#if defined(SHADER_API_XBOX360)</span>
    half4 texcoord4 : TEXCOORD4;
    half4 texcoord5 : TEXCOORD5;
<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#endif</span>
    fixed4 color : COLOR;
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul>

我们注意到这些结构的字段和表面着色器中的字段不同，后面多了一个冒号和一个标签。这是该字段的语义，用于告诉GPU这个字段的数据应该去哪里读写。GPU毕竟是为了图形计算而特别设计的东西，很多东西都是固定的，我们只要记得有这么几个名字可以用行了。

类型 名字 标签 备注
float4 vertex POSITION 顶点在模型坐标系下的位置
float3 normal NORMAL 顶点的法向量
float4 tangent TANGENT 顶点的切向量
float4 color COLOR 顶点色
float4 texcoord TEXCOORD0 顶点的第一个uv坐标
float4 texcoord1 TEXCOORD1 顶点的第二个uv坐标，最多可以到5

Output

顶点着色器的输出是也是一个可以自己定义的结构，但是结构内容也是比较固定的，一般包含了顶点投影后的位置，uv，顶点色等，也可以加一些后面片段着色器需要用到但是需要在顶点着色器中计算的值。这个输出就是后面片段着色器的输入。

<code class="language-c hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">struct</span> v2f 
 {
    float4 pos : SV_POSITION;
    half2 uv   : TEXCOORD0;
 };</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

可以使用的字段有：

类型 标签 描述
float4 SV_POSITION 顶点在投影空间下的位置，注意和输入的模型坐标系下的位置不同，这个字段必必须设置，这个坐标转换是顶点着色器的重要工作
float3 NORMAL 顶点在视图坐标系下的法向量
float4 TEXCOORD0 第一张贴图的uv坐标
float4 TEXCOORD1 第二张贴图的uv坐标
float4 TANGENT 切向量，主要用来修正法线贴图Normal Maps
fixed4 COLOR 第一个定点色
fixed4 COLOR1 第二个定点色
Any Any 其他自定义的字段

坐标变换

顶点着色器有一项重要的工作就是进行坐标变换。顶点着色器的输入中的坐标是模型坐标系(ObjectSpace)下的坐标，而最终绘制到屏幕上的是投影坐标。 
在我们Shader里面只需要一句话就可以完成坐标的转换，这也是最简单的顶点着色器：

<code class="language-c hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">v2f vert(appdata v) {
          v2f o;
          o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
          <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> o;
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

用UNITY_MATRIX_MVP矩阵乘以顶点在模型坐标系下的坐标就得到投影坐标。 
UNITY_MATRIX_MVP是Unity内建的模型->视->投影矩阵， Unity内建矩阵如下：

  • UNITY_MATRIX_MVP：当前模型->视图->投影矩阵。（注：模型矩阵为 本地->世界）
  • UNITY_MATRIX_MV：当前模型->视图矩阵
  • UNITY_MATRIX_V：当前视图矩阵
  • UNITY_MATRIX_P：当前投影矩阵
  • UNITY_MATRIX_VP：当前视图->投影矩阵
  • UNITY_MATRIX_T_MV：转置模型->视图矩阵
  • UNITY_MATRIX_IT_MV：逆转置模型->视矩阵, 用于将法线从ObjectSpace旋转到WorldSpace。为什么法线变化不能和位置变换一样用UNITY_MATRIX_MV呢？一是因为法线是3维的向量而- UNITY_MATRIX_MV是一个4x4矩阵，二是因为法线是向量，我们只希望对它旋转，但是在进行空间变换的时候，如果发生非等比缩放，方向会发生偏移。
  • UNITY_MATRIX_TEXTURE0 to UNITY_MATRIX_TEXTURE3：纹理变换矩阵

下面简单介绍一下里面提到的几个坐标系： 
模型坐标系：也叫物体坐标系，3D建模的时候每个模型都是在自己的坐标系下建立的，如果一个人物模型脚底是(0,0,0) 点的话它的身上其它点的坐标都是相对脚底这个原点的。 
世界坐标系：我们场景是一个世界，有自己的原点，模型放置到场景中后模型上的每个顶点就有了一个新的世界坐标。这个坐标可以通过模型矩阵×模型上顶点的模型坐标得到。 
视图坐标系：又叫观察坐标系，是以观察者（相机）为原点的坐标系。场景中的物体只有被相机观察到才会绘制到屏幕上，相机可以设置视口大小和裁剪平面来控制可视范围，这些都是相对相机来说的，所以需要把世界坐标转换到视图坐标系来方便处理。 
投影坐标系：场景是3D的，但是最终绘制到屏幕上是2D，投影坐标系完成这个降维的工作，投影变换后3D的坐标就变成2D的坐标了。投影有平行投影和透视投影两种，可以在Unity的相机上设置。 
屏幕坐标系 : 最终绘制到屏幕上的坐标。屏幕的左下角为原点。

除了内建矩阵，Unity还内建了一些辅助函数也可以在顶点着色器里面使用：

  • float3 WorldSpaceViewDir (float4 v)：根据给定的局部空间顶点位置到相机返回世界空间的方向（非规范化的）
  • float3 ObjSpaceViewDir (float4 v)：根据给定的局部空间顶点位置到相机返回局部空间的方向（非规范化的）
  • float2 ParallaxOffset (half h, half height, half3 viewDir)：为视差法线贴图计算UV偏移
  • fixed Luminance (fixed3 c)：将颜色转换为亮度（灰度）
  • fixed3 DecodeLightmap (fixed4 color)：从Unity光照贴图解码颜色（基于平台为RGBM 或dLDR）
  • float4 EncodeFloatRGBA (float v)：为储存低精度的渲染目标，编码[0..1)范围的浮点数到RGBA颜色。
  • float DecodeFloatRGBA (float4 enc)：解码RGBA颜色到float。
  • float2 EncodeViewNormalStereo (float3 n)：编码视图空间法线到在0到1范围的两个数。
  • float3 DecodeViewNormalStereo (float4 enc4)：从enc4.xy解码视图空间法线
Fragment Shader

// TODO

参考： 
猫都能学会的Unity3D Shader入门指南

原文地址：javascript:void(0)