U3d Shader语法教程2：顶点着色器(vertex)、片元着色器(fragment )、结构体(Struct)

说到着色器，不得不先说说流水线

GPU流水线和着色器

GPU流水线.jpg

  当GPU从CPU得到渲染命令后，就会进行一系列流水线操作，最终把图元渲染到屏幕上。
对于几何阶段和光栅化阶段，开发者无法拥有绝对的控制权，其实现的载体是GPU。GPU通过实现流水线化，大大加快了渲染速度。
  几何阶段和光栅化阶段可以分成若干更小的流水线阶段，这些流水线阶段由GPU实现，每个阶段GPU提供了不同的可配置性或可编程性。
  从图中可以看出，GPU的渲染流水线接收顶点数据作为输入。这些顶点数据是由应用阶段加载到显存中，再由DrawCall指定的。这些数据随后被传递给顶点着色器。

1.顶点着色器（Vertex Shader）：完全可编程
  通常用于实现顶点的空间变换、顶点着色等功能。
  顶点着色器是流水线的第一个阶段，它的输入来自于CPU。顶点着色器的处理单位是顶点，输入进来的每个顶点都会调用一次顶点着色器。顶点着色器本身并不会创建或者销毁顶点，而且无法得到顶点与顶点之间的关系。
  例如：我们无法得知两个顶点是否属于一个三角网格。正因为这样的相互独立性，GPU可以利用本身的特性并行化处理每一个顶点。
  顶点着色器需要完成的工作主要有：坐标变换和顶点光照。当然还可以输出后续阶段所需的数据。

2.裁剪（Clipping）：可配置
  这一阶段的目的是将那些不再摄像机视野内的顶点裁减掉，并剔除某些三角图元的面片。
  目的：处理不在摄像机视野范围内的物体。
  一个图元和摄像机视野有三种关系：完全在视野内、部分在视野内、完全在视野外。完全在视野内的图元即系传递给下一个流水线阶段，完全在视野外的图元就不会向下传递，因为不需要被渲染。而那些部分在视野内的图元就需要进行一个处理，那就是裁剪。
和顶点着色器不同，这一步是不可编程的。无法通过编程来控制裁剪的过程，是硬件上的固定操作
但是可以自定义一个剪裁操作来对这一步进行配置

3.屏幕映射（Screen Mapping）：不可配置和编程的
  这一步输入的坐标仍然是三维坐标系下的坐标。
  负责把每个图元的坐标转换到屏幕坐标系中。

4.三角形设置（Triangle Setup）和三角形变量（Triangle Traversal）阶段都是固定函数（Fixed-Function）的阶段
  这一阶段开始进入光栅化阶段。从上一个阶段输出的信息是屏幕坐标系下的顶点位置以及和它们相关的额外信息，如：深度值（Z）、法线方向、视角方向等。
  光栅化阶段有两个重要的目标：计算每个图元的覆盖了哪些像素，以及为这些像素计算颜色。
  三角形设置：计算光栅化一个三角网格所需的信息。具体来讲，上一个阶段输出的都是三角网格的顶点，即我们得到的是三角网格每条边的两个顶点。但是如果要得到整个三角形网格对像素的覆盖情况，我们就必须计算每条边上的像素坐标。为了能够计算边界像素的坐标信息，我们就需要得到三角形边界的表示方式。这样一个计算三角形网格表示数据的过程叫做三角形设置。
  三角形遍历：检查每个像素是否被一个三角网格所覆盖。如果覆盖的话，就会生成一个片段（fragment）。这样一个找到哪些像素被三角网格覆盖的过程就是三角形遍历，这个阶段也被称为扫描变换（Scan Conversion）。
  片段并不是真正意义上的像素，而是包含了很多状态的集合，这些状态用于计算每个像素的最终颜色。

5.片段着色器（Fragment Shader）：完全可编程
  用于实现逐片元（Per-Fragment）的着色操作。
片段着色器的输入是上一个阶段对顶点信息插值得到的结果，更具体来说，是根据那些从顶点着色器中输出的数据插值得到的。输出的是一个或者多个颜色值。
  这一个阶段可以完成很多重要的渲染技术，其中最重要的技术之一就是纹理采样。为了在片段着色器中进行纹理采样，通常会在顶点着色器阶段输出每个顶点对应的纹理坐标，然后经过光栅化阶段对三角网格的3个顶点对应的纹理进行插值后，就可以得到其覆盖的片段的纹理坐标了。

6.逐片元操作（Per-Fragment Operations）：不可编程，但具有很高的可配置性
  负责执行很多重要的操作，例如：修改颜色、深度缓冲、进行混合等。
  这一阶段OpenGL-逐片元操作 DirectX-输出合并阶段
  这一阶段有几个重要的任务：
  （1） 决定每个片元的可见性：这涉及了很多测试工作，例如：深度测试、模板测试
  （2） 如果一个片元通过了所有的测试，就需要把这个片元的颜色值和已经储存在颜色缓冲区中的颜色进行合并，混合

顶点/片元着色器语法

Pass{
      //标签和状态  这里不明白的请看上一章
    CGPROGRAM
    //编译指令，指定着色器处理函数
    #pragma  vertex vert          
    #pragma fragment frag     
  
    float4 vert(float4 v: POSITION) :SV_POSITION{
        return mul(UNITY_MAXTRIX_MVP,v);
    }

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

   ENDCG
   //其他设置
}

vertex 输入类型(从应用阶段模型数据传递)	描述
POSITION	模型空间中的顶点位置，一般是float4类型
NORMAL	顶点的法线，通常是float3类型
TANGENT	顶点切线，通常是float4类型
TEXCOORDn 比如TEXCOORD1、 TEXCOORD2	该顶点的纹理坐标，TEXCOORD0表示第一组纹理以此类推，通常是float2或者float4
COLOR	顶点的颜色，通常是fixed4或者float4类型

vertex输出类型(传递给片元着色器)	描述
SV_POSITION	裁减空间中的顶点坐标，至少包含一个
COLOR0	用于输出第一组顶点颜色，但不是必须的
COLOR1	用于输出第二组颜色，但不是必须的
TEXCOORD0~TEXCOORD7	输出纹理坐标，但不是必须的

fragment 输出类型	描述
SV_Target	输出值将会存储到渲染目标(render target)中

结构体

struct StructName{
    Type  Name : Semantic;
    Type  Name : Semantic;
     ...
};

• Semantic: 是上表中 vertex的输入和输出类型；
  • 指明变量取模型中的那个数据（应用阶段自动传递）
  • 具体计算后输出给片元处理的数据类型

使用结构体，让片元着色器接收顶点着色器输出数据

Shader "Unlit/Shader_1"
{
    Properties
    {
        _Color("Color Tint" ,color) = (1.0, 1.0, 1.0, 1.0)
    }
    SubShader
    {
        Pass
        {
            CGPROGRAM
            #pragma vertex vert 
            #pragma fragment frag


            fixed4 _Color;

            struct a2v
            {
                float4 vertex: POSITION;  // [POSITION] - 指明模型顶点坐标数据
                float3 normal: NORMAL; //[NORMAL] - 指明顶点发现数据
                float4 texcoord: TEXCOORD0; //[TEXCOORD0] - 指明顶点纹理坐标
            };

            struct v2f {
                float4 pos: SV_POSITION; //[SV_POSITION] - 指明裁减空间中的位置 必须存在
                fixed3 color : COLOR0; //[COLOR0] - 一般用于存储颜色信息
            };



            v2f vert(a2v v)
            {
                v2f o; //声明输出结构
                o.pos = UnityObjectToClipPos(v.vertex);//计算裁减空间中的位置

                //v.normal 包含了顶点的发现方向，其分量范围在[-1.0, 1.0]
                
                o.color = v.normal * 0.5 + fixed3(0.5, 0.5, 0.5);//根据法线计算颜色， 存储到o.color 中 传递给片元着色器
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed3 c = i.color;
                //使用_Color来计算最后的颜色
                c *= _Color.rgb;
                return fixed4(c, 1.0);
            }

        ENDCG
        }
    }
}

白色

红色

• "Unlit/Shader_1" : 根据输入颜色和法线计算出模型的颜色

其中顶点着色器根据发现计算颜色
o.color = v.normal * 0.5 + fixed3(0.5, 0.5, 0.5);

最后片元着色器根据材质输入的颜色，计算出最终的颜色
c *= _Color.rgb;

至于变量_Color.rgb的语法
请看我的 Unity Shader Cg/HLSL 数值类型篇幅