Pixi.js 在渲染 700 x 700 网格时崩溃

Question

我想显示 700 x 700 的网格。 Pixi.js 渲染时崩溃。相同的代码适用于 100 x 100 网格。

var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

 const PE_COLOR = 0xe2b692; // 0xf5912f;
 const PE_WIDTH = 20;
 const PE_HEIGHT = 20;
 const VIZ_AREA_VIEWPORT_SIZE = 750;
 const VIZ_AREA_FABRIC_VIEWPORT_INIT_RATIO = 2;
 const VIZ_AREA_VIEWPORT_MAX_SCALE = 20;
 const VIZ_AREA_VIEWPORT_MIN_SCALE = 0.25;
 const VIZ_AREA_WIDTH_GAP = 0.5;
 const VIZ_AREA_HEIGHT_GAP = 0.5;

const ROUTER_OFFSET = 6;
const ROUTER_RADIUS = 3;
const PE_BORDER_COLOR = 0x0f0f0f;
const ROUTER_COLOR = 0x1d58a6; //0x1F1F1F;
const CE_COLOR = 0x1d5866;
const CE_OFFSET = 12;
const CE_SIZE = 4;

const width = 700;
const height = 700;

const box = new PIXI.Graphics();
app.stage.addChild(box);

for (let i = 0; i < width; ++i) {
    for (let j = 0; j < height; ++j) {
        const x = i * PE_WIDTH + i * VIZ_AREA_WIDTH_GAP;
        const y = j * PE_HEIGHT + j * VIZ_AREA_HEIGHT_GAP;
        box.lineStyle(1, PE_BORDER_COLOR, 0.4);
        box.beginFill(PE_COLOR, 0.8);
        box.drawRoundedRect(x, y, PE_WIDTH, PE_HEIGHT, 2);
        box.endFill();

        box.lineStyle(1, ROUTER_COLOR, 0.2);
        box.beginFill(ROUTER_COLOR, 0.4);
        box.drawCircle(x + ROUTER_OFFSET, y + ROUTER_OFFSET, ROUTER_RADIUS);
        box.endFill();

        box.lineStyle(1, CE_COLOR, 0.2);
        box.beginFill(CE_COLOR, 0.4);
        box.drawRect(x + CE_OFFSET, y + CE_OFFSET, CE_SIZE, CE_SIZE);
        box.endFill();
    }
}

代码绘制了一个 700 x 700 的网格。

这是我尝试使用 100 x 100 网格时的输出结果：

关于如何修复崩溃的任何提示？

Answer 1

我能够通过使用 GraphicsGeometry 对象创建 Graphics 对象来提高性能。相关代码如下所示。

const box = new PIXI.Graphics();
box.lineStyle(1, PE_BORDER_COLOR, 0.4);
box.beginFill(PE_COLOR, 0.8);
box.drawRoundedRect(0, 0, PE_WIDTH, PE_HEIGHT, 2);
box.endFill();

box.lineStyle(1, ROUTER_COLOR, 0.2);
box.beginFill(ROUTER_COLOR, 0.4);
box.drawCircle(ROUTER_OFFSET, ROUTER_OFFSET, ROUTER_RADIUS);
box.endFill();

box.lineStyle(1, CE_COLOR, 0.2);
box.beginFill(CE_COLOR, 0.4);
box.drawRect(CE_OFFSET, CE_OFFSET, CE_SIZE, CE_SIZE);
box.endFill();


for (let i = 0; i < width; ++i) {
    for (let j = 0; j < height; ++j) {
        const x = i * PE_WIDTH + i * VIZ_AREA_WIDTH_GAP;
        const y = j * PE_HEIGHT + j * VIZ_AREA_HEIGHT_GAP;
        const boxG = new PIXI.Graphics(box.geometry);
        boxG.x = x;
        boxG.y = y;
        app.stage.addChild(boxG);
    }
}

在上面的代码中，每个正方形都呈现为通用的 GraphicsGeometry 对象。该对象用于创建Graphics对象，放置在特定位置。

Pixi.js 在渲染 700 x 700 网格时崩溃

Pixi.js crashes on rendering a 700 by 700 grid

webgl

pixi.js