时间戳

首页 > 解决方案 > PixiJS 消耗大量 GPU

javascript - PixiJS 消耗大量 GPU

问题描述

所以我在 Pixi 有一个场景，里面有大约 7-8 个纹理。一对夫妇只是循环简单的变换（例如像风扇一样旋转等），有些是静态的。

根本没有与它交互（它在一个单独的窗口中），它的存在让我的 16BG i7 MacBook Pro 像疯了一样发热，它占用了 50% 的 CPU。

这是我如何设置其中一个旋转动画的示例。里面有什么可疑的东西吗？我不敢相信它消耗了多少能量，我即将扔掉我所有的 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
    })
})

标签： javascriptpixi.js

解决方案

预加载纹理并尝试使用 cacheAsBitmap 属性。它拍摄显示对象的快照，从而获得更好的性能。

这里是一个例子：multiple textures example with cacheAsBitmap

编辑：您正在使用 foreach 循环。循环可能非常棘手，可能使用 console.log 并打印一个计数器变量来查看循环执行了多少次。

推荐阅读