Unity高级开发（一）-Shader开发-渲染管线

学习Shader（着色器）必须先要了解渲染管线。如果不了解，那么就不能说你了解Shader

Shader分类

顶点着色器
像素着色器
这两种着色器都是需要通过渲染管线来进行工作的！

1-什么是渲染管线？

我们通过屏幕看到的画面，都是二维的。即便他是3D物体。所以渲染管线就是生成或者渲染一张二维纹理。

2-渲染管线的分类

管线分为固定管线和可编程管线，现在的设备基本都配备可编程管线的GPU（即显卡）。

3-什么是渲染管线图

3D物体从自身的数据送入开始到最后呈现在屏幕上的所有历程。

顺着箭头方向，数据一步一步被处理，最后写到显示缓冲区（Framebufffer）

OpenGL官网管线图

image.png

image.png

image.png

4-渲染管线的组成

4-1：顶点处理

• 通过一系列的坐标转换，将模型的顶点在摄像机前进行位移，并最终投影到摄像机的投影屏幕上

就是相机投影

在这个阶段进行了坐标转换，逐顶点雾化，材质属性和光照属性处理。

4-2： 面处理

• 面的组装
  一般由引擎来处理。美术资源其实就是顶点的集合，根据索引的顺序进行面的集合，然后就展示出模型的效果了。

面的组合，这些点都是有顺序的

常见的点组合

• 面截取
  这些集合的面，由于摄像机的视口大小进行删减顶点。 这种删减方式大都通过算法进行截取

面的截取

• 面剔除
  面的剔除，例如Unity中的正面剔除，反面剔除， 视锥剔除（去掉视锥外的面的部分，如下图），遮挡剔除（去掉被遮挡的物体）等

image.png

通过硬件提供的深度缓存（Depth Buffer/z-buffer）来判断。

DX内部的剔除

4-3：光栅化

将以向量为基本结构的面转换称一个个点阵形式的像素

光栅化

使用算法，最普通的就是Bresenhamis算法（特点：只使用整数运算，不使用round()函数，适用于线段和圆弧，获得最优化，最接近的结果。）

4-4：像素处理

对每个像素区域进行着色，对像素贴上贴图，形成最终的画面
这里分两部分

• 输入：像素的位置，深度，贴图坐标，法线，切线，颜色等
• 输出：每个像素的颜色，透明度
  将通过显卡完成的像素颜色之，存入显存中。

渲染绘图管线流程图

4-4：顶点处理

顶点渲染的作用是对三维图元的顶点进行坐标变换和光照计算，生成可用于渲染到投影空间的顶点坐标/颜色和纹理坐标。
顶点渲染就是定义了一系列针对 顶点的渲染指令和渲染语句，当Direct3D处理顶点时，会自动使用这些渲染指令和渲染语句对每一个顶点逐一进行处理，完成顶点数据的处理工作。

5-Unity3D中的顶点Shader

Shader "Custom/Leichao886" {
        Properties {
        _Color ("Main Color", Color) = (1, 1, 1, 1)
        _MainTex ("Base (RGB)", 2D) = "white" {}
    }
    SubShader {
        Pass{
        // Dont write to the depth buffer
        ZWrite off

        // Set up alpha blending
        Blend SrcAlpha OneMinusSrcAlpha

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

        sampler2D _MainTex;
        float4 _Color;

        struct v2f{
            float4 pos:SV_POSITION;
            float4 texcoord : TEXCOORD0;
        };

        v2f vert(appdata_base v)
        {
            v2f o;
            // 获得Unity全局变量（模型坐标到世界坐标的矩阵）  * 拿到顶点
            o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
            o.texcoord = v.texcoord;
            return o;
        }

        half4 frag(v2f i):COLOR0
        {
            half4 col = _Color * tex2D(_MainTex, i.texcoord.xy);
            return col;
        }

        ENDCG
        }
    } 
    FallBack "Diffuse"
}