3D点旋转算法 [英] 3D point rotation algorithm

问题描述

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

I'm currently working on a JavaScript project which involves 3D point rotation. Using simple trigonometry, I have sketched my own 3D point rotation algorithm, but I have to deal with a huge amount of data (+300 000 points) and my function slows down the runtime substantially (the FPS rate drops from 60 to 12).

我正在寻找另一个3D点旋转 ALGORITHM ，其中...

1. 通过X，Y和Z轴的角度（俯仰，偏航和滚动）围绕原点旋转点


2. 具有相当好的效果效率（不必担心太多，它总是会比我的快）


3. 是用JavaScript，类似于C的代码或伪代码
$ b $编写的b

1. rotates points around origin by X, Y and Z axes' angles (PITCH, YAW and ROLL)
2. has a quite good efficiency (don't worry about this too much, it will always be faster than mine)
3. is written in JavaScript, C-like code or pseudo-code

任何帮助将不胜感激：）

Any help will be greatly appreciated :)

上下文：3D点云渲染器（我希望旋转每个点）

推荐答案

可以描述旋转的矢量作为旋转矩阵与该向量的乘积。 关于倾斜，滚动和偏航的德国维基百科页面描述了

A rotated vector can be described as a product of a rotation matrix with that vector. The German Wikipedia page on pitch, roll and yaw describes the rotation matrix for given Euler rotation angles.

有了这些信息，所有具有相同角度的点的旋转都可以写成JavaScript函数，其中点数组是全局的：

With that information, the rotation of all points with the same angles can be written as JavaScript function, where the points array is global:

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;
    }
}

其中大部分是按照所述设置旋转矩阵在文章中。循环内的最后三行是矩阵乘法。您已经提出了不想进入矩阵的观点，但这几乎没有威吓性，对吗？迟早您会遇到更多的矩阵，因此您应该准备好处理它们。您需要的东西–乘法，主要是–很简单。不需要复杂的东西，例如求逆矩阵。

Most of that is setting up the rotation matrix as described in the article. The last three lines inside the loop are the matrix multiplication. You have made a point of not wanting to get into matrices, but that's hardly intimidating, is it? Sooner or later you will encounter more matrices and you should be prepared to deal with them. The stuff you need – multiplication, mainly – is simple. The more complicated stuff like inverting matrices is not needed for your requirements.

无论如何，它可以以300,000点的速度快速运行。我能够旋转该大小的点云，并在大约10毫秒内将其渲染到1000px& times 1000px的画布上。

Anyway, that performs reasonably fast for 300,000 points. I was able to rotate a point cloud of that size and render it on a 1000px &times 1000px canvas in about 10ms.

这篇关于3D点旋转算法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！