WebGL 是以 OpenGL ES 2.0 为基础的 3D 编程应用接口。
渲染管线是指将数据从3D场景转换成2D图像，最终在屏幕上显示出来的总过程。它分为几个阶段：应用阶段、几何阶段和光栅阶段，关于这3个阶段的详细介绍可以点这里查看。
下面我们来仔细看看 WebGL 中的每个步骤：
顶点着色器一般用来对模型的顶点进行矩阵变换，一般就是将模型的所有顶点乘于一个变换矩阵，使该模型位于相对于WebGL坐标系中的某个位置。
顶点着色器是可编程的，使用的语言是 GLSL 来进行编写，下面我们主要说一下几种常用的属性类型：
这个阶段，GPU会将我们传入的顶点装配成三角形、线段或者点；装配好之后，会自动截去不在可视区域内的信息；
这个阶段，GPU会将装配好的三角形转换成对应的像素，并将这些像素传入下一个阶段；
得到光栅化的片段像素位置数据之后，就可以通过片段着色器为这些像素进行上色了，这是第二个可以编程的地方；
我们可以对图片进行采样之后，再这里进行上色；
本步骤包含了多个子操作，每个操作都会影响当前片段最终的显示效果，下面我们看下几个常见的子操作：
会有一个裁剪的范围，如果像素位于该范围之外，会被剔除，不会到达绘制缓存；
这一步会修改像素的alpha值和覆盖值，主要用来实现抗锯齿的效果；
这一步会进行深度测试，抛弃掉位置靠后的像素值，因为这个位置的像素本身就是被更前面的像素覆盖的；
这一步会将新的颜色值和已经存在的颜色值进行组合，得出融合后的颜色值，比如，老的颜色是红色，新的是50%透明的黑色，那么融合之后的颜色看起来就应该是暗红色；
这一步是为了解决可使用的颜色过少会出现色带的问题，通过较少的颜色来模拟较多颜色的技术，可以查看这篇文章来理解；
数据经过整个渲染管线处理之后，最终会写入到帧缓存中，帧缓存存储了最终会显示到屏幕上的颜色数据。
帧缓存包含了 3 个具体的缓存：
存储每个像素点的具体颜色值的缓存，常见的具体格式可以分为：
存储每个像素点的深度，用来决定是丢弃当前像素颜色还是保留，假设，新渲染的颜色在旧颜色的前面，那么就覆盖旧颜色，如果新颜色在旧颜色的后面（被遮挡了）则保留旧颜色。
用来控制颜色缓存某个位置的写入操作，常用来处理阴影。
原文：https://www.cnblogs.com/hammerc/p/11190470.html