Canvas mode performing better than webgl!

[ForgeableSum]

I've done some performance tests in my game today using Chrome and was surprised by the results.  In webgl mode, I start to see a performance drop around 900 static Phaser.Images, regardless of anti-alias or preserveFrameBuffer settings. In canvas mode, however, I don't start to see a performance drop until about 1500 static images (on a 4000 x 4000-pixel map).

 

These results seem to go against the conventional wisdom that webgl is faster for both 2d and 3d games. Thoughts?

[sombriks]

cool, can you share your testcase and hardware settings?

[Skeptron]

This is not really a surprise. On Firefox WebGL performs very poorly. Many devs already force Canvas for their games. Sounds like WebGL isn't fully ready yet, sadly.

[ForgeableSum]

cool, can you share your testcase and hardware settings?

I'll add these later. 

 

This is not really a surprise. On Firefox WebGL performs very poorly. Many devs already force Canvas for their games. Sounds like WebGL isn't fully ready yet, sadly.

It's well-known for FF to absolutely suck with webgl but Chrome is a different story. I thought Chrome had the whole webgl thing down. 

 

At any rate, I don't think these test results confirm webgl is underperforming. After all, webgl is a 3D library and canvas is 2D. Technically, Canvas should perform better for 2D games. 

 

So, one might just as easily conclude that canvas has improved to the point that it's more optimal when working with 2D than 3D, not that webgl sucks.  

[drhayes]

3d acceleration helps 2d as well; it's all triangles regardless of their orientation to the user.

 

Figuring out why GL is slow is a bit of a black art. The first place I'd look is your texture sizes; are they powers of two? When you profile your game is it spending a lot of time in render or in update?

[ForgeableSum]

3d acceleration helps 2d as well; it's all triangles regardless of their orientation to the user.

 

Figuring out why GL is slow is a bit of a black art. The first place I'd look is your texture sizes; are they powers of two? When you profile your game is it spending a lot of time in render or in update?

My textures are PNGs with alpha layers: approximately 170 x 230 and 60KB. Thing is, these are trees with variations. So when you place a tree, a random variation (3 or 4 different kinds) is chosen but they are all approximately the same size/dimension.  

[ForgeableSum]

Okay folks, I have some interesting new test results. I tried the same test but this time made the sprites animate a total of 10 or so frames at 15 fps. In this scenario, webgl way outperformed canvas. The results:

 

canvas, physics-enabled = 180 animating sprites (before a drop in framerate)

canvas, no physics = 300  animating sprites

 

webgl, physics-enabled = 300  animating sprites

webgl, no physics = 600 animating sprites

 

Someone requested that I post my system specs. I honestly don't think that's relevant for browser-based games. I think pretty much any computer built after 2003 will be able to handle any canvas-based game. The limitation isn't in the hardware but in how much resources the browser is allowed to use. I know that webgl utilizes the graphic card, but for games with simple 2D animations, I don't think that's relevant. This is all my personal theory of course. Someone please correct me if I'm wrong about that. It's definitely a good discussions topic: does hardware matter so much for canvas games? At any rate, here are the specs on my scream machine:

 

AMD FX-4100 quad core, 3.60 Ghz

NVDIA GeForce GTX 560

8 GB Ram

Windows 7

Monitor Size (approx camera.view size): 1920 x 1080

 

 

EDIT: I just tested FPS without using game.debug.text (using Chrome's built-in FPS meter) and was able to get up to 700 animating sprites with webgl. Game.debug.text has a dramatic effect on webgl - no surprise there. 

[wayfinder]

There are definitely still GPU bottlenecks when you use lots and lots of big textures and lots and lots of draw calls. 

[JakeCake]

Using textureatlases also benifits WebGL more than canvas.