PixiJS slow than canvas in rendering more than 20k rectangles

[warrior19]

I am building a visualization library where I have to render more than 20k rectangles with different color and sizes. I am using a single graphics object to render all the rectangles. The canvas implementation takes only 3ms to render while the pixijs implementation takes more than 30-40ms to render. Is there any better way to draw primitives using pixi other than graphics?

Here is the pixijs code:

Quote

function createRectsUsingPixi (container, width, height, points) {
    const app = new PIXI.Application({ antialias: true, width, height });
    container.appendChild(app.view);

    const rect = new PIXI.Graphics();

    rect.beginFill(0x626262);

    for (let i = 0; i < points.length; i++) {
        const { x, y, width, height } = points[i];
        rect.drawRect(x, y, width, height));
    }


    rect.endFill();
    app.stage.addChild(rect);
}

 

And here is the canvas code:-

function createRectsUsingCanvas (container, width, height, points) {
    var canvas = document.createElement('canvas');
    var ctx = c.getContext("2d");
    container.appendChild(canvas);

    c.width = width;
    c.height = height;

    ctx.beginPath();

    points.forEach((point, i) => {
        const {x, y, width, height} = point;
        ctx.rect(x, y, width, height);
    }); 
    
    ctx.stroke();
}

 

[ivan.popelyshev]

Do you count only one frame? PixiJS graphics works fast after filled first time.

Lots of sprites with different tint in ParticleContainer should work fast too.

Also, you used stroke() in context2d. Also, I dont know if you turned off antialias in webgl context.

[warrior19]

Yes I have measured only the first render.

Also I have set antialias to true in application options

new PIXI.Application({ antialias: true, width, height });

 

Edited September 18, 2020 by warrior19

[warrior19]

@ivan.popelyshev

Can you give an example code where varying sizes and colors of 20k or more rectangles are rendered using sprites?

Edited September 18, 2020 by warrior19

[ivan.popelyshev]

Make it false.

Yes, there was example but i dont have time to dig where was it. Just code this thing and test it, its not hard.

[Jsp]

@ivan.popelyshev Hi,

I have 2D level editor that simulates a 2D-sandbox game. Since it's for personal use

 

he features i am trying to implement are:

-adding 2nd(or more) pages to the "inventory" (where i select all the game assets) (Annotated in the attached image)

site is the image I am using and insert is the image I am trying to do please help me