WebGL 图形管线

WebGL 图形管线

  要绘制三维图形,我们须遵循一系列步骤。这些步骤称为图形管道或渲染管道。下图描述了WebGL图形管线。

在下面的部分中,我们将逐一讨论每一步在管道中的作用。

JavaScript

  在开发WebGL程序时,我们编写着色语言代码来与GPU通信。JavaScript用于编写程序的控制代码,其中包括以下操作:

  初始化WebGL-用于初始化WebGL上下文。

  创建数组-我们创建JavaScript数组以保存几何体的数据。

  缓冲对象-我们通过将数组作为参数创建缓冲对象(顶点和索引)。

  着色器—我们使用JavaScript创建、编译和链接着色器。

  Attributes变量—我们可以创建并启用Attributes变量,并使用JavaScript与缓冲区对象关联。

  Uniforms变量-我们也可以用JavaScript访问Uniforms变量。

  转换矩阵-使用JavaScript,我们可以创建转换矩阵。

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

顶点着色器

  当我们通过调用drawElements()和drawArray()方法开始呈现过程时,顶点着色对于顶点缓冲区对象中提供的每个顶点执行。它计算原始多边形的每个顶点的位置,并将其存储在不同的gl_position中。它还计算其他属性,如颜色、纹理坐标和通常与顶点关联的顶点。

原始装配

  在计算每个顶点的位置和其他细节之后,下一个阶段是原始装配阶段。在这里,三角形组装并传递给光栅化程序。

光栅化

  在光栅化步骤中,确定原始图像中的像素位置。它有两个步骤--

  剔除-最初的方向(它是正面还是背面?确定了多边形的位置。所有在视图区不可见的三角形的三角形被丢弃。这个过程称为剔除。

  剪裁−如果三角形部分位于视图区域之外,则删除视图区域之外的部分。这个过程称为剪裁。

片段着色器

  片段着色器获取

  来自顶点着色器的数据在不同的变量中,

  从光栅化阶段开始,然后

  计算顶点之间的每个像素的颜色值。

  片段着色器存储每个片段中每个像素的颜色值,这些颜色值可以在片段操作期间访问,我们将在下一步讨论。

  在确定原始图像中每个像素的颜色之后,进行一些片段操作。这些片段操作可能包括以下内容:

  深度

  彩色缓冲混合机

  抖动

  一旦所有片段被处理,将形成二维图像并在屏幕上显示,帧缓冲是渲染管道的最终目标。

帧缓冲

  帧缓冲是保存场景数据的图形存储器的一部分。此缓冲区包含详细信息,如表面的宽度和高度(以像素为单位)、每个像素的颜色、深度和模具缓冲区。