javascript - PIXI.js 针对大量交互圈的性能优化

Question

我是 Pixi 的新手，正在考虑利用它来制作包含大量数据点和标签的数据可视化。为了试验/开始，我创建了一个快速应用程序，它呈现 100 个带有标签的随机圆圈，并在鼠标悬停/鼠标移出时包含一些基本的交互性。我听说 webgl 可以让我毫无问题地渲染数千个节点，但如果我尝试将计数(在代码的第 65 行)设置为 1000，我的浏览器几乎准备崩溃 - 忘记交互性。我的猜测是我需要开始研究优化，但作为新手，我真的不知道从哪里开始。有什么建议吗？

示例:https://www.pixiplayground.com/#/edit/WngviYj6fbBpNjqdqET5P

Answer 1

PIXI.ParticleContainer :

The ParticleContainer class is a really fast version of the Container built solely for speed, so use when you need a lot of sprites or particles.

The tradeoff of the ParticleContainer is that most advanced functionality will not work. ParticleContainer implements the basic object transform (position, scale, rotation) and some advanced functionality like tint (as of v4.5.6).

Other more advanced functionality like masking, children, filters, etc will not work on sprites in this batch.

这example演示 10,000 个 Sprite 。但是，需要对您的示例进行一些重大更改:

• 将所有圆圈/标签放入单个 ParticleContainer。
• 如果 ParticleContainer 中不支持形状/文本，则必须将圆圈/文本预渲染到纹理上。 (无论如何，这比总是画画要快。)
• 如果在 ParticleContainer 中不可能嵌套容器，则交互式调整大小逻辑必须以不同的方式完成。