要渲染3D图形，我们必须遵循一系列步骤。这些步骤被称为图形管线或渲染管线。下图描述WebGL图形流水线。
在以下部分中，我们将一个接一个讨论管道中的每个步骤的作用。
JavaScript
在开发WebGL应用程序时，我们需要写Shader语言代码与GPU进行沟通。使用JavaScript编写的程序，其中包括以下操作的控制代码-
-
初始化WebGL − JavaScript是用于初始化WebGL的上下文。
-
创建数组 − 我们创建JavaScript数组来保存几何数据。
-
缓冲区对象 − 通过将数组作为参数来创建缓冲区对象(顶点和索引)。
-
着色器 − 我们创建，编译和使用JavaScript链接着色器。
-
属性− 我们可以创建属性，启用它们并使用JavaScript缓冲区对象相关联。
-
制服− 我们还可以使用 JavaScript 制服(uniforms)关联。
-
变换矩阵 − 使用JavaScript，我们可以创建变换矩阵。
最初我们创建几何形状所需的数据和它们传递到着色器中缓冲器的形式。着色器语言指向缓冲区对象，这作为输入传递给顶点着色器的属性变量。
顶点着色器
当我们通过调用方法drawElements()和drawArray()启动渲染过程中，顶点着色器提供的每个顶点执行在顶点缓冲区对象。它计算原始多边形各顶点的位置并且存储在不同的 gl_position。 它还计算的其他属性，例如颜色，纹理坐标，以及顶点，这通常与顶点相关联。
原始汇编
计算位置及每个顶点的其他细节之后，下一阶段是原始装配阶段。这里三角形被组装并传送给光栅化程序。
光栅化
在光栅化步骤，在原始的最终图像的像素被确定。它有两个步骤 -
-
剔除− 最初的取向(是其正面或背面朝向？)多边形被确定。所有这些三角形使用不当取向不可见在观看区域被丢弃。这个过程被称为剔除。
-
剪裁 − 如果一个三角形部分在观看区域之外，则视图区域之外的部分被去除。这个过程被称为剪裁。
片段着色器
片段着色器获取
-
从顶点着色器不同变量的数据，
-
从光栅化阶段元语，然后
-
计算颜色值顶点之间每一个象素。
片段着色器存储在每个片段的每一个像素的颜色值。这些颜色值可以在片段操作进行访问，我们将在下一个节学习和讨论。
一些片段操作确定在所述原始的每个像素的颜色后进行。这些片段操作可以包括以下 -
-
深度
-
颜色缓冲区混合
-
抖色
一旦所有的片段进行处理，2D图像形成并显示在屏幕上。帧缓冲器是渲染管线的最终目的地。
帧缓冲
帧缓冲区的图形内存持有的场景数据的一部分。这个缓冲区包含细节如宽度和表面的高度(以像素为单位)，每个像素的颜色，深度和模版缓冲器。
