Jump to content

Performance tips for drawing lots of squares


Recommended Posts

I want to draw an enormous grid of squares, where each square is colored based on perlin noise. Are there any performance tips for drawing lots of squares?

My current implementation is a simple loop over an array of coordinates that draws rectangle primitives via:


One idea I had is to create a white square asset and draw that as a sprite instead of primitives -- is drawing sprites faster than primitives?


Some background:

I originally was writing this project in p5.js, but was unhappy with the performance I was getting. I measured that it took 285 ms to draw 131072 rectangles, where I want to draw many more than that. Therefore, I am trying out pixi.js, because I am impressed by the performance claims and demonstration from this benchmark: https://benchmarks.slaylines.io/

Link to comment
Share on other sites

  • struggling-user changed the title to Performance tips for drawing lots of squares

Create sprites with a white texture (Texture.WHITE). Set their scale to wanted size. Use sprite.tint to set color. That should give you the fastest possible regular performance if you need separate sprites.

If that isn't good enough then swap into using ParticleContainer https://pixijs.download/dev/docs/PIXI.ParticleContainer.html.

And if that is not enough and you dont need to keep the objects as separate entities then you might get even better performance by having a mesh with custom shader that reads the color & returns the color at that point.

And if that is still too slow and you actually require some interaction/movement etc. from squares but not something that requires sprites then you could use webgl2 transformfeedback to render millions of squares (not sure about the actual amount, I've done transformfeedback with points and those can go up to 10 million easily.).

The different implementation options are in order from easiest to hardest.

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.

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.


  • Recently Browsing   0 members

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