Pixi JS потребляет огромное количество графического процессора - PullRequest
Новая
       14

Pixi JS потребляет огромное количество графического процессора

1 голос
/ 05 мая 2020

Итак, у меня есть сцена в Pixi, в которой примерно 7-8 текстур. Пара просто выполняет зацикливание простых преобразований (например, крутится как веер и т. Д. c), некоторые из них - c.

Совершенно без взаимодействия с ним (он находится в отдельном окне), одно его присутствие заставляет мой MacBook Pro i7 16 ГБ с объемом памяти безумно нагреваться, и он занимает 50% ЦП.

Вот пример того, как я настраиваю одну из вращающихся анимаций. Есть что-нибудь подозрительное? Я не могу поверить, сколько энергии он потребляет, и я собираюсь выбросить весь свой код Pixi и просто использовать CSS, поскольку он кажется намного более эффективным. 

rotorPositions.forEach((rotor, index) => {
    const sprite = new PIXI.Sprite(resources.rotor.texture)
    sprite.position.set(foregroundContainer.width/100 * rotor[0], foregroundContainer.height/100 * rotor[1])
    foregroundContainer.addChild(sprite)

    sprite.anchor.x = 0.5
    sprite.anchor.y = 0.616

    let speed = 0.03

    sprite.zIndex = 3

    if(index == 1){
        speed = 0.04
        sprite.rotation = 0.5
    }

    app.ticker.add(() => {
        sprite.rotation += speed
    })
})

1 Ответ

0 голосов
/ 05 мая 2020

Предварительно загрузите текстуры и попробуйте использовать свойство cacheAsBitmap. Он делает снимок экранного объекта, что повышает производительность.

Вот пример: Пример нескольких текстур с cacheAsBitmap

Изменить: вы используете foreach l oop. Циклы могут быть очень сложными, возможно, используйте console.log и распечатайте переменную счетчика, чтобы узнать, сколько раз выполняется l oop.

...