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]