But then all of your boxes are the same. Which is not what this benchmark is.
We can conclude that Pixi.js is probably faster for drawing sprites, but is definitely slower than Two.js at drawing randomly sized rectangles.
I pushed a fix, the way it was drawing randomly sized rectangles was an unfair comparison. It is much faster than Two.js now (tried it at 10000 rectangles too) and initialises much faster also.
I made a PR to fix it and its much better: https://github.com/slaylines/canvas-engines-comparison/pull/...
It is still not the optimum way to do it in pixi.js but it at least matches the other examples now.
The golden rule is the less you have to clear() and redraw the insides of the graphics the faster it's going to be as pixi.js has to convert your draw commands to triangles to pass to WebGL, if you're just moving the position of something it can use the already calculated triangles and just add an offset before drawing whereas previously you were generating new triangles and hardbaking the position into the triangles each frame.
Because you move each rectangle at a different rate I used a separate graphics instance so that we could move them without having to redraw them.
I've been using this exact test for years now to judge a phone/tablet before buying/recommending - devices with the exact same SoC can differ wildly in performance.
Nowadays any phone that can't display 20k bunnies at 20FPS likely has:
1. An underpowered GPU.
2. Badly designed cooling.
3. A screen with a too high resolution.
Of course there are many more thorough and appropriate benchmarks, but this one doesn't require you to install anything and will give you an answer before you're approached by the store staff inquiring what is it that you're trying to do with the merchandise.
https://www.shadertoy.com/view/Xds3zN
Something with lots of work per pixel to complement Bunnymark's lots of pixels.
Given my aging Samsung Galaxy S6 averages about 30FPS for 20k bunnies in Firefox mobile, your criteria might actually be too lax...
Edit: And in Chrome on the same phone I'm in the mid 30's FPS for 50k bunnies.
To give an example: the Sony Xperia Z2 tablet appeared to be decent, because it had the - back then - state of the art Snapdragon 801 SoC.
I think I got less than 10k bunnies on it - no idea why(no power saving mode or anything), but it was a deal breaker for me.
(That’s not a statement on how impressive this is, just a “oh that’s how it’s done.”)
One thing that I didn't realize when I first saw it was that the demo is able to render so many sprites because it's doing the simplest possible thing - rendering just a few textures. If you render a bunch of different sprites with different textures, you'll get a big FPS hit.
https://www.goodboydigital.com/pixijs/bunnymark/
I checked the source briefly, and the problem is that the source draws every single rectangle manually every single tick. That's very inefficient. Just draw a rectangle to a Texture once, and create a bunch of sprites using that Texture. Pixi should be able to handle at least 10x the amount of rectangles if you do this.