6 ms·
Something is definitely up with this benchmark - PixiJS can handle over 60k objects at once in this benchmark without even dipping below 60FPS: https://www.goo
by johnfn 7y ago
Something is definitely up with this benchmark - PixiJS can handle over 60k objects at once in this benchmark without even dipping below 60FPS:
https://www.goodboydigital.com/pixijs/bunnymark/ 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.
- jansan 7y agoThat demo is insane. Din't know the browser was capable of this.
- munchbunny 7y agoIt’s WebGL underneath, which explains the ability to render really fast. You’re not drawing individual shapes so much as shoving data structures into the graphics card. (That’s not a statement on how impressive this is, just a “oh that’s how it’s done.”)
- Tade0 7y agoAll thanks to WebGL. 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.
- kbenson 7y ago> Nowadays any phone that can't display 20k bunnies at 20FPS likely has 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.
- Tade0 7y agoBack in 2014 when I started 20k was an impressive number. 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.
- Lerc 7y agoI use that as one of two tests. The other being https://www.shadertoy.com/view/Xds3zN https://www.shadertoy.com/view/Xds3zN Something with lots of work per pixel to complement Bunnymark's lots of pixels.
- johnfn 7y agoAgreed. 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.
- xwdv 7y agoHoly fuck, you just sold me on using PixiJS if I should ever need to do something with canvases.
- Aeolun 7y ago150k bunnies at 60fps on an iPhone 8. Impressive.
- bufferoverflow 7y ago> just draw a rectangle to a Texture once, and create a bunch of sprites using that Texture. 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.
- Aeolun 7y agoNot on my phone it isn’t. PixiJS is the only library that stays at 60fps, Two is at 30fps and Paper is at 15fps.
- georeith 7y agobut 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.
- aasasd 7y agoAt your link, on my phone, performance dips when new bunnies appear, then gets back up in a few seconds. Which is weird, since afaiu objects should be handled in exactly the same way throughout their lifetime.
- colordrops 7y agoI see the same on the desktop. It's probably some procedural code that is updating a data structure as bunnies are added. Just speculation - I haven't looked at the code.
- georeith 7y agoThe comparison was unfair it was only moving the positions of the rectangles each frame for paper.js, and two.js but for pixi.js it was redrawing them from scratch which means it had to retesselate everything every frame. I made a PR to fix it and its much better: https://github.com/slaylines/canvas-engines-comparison/pull/3 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.
- mkalygin 7y agoI'm not familiar with PixiJS in any way other than knowing that it's a game engine. What is the difference between doing single PIXI.Graphics for the whole canvas vs PIXI.Graphics for every rectangle? Pros / cons?
- georeith 7y agoI see you saw the response on the issue, for anyone else this was the response: 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.