Performance tips for drawing lots of squares

[struggling-user]

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:

Graphics.drawRect()

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/

[Exca]

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.