WebGL 模型矩阵 (Model Matrix)
在WebGL和3D图形编程中，模型矩阵(Model Matrix)是将物体从局部坐标系(模型空间)转换到世界坐标系的关键变换矩阵。
什么是模型矩阵？
模型矩阵是一个4x4的矩阵，用于表示物体在世界空间中的位置、旋转和缩放。它执行以下转换：
- 将顶点从模型局部坐标空间转换到世界坐标空间
- 应用物体的平移(位置)、旋转和缩放变换
模型矩阵的组成
通常，模型矩阵是多个基本变换矩阵的组合：
ModelMatrix = TranslationMatrix × RotationMatrix × ScaleMatrix
1. 平移矩阵 (Translation)
将物体移动到世界空间中的特定位置：
// 创建平移矩阵 (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轴旋转物体：
// 绕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)
改变物体的大小：
// 创建缩放矩阵 (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中使用模型矩阵
- 创建模型矩阵：
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]);
- 将模型矩阵传递给着色器：
const uModelMatrix = gl.getUniformLocation(program, 'uModelMatrix');
gl.uniformMatrix4fv(uModelMatrix, false, modelMatrix);
- 在顶点着色器中使用：
uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;void main() {gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aPosition, 1.0);
}
注意事项
-
矩阵乘法顺序很重要 - WebGL/OpenGL使用列主序矩阵，变换是从右向左应用的。
-
对于复杂场景，通常会有多个模型矩阵，每个物体一个。
-
使用矩阵库如
gl-matrix可以简化矩阵操作：
import {mat4} from 'gl-matrix';
- 性能考虑：在JavaScript中频繁创建和修改矩阵可能会影响性能，考虑重用矩阵对象。
模型矩阵是WebGL渲染管线中模型-视图-投影矩阵(MVP)三部曲的第一部分，是将3D物体放置到3D世界中的基础。
