所以我在 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
})
})
最佳答案
预加载您的纹理并尝试使用 cacheAsBitmap 属性。它拍摄显示对象的快照,从而提高性能。
这是一个例子:multiple textures example with cacheAsBitmap
编辑:您正在使用 foreach 循环。循环可能非常棘手,可以使用 console.log 并打印一个计数器变量来查看循环执行了多少次。
关于javascript - PixiJS 消耗大量 GPU,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61604411/