仅在交互时更新 pixi.js 中的帧

【问题标题】：Updating frames in pixi.js on interaction only仅在交互时更新 pixi.js 中的帧
【发布时间】：2021-12-10 18:28:43
【问题描述】：

我正在创建一个 pixi.js 6.0.4 应用程序并在较慢的计算机上发现性能问题。 CPU 和/或 GPU 很高。

如果我在 Chrome 开发工具中配置 miro.com，它似乎使用了 pixi，我注意到 FPS 只有在我实际与应用程序交互时才会出现峰值。例如

如果我分析我的应用，FPS 会一直很高。例如

我认为这可能会对性能产生很大影响。

我正在使用 angular 和 ngZone，创建应用程序如下：

this.ngZone.runOutsideAngular(() => {
this.app = new PIXI.Application({
    backgroundColor: 0xefefef,
    autoDensity: true
});
this.SetCanvasSize();
});

请问如何将 pixi.js 设置为仅更新交互帧？

谢谢。

【问题讨论】：

标签： pixi.js

【解决方案1】：

您正在使用 PIXI.Application，它是“Renderer”、“Ticker”和“Stage”的包装器 - 请参阅：https://github.com/pixijs/pixijs/blob/dev/packages/app/src/Application.ts#L35

这意味着它将创建 Ticker，它将每秒运行大约 60 次 Renderer.render 方法（使用 requestAnimationFrame）。这可能是导致 CPU/GPU 使用的原因。

也许您应该尝试创建自定义游戏循环：

https://github.com/pixijs/pixijs/wiki/v5-Custom-Application-GameLoop#custom-gameloop

然后尝试减少renderer.render(stage); 的频率 - 所以不要每秒调用它 60 次，而是可能 20 次？

并且/或者您可以修改它以调用 renderer.render(stage); 而不是在每一帧上，但只有在某些条件为真时 - 例如“在交互时”（如您所描述的那样）。

【讨论】：

非常感谢。我会尝试这些东西。非常感谢。