Оптимизация области просмотра сетки пикселей - PullRequest
Новая
       91

Оптимизация области просмотра сетки пикселей

1 голос
/ 28 мая 2020

Я использую pixi. js для создания интерактивной сетки. Эта сетка состоит из прямоугольников PIXI Graphics. Сейчас я создаю макет из 25000 прямоугольников, и браузеру трудно его обработать (песочница кода ниже)

Это моя настройка: 

setup() {
                // making a 30 x 13 grid of tiles
                for (let i = 0; i < 25000; i++) {
                    let square = new PIXI.Graphics();
                    square.beginFill(0xF2F2F2);
                    square.drawRect(0, 0, 25, 25);
                    square.endFill();
                    // Opt-in to interactivity
                    square.interactive = true;
                    square.buttonMode = true;

                    square.on('pointerdown', this.onButtonDown);
                    // square.on('pointerover', this.onButtonOver);
                    // square.on('mouseout', this.onButtonOut);

                    square.x = (i % 30) * 32;
                    square.y = Math.floor(i / 30) * 32;
                    // add squares to stage
                    this.viewport.addChild(square);
                }
            }

Есть ли способ оптимизировать это или я максимально использовал возможности Canvas?

https://codesandbox.io/s/zen-flower-5q09u?file= / src / App. vue

1 Ответ

1 голос
/ 29 мая 2020

Я заметил 2 вещи, которые влияют на производительность в предоставленном вами коде и окне:

  1. Vue - сохранение PIXI и сцены (со всеми этими тысячами прямоугольников), поскольку данные Vue, вероятно, вызывают Vue для анализа всех этих объектов в каждом кадре.
  2. Интерактивность каждого прямоугольника: 
      // Opt-in to interactivity
      square.interactive = true;
      square.buttonMode = true;

^ Если вы закомментируете это, то вы заметите, что все работает более плавно. Это влияет на производительность, потому что, возможно, плагин создает несколько прослушивателей событий или что-то для каждого прямоугольника - поэтому, когда их 25k, это заметно.

Примечание: чтобы увидеть разницу, вам нужно сохранить файл в песочнице и перезагрузить страницу - перезагрузка только предварительного просмотра, похоже, не уничтожает предыдущий предварительный просмотр (так что вы все равно будете видеть медлительность).

В любом случае, вот ваш код, но без Vue и с закомментированной интерактивностью: https://codesandbox.io/s/pixi-demo-z97nz?file= / src / index. js: 2002-2105 - но с 25000 прямоугольников вместо 1000 :)

Насчет интерактивности: думаю, вам стоит попробовать сделать это по-другому: по щелчку вы должны взять x и y щелчка, а затем вычислить, какой прямоугольник находился в этой позиции. Я имею в виду что-то вроде этого: https://www.html5gamedevs.com/topic/40609-detect-click-in-children-container/

Для дальнейшей возможной оптимизации попробуйте прочитать про «пакетный рендеринг» (например: https://medium.com/swlh/inside-pixijs-batch-rendering-system-fad1b466c420)

...