WebGL开发实战详解：渲染管线深度解析
WebGL开发实战详解：渲染管线深度解析
WebGL（Web Graphics Library）是一种在网页上绘制3D图形的技术，它允许开发者通过JavaScript访问GPU的图形硬件，从而实现高性能的3D图形渲染。本文将详细介绍WebGL 2.0中的渲染管线，帮助开发者深入理解3D图形渲染的原理和流程。
着色器和渲染管线
渲染管线也称渲染流水线，由芯片GPU内部处理图形信号的并行处理单元组成。WebGL 2.0 中的渲染管线实质上指一系列绘制过程。
大概流程是通过程序输入待渲染 3D物体的相关描述信息数据，经过渲染管线处理后，输出的是一帧预期的图像。
WebGL 2.0 渲染管线
基本处理
设定3D物体的顶点坐标、顶点颜色、顶点纹理坐标等属性，指定绘制方式如点绘制、线段绘制或者三角形绘制。
顶点缓冲对象
这一部分是可选的，但是基于读取速度的考量一般将顶点数据送入顶点缓冲对象，省区了绘图时数据的输入和输出，直接从顶点缓冲对象上获取顶点数据可以节省GPU的I/O带宽提高渲染效率。
顶点着色器
是一个可编程的处理单元。其工作过程首先将顶点的原始几何信息及其他属性传送到顶点着色器中，顶点着色器处理后产生相应的纹理坐标、颜色、点位置等后续流程需要的各项顶点属性信息，然后将其传递给图元装配阶段。
顶点着色器工作原理
图元装配
- 图元组装：顶点数据根据设置的绘制方式被结合成完整的图元。如点绘制方式，则每个顶点就是一个图元；线段绘制方式，则两个顶点构成一个图元；三角形方式，则需要3个顶点构成一个图元
- 图元处理：消除位于半空间之外的部分几何图元。裁剪是随着观察位置和角度不同，在可视区域内看到物体上部分或全部的图元。
光栅化
- 将3D 物体投影到视平面上
- 将连续的投影离散化为小单元，这些小单元一般称为片元
- 将每一个图元信息插值计算，由远到近光栅化为一组组片元最终形成候选像素
片元着色器
片元着色器是处理片元值及相关数据的可编程单元，可以执行纹理采样，颜色汇总，计算雾颜色等操作，每个片元执行一次。主要功能是通过重复执行每个片元将3D物体的图元光栅化后的片元产生的颜色等属性计算出来，并送入后续阶段，如裁剪测试、深度测试、模板测试等
裁剪测试
检查每个片元在帧缓冲区中的对应位置，若对应位置在裁剪窗口中，则送入下一个阶段，否则丢弃此片元
深度测试和模板测试
- 深度测试：将输入片元的深度值与帧缓冲中存储的对应片元位置的深度值进行比较，若输入的深度值小，则将输入片元送入下一个阶段，准备覆盖帧缓冲中的原片元或与帧缓冲中的片元进行混合，否则丢弃
- 模板测试：将绘制区域限定在一定的范围内，一般用于倒影和镜像场合
颜色缓冲混合
若程序开启了 Alpha 混合，则根据混合因子将上一阶段送来的片元与帧缓冲中对应位置的片元进行 Alpha 混合，否则进行覆盖
帧缓冲
物体的绘制并不是直接在屏幕上进行的，而是在帧缓冲中进行绘制，每绘制完一帧将结果交换到屏幕上，并清除缓冲中的数据。包括颜色缓冲、深度缓冲、模板缓冲。