时间戳

首页 > 解决方案 > Japavascript 和 P5.js - 优化 4D 投影代码

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

问题描述

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

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

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

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

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

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

任何帮助表示赞赏，因为我非常卡住！

标签： javascriptalgorithmoptimizationp5.js4d

解决方案

在源代码中

开始绘制形状。然而，在 WEBGL 模式下，应用程序性能可能会由于对 beginShape() / endShape() 的调用过多而下降。作为一种高性能替代方案，... _main.default.RendererGL.prototype.beginShape

所以我们可能想避免太多的beginShape调用。Idem 在立方体上调用它而不是在脸上

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 ? 模式：常量.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 })
  }

但这不是瓶颈，（比如 1ms 到 50ms 用于绘图），所以保持矩阵分解可能是可取的。

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

推荐阅读