WebGL 渲染过程

admin

前面两个步骤都很好理解，但是第三步写入缓存区是什么意思呢？由于顶点数据往往成千上万，在获取到顶点坐标后，我们通常会将它存储在缓存区内，方便GPU 更快的读取。

图元装配

我们已经知道，图元装配就是由顶点生成一个个图元（即点/线/三角形）。那这个过程是自动完成的吗？答案是并非完全如此。WebGL 需要我们先处理顶点，那怎么处理呢？我们先看下图:

第一步就是将上面缓存中的顶点坐标传入了顶点着色器，顶点着色器根据传入的gl.POINTS/gl.LINES/gl.TRIANGLES参数，进行图元装配(通俗一点讲，就是要画点，还是线，还是三角形)

下面是一段顶点着色器代码:

这里具体解释一下：attribute 修饰符，是由浏览器（javascript）传输给顶点着色器的变量值修饰符；vec4 就是包含4个元素的浮点型向量(坐标)；position 即我们定义的顶点坐标，传入到着色器的；gl_Position 是一个内建的传出变量。

这段代码其实就是GPU 通过传入的数据找顶点的过程。

光栅化

和图元装配类似，光栅化也是可控的。

在图元生成完毕之后，我们需要给模型“上色”，模型看起来是什么质地（颜色、漫反射、贴图等）、灯光等，而完成这部分工作的，则是运行在 GPU 的“片元着色器”来完成。如下是一段简单的片元着色器代码：

precision 是指向一个整数的指针，返回的该整数是对应格式的精度的位数，用 log2 取对数的值，暂不做深究。gl_FragColor 是一个内建的传出变量，即输出的颜色值，这段代码就是紫粉色。

片元着色器处理流程

片元着色器具体是如何控制颜色生成的呢？

如上图，顶点着色器是有多少顶点，运行了多少次，而片元着色器则是，有多少片元（像素），运行多少次。

整体详细绘制流程

至此，实质上，WebGL经历了如下处理流程(这里我们涉及到的前面没讲到的名词稍微多一点，但是大概涵盖了所有涉及到的内容)：

l 准备数据阶段在这个阶段，我们需要提供顶点坐标、索引（三角形绘制顺序）、uv（决定贴图坐标）、法线（决定光照效果），以及各种矩阵（比如投影矩阵）。

如何传入？

l 顶点数据存储在缓存区（因为数量巨大），以修饰符attribute传递给顶点着色器；

l 矩阵则以修饰符uniform传递给顶点着色器。

生成顶点着色器根据我们需要，由Javascript定义一段顶点着色器程序的字符串，生成并且编译成一段着色器程序传递给 GPU。传入的顶点着色器程序，是一个字符串，这是 WebGL API 所要求的，会进行编译成着色器语言。我们来大致看一下看一下。

图元装配GPU根据顶点数量，挨个执行顶点着色器程序，生成顶点最终的坐标，完成坐标转换。

生成片元着色器这一步则是解决我们最终绘制出来的效果，它的模型是什么颜色，看起来是什么质地，光照效果，阴影（流程较复杂，需要先渲染到纹理，可以先不关注），都在这个阶段处理。

光栅化通过第4步生成了片元着色器，因此 GPU 内部已经确定好了每个片元的颜色，然后根据深度缓存区判断哪些片元被挡住了，不需要渲染，最终将片元信息存储到颜色缓存区，最终完成整个渲染。