优化pixi网格视口 [英] Optimizing pixi grid viewport

问题描述

我正在使用pixi.js创建一个交互式网格.该网格由PIXI Graphics矩形组成.我现在正在创建一个25000个矩形的布局，浏览器很难处理它(下面的代码沙箱)

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)

这是我的设置:

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容量最大化?

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

推荐答案

我注意到有两件事会影响您提供的代码和框中的性能:

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

1. Vue-将PIXI和舞台(带有所有成千上万个矩形)保留为Vue数据可能会导致Vue分析每一帧上的所有这些对象.
2. 每个矩形的交互性:

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

^如果您对此进行注释，则您会注意到所有工作都更加顺畅.这会影响性能，因为插件可能为每个矩形创建了一些事件侦听器或某些对象-因此，当事件侦听器中的25k侦听器很明显时，就会引起注意.

^ 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).

无论如何，这是您的代码，但没有Vue，并且已注释掉了交互性:

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 :)

关于交互性:我认为您应该尝试以不同的方式进行操作:单击时，应选择单击的x和y，然后计算该位置上的矩形.我的意思是这样的: https://www.html5gamedevs.com/topic/40609-detect-click-in-children-container/

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 )

这篇关于优化pixi网格视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！