1.模型矩阵的定义

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

2.模型矩阵的使用

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

• 先平移后旋转

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

顶点着色器中的代码

attribute vec4 a_Position;
uniform mat4 u_ModelMatrix;
void main() {
    gl_Position = u_ModelMatrix * a_Position;
}

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

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

demo地址 (opens new window)

• 先旋转后平移

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

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

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

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

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

demo地址 (opens new window)

阅读量：

评 论：