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

WebGL 投影矩阵 (Projection Matrix)

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

投影矩阵的作用

1. 定义3D空间到2D平面的映射方式
2. 确定视景体(view frustum)的形状和范围
3. 实现透视效果(近大远小)或正交投影(无透视)
4. 执行深度值的归一化(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, 0, 0, 0,
    0, f, 0, 0,
    0, 0, (near + far) * rangeInv, -1,
    0, 0, near * far * rangeInv * 2, 0
  ];
}

2. 正交投影矩阵 (Orthographic Projection)

保持物体大小不变，无透视效果，常用于2D渲染或CAD应用。

创建参数：

• left, right - 左右边界
• bottom, top - 上下边界
• near, far - 远近裁剪面

// 使用gl-matrix库创建正交投影矩阵
const projectionMatrix = mat4.create();
mat4.ortho(projectionMatrix, 
           left, right, 
           bottom, top, 
           near, far);

手动实现原理：

function orthographic(left, right, bottom, top, near, far) {
  const lr = 1 / (left - right);
  const bt = 1 / (bottom - top);
  const nf = 1 / (near - far);
  
  return [
    -2 * lr, 0, 0, 0,
    0, -2 * bt, 0, 0,
    0, 0, 2 * nf, 0,
    (left + right) * lr, (top + bottom) * bt, (far + near) * nf, 1
  ];
}

在WebGL中使用投影矩阵

1. 创建并上传投影矩阵：

// 透视投影示例
const fov = Math.PI / 4; // 45度
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const near = 0.1;
const far = 100.0;

const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, fov, aspect, near, far);

const uProjectionMatrix = gl.getUniformLocation(program, 'uProjectionMatrix');
gl.uniformMatrix4fv(uProjectionMatrix, false, projectionMatrix);

2. 在顶点着色器中使用：

uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;

void main() {
  gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aPosition, 1.0);
}

投影矩阵的特性

1. 透视除法：投影矩阵的结果是齐次坐标，需要执行透视除法(x/w, y/w, z/w)才能得到归一化设备坐标(NDC)

2. 深度非线性：在透视投影中，深度值(z)是非线性分布的，这提供了更好的深度精度管理

3. 裁剪空间：投影矩阵将顶点转换到裁剪空间(-1到1的范围)，超出此范围的顶点将被裁剪

常见问题与解决方案

1. 物体显示变形：

   // 确保使用正确的宽高比
   const aspect = canvas.clientWidth / canvas.clientHeight;
   

2. 近裁剪面太近导致z-fighting：

   // 增大near值
   const near = 0.5; // 原来是0.1
   

3. 远处物体被裁剪：

   // 增大far值
   const far = 1000.0; // 原来是100.0
   

4. 正交投影物体大小不一致：

   // 确保使用对称的左右/上下值
   const size = 10;
   mat4.ortho(projectionMatrix, -size, size, -size, size, near, far);
   

高级主题

1. 自定义视景体：可以创建不对称的投影矩阵用于特殊效果
2. 逆向投影：从屏幕坐标反推世界坐标
3. 无限投影：通过特殊技巧实现无限远视景体
4. 多视口投影：为VR/AR应用创建多个投影矩阵

投影矩阵是3D渲染管线的最后一个变换阶段，它将3D场景最终映射到2D显示设备上，理解其工作原理对于实现各种视觉效果至关重要。