# 1.模型矩阵的定义
对模型进行平移、旋转和缩放等操作后，会得到一个变换后的模型，将模型进行平移、旋转和缩放后，将这些变换全部复合成一个等效的变换，就称为模型变换。
# 2.模型矩阵的使用
模型变换后最终的结果，跟对模型进行的变换操作的顺序是有关系的。平移和旋转的参数一样，顺序不一样，最终得到的结果也是不一样的。接下来我们来看一下下面的两个例子。
- 先平移后旋转
平移旋轴后的模型 = 旋转矩阵*平移矩阵*原始坐标
1
顶点着色器中的代码
attribute vec4 a_Position;
uniform mat4 u_ModelMatrix;
void main() {
gl_Position = u_ModelMatrix * a_Position;
}
1
2
3
4
5
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
经过模型变换后的最终结果如下所示：
- 先旋转后平移
平移旋轴后的模型 = 平移矩阵*旋转矩阵*原始坐标
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
2
3
4
5
6
7
8
经过模型变换后的最终结果如下所示：
结论: 从上面的图片可以看出，模型变换的顺序很重要，即便旋转的参数完全一样，顺序不一样，旋转后的结果也会不一样。
阅读量：