网站开发流程传智播客创建属于自己的网站

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中使用模型矩阵

1. 创建模型矩阵：

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

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

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

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

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

注意事项

1. 矩阵乘法顺序很重要 - WebGL/OpenGL使用列主序矩阵，变换是从右向左应用的。

2. 对于复杂场景，通常会有多个模型矩阵，每个物体一个。

3. 使用矩阵库如gl-matrix可以简化矩阵操作：

import {mat4} from 'gl-matrix';

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

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