Page 1 of 1

Pixi.JS vs my own code

Posted: Wed Nov 02, 2016 3:39 pm
by a_bertrand
For those not knowing it Pixi.JS is a really nice 2D library which uses WebGL for speeding up the rendering:

http://www.pixijs.com/

The demos are quite impressive and it offers really nice to have possibilities, like special effects, resize, rotation and more.

However, after checking carefully and doing some tests, I ended up with the following:
A simple test with Pixi:
https://www.dotworldmaker.com/pixi/

And now a test with my full engine (press the right key to scroll):
https://www.dotworldmaker.com/play.html ... ySpeedTest

With Pixi I get around 45 FPS and with my engine 60 FPS.

You may think that my code do less than Pixi... well yes and no, my code do render at each frame, even for the same image and it has to deal with the whole game engine, so it should be actually slower. Doesn't seems the case.

What do I do with Pixi? I have a single "container" which contains all the tile sprites, then change the position of the container. When the container is <= -32 I move all the items within the container, remove those which are out, and create new one. That would make more less how it would work with a map scrolling. I would need to add yet a lot more functions to replicate the full engine, however it should be mostly ok for the test.

I don't say I'm an expert of Pixi but it seems to me that I cannot switch to it for my purpose. It has it's pro to not switch => I have full control of how things are going, and I don't need to change my render function. However it seems I don't have so much room for improvements, where I was hoping to speed up a lot the rendering. Too bad ;)

Any experience with Pixi?

Re: Pixi.JS vs my own code

Posted: Wed Nov 02, 2016 11:20 pm
by hallsofvallhalla
Yeah thats pretty amazing, I get 7.4fps with Pixe and about 50 with yours. Very nice man!

Re: Pixi.JS vs my own code

Posted: Thu Nov 03, 2016 12:45 am
by Jackolantern
I am actually getting 60 FPS with Pixi and ~50 FPS with yours. I was doing some things in the background so I can't guarantee that is 100% accurate. But I think I could probably say they are about dead even for me.

Re: Pixi.JS vs my own code

Posted: Thu Nov 03, 2016 4:26 am
by a_bertrand
Thanks for the tests. As said I was expecting much better results for pixi.js than I actually get, but hey, that's not all bad I can concentrate myself on other areas instead of replacing my render engine.

Re: Pixi.JS vs my own code

Posted: Sat Nov 05, 2016 12:34 am
by Jackolantern
The benefits of Pixi aren't just in performance. It has nice WebGL shader effects built-in, and those are a pain to create yourself unless you are familiar with HLSL. It has a bundle of other effects and features of course. Another awesome feature it has is that everything is implemented in both WebGL and Canvas. It will favor WebGL and fall back to Canvas if it needs to. If I had to go with a major off-the-shelf implementation versus rolling my own, I would go with the existing solution just so I don't have to create those features myself as my project grows. Even if you don't need tinting, WebGL shaders or other advanced features, it would be nice to know they are there if you need them in the future. And a canvas fallback out-of-the-box is pretty great.

Re: Pixi.JS vs my own code

Posted: Sat Nov 05, 2016 1:44 am
by a_bertrand
I would tend to agree, but from the tests the performances are simply not acceptable. For example on the laptop of the artist pixi drops at 6FPS vs 60FPS for my code. I would say it depends heavily on the graphic card and of course laptops tends to have very weak solutions.

Without talking about the time needed to change the code, I simply would have an hard time justifying switching over currently. For a new project then maybe it make sense, but again it is really important to check out the performances before going too far.

Re: Pixi.JS vs my own code

Posted: Sat Nov 05, 2016 1:57 am
by Jackolantern
Out of curiosity, is it running in WebGL or Canvas mode when it drops to 6 FPS? Is your renderer using WebGL or Canvas?

Re: Pixi.JS vs my own code

Posted: Sat Nov 05, 2016 3:16 am
by a_bertrand
pixi was running WebGL when dropping to 6FPS, mine is running only canvas.

Re: Pixi.JS vs my own code

Posted: Sat Nov 05, 2016 5:52 pm
by Jackolantern
That is really, really strange. WebGL should almost always have at least equal performance to canvas, if not better. But, there are still some poor implementations out there of WebGL, though.

That is really a red flag for me, personally, though. Pixi chose WebGL as the renderer even when WebGL is running horribly. Since Pixi powers Phaser and Lazer, that could affect a lot of games.

Re: Pixi.JS vs my own code

Posted: Sat Nov 05, 2016 7:13 pm
by a_bertrand
Yes it could, but usually people use it with relatively a low number of sprites, where I had to have a sprite per tile which quickly end up with an high number.