学习链接

www.tutorialspoint.com/webgl/webgl…

译文

为了渲染3D图形，我们必须遵循一连串的步骤。这些步骤被称为图形管线或渲染管线。下图描述了WebGL的图形管道。

在下面的章节中，我们将逐一讨论管道中每个步骤的作用。

JavaScript

在开发WebGL应用程序时，我们编写Shader语言代码来与GPU通信。
初始化WebGL - JavaScript用于初始化WebGL上下文。
创建数组 - 我们创建JavaScript数组来保存几何体的数据。
缓冲对象 - 我们通过传递数组作为参数来创建缓冲对象（顶点和索引）。
着色器 - 我们使用JavaScript创建、编译和链接着色器。
属性 - 我们可以创建属性，启用它们，并使用JavaScript将它们与缓冲区对象联系起来。
Uniforms - 我们也可以使用JavaScript来关联uniforms。
变换矩阵 - 使用JavaScript，我们可以创建变换矩阵。

最初，我们为所需的几何图形创建数据，并以缓冲器的形式将它们传递给着色器。着色器语言的属性变量指向缓冲器对象，这些对象被作为输入传递给顶点着色器。

Vertex Shader - 顶点着色器

当我们通过调用drawElements()和drawArray()方法开始渲染过程时，顶点着色器（Vertex Shader） 会针对顶点缓冲器对象中提供的每个顶点执行。它计算原始多边形的每个顶点的位置并将其存储在变化的gl_position中。它还计算其他属性，如颜色、纹理坐标和通常与顶点相关的顶点。

Primitive Assembly - 基元组装（图元装配）

在计算了每个顶点的位置和其他细节之后，下一个阶段是原始装配阶段。在这里，三角形被组装起来并传递给光栅器。

Rasterization - 光栅化

在栅格化步骤中，确定基元的最终图像中的像素。它有两个步骤

剔除--首先确定多边形的方向（是正面还是背面）。丢弃所有那些在视图区域内不可见的、具有不适当方向的三角形。这个过程被称为剔除。
剪切 - 如果一个三角形有一部分在视图区域之外，那么视图区域之外的部分将被删除。这个过程被称为剪裁。

Fragment Shader - 片元着色器

片元着色器可以得到

从顶点着色器中获取不同变量的数据。
得到栅格化阶段的片元，然后计算顶点之间每个像素的颜色值。

Fragment Operations - 片元操作

在确定片元中每个像素的颜色之后，进行片元操作。这些片元操作可能包括以下内容

深度
颜色缓冲器混合
抖动

一旦所有的片元被处理完毕，就会形成一个2D图像并显示在屏幕上。帧缓存区是渲染管道的最终目的地。

Frame Buffer - 帧缓存区

帧缓冲区是图形内存的一部分，用于保存场景数据。这个缓冲区包含一些细节，如表面的宽度和高度（单位：像素）、每个像素的颜色以及深度和模板缓存区。

其他内容

WebGL Tutorial

WebGL Application

WebGL Examples

WebGL Useful Resources

总结

写一下流程：

JavaScript - 提供顶点等数据
顶点着色器 - 计算顶点位置，和其他与顶点相关属性
图元装配 - 利用顶点数据生成一个个三角形
光栅化 - 确定最终图形中的像素，有剔除和剪切两个步骤
片元着色器 - 根据栅格化后的片元，填充颜色
片元操作 - 片元着色器进一步处理，如深度等
帧缓存区 - 最终形成图形的地方！

一路有雨也有霜
月落无题江南
如我面对太阳
如你追希望 - 《裹着心的光》

【译】- WebGL - 图形管道