PIXI.js 对大量交互圈子的性能优化

Question

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

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

Answer 1

PIXI.ParticleContainer:

ParticleContainer 类是 Container 的一个非常快速的版本 专为速度而构建，因此在您需要大量精灵时使用 粒子。

ParticleContainer 的权衡是最先进的 功能将不起作用。 ParticleContainer 实现了基本的 对象变换（位置、比例、旋转）和一些高级 色调等功能（从 v4.5.6 开始）。

其他更高级的功能，如遮罩、儿童、过滤器等 不适用于此批次中的精灵。

这个example 展示了 10,000 个精灵。但是，需要对您的示例进行一些重大更改：

• 将所有圆圈/标签放入单个 ParticleContainer。
• 如果 ParticleContainer 内不支持形状/文本，则必须将圆形/文本预渲染到纹理上。 （无论如何，这将比总是绘制要快。）
• 如果在 ParticleContainer 中无法嵌套容器，则必须以不同方式执行交互式调整大小逻辑。