4x4矩阵乘法顺序

时间:2014-02-17 20:28:31

标签: javascript opengl-es webgl matrix-multiplication

我正在使用以下库:

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. 围绕x
  3. 旋转90度
  4. 翻译10x,20y
  5. 但是,输出不一样,输出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]
    

    为什么结果会有所不同,当我看似采取相同的步骤时?

1 个答案:

答案 0 :(得分:3)

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

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]