一尘不染

3D点旋转算法

algorithm

我目前正在从事涉及3D点旋转的JavaScript项目。使用简单的三角函数,我已经草绘了自己的3D点旋转算法,但是我必须处理大量数据(+300
000点),并且我的函数会大大降低运行时间(FPS速率从60降至12)。

我正在寻找另一个3D点旋转 算法 ,该 算法

  1. 将点绕原点旋转X,Y和Z轴的角度(俯仰,偏航和滚动)
  2. 具有相当好的效率(不必担心太多,它总是比我的要快)
  3. 用JavaScript,类似C的代码或伪代码编写

任何帮助将不胜感激 :)

上下文:3D点云渲染器(我希望每个点都旋转)


阅读 369

收藏
2020-07-28

共1个答案

一尘不染

旋转的矢量可以描述为旋转矩阵与该矢量的乘积。关于倾斜,滚动和偏航德语维基百科页面描述了给定欧拉旋转角度的旋转矩阵。

有了这些信息,所有具有相同角度的点的旋转都可以编写为JavaScript函数,其中points数组是全局的:

function rotate(pitch, roll, yaw) {
    var cosa = Math.cos(yaw);
    var sina = Math.sin(yaw);

    var cosb = Math.cos(pitch);
    var sinb = Math.sin(pitch);

    var cosc = Math.cos(roll);
    var sinc = Math.sin(roll);

    var Axx = cosa*cosb;
    var Axy = cosa*sinb*sinc - sina*cosc;
    var Axz = cosa*sinb*cosc + sina*sinc;

    var Ayx = sina*cosb;
    var Ayy = sina*sinb*sinc + cosa*cosc;
    var Ayz = sina*sinb*cosc - cosa*sinc;

    var Azx = -sinb;
    var Azy = cosb*sinc;
    var Azz = cosb*cosc;

    for (var i = 0; i < points.length; i++) {
        var px = points[i].x;
        var py = points[i].y;
        var pz = points[i].z;

        points[i].x = Axx*px + Axy*py + Axz*pz;
        points[i].y = Ayx*px + Ayy*py + Ayz*pz;
        points[i].z = Azx*px + Azy*py + Azz*pz;
    }
}

如文章所述,大多数操作是建立旋转矩阵。循环内的最后三行是矩阵乘法。您已经提出了不想进入矩阵的观点,但这并不令人生畏,不是吗?迟早您会遇到更多的矩阵,因此您应该准备好处理它们。您需要的东西-
主要是乘法-很简单。不需要复杂的东西,如求逆矩阵。

无论如何,这可以相当快地执行300,000点。我能够旋转该大小的点云,并在大约10ms的时间内将其渲染到1000px x 1000px的画布上。

2020-07-28