Html5 Canvas vs WebGL

I started exploring the possibility to develop a game for G+ ( let’s imagine that I can start by porting a random game where you jump around on columns ).

One remaining question was to decide between WebGL and Canvas2D.
I found a blog entry on Jeff  Muizelaar site that allows anyone with a modern browser to benchmark the performance of Canvas and WebGL.
The results I got were the expected ones. They’re almost the same as what i obtained on Android between Canvas and OpenGL.

Here are the pros and cons :
WebGL :
+ Super fast and powerful rendering
+ Lots of possibilities for a 2D game, such as shading, lighting and zooming.
+ GWT API with gwt-g3d
– A bit complicated
– Low compatibility : Chrome & Firefox only
– Uncertain future due to security issues in the current specs

Canvas2D :
+ Easy to code
+ High compatibility : any HTML5 browser
+ GWT API with gwt-g2d
– Low performances : laggy with more than 50 sprites ( on non-accelerated browsers )

On my G+ post about this it has been suggested ( and on the Google Game Developer Central ) that the use of Chrome frame can solve the problem of the low compatibility of the WebGL.

In the end, the choice for WebGL was easily made.
Tales of Pocoro draws more than 200 sprites on the screen, so Canvas would never allow a descent framerate.
Those security issues and early stage specs are still a real problem, but let’s be optimistic and hope for the best.

I’ve started working with the GWT-G3D library, I’ll talk about it in my next post.

  1. #1 by monsieurmax on March 29, 2012 - 10:28 am

    Chrome 18 recently added hardware accelration for Canvas which quite boost up the performances.
    It demonstrates that Canvas is becoming a more trustable challenger for Flash

  2. #2 by d/dx(aThAr) on September 7, 2012 - 7:44 am

    Nice comparison …

  1. Le WebGL et la librairie Three.js | B-web | Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: