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

Question

我知道“如何优化这段代码？”堆栈溢出通常不欢迎这类问题。但我认为这只是我表达问题的方式。我写了一个代码，将 4 维点投影到 3 维空间。然后我使用 p5.js 库绘制 3d 点。

这是我的代码:https://jsfiddle.net/dfq8ykLw/

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

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

是否有任何关于如何提高性能的建议？或者建议使用哪种库来绘制 3 维形状？

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

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

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 调用。同上称它为立方体而不是面

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/