当前位置：首页 > web >正文

webgl入门实例-11WebGL 视图矩阵 (View Matrix)基本概念

web 2025/7/19 8:38:52

WebGL 视图矩阵 (View Matrix)

在WebGL中，视图矩阵(View Matrix)定义了观察者(相机)在世界空间中的位置和方向，它实现了从世界坐标系到相机坐标系的转换。

什么是视图矩阵？

视图矩阵是一个4x4的矩阵，用于：

将场景从世界坐标转换到相机(观察者)坐标空间
确定相机的观察方向、位置和朝向
本质上表示"相机在世界中的位置和方向"

视图矩阵的数学原理

视图矩阵通常通过以下步骤构建：

将相机从世界原点平移至其位置
旋转场景，使相机朝向-Z方向(WebGL的默认观察方向)

数学上可以表示为：

ViewMatrix = RotationMatrix × TranslationMatrix

注意：这个顺序与模型矩阵相反

创建视图矩阵的方法

1. 使用lookAt函数

最常用的方法是使用lookAt函数，它需要三个参数：

相机位置(eye)
观察目标点(target)
上向量(up)

// 使用gl-matrix库
import {mat4} from 'gl-matrix';const viewMatrix = mat4.create();
const eye = [0, 0, 5];    // 相机位置
const target = [0, 0, 0]; // 观察目标
const up = [0, 1, 0];     // 上方向向量
mat4.lookAt(viewMatrix, eye, target, up);

2. 手动创建视图矩阵

如果不使用矩阵库，可以手动计算：

function createViewMatrix(eye, target, up) {const zAxis = normalize(subtractVectors(eye, target)); // 相机朝向const xAxis = normalize(cross(up, zAxis));             // 右向量const yAxis = normalize(cross(zAxis, xAxis));          // 实际上向量return [xAxis[0], xAxis[1], xAxis[2], -dot(xAxis, eye),yAxis[0], yAxis[1], yAxis[2], -dot(yAxis, eye),zAxis[0], zAxis[1], zAxis[2], -dot(zAxis, eye),0,       0,       0,       1];
}

在WebGL中使用视图矩阵

创建并上传视图矩阵：

const viewMatrix = mat4.create();
mat4.lookAt(viewMatrix, [0, 1, 5], [0, 0, 0], [0, 1, 0]);const uViewMatrix = gl.getUniformLocation(program, 'uViewMatrix');
gl.uniformMatrix4fv(uViewMatrix, false, viewMatrix);

在顶点着色器中使用：

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

视图矩阵的特殊性质

逆矩阵：视图矩阵的逆矩阵就是相机本身的模型矩阵
组合：视图矩阵通常与模型矩阵组合为"模型视图矩阵"(ModelView Matrix)
性能：对于静态相机，可以只计算一次视图矩阵

相机控制示例

实现第一人称相机控制：

// 相机参数
let cameraPosition = [0, 0, 5];
let cameraTarget = [0, 0, 0];
let upVector = [0, 1, 0];function updateViewMatrix() {mat4.lookAt(viewMatrix, cameraPosition, cameraTarget, upVector);gl.uniformMatrix4fv(uViewMatrix, false, viewMatrix);
}// 移动相机
function moveCamera(dx, dy, dz) {cameraPosition[0] += dx;cameraPosition[1] += dy;cameraPosition[2] += dz;updateViewMatrix();
}// 旋转相机(绕Y轴)
function rotateCameraY(angle) {// 实现旋转逻辑...updateViewMatrix();
}