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

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

news 来源：原创 2025/4/23 12:52:29

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