优化 pixi 网格视口

Question

我正在使用 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

Answer 1

我注意到您提供的代码盒中影响性能的两件事：

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）