Unity高级开发-Shader开发(1)-渲染管线

2020-06-02 16:43:39 浏览数 (1)

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

Shader分类

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

1-什么是渲染管线?

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

2-渲染管线的分类

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

3-什么是渲染管线图

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

顺着箭头方向,数据一步一步被处理,最后写到显示缓冲区(Framebufffer)

OpenGL官网管线图

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
代码语言:javascript复制
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"
}

0 人点赞