webgl入门实例-11模型矩阵 (Model Matrix)基本概念

WebGL 模型矩阵 (Model Matrix)

在WebGL和3D图形编程中，模型矩阵(Model Matrix)是将物体从局部坐标系(模型空间)转换到世界坐标系的关键变换矩阵。

什么是模型矩阵？

模型矩阵是一个4x4的矩阵，用于表示物体在世界空间中的位置、旋转和缩放。它执行以下转换：

将顶点从模型局部坐标空间转换到世界坐标空间
应用物体的平移(位置)、旋转和缩放变换

模型矩阵的组成

通常，模型矩阵是多个基本变换矩阵的组合：

复制代码

ModelMatrix = TranslationMatrix × RotationMatrix × ScaleMatrix

1. 平移矩阵 (Translation)

将物体移动到世界空间中的特定位置：

javascript 复制代码

// 创建平移矩阵 (tx, ty, tz)
function translate(tx, ty, tz) {
  return [
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    tx, ty, tz, 1
  ];
}

2. 旋转矩阵 (Rotation)

绕X、Y或Z轴旋转物体：

javascript 复制代码

// 绕X轴旋转 (角度)
function rotateX(angle) {
  const c = Math.cos(angle);
  const s = Math.sin(angle);
  return [
    1, 0, 0, 0,
    0, c, s, 0,
    0, -s, c, 0,
    0, 0, 0, 1
  ];
}

// 绕Y轴旋转 (角度)
function rotateY(angle) {
  const c = Math.cos(angle);
  const s = Math.sin(angle);
  return [
    c, 0, -s, 0,
    0, 1, 0, 0,
    s, 0, c, 0,
    0, 0, 0, 1
  ];
}

// 绕Z轴旋转 (角度)
function rotateZ(angle) {
  const c = Math.cos(angle);
  const s = Math.sin(angle);
  return [
    c, s, 0, 0,
    -s, c, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1
  ];
}

3. 缩放矩阵 (Scale)

改变物体的大小：

javascript 复制代码

// 创建缩放矩阵 (sx, sy, sz)
function scale(sx, sy, sz) {
  return [
    sx, 0, 0, 0,
    0, sy, 0, 0,
    0, 0, sz, 0,
    0, 0, 0, 1
  ];
}

在WebGL中使用模型矩阵

创建模型矩阵：

javascript 复制代码

const modelMatrix = mat4.create(); // 使用gl-matrix库
mat4.identity(modelMatrix);
mat4.translate(modelMatrix, modelMatrix, [x, y, z]);
mat4.rotateX(modelMatrix, modelMatrix, angleX);
mat4.rotateY(modelMatrix, modelMatrix, angleY);
mat4.rotateZ(modelMatrix, modelMatrix, angleZ);
mat4.scale(modelMatrix, modelMatrix, [sx, sy, sz]);

将模型矩阵传递给着色器：

javascript 复制代码

const uModelMatrix = gl.getUniformLocation(program, 'uModelMatrix');
gl.uniformMatrix4fv(uModelMatrix, false, modelMatrix);

在顶点着色器中使用：

glsl 复制代码

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

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

注意事项

矩阵乘法顺序很重要 - WebGL/OpenGL使用列主序矩阵，变换是从右向左应用的。
对于复杂场景，通常会有多个模型矩阵，每个物体一个。
使用矩阵库如gl-matrix可以简化矩阵操作：

javascript 复制代码

import {mat4} from 'gl-matrix';

性能考虑：在JavaScript中频繁创建和修改矩阵可能会影响性能，考虑重用矩阵对象。

模型矩阵是WebGL渲染管线中模型-视图-投影矩阵(MVP)三部曲的第一部分，是将3D物体放置到3D世界中的基础。