WebGL 教程：构建三维场景 - 探索视图矩阵

大家好，欢迎来到 WebGL 教程的下一章，这次我们将踏上三维之旅，探索视图矩阵的奥秘。我们已经了解了如何绘制简单的二维图形，但现在是时候将我们的视野提升到一个新的维度。视图矩阵将在我们探索三维世界的过程中发挥关键作用，它将帮助我们从不同的角度观察场景，并在三维空间中移动物体。

首先，我们来了解一下什么是视图矩阵。视图矩阵是一个 4x4 的矩阵，它将世界坐标系中的点转换为相机坐标系中的点。相机坐标系是以相机为中心建立的坐标系，它决定了我们如何看待场景。视图矩阵通过平移、旋转和缩放等变换将世界坐标系中的点转换为相机坐标系中的点。

为了更好地理解视图矩阵的作用，让我们想象一下一个简单的场景：一个立方体位于三维空间中，而我们站在立方体的正前方。此时，我们只能看到立方体的正面，而立方体的其他面都隐藏在我们的视野之外。这是因为我们的相机位于立方体的正前方，我们只能看到立方体的正面。

现在，让我们改变一下相机的角度，将相机绕着立方体旋转。随着相机的旋转，我们会看到立方体的不同面。这是因为视图矩阵随着相机的旋转而变化，它将世界坐标系中的点转换为相机坐标系中的点，从而改变了我们对场景的观察角度。

视图矩阵不仅可以控制相机的角度，还可以控制相机的距离和缩放比例。我们可以通过平移视图矩阵来改变相机的距离，从而拉近或拉远场景。我们也可以通过缩放视图矩阵来改变相机的缩放比例，从而放大或缩小场景。

理解了视图矩阵的基本原理后，我们就可以在 WebGL 中使用它来创建三维场景。首先，我们需要创建一个视图矩阵。我们可以使用 glMatrix 库中的 lookAt() 函数来创建视图矩阵。lookAt() 函数需要三个参数：相机的眼睛位置、相机的目标位置和相机的向上方向。

const eye = [0, 0, 10];
const target = [0, 0, 0];
const up = [0, 1, 0];
const viewMatrix = glMatrix.mat4.lookAt(eye, target, up);

创建了视图矩阵后，我们需要将它应用到 WebGL 着色器中。我们可以使用 glMatrix 库中的 uniformMatrix4fv() 函数将视图矩阵传递给着色器。

const viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix");
gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix);

将视图矩阵应用到着色器后，我们就可以在三维空间中移动物体了。我们可以使用 glMatrix 库中的 translate() 函数来平移物体，使用 rotate() 函数来旋转物体，使用 scale() 函数来缩放物体。

const modelMatrix = glMatrix.mat4.create();
glMatrix.mat4.translate(modelMatrix, modelMatrix, [0, 0, -5]);
glMatrix.mat4.rotateX(modelMatrix, modelMatrix, angle);
glMatrix.mat4.rotateY(modelMatrix, modelMatrix, angle);

通过平移、旋转和缩放物体，我们可以创建更加动态和交互性的 WebGL 应用。我们可以让物体在三维空间中移动、旋转和缩放，从而为用户提供更加沉浸式的体验。

希望这篇教程对您有所帮助。如果您有任何问题或建议，请随时与我联系。