WebGL 正射投影：空间可视化的制胜法宝

### 前言：超越透视投影的界限

在上一篇文章中，我们探索了 WebGL 中的视图矩阵，它赋予我们自由地漫游 3D 世界，从各个角度观察模型。然而，当我们超过某个临界值时，我们开始注意到一个限制：透视投影固有的失真。

透视投影是一种模拟人眼观看方式的投影技术。它创建了具有逼真深度和透视效果的 3D 场景。但是，当对象远离相机时，它们会显得更小，而当它们靠近相机时，它们会显得更大。这种失真可能会导致远处的物体难以辨认，并且可能使创建具有真实世界比例和尺寸的场景变得困难。

### 正射投影：空间可视化的救星

正射投影提供了透视投影的替代方案，消除了失真问题。正射投影以平行线投影场景，无论物体与相机之间的距离如何，所有物体都保持相同的大小。

这使得正射投影非常适合创建具有真实世界比例和尺寸的场景。它广泛用于建筑可视化、工程设计和技术制图等领域。

### 正射投影的工作原理

正射投影通过将场景中的所有点垂直投影到一个称为投影平面的平面上来工作。投影平面与相机平行，并且位于场景的中心。

从相机到投影平面的每个点都沿着一条与投影平面垂直的线投影。投影平面的坐标系通常与相机坐标系对齐。

### 正射投影的优势

正射投影提供了许多优势，使其成为 3D 可视化中的宝贵工具：

- **真实世界的比例和尺寸：** 正射投影消除了透视投影的失真，使您能够创建具有真实世界比例和尺寸的场景。
- **一致的对象大小：** 无论距离如何，所有对象在正射投影中都保持相同的大小。这使得比较对象的大小和距离变得容易。
- **减少视觉失真：** 正射投影消除了透视投影中常见的失真，例如远处的物体显得较小，近处的物体显得较大。
- **适用于技术制图：** 正射投影广泛用于技术制图，因为它的精确性和保持真实尺寸的能力。

### 应用正射投影

正射投影在各种应用中找到了应用，包括：

- **建筑可视化：** 创建具有准确比例和尺寸的建筑物和环境模型。
- **工程设计：** 设计和可视化机械部件和系统，保持准确的比例和尺寸。
- **技术制图：** 创建技术图纸，准确地表示对象和尺寸。
- **地图学：** 创建具有正确比例和尺寸的地图和图表。
- **用户界面设计：** 创建具有清晰一致大小的图形用户界面 (GUI) 元素。

### 在 WebGL 中使用正射投影

在 WebGL 中使用正射投影非常简单。首先，您需要创建透视投影矩阵。透视投影矩阵是一个 4x4 矩阵，定义了相机的位置和方向。

const projectionMatrix = m4.orthographic(left, right, bottom, top, near, far);

`left`, `right`, `bottom`, `top`, `near` 和 `far` 参数定义了投影平面的边界。这些值应根据您希望投影的场景部分进行设置。

接下来，您需要将透视投影矩阵传递给 WebGL 着色器。您可以使用 `uniformMatrix4fv()` 函数将矩阵作为制服传递。

gl.uniformMatrix4fv(projectionMatrixUniform, false, projectionMatrix);

### 结论

WebGL 正射投影是一种强大的技术，可用于创建具有真实世界比例和尺寸的令人惊叹的 3D 可视化效果。它消除了透视投影的失真，并允许您构建准确且一致的场景。通过了解正射投影的工作原理、优势和应用，您可以将其作为 WebGL 工具包的宝贵补充，从而为您的 3D 可视化项目带来新的可能性。