WebGL - 几何学：初学者指南

你好，未来的 WebGL 大师们！我很高兴能成为你们在这激动人心的 WebGL 几何世界旅程中的向导。作为一个教授计算机图形学超过十年的老师，我可以告诉你，理解 WebGL 中的几何学就像学习用代码作画。这很有挑战性，但回报巨大！所以，让我们卷起袖子，开始吧！

WebGL - Geometry

定义所需的几何体

在我们开始创建令人惊叹的 3D 图形之前，我们需要了解 WebGL 中的几何学意味着什么。本质上，几何学是我们屏幕上看到的一切的基础。它由点、线和形状组成，构成了我们 3D 对象的结构。

想象你正在用乐高积木建造一座房子。每一块积木代表 3D 空间中的一个点，当你连接这些点时，你创建边和面。这正是我们在 WebGL 中所做的，但用的是代码而不是塑料积木！

让我们从一个简单的例子开始 - 创建一个三角形：

const triangleVertices = [
0.0,  1.0,  0.0,
-1.0, -1.0,  0.0,
1.0, -1.0,  0.0
];

在这里，我们定义了 3D 空间中的三个点。每个点由三个数字（x, y, z）表示。这个数字数组就是我们将用来告诉 WebGL 在哪里绘制我们的三角形的。

现在我们有了定义好的几何体，我们需要一种方式将这些数据发送到 GPU。这时缓冲区对象就派上用场了。你可以将缓冲区对象想象为特殊的容器，它们保存我们的几何数据，使其易于 GPU 访问。

创建缓冲区是我们为 GPU 准备几何体的第一步。下面是如何操作的：

const buffer = gl.createBuffer();

这行代码创建了一个空的缓冲区对象。就像准备一个空盒子，以便填满我们的乐高积木。

创建缓冲区后，我们需要告诉 WebGL 我们想使用这个缓冲区。我们通过绑定缓冲区来实现：

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

这就像拿起我们的乐高盒子并说，“嘿，WebGL，我现在要在盒子里放一些积木！”

现在来到激动人心的部分 - 用我们的几何数据填充缓冲区：

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

让我们分解一下：

你可能好奇为什么我们在前一步使用了 Float32Array。WebGL 非常挑剔它的数据类型。为了效率，它更喜欢使用类型化数组。类型化数组确保每块数据的大小和类型是一致的。

下面是 WebGL 中常用的类型化数组表格：

在我们的例子中，我们使用 Float32Array 是因为我们的顶点位置是浮点数。

在我们完成缓冲区的操作后，解绑是一个好习惯：

gl.bindBuffer(gl.ARRAY_BUFFER, null);

这就像把乐高盒子放回架子上。它可以防止我们对缓冲区进行意外的更改，并保持我们的 WebGL 状态整洁。

就这样，伙计们！我们成功地定义了我们的几何体，创建了一个缓冲区，填充了数据，并了解了类型化数组。这是在 WebGL 中创建任何 3D 对象的基础。

记住，学习 WebGL 是一个旅程。如果一开始有些概念看起来有点棘手，不要担心。通过实践，你很快就能创建出惊人的 3D 图形！在我教学的这些年里，我见证了无数学生从困惑的初学者成长为 WebGL 巫师。你已经走上了加入他们行列的道路！

在下一课中，我们将探索如何使用这些缓冲区实际在屏幕上绘制我们的几何体。准备好见证你的第一个 WebGL 三角形诞生！在此之前，快乐编码，别忘了休息一下，活动一下编码的手指！

Credits: Image by storyset