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

WebGL 视图矩阵 (View Matrix)

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

什么是视图矩阵？

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

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

视图矩阵的数学原理

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

1. 将相机从世界原点平移至其位置
2. 旋转场景，使相机朝向-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中使用视图矩阵

1. 创建并上传视图矩阵：

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);

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

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

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

视图矩阵的特殊性质

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

相机控制示例

实现第一人称相机控制：

// 相机参数
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();
}

常见问题

1. 为什么物体朝相反方向移动？

   • 记住视图矩阵移动的是整个世界，而不是相机
   • 要向左移动相机，实际上是将世界向右移动

2. 如何实现相机跟随？

   • 只需更新相机的target参数到跟随对象的位置

3. 如何实现俯仰和偏航？

   • 需要计算新的相机方向向量，而不仅仅是改变target

视图矩阵是3D图形中实现相机控制的核心组件，理解它的工作原理对于实现各种相机行为至关重要。