Jump to content

Canvas mode performing better than webgl!


ForgeableSum
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

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. 
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...