优化 pixi 网格视口

Question

我正在使用 pixi.js 创建交互式网格。该网格由 PIXI 图形矩形组成。我现在正在创建 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

Answer 1

我注意到有两件事会影响您提供的 codesandbox 中的性能：

Vue - 将 PIXI 和舞台（以及所有那些数千个矩形）保留为 Vue 数据可能会导致 Vue 分析每一帧上的所有这些对象。
每个矩形的交互性：

      // 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/

为了进一步优化，请尝试阅读 "batch rendering"（例如：https://medium.com/swlh/inside-pixijs-batch-rendering-system-fad1b466c420）

优化 pixi 网格视口

Optimizing pixi grid viewport

canvas

pixi.js