How much faster is phaser3?

[jjwallace]

Hi guys, I have built a bunch of games in Phaser2 and now i am working with PixiJs since we can render 20,000 + entities on the screen and animated them.  PixiJS lacks a lot of features.  

So, How fast is Phaser3?  Does it render as many objects as PixiJS 4?

Anyone have experience using all 3?

[Antriel]

On WebGL, unless the engine does something really silly, it mostly comes down to fillrate (amount of pixels you push), and amount of data the CPU needs to prepare. That depends on the rendering pipeline. Usually it's much more worth it to send a lot of data, so it is flexible. The synthetic benchmarks that just try to spawn as much as possible don't really tell much about real-world performance.

In either case, here's example from phaser that uses special object optimized for performance (doesn't send as much data to the gpu, but can't rotate/scale the objects). For me it doesn't slow down at all at 20k.
http://labs.phaser.io/view.html?src=src\game objects\blitter\benchmark test 3.js

I don't have experience with pixi, but knowing how Phaser 3 works, I would be quite surprised if pixi was substantially faster in anything. I would expect them to be similar, or pixi slightly worse. Of course Phaser being a whole game framework, there is some extra overhead, but definitely nothing that could cause problems.

[jjwallace]

Hmm, that looks pretty fast, maybe i will try out building a prototype.

Do sprites off the screen also get rendered or are these just data until they enter into the fillrate? (i am probably not saying that right)

[Antriel]

They get rendered, although there is a way to cull them if you want (not always faster though, as it needs to figure out which are in bounds, but you can always make your own culling that would be faster if possible).

No idea about fillrate of off-screen stuff. They do get send to GPU for rendering, but the actual fragments won't get rendered if they are outside, so I would reckon it won't affect fillrate. But I'm just guessing.

[themoonrat]

@jjwallace I have a new project setup at https://github.com/themoonrat/webgl-benchmark that lets you compare different scene setups in different versions of pixi and phaser

[jjwallace]

Wow, Really neat stuff, good job @themoonrat ! ~

[ozdy]

Cool @themoonrat

For 3000 complex graphics objects, I get:

Pixi: 60 fps

Phaser 3: 20-30 fps

Phaser 2: 5 fps

Any idea why's that?

[SlowCrow]

I am also curious. Is really Pixi that much faster than Phaser 3, or the difference will not be that significant in full game?

[mattstyles]

This is where benches are really tricky to get correct.

For complex graphics I get Phaser 3 nearly twice as fast as Pixi (and Phaser 2 couldn't handle 10k at all). Pixi 5 was also way way slower than Pixi dev.

 

[Antriel]

Synthetic benches aren't very useful when it comes to big numbers. It all comes down to how the pipeline is setup, which is usually based on real-world uses and not optimizing for benchmarks.

[themoonrat]

3 hours ago, mattstyles said:

This is where benches are really tricky to get correct.

For complex graphics I get Phaser 3 nearly twice as fast as Pixi (and Phaser 2 couldn't handle 10k at all). Pixi 5 was also way way slower than Pixi dev.

 

Pixi 5 alpha I should remove really. Webgl Anti aliasing is accidentally always on, so kills performance. Dev is v5 with that fixed!

[themoonrat]

7 hours ago, ozdy said:

Cool @themoonrat

For 3000 complex graphics objects, I get:

Pixi: 60 fps

Phaser 3: 20-30 fps

Phaser 2: 5 fps

Any idea why's that?

V5 of Pixi specifically adds better batching for complex graphics, and allowing batching when swapping from graphics to sprites. 

[themoonrat]

1 hour ago, Antriel said:

Synthetic benches aren't very useful when it comes to big numbers. It all comes down to how the pipeline is setup, which is usually based on real-world uses and not optimizing for benchmarks.

True. I'd love someone to create a PR that would create a more realistic scene in all renderers to use as a comparison.

As it is, each one has strengths in different areas. The only consistent thing I've found is that when adding new objects to a scene, phaser 3 is noticeably a lot slower. Dunno why ?

[Antriel]

11 hours ago, themoonrat said:

The only consistent thing I've found is that when adding new objects to a scene, phaser 3 is noticeably a lot slower. Dunno why ?

Could be the automatic depth sorting, implemented by heap sort iirc. Not entirely sure it's faster than insertion sort (at least at smaller counts I would expect insertion to be faster, but there it probably doesn't matter), but in either case, whenever anything is added to scene, it's pushed to the end and the child array is marked to be sorted.

Then again, every other engine has to do something like that at some point too.