WebGL绘图流程
下图中，可清晰得知 WebGL 需要两种着色器：
- 顶点着色器。用来描述顶点属性，比如坐标位置。其中，顶点我们可以理解为他是三维空间中的一个点
(x, y, z)。 - 片元着色器。逐片元处理颜色。片元是 WebGL 的术语，它其实指的是每一个像素，逐片元的意思就是计算出当前绘制的每个像素的颜色值。
当我们把 顶点着色器 和 片元着色器 组合起来使用（成对使用），那么就形成了一个 着色程序（program）。着色程序将在 GPU 中运行，根据我们设置的一系列状态值，再使用 gl.drawArrays 这类着色方法便可以绘制出各种图形。
如下图所示，当我们画一个三角形的时候：
- 顶点着色器会被调用三次完成三个顶点的处理，接着会有一个 "图形装配" 、 "光栅化" 的过程。其中光栅化的意思就是将装配后的图形转换成每一个像素点。
- 片元着色器根据
gl_FragColor的配置信息对光栅化后的每一个像素进行着色处理。如果说是蓝色，那么片元着色器就会将每一个像素点的涂成蓝色。
简单来说，其实就是运行三次顶点着色器画了三个顶点，三个顶点进行连接后产生了一个三角形的图形区域，再运行 n 次（n个像素点）片元着色器将每个像素点进行上色，最终就画成了一个蓝色三角形。
其实，我们看到的所有图像，它的背后都是一个一个五颜六色的像素点组合起来的，所以我们可以很好的理解着色器为什么是 成对工作 的原理。一方面通过顶点着色器（各种坐标点）就可以把图形的形状描述出来，另一方面再通过片元着色器将整个图形形状内的所有像素点进行上色，最终就可以呈现出一个完整的图像了。
