WebGL

WebGL 主要是一个低级光栅化 API，而不是 3D API。要使用 WebGL 绘制图像，您必须传递表示图像的向量。然后，它使用 OpenGL SL 将给定矢量转换为像素格式，并将图像显示在屏幕上。编写 WebGL 应用程序涉及一系列步骤，我们将在本章中介绍。

WebGL 坐标系

与其他 3D 系统一样，WebGL 中将 有 x、y 和 z 轴，其中 z 轴代表深度。 WebGL 中的坐标仅限于 (1, 1, 1) 和 (-1, -1, -1)。这意味着 - 如果您将 WebGL 图形投影的屏幕视为一个立方体，则立方体的一个角将为 (1, 1, 1)，对角将为 (-1, -1, -1) 。 WebGL 将不会显示超出这些边界的任何内容。

下图描述了WebGL坐标系。 z 轴代表深度。 z 的正值表示对象靠近屏幕/观看者，而 z 的负值表示对象靠近屏幕/观看者。同样，x 的正值表示对象位于屏幕的右侧，而负值表示对象位于屏幕的左侧。同样，y的正负值表示该物体是在屏幕的顶部还是底部。

WebGL 图形

获得画布对象的WebGL上下文后，您可以开始使用JavaScript中的WebGL API绘制图形元素。

在开始使用 WebGL 之前，以下是您需要了解的一些基本术语。

顶点

通常，要绘制类似多边形的对象，我们在平面上标记点并将它们连接起来以形成所需的多边形。 顶点 是定义 3D 对象边缘相交的点。它由三个浮点值表示，每个浮点值分别代表x、y、z轴。

示例

在下面的示例中，我们绘制了一个具有以下顶点的三角形 - (0.5, 0.5)、(-0.5, 0.5)、(-0.5, -0.5)。

注意 - 我们必须使用 JavaScript 数组手动存储这些顶点，然后使用顶点缓冲区将它们传递到 WebGL 渲染管道。

指标

在WebGL中，数值用于识别顶点。这些值称为索引。这些索引用于在 WebGL 中绘制网格。

注意 - 就像顶点一样，我们使用 JavaScript 数组来存储索引，然后使用索引缓冲区将它们传递到 WebGL 渲染管道。

数组

与 OpenGL 和 JoGL 不同，WebGL 中没有预定义的方法来直接渲染顶点。我们必须使用 JavaScript 数组手动存储它们。

示例

var 顶点 = [0.5, 0.5, 0.1,-0.5, 0.5,-0.5]

缓冲器

缓冲区是WebGL存储数据的存储区域。有多种缓冲区，即绘制缓冲区、帧缓冲区、顶点缓冲区和索引缓冲区。 顶点缓冲区和索引缓冲区用于描述和操作模型的几何形状。

顶点缓冲区对象存储有关顶点的数据，而索引缓冲区对象存储有关索引的数据。将顶点存储到数组后，我们使用这些 Buffer 对象将它们传递到 WegGL 图形管道。

帧缓冲区是图形内存中保存场景数据的部分。该缓冲区包含表面的宽度和高度（以像素为单位）、每像素颜色、深度和模板缓冲区等详细信息。

网布

为了绘制 2D 或 3D 对象，WebGL API 提供了两种方法，即 drawArrays() 和 drawElements()。这两种方法都接受一个名为 mode 的参数，您可以使用它来选择要绘制的对象。该字段提供的选项仅限于点、线和三角形。

要使用这两种方法绘制 3D 对象，我们必须使用点、线或三角形构造一个或多个基本多边形。然后，使用这些原始多边形，我们可以形成网格。

使用基本多边形绘制的 3D 对象称为“网格”。 WebGL 提供了多种绘制 3D 图形对象的方法，但用户通常更喜欢绘制网格。

示例

在下面的示例中，您可以观察到我们使用两个三角形 → {1, 2, 3} 和 {4, 1, 3} 绘制了一个正方形。

着色器程序

我们通常使用三角形来构建网格。由于WebGL使用GPU来加速计算，因此这些三角形的信息应该从CPU传输到GPU，这占用了大量的通信开销。

WebGL 提供了一种减少通信开销的解决方案。由于它使用在GPU上运行的ES SL（嵌入式系统着色器语言），因此我们使用着色器程序（我们使用OpenGL ES着色语言编写的程序/GLSL）将所有必要的程序写入在客户端系统上绘制图形元素。

这些着色器是针对GPU的程序，编写着色器程序的语言是GLSL。在这些着色器中，我们准确定义顶点、变换、材质、灯光和相机如何相互作用以创建特定图像。

简而言之，这是一个实现获取网格像素的算法的代码片段。我们将在后面的章节中详细讨论着色器。有两种类型的着色器 - 顶点着色器和片段着色器。

顶点着色器

文本着色器是在每个顶点上调用的过程代码。它用于将几何形状（例如三角形）从一个位置变换（移动）到另一个位置。它处理每个顶点数据（每个顶点的数据），例如顶点坐标、法线、颜色和纹理坐标。

在顶点着色器的ES GL代码中，程序员必须定义处理数据的属性。这些属性指向用 JavaScript 编写的顶点缓冲区对象。

您可以使用顶点着色器执行以下任务-

• 顶点变换
• 常态化改造与归一化
• 纹理坐标生成
• 纹理坐标变换
• 灯光
• 色彩应用

片段着色器（像素着色器）

网格由多个三角形组成，每个三角形的表面称为碎片。片段着色器是在每个片段的所有像素上运行的代码。用于计算并用单个像素 上的颜色填充 。