Hacker News Reader

Comment by johnfn | Hacker News Reader

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/

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.

View on HN

> 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.

Not on my phone it isn’t. PixiJS is the only library that stays at 60fps, Two is at 30fps and Paper is at 15fps.

Same here (Samsung Note 8)

I'm on a very slow phone but even here PixiJS is usable @ 10fps while the others barely touch 2fps.

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.

The 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/...

It is still not the optimum way to do it in pixi.js but it at least matches the other examples now.

I'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?

I 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.

At 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.

I 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.

Holy fuck, you just sold me on using PixiJS if I should ever need to do something with canvases.

150k bunnies at 60fps on an iPhone 8. Impressive.

That demo is insane. Din't know the browser was capable of this.

It’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.”)

All 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.

> 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.

Back 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.

I use that as one of two tests. The other being

https://www.shadertoy.com/view/Xds3zN

Something with lots of work per pixel to complement Bunnymark's lots of pixels.

Agreed.

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.

Reply on news.ycombinator.com