matrix - 了解在 WebGL 中绕任意轴旋转背后的数学原理

Question

最近，我一直在研究许多用于 WebGL 的矩阵库，以便更好地理解矩阵上执行的各种变换所涉及的数学。目前，我正在努力更好地理解用于旋转变换的数学。

具体来说，我已经了解了用于绕三个轴旋转的变换以及如何生成这些矩阵(如下所示)。

但是，我没有得到用于绕非 x、y 或 z 轴的任意轴旋转的方程式。

我目前正在通读 WebGL Programming Guide ，并且在提供的库中，他们使用以下 JS 绕任意轴旋转(其中 e 是包含 4x4 矩阵的数组):

len = Math.sqrt(x*x + y*y + z*z);
if (len !== 1) {
  rlen = 1 / len;
  x *= rlen;
  y *= rlen;
  z *= rlen;
}
nc = 1 - c;
xy = x * y;
yz = y * z;
zx = z * x;
xs = x * s;
ys = y * s;
zs = z * s;

e[ 0] = x*x*nc +  c;
e[ 1] = xy *nc + zs;
e[ 2] = zx *nc - ys;
e[ 3] = 0;

e[ 4] = xy *nc - zs;
e[ 5] = y*y*nc +  c;
e[ 6] = yz *nc + xs;
e[ 7] = 0;

e[ 8] = zx *nc + ys;
e[ 9] = yz *nc - xs;
e[10] = z*z*nc +  c;
e[11] = 0;

e[12] = 0;
e[13] = 0;
e[14] = 0;
e[15] = 1;

据我所知，代码的第一部分用于规范化 3D 向量，但除此之外，老实说，我无法理解它。
例如，nc, xy, yz, zx, xs, ys 和 zs 是什么意思？另外，举个例子，他们是如何得出公式 x*x*nc + c 来计算 e[0] 的？

根据 related SO post ，我确实找到了以下矩阵的引用，用于绕任意轴旋转:

这似乎与上面 JS 代码的作用有关(如果不相同的话)。

这个矩阵是如何生成的？关于如何绕任意轴旋转我想了很多，但我唯一能想到的就是将从原点延伸的 3D 矢量分解为其 x、y 和 z 分量，然后执行三种不同的旋转，这看起来效率很低。

拥有一个矩阵来为您完成所有这些似乎是最好的，但我真的很想了解该矩阵及其生成方式。

最后，虽然我不确定，但上面的矩阵似乎没有说明轴远离原点的平移。这是否可以通过简单地使用 4x4 矩阵而不是在适当位置使用 T_x、T_y 和 T_z 值来轻松处理？

谢谢。

Answer 1

请在此处找到数学概述:

http://paulbourke.net/geometry/rotate/

这里有详细的解释:

http://web.archive.org/web/20140515121518/http://inside.mines.edu:80/~gmurray/ArbitraryAxisRotation/ArbitraryAxisRotation.html

您关于旋转矩阵不考虑平移的说法是正确的。

是的，您可以通过将平移 x 旋转相乘来创建旋转然后平移矩阵:

    1 0 0 t1      r11 r12 r13 0
T = 0 1 0 t2  R = r21 r22 r23 0
    0 0 1 t3      r31 r32 r33 0
    0 0 0 1       0   0   0   1

        1 0 0 t1   r11 r12 r13 0   r11 r12 r13 t1
T x R = 0 1 0 t2 x r21 r22 r23 0 = r21 r22 r23 t2
        0 0 1 t3   r31 r32 r33 0   r31 r32 r33 t3
        0 0 0 1    0   0   0   1   0   0   0   1

如果您只想绕远离原点的任意轴旋转(即绕一条线)，请在第二个 URL ( http://web.archive.org/web/20140515121518/http://inside.mines.edu:80/~gmurray/ArbitraryAxisRotation/ArbitraryAxisRotation.html ) 中查找项目“6.2 绕任意线旋转的归一化矩阵” .