Optimizing pixi grid viewport

问题

I am using pixi.js to create an interactive grid. This grid is composed of PIXI Graphics rectangles. I am now creating a layout of 25000 rectangles and the browser is having a hard time to process it (code sandbox below)

This is my setup :

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);
                }
            }

Is there a way to optimize this or have I maxed out Canvas capacities ?

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

回答1:

I noticed 2 things that impact performance in the codesandbox you provided:

Vue - keeping PIXI and stage (with all those thousands of rectangles) as Vue data probably causes Vue to analyze all those objects on each frame.
The interactivity of each rectangle:

      // Opt-in to interactivity
      square.interactive = true;
      square.buttonMode = true;

^ If you comment this out then you will notice that all works smoother. This is affecting performance because maybe plugin is creating some events listeners or something for each rectangle - so when its 25k of them then it is noticable.

Note: to see difference you need to save file in sandbox and reload page - reloading only the preview there doesnt seem to destroy the previous preview (so you will still see slowness).

Anyway, here is your code but without Vue and with commented out interactivity: https://codesandbox.io/s/pixi-demo-z97nz?file=/src/index.js:2002-2105 - but with 25000 rectangles instead of 1000 :)

About the interactivity: i think you should try to do it in different way: on click you should take the x and y of click and then calculate which rectangle was on that position. I mean something like that: https://www.html5gamedevs.com/topic/40609-detect-click-in-children-container/

For further possible optimization try reading about "batch rendering" (for example: https://medium.com/swlh/inside-pixijs-batch-rendering-system-fad1b466c420 )

来源：https://stackoverflow.com/questions/62073066/optimizing-pixi-grid-viewport

标签

canvas

pixi.js