针对大量互动圈​​子的PIXI.js性能优化

Question

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

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

Answer 1

PIXI.ParticleContainer：

  

ParticleContainer类是Container的非常快速的版本   专为提高速度而打造，因此在需要大量精灵或   颗粒。

     

ParticleContainer的权衡是最先进的   功能将不起作用。 ParticleContainer实现了基本的   对象变换（位置，比例，旋转）和一些高级   诸如tint之类的功能（自v4.5.6起）。

     

其他更高级的功能，例如遮罩，子项，过滤器等   不适用于此批次中的子画面。

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

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