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, 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中使用投影矩阵
- 创建并上传投影矩阵：
// 透视投影示例
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);
- 在顶点着色器中使用：
uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;void main() {gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aPosition, 1.0);
}
投影矩阵的特性
-
透视除法：投影矩阵的结果是齐次坐标，需要执行透视除法(x/w, y/w, z/w)才能得到归一化设备坐标(NDC)
-
深度非线性：在透视投影中，深度值(z)是非线性分布的，这提供了更好的深度精度管理
-
裁剪空间：投影矩阵将顶点转换到裁剪空间(-1到1的范围)，超出此范围的顶点将被裁剪
常见问题与解决方案
-
物体显示变形：
// 确保使用正确的宽高比 const aspect = canvas.clientWidth / canvas.clientHeight; -
近裁剪面太近导致z-fighting：
// 增大near值 const near = 0.5; // 原来是0.1 -
远处物体被裁剪：
// 增大far值 const far = 1000.0; // 原来是100.0 -
正交投影物体大小不一致：
// 确保使用对称的左右/上下值 const size = 10; mat4.ortho(projectionMatrix, -size, size, -size, size, near, far);
高级主题
- 自定义视景体：可以创建不对称的投影矩阵用于特殊效果
- 逆向投影：从屏幕坐标反推世界坐标
- 无限投影：通过特殊技巧实现无限远视景体
- 多视口投影：为VR/AR应用创建多个投影矩阵
投影矩阵是3D渲染管线的最后一个变换阶段，它将3D场景最终映射到2D显示设备上，理解其工作原理对于实现各种视觉效果至关重要。