WebGL 绘图与变换：将图形带入三维空间

在上一章的 WebGL 入门之旅中，我们了解了缓冲器对象，并将多个顶点信息无缝传递给顶点着色器。现在，我们将踏入一个新的篇章，探索 WebGL 的绘制和变换技术。

绘制基本图形

WebGL 提供了多种方法来绘制基本图形。最常见的形状是三角形，我们可以利用三个顶点坐标来定义三角形的三个角。通过将这些坐标存储在缓冲器对象中，我们可以一次性将它们传递给顶点着色器，高效地绘制多个三角形。

此外，WebGL 还支持绘制三角带和三角扇。三角带使用两个顶点坐标和一个索引数组，将相邻三角形连接起来。三角扇则以一个中心顶点为中心，将一系列三角形扇形地排列。

变换图形

一旦我们绘制了基本图形，就可以使用变换技术将它们放置在三维空间中。WebGL 提供了一系列变换矩阵，包括平移、旋转和缩放。通过应用这些矩阵，我们可以控制图形在 x、y 和 z 轴上的位置、方向和大小。

例如，我们可以平移一个三角形来改变它的位置，旋转它来改变它的方向，或缩放它来改变它的尺寸。这些变换可以动态进行，允许我们创建交互式体验，用户可以在其中操纵和变换图形。

实例与代码

为了更好地理解这些概念，让我们编写一个 WebGL 代码示例。假设我们有一个存储在缓冲器对象中的三角形顶点数组：

// 三角形顶点坐标
const vertices = [
  -0.5, -0.5, 0.0,  // 左下角
  0.5, -0.5, 0.0,  // 右下角
  0.0, 0.5, 0.0   // 顶点
];

然后，我们可以使用以下着色器来绘制和变换这个三角形：

// 顶点着色器
void main() {
  // 应用模型变换矩阵
  gl_Position = u_modelMatrix * a_position;
}

// 片段着色器
void main() {
  // 设置片段颜色
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

在 JavaScript 中，我们可以通过 WebGL 上下文获取变换矩阵：

// 获取模型变换矩阵
const modelMatrix = gl.getUniformLocation(program, "u_modelMatrix");

// 设置平移变换
gl.uniformMatrix4fv(modelMatrix, false, [
  1.0, 0.0, 0.0, 0.5,  // 平移 x 轴 0.5 单位
  0.0, 1.0, 0.0, 0.0,  // 平移 y 轴 0 单位
  0.0, 0.0, 1.0, 0.0,  // 平移 z 轴 0 单位
  0.0, 0.0, 0.0, 1.0
]);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);

通过应用平移变换，我们有效地将三角形在 x 轴上平移了 0.5 单位，使其出现在屏幕的中心。

结语

WebGL 的绘制和变换技术为我们提供了将二维形状转换为生动逼真的三维图形的能力。通过操纵顶点坐标和应用变换矩阵，我们可以控制图形在三维空间中的位置、方向和大小。这些技术对于创建交互式 WebGL 体验至关重要，允许用户与三维场景中的对象进行交互并操纵它们。在接下来的章节中，我们将深入探讨更高级的图形技术，继续我们的 WebGL 探索之旅。