Jump to content

PixiJS slow than canvas in rendering more than 20k rectangles


warrior19
 Share

Recommended Posts

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();
}

 

Link to comment
Share on other sites

@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

site.png

insertbox.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...