WebGL renderer performing worse than Canvas

[psygnus]

Hello everyone, i am new here, and would like to ask my first question!

 

I have made a 2d canvas game using mainly CreateJS, and GSAP. For various reasons, i would like to be use Firefox as a browser, but i have had some performance issues that couldn't surpass.

So i decided to check a webgl based rendering library such as pixiJS. I have made a quick test page to see if i could get smooth tweening using webgl rendering vs canvas based rendering.

I would expect better framerates using webgl, but the truth is that i get lower framerates and really jerky motion.

All the articles and examples i've read about the past couple of days were saying the exact opposite. 

So what am i really missing?

Is it Firefox's problem?

Is it that i use GSAP for tweening?

Is my example code missing anything essential?

 

You could check my quick demo here :

 

http://jsfiddle.net/thvphuub/3/

 

And i would suggest to run the two versions in fullscreen to see the FPS yourself using the two following links :

Using canvas : 

https://jsfiddle.net/thvphuub/2/embedded/result/

Using webgl : 

https://jsfiddle.net/thvphuub/3/embedded/result/

 

Actually the above runs quite smoothly using canvas on Firefox...

:-S

 

Any insight would be great.

Thanks in advance!

[agmcleod]

FPS is around 50 when it starts up, then hits 60.

 

It seems when the page loads it's a tad slow, then speeds up once all the objects are created. I think the reason for this is because it has to load the image. Typically you do this in a loading state, show a progress bar or loading screen of some kind.

[fire7side]

I get 56 - 60 with firefox.  60 to 61 in canvas, so slightly better.  That's in the quick demo.  I get jerky behaviour off and on with my game and I think it's the browser using memory or something, I don't know.  It's sporadic and it's in every engine I've tried.  Webgl is a little disappointing for me.  Still, it can only get better with time.

[psygnus]

I suppose it would be wise to stick with canvas for the time being, and switch to webgl when it gets more mature.

@agmcleod i get 45-55 on firefox and it is not getting better. The image is preloaded so it is not the case.

@fire7side My experiments are quite the same here. But the big dissapointment is Firefox really. Even with canvas i can't get smooth tweening in a consistent way.

From my experiments :

1) chrome (both webgl and canvas work quite great)

2) internet explorer (good canvas not webgl)

3) firfeox (inconsistent results all over)

Really appreciate the feedback! Thanks

[mattstyles]

Firefox seems to be having some inconsistencies hitting up the GPU, with, possibly, the problem being worse on a Mac than on Windows (there are a couple of threads and issues regarding FF webGL rendering).

 

It seems like FF needs to 'warm-up', once it gets over whatever hiccup it is encountering then its smooth and great.

 

Having said that, I see a slight fps hit with canvas every time I reload your test page, whereas initially webGL is worse, after a while it sorts itself out and I get a solid 60 over page refreshes. I'm on a Macbook Air at the moment, with a particularly cruddy GPU. Infact, actually in JSFiddle (your first link), the canvas renderer is significantly worse than webGL.

 

Chrome is rock-steady with either renderer. Safari the same (although I've seen dreadful perf elsewhere, but this suggests its not pixi slowing it down in that case).

[psygnus]

Thanks @mattstyles for the feedback!

 

I should have mentioned that i am testing on a Windows 8.1 machine with the latest Firefox.

My GPU is a motherboard embedded Radeon HD 4290, but i've seen equally inconsistent results with better GPUs. 

 

 

Infact, actually in JSFiddle (your first link), the canvas renderer is significantly worse than webGL.

 

Offtopic :
This must relate to another weird issue i've been having, in all browsers and platforms. Performance is inconsistent when you change the browsers window size, and when you are on fullscreen mode.

I've seen all kinds of strange behaviour and never understood what is going on behind the scenes.. Even without scaling canvas/stage, on resize.

 

I would also like some feedback on that, but since i hadn't have the change of researching that through the forums, i should probably check there first and start new thread afterwards.

[Darker]

I tried it, it was all right. Try to make more complicated animation so that we can see a difference.

[psygnus]

I tried it, it was all right. Try to make more complicated animation so that we can see a difference.

Wouldn't that be pointless since it already has a difference on some systems, regardless of the simplicity of the example?

Thank you for your input anyway!

 

[psygnus]

Did anyone else using chrome notice a difference in FPS when when resizing the application window and when running fullscreen?

For example if i run the canvas rendered example on my PC i get 44-48 FPS when the application window size streches to fit the whole screen (1920x1080 60hz).

But if i hit F11 to switch to full screen mode, i get 60 really smooth Frames per second.
This is not related to PIXI i have noticed it on other libraries and examples as well.

 

If someone using Chrome 46.0.2490.80m, on Windows 8.1 64bit could confirm that too, i would be very thankful.

Of course if anyone has any idea on how to eliminate that...!

 

Thanks again.

[ivan.popelyshev]

Im on chrome 46 on windows 8.1 . Your demo eats 10% CPU in fullscreen and stats.js eats another 8%. 

If you dont have stable FPS, that means you have youtube or something else in different tab. Sometimes its uTorrent. Sometimes eclipse/webstorm/whatever IDE you use.

[psygnus]

Im on chrome 46 on windows 8.1 . Your demo eats 10% CPU in fullscreen and stats.js eats another 8%. 

If you dont have stable FPS, that means you have youtube or something else in different tab. Sometimes its uTorrent. Sometimes eclipse/webstorm/whatever IDE you use.

 

Sorry i think you might have misunderstood me.

I also get perfect performance in fullscreen, the windowed mode is for some reason less smooth, running at about 45-50 FPS.

Really weird actually because the size of the canvas is not changing.

 

FWIW, i think it might be related to Chrome's composited layer borders, an issue described here :

http://stackoverflow.com/a/27432559/2025271

 

Anyway, if @ivan.popelyshev you could try it also in windowed mode i would be grateful!