北辰做网站新闻app开发
WebGL 正交投影
正交投影(Orthographic Projection)是WebGL中常用的一种投影方式，它保持物体的平行线在投影后仍然平行，不会产生透视效果(近大远小)。
正交投影基础
正交投影的特点是：
- 保持物体的实际尺寸不变
- 平行线在投影后仍保持平行
- 没有透视缩短效果
在WebGL中实现正交投影
1. 使用矩阵库
通常我们会使用矩阵库(如gl-matrix)来创建正交投影矩阵：
import { mat4 } from 'gl-matrix';// 创建正交投影矩阵
const projectionMatrix = mat4.create();
mat4.ortho(projectionMatrix, left, right, bottom, top, near, far);
2. 手动创建正交投影矩阵
也可以手动创建正交投影矩阵：
function createOrthographicMatrix(left, right, bottom, top, near, far) {const dst = new Float32Array(16);dst[0] = 2 / (right - left);dst[1] = 0;dst[2] = 0;dst[3] = 0;dst[4] = 0;dst[5] = 2 / (top - bottom);dst[6] = 0;dst[7] = 0;dst[8] = 0;dst[9] = 0;dst[10] = -2 / (far - near);dst[11] = 0;dst[12] = -(right + left) / (right - left);dst[13] = -(top + bottom) / (top - bottom);dst[14] = -(far + near) / (far - near);dst[15] = 1;return dst;
}
3. 在着色器中使用
顶点着色器中应用正交投影矩阵：
attribute vec4 a_position;
uniform mat4 u_projection;
uniform mat4 u_modelView;void main() {gl_Position = u_projection * u_modelView * a_position;
}
正交投影参数解释
mat4.ortho或手动创建函数接受6个参数：
left- 左裁剪面right- 右裁剪面bottom- 下裁剪面top- 上裁剪面near- 近裁剪面far- 远裁剪面
这些参数定义了一个立方体裁剪空间，所有在这个空间内的物体都会被渲染。
示例使用
// 设置正交投影
const projectionMatrix = mat4.create();
// 创建一个从-400到400宽，-300到300高，-1到1深的投影空间
mat4.ortho(projectionMatrix, -400, 400, -300, 300, -1, 1);// 在渲染循环中
gl.uniformMatrix4fv(uProjectionLocation, false, projectionMatrix);
正交投影 vs 透视投影
| 特性 | 正交投影 | 透视投影 |
|---|---|---|
| 平行线 | 保持平行 | 会聚于消失点 |
| 尺寸 | 保持相同 | 随距离减小 |
| 用途 | CAD、2D游戏、UI | 3D游戏、真实场景 |
调整正交投影
可以根据画布大小动态调整正交投影：
function updateProjectionMatrix(gl) {const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;const width = 800; // 你希望的世界单位宽度const height = width / aspect;mat4.ortho(projectionMatrix, -width/2, width/2, -height/2, height/2, -1, 1);
}
正交投影非常适合2D渲染、UI元素或需要保持物体实际尺寸不变的3D应用。