WebGL实战篇（七）：探索三维透视投影的世界

前端

2024-01-07 12:12:21

WebGL实战篇（七）：三维透视投影

Warining!!! 前方高能预警！数学推导来袭！

在上一篇文章三维正交投影中，我们介绍了三维正交投影矩阵。但是今天我们的话题稍微有一些复杂——三维透视投影 。

透视投影原理

透视投影是一种将三维物体投影到二维平面上的技术，它模拟了人眼观察物体的过程。当我们观察一个物体时，较近的物体看起来比较远的物体更大。这就是透视投影的原理。

在三维透视投影中，我们将三维坐标系中的点投影到一个称为裁剪空间 的四维坐标系中。裁剪空间中的点再被投影到二维屏幕空间中，形成我们在屏幕上看到的图像。

透视投影矩阵

透视投影矩阵是一个4x4矩阵，它将三维坐标系中的点投影到裁剪空间中。透视投影矩阵的公式如下：

P = [
  zNear / (zFar - zNear), 0, 0, 0,
  0, zNear / (zFar - zNear), 0, 0,
  0, 0, (zFar + zNear) / (zFar - zNear), -1,
  0, 0, 2 * zNear * zFar / (zFar - zNear), 0
]

其中：

zNear 是裁剪空间中的近裁剪平面
zFar 是裁剪空间中的远裁剪平面

视椎体

视椎体是一个三维锥体，它定义了裁剪空间。视椎体的顶点是原点，底面是屏幕空间。

视椎体的四个侧面被称为视平面 。视平面的法线向量指向视椎体内部。

投影过程

透视投影的过程可以分为以下几个步骤：

将三维坐标系中的点投影到裁剪空间中
裁剪掉裁剪空间中不在视椎体内的点
将裁剪空间中的点投影到屏幕空间中

代码实现

在WebGL中，我们可以使用以下代码实现三维透视投影：

// 创建透视投影矩阵
const projectionMatrix = new THREE.Matrix4();
projectionMatrix.makePerspective(fov, aspect, near, far);

// 设置相机
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

// 将相机应用于场景
scene.add(camera);