# 1.模型矩阵的定义

对模型进行平移、旋转和缩放等操作后,会得到一个变换后的模型,将模型进行平移、旋转和缩放后,将这些变换全部复合成一个等效的变换,就称为模型变换

# 2.模型矩阵的使用

模型变换后最终的结果,跟对模型进行的变换操作的顺序是有关系的。平移和旋转的参数一样,顺序不一样,最终得到的结果也是不一样的。接下来我们来看一下下面的两个例子。

  • 先平移后旋转
平移旋轴后的模型 = 旋转矩阵*平移矩阵*原始坐标
1

顶点着色器中的代码

attribute vec4 a_Position;
uniform mat4 u_ModelMatrix;
void main() {
    gl_Position = u_ModelMatrix * a_Position;
}
1
2
3
4
5

js中的代码

let modelMatrix = new Matrix4();

// Calculate a model matrix
const ANGLE = 60.0; // The rotation angle
const Tx = 0.5;     // Translation distance
modelMatrix.setTranslate(Tx, 0, 0);  // Set translation matrix
modelMatrix.rotate(ANGLE, 0, 0, 1); 

...
const u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
if (!u_ModelMatrix) {
    console.log('Failed to get the storage location of u_xformMatrix');
    return;
}
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

经过模型变换后的最终结果如下所示:

demo地址 (opens new window)

  • 先旋转后平移
平移旋轴后的模型 = 平移矩阵*旋转矩阵*原始坐标
1

顶点坐标跟先平移后旋转的坐标是一样的。不同的地方在于平移矩阵在旋转矩阵的左边。跟之前的计算顺序刚好反了过来。

let modelMatrix = new Matrix4();

// Calculate a model matrix
const ANGLE = 60.0; // The rotation angle
const Tx = 0.5;     // Translation distance
modelMatrix.setRotate(ANGLE, 0, 0, 1); 
modelMatrix.translate(Tx, 0, 0);  // Set translation matrix

1
2
3
4
5
6
7
8

经过模型变换后的最终结果如下所示:

结论: 从上面的图片可以看出,模型变换的顺序很重要,即便旋转的参数完全一样,顺序不一样,旋转后的结果也会不一样。

demo地址 (opens new window)

评 论:

Last Updated: 6/24/2024, 6:04:56 PM