我是Pixi的新手,正在考虑利用它来通过大量数据点和标签进行数据可视化。为了实验/开始,我创建了一个快速的应用程序,该应用程序渲染了100个带有标签的随机圆,并在mouseover / mouseout上包含了一些基本的交互性。我听说webgl可以让我渲染成千上万个节点而没有问题,但是如果我尝试将计数(在代码的第65行)设置为1000,我的浏览器几乎准备崩溃了-忘记了交互性。我的猜测是我需要开始考虑优化,但是作为一个新手,我真的不知道从哪里开始。有什么建议吗?
示例:https://www.pixiplayground.com/#/edit/WngviYj6fbBpNjqdqET5P
最佳答案
PIXI.ParticleContainer:
ParticleContainer类是Container的非常快速的版本
专为提高速度而打造,因此在需要大量精灵或
粒子。
ParticleContainer的权衡是最先进的
功能将不起作用。 ParticleContainer实现了基本的
对象变换(位置,比例,旋转)和一些高级
色彩等功能(自v4.5.6起)。
其他更高级的功能,例如遮罩,子项,过滤器等
不适用于此批处理中的sprite。
此example演示10,000个Sprite。但是,您需要对示例进行一些重大更改:
将所有圆/标签放入单个ParticleContainer。
如果ParticleContainer内部不支持形状/文本,则必须将圆形/文本预渲染到纹理上。 (无论如何,这将比总是绘图要快。)
如果在ParticleContainer中不可能嵌套容器,则交互式调整大小逻辑将必须进行不同的处理。