webgl入门实例-12WebGL 投影矩阵 (Projection Matrix)基本概念

WebGL 投影矩阵 (Projection Matrix)

投影矩阵是将3D场景从视图空间(相机空间)转换到裁剪空间的关键矩阵，它决定了3D物体如何投影到2D屏幕上。

投影矩阵的作用

定义3D空间到2D平面的映射方式
确定视景体(view frustum)的形状和范围
实现透视效果(近大远小)或正交投影(无透视)
执行深度值的归一化(0到1之间)

两种主要投影类型

1. 透视投影矩阵 (Perspective Projection)

模拟人眼看到的真实世界，具有近大远小的效果。

创建参数：

fov - 垂直视野角度(弧度)
aspect - 宽高比(width/height)
near - 近裁剪面距离
far - 远裁剪面距离

// 使用gl-matrix库创建透视投影矩阵
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, 
                 fov, 
                 aspect, 
                 near, 
                 far);

手动实现原理：

function perspective(fov, aspect, near, far) {
   
   
  const f = 1.0 / Math.tan(fov / 2);
  const rangeInv = 1.0 / (near - far);
  
  return [
    f / aspect,