Javascript 和 P5.js - 优化 4D 投影代码

Question

我知道 "how to optimize this code?" 这种问题在堆栈溢出中通常不受欢迎。但我认为这只是我表达问题的方式。我写了一个代码，将 4 维点投影到 3 维 space。然后我使用 p5.js 库绘制 3d 点。

现在我的问题是，我应该如何使运行更快并优化代码？由于我应该每帧绘制几千个点（有时更多），并计算每个点的旋转，我的代码往往运行非常慢（mac 设备可以运行由于某种原因，这会快一点）。

我尝试绘制点而不是顶点，结果运行变得更慢。

有什么改进性能的建议吗？或者建议使用哪种库来绘制 3 维形状？

解释一下，我的程序将点存储为嵌套数组，就像 [[Point object, Point object, ...], ...] 一样。数据中的每个数组都作为一个面，每个 Point 对象都是顶点。我首先通过应用 6 次旋转（对于轴 xy、xz、xw、yz、yw 和 zw）来旋转这些点中的每一个，然后通过将它们投影到 3d space.

上来绘制它们

感谢任何帮助，因为我被困住了！

Answer 1

在源代码中

Begin shape drawing. However in WEBGL mode, application performance will likely drop as a result of too many calls to beginShape() / endShape(). As a high performance alternative, ... _main.default.RendererGL.prototype.beginShape

因此我们可能希望避免太多 beginShape 调用。 Idem 在 cube 而不是 face

上调用它

beginShape()
data.forEach((hyperobject, i) => {
    // face
    for (var p in hyperobject){
        hyperobject[p].rotate(angles[0], angles[1], angles[2], angles[3], angles[4], angles[5])
        hyperobject[p].draw()
    }
    if (i % 6 === 0) {
        endShape(CLOSE);
        beginShape()
    }
})
endShape()

不过画线有些难看，因为默认模式是TRIANGLE_FAN

_main.default.RendererGL.prototype.beginShape = function(mode) { this.immediateMode.shapeMode = mode !== undefined ? mode : constants.TRIANGLE_FAN;

所以我们可以指定 TRIANGLES 代替：


function draw(){
    //noLoop()
    background(0);
    // translate(250, 250);
    for (var a in angles){
        angles[a] += angleSpeeds[a];
    }
    beginShape(TRIANGLES)
    data.forEach((hyperobject, i) => {
        // face
        const [a, b, c, d] = hyperobject.map(a => {
            a.rotate(angles[0], angles[1], angles[2], angles[3], angles[4], angles[5])
            return a
        })
        //first triangle
        a.draw()
        b.draw()
        c.draw()

        a.draw()
        b.draw()
        d.draw()
        if (i % 6 === 0) {
            endShape()
            beginShape(TRIANGLES)
        }
    })
    endShape()
}

请注意，您可以因式分解旋转


  const [axy, axz, axw, ayz, ayw, azw] = angles
  const f = x => [Math.cos(x), Math.sin(x)]
  const [Ca, Sa] = f(axy)
  const [Cb, Sb] = f(axz)
  const [Cc, Sc] = f(axw)
  const [Cd, Sd] = f(ayz)
  const [Ce, Se] = f(ayw)
  const [Cf, Sf] = f(azw)
  const R = [
    [Ca*Cb*Cc, -Cb*Cc*Sa, -Cc*Sb, -Sc],
    [Ca*(-Cb*Sc*Se-Ce*Sb*Sd)+Cd*Ce*Sa, -Sa*(-Cb*Sc*Se-Ce*Sb*Sd)+Ca*Cd*Ce, -Cb*Ce*Sd+Sb*Sc*Se, -Cc*Se],
    [Ca*(Sb*(Sd*Se*Sf+Cd*Cf)-Cb*Ce*Sc*Sf)+Sa*(-Cd*Se*Sf+Cf*Sd), -Sa*(Sb*(Sd*Se*Sf+Cd*Cf)-Cb*Ce*Sc*Sf)+Ca*(-Cd*Se*Sf+Cf*Sd), Cb*(Sd*Se*Sf+Cd*Cf)+Ce*Sb*Sc*Sf, -Cc*Ce*Sf],
    [Ca*(Sb*(-Cf*Sd*Se+Cd*Sf)+Cb*Ce*Cf*Sc)+Sa*(Cd*Cf*Se+Sd*Sf),-Sa*(Sb*(-Cf*Sd*Se+Cd*Sf)+Cb*Ce*Cf*Sc)+Ca*(Cd*Cf*Se+Sd*Sf), Cb*(-Cf*Sd*Se+Cd*Sf)-Ce*Cf*Sb*Sc, Cc*Ce*Cf]
  ]


  Point.prototype.rotate = function (R) {
    const X = [this.origx, this.origy, this.origz, this.origw]
    const [x,y,z,w] = prod(R, X)
    Object.assign(this, { x, y, z, w })
  }

但这不是瓶颈（例如绘图需要 1 毫秒到 50 毫秒），因此最好保留矩阵分解。

我不能把代码片段放在这里，因为 webgl 不安全 https://jsfiddle.net/gk4Lvptm/

Answer 2

首先看到这个（和所有子链接）以获取灵感：

尤其是 4D rotations 和 reper4D 链接。

使用5x5 4D齐次变换矩阵

这会将您的所有转换转换为单个 matrix * vector 操作，无需任何测角（对每个顶点重复），因此速度应该快得多。甚至允许堆叠操作等等。
您可以移植到 GLSL

您可以将大部分计算（包括转换）转移到着色器中。我知道 GLSL 仅支持 4x4 矩阵，但您也可以使用 mat4 和 vec4 来计算 mat5 * vec5 ...您只需将缺少的东西添加到单独的变量中，然后使用点积来计算缺少的 col/row
使用VAO/VBO

这可以大大提高速度，因为您不再需要在渲染期间将任何数据传递给 GPU...但是您需要在 GPU 端进行投影（与 cross-section 不同，这是可行的）投影很容易实现）。

Javascript 和 P5.js - 优化 4D 投影代码

Japavascript and P5.js - Optimizing a 4D projection code

javascript

algorithm

optimization

4d

p5.js