4x4矩阵乘法为了

Question

使用下面的图书馆我“米：

https://github.com/greggman/tdl/blob/master/tdl/math.js

然而，问题是不同的结果时，我采取不同的方式相同的步骤，我越来越：

//Example 1 
m = tdl.math.matrix4.identity(); 
tdl.math.matrix4.rotateX(m, 90*(Math.PI/180)); 
tdl.math.matrix4.translate(m, [10,20,30]); 

console.log (m); //output down below 1 

//Example2 
i = tdl.math.matrix4.identity(); 
r = tdl.math.matrix4.rotationX(90*(Math.PI/180)); 
t = tdl.math.matrix4.translation([10,20,30]); 
m = tdl.math.matrix4.mul(i, r); 
m = tdl.math.matrix4.mul(m, t); 

console.log(m); // output down below 2 

这两种方法都有动作的顺序相同，即

1. 身份
2. 绕×90度
3. 10倍平移，20Y

但是，输出是不一样的，这里是输出1：

[1, 0, 0, 0, 0, 6.123233995736766e-17, 1, 0, 0, -1, 6.123233995736766e-17, 0, 10, -30, 20.000000000000004, 1] 

这里是输出2

[1, 0, 0, 0, 0, 6.123233995736766e-17, 1, 0, 0, -1, 6.123233995736766e-17, 0, 10, 20, 30, 1] 

为什么结果不同，当我似乎采取相同的步骤？

Answer 1

因为矩阵的乘法因左边的矩阵而不同。换句话说

matA * matB != matB * matA 

尝试

i = tdl.math.matrix4.identity(); 
r = tdl.math.matrix4.rotationX(90*(Math.PI/180)); 
t = tdl.math.matrix4.translation([10,20,30]); 
m = tdl.math.matrix4.mul(r, i); 
m = tdl.math.matrix4.mul(t, m); 

console.log(m); // output down below 

输出

[1, 0, 0, 0, 0, 6.123031769111886e-17, 1, 0, 0, -1, 6.123031769111886e-17, 0, 10, -30, 20.000000000000004, 1]