Japavascript и P5. js - Оптимизация кода проекции 4D - PullRequest
Новая
       86

Japavascript и P5. js - Оптимизация кода проекции 4D

1 голос
/ 14 марта 2020

Я знаю, что "как оптимизировать этот код?" Такие вопросы обычно не приветствуются при переполнении стека. Но я думаю, что только так я могу сформулировать свой вопрос. Я написал код, который проецирует 4-мерные точки на 3-мерное пространство. Затем я рисую 3D-точки, используя библиотеку p5. js.

Вот мой код: https://jsfiddle.net/dfq8ykLw/

Теперь мой вопрос: как я должен заставить это работать быстрее и оптимизировать код? Так как я должен рисовать несколько тысяч точек (иногда больше) на кадр и вычислять вращение для каждой из этих точек, мой код, как правило, работает невероятно медленно (по некоторым причинам, устройства c могут работать немного быстрее).

Я пробовал рисовать точки вместо вершин, которые в итоге работали еще медленнее.

Есть ли какие-либо предложения о том, как улучшить производительность? Или совет, какую библиотеку использовать для рисования трехмерных фигур?

Просто, чтобы объяснить, моя программа хранит точки в виде вложенного массива, как [[Point object, Point object, ...], ...]. Каждый массив в данных работает как грань, каждый объект Point является вершиной. Сначала я поворачиваю каждую из этих точек, применяя 6 поворотов (для осей xy, xz, xw, yz, yw и zw), а затем рисую их, проецируя их в трехмерное пространство.

Любая помощь приветствуется, так как Я ужасно застрял!

1 Ответ

1 голос
/ 17 марта 2020

в исходном коде

Начать рисование фигуры. Однако в режиме WEBGL производительность приложения, вероятно, снизится из-за слишком большого количества вызовов метода beginShape () / endShape (). В качестве высокопроизводительной альтернативы ... _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 = функция (режим) {this.immediateMode.shapeMode = режим! == не определено? 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/

...