Оптимизация производительности PIXI.js для большого количества интерактивных кругов - PullRequest
Новая
       28

Оптимизация производительности PIXI.js для большого количества интерактивных кругов

1 голос
/ 24 мая 2019

Я новичок в Pixi и собирался использовать его для визуализации данных с большим количеством точек данных и меток. Чтобы поэкспериментировать / начать, я создал быстрое приложение, которое отображает 100 случайных кругов с метками на них, и включил некоторую базовую интерактивность при наведении курсора мыши / мышке. Я слышал, что webgl позволит мне без проблем рендерить тысячи узлов, но если я попытаюсь установить счетчик (в строке 65 кода) равным 1000, мой браузер почти готов к сбою - забудьте об интерактивности. Я предполагаю, что мне нужно начать смотреть на оптимизацию, но, будучи новичком, я действительно не знаю, с чего начать. Любой совет?

Пример: https://www.pixiplayground.com/#/edit/WngviYj6fbBpNjqdqET5P

1 Ответ

1 голос
/ 25 мая 2019

PIXI.ParticleContainer

Класс ParticleContainer - это действительно быстрая версия Контейнера. построен исключительно для скорости, поэтому используйте, когда вам нужно много спрайтов или частицы.

Компромисс ParticleContainer - это самый продвинутый функциональность не будет работать. ParticleContainer реализует основные преобразование объекта (положение, масштаб, вращение) и некоторые дополнительные функциональность, такая как оттенок (с версии 4.5.6).

Другие, более продвинутые функции, такие как маскировка, дочерние элементы, фильтры и т. Д. не будет работать со спрайтами в этой партии.

Этот пример демонстрирует 10 000 спрайтов. Тем не менее, потребуются некоторые серьезные изменения в вашем примере:

  • Поместите все круги / метки в один контейнер ParticleContainer.
  • Если фигуры / текст не поддерживаются внутри ParticleContainer, придется предварительно визуализировать круги / текст на текстуре. (В любом случае это будет быстрее, чем всегда рисование.)
  • Если вложенные контейнеры в ParticleContainer невозможны, интерактивная логика изменения размера должна была бы выполняться иначе.
...