Pixi.JS vs my own code

The place to ask questions about 3DStudio Max, Blender, Pro Motion, open source items, libraries, ect..
Post Reply
User avatar
a_bertrand
Posts: 1537
Joined: Mon Feb 25, 2013 1:46 pm

Pixi.JS vs my own code

Post 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?
Creator of Dot World Maker
Mad programmer and annoying composer
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: Pixi.JS vs my own code

Post by hallsofvallhalla »

Yeah thats pretty amazing, I get 7.4fps with Pixe and about 50 with yours. Very nice man!
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Pixi.JS vs my own code

Post 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.
The indelible lord of tl;dr
User avatar
a_bertrand
Posts: 1537
Joined: Mon Feb 25, 2013 1:46 pm

Re: Pixi.JS vs my own code

Post 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.
Creator of Dot World Maker
Mad programmer and annoying composer
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Pixi.JS vs my own code

Post 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.
The indelible lord of tl;dr
User avatar
a_bertrand
Posts: 1537
Joined: Mon Feb 25, 2013 1:46 pm

Re: Pixi.JS vs my own code

Post 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.
Creator of Dot World Maker
Mad programmer and annoying composer
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Pixi.JS vs my own code

Post 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?
The indelible lord of tl;dr
User avatar
a_bertrand
Posts: 1537
Joined: Mon Feb 25, 2013 1:46 pm

Re: Pixi.JS vs my own code

Post by a_bertrand »

pixi was running WebGL when dropping to 6FPS, mine is running only canvas.
Creator of Dot World Maker
Mad programmer and annoying composer
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Pixi.JS vs my own code

Post 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.
The indelible lord of tl;dr
User avatar
a_bertrand
Posts: 1537
Joined: Mon Feb 25, 2013 1:46 pm

Re: Pixi.JS vs my own code

Post 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.
Creator of Dot World Maker
Mad programmer and annoying composer
Post Reply

Return to “Programs/Assets/Libs/Open Source/Ect...”