Pixi.js crashes on rendering a 700 by 700 grid - webgl

Question

I want to display a 700 by 700 grid. Pixi.js crashes on rendering it. The same code works for 100 by 100 grid.
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();
}
}
The code draws a 700 by 700 grid.
This is what the output looks like when I try it for a 100 by 100 grid:
Any tips on how to fix the crash?

Answer 1

I was able to improve performance by using GraphicsGeometry object to create the Graphics object. The relevant code is shown below.
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);
}
}
In the code above, each square is rendered as a generic GraphicsGeometry object. This object is used to create the Graphics object and is placed on specific positions.