webgl渲染管线

一   渲染管线

也称为渲染流水线，实质上是一系列的绘制过程，其管线如图所示：

1、基本处理

设定3D空间中：

        坐标：  顶点、颜色、纹理

     绘制 方式： 点、线、三角形

2、顶点缓冲对象 

顶点数据的存储对象 ，节省GPU的I/O带宽，提高渲染效率

3、顶点着色器

        一个可编程的处理单元，功能为执行顶点的变换，光照、材质的应用与计算等与顶点相关的操作。

4、图元装配

        图元组装： 顶点数据根据设置的绘制方式被结合成图元

                   点:  一个顶点，  线段：  二个项点，   三角形： 三个顶点

        图元处理：

                裁剪： 消除位于半空间之外的部分几何图元，半空间是由一个裁剪平面定义。

5、光栅化

                虚拟3D世界中的物体投影到视平面

                投影结果离散化，分解为离散的小单元，称为片元

                (片元对应于帧缓冲中的像素)

6、片元着色器

处理片元值 及相关数据的可编程单元，可以执行纹理采样，颜色汇总，计算雾颜色等操作。

7、裁剪测试

检查每个片元在帧缓冲中的对应位置 ，若在裁剪窗口将片元送入下一个阶段，否则丢弃此片元。

8、深度测试和模板测试

深度测试：将输入片元深度值与帧缓冲中存储的对应的片元深度值 进行比较值 ，若输入片元的深度小 ，送入下一个阶段，否则丢弃输入片元。

模板测试：将绘制 区域限定一定范围内，它一般用在湖面倒影等场合。

9、颜色缓冲混合

开启Alpha混合 ，根据混合因子会将上一阶段送来的片元与帧缓冲中对应位置的片元进行alpha混合 ，否则覆盖帧缓冲中对应位置的片元。

10、抖动

使用少量颜色模拟出更宽的颜色显示范围。

11、帧缓冲

  颜色缓冲 ：存储每个片元的颜色值 

深度缓冲 ： 存储每个片元的深度值 

模板缓冲： 存储每个片元的模板值