webgl入门实例-10正交投影基本概念

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应用。