Canvas or DOM for HTML5 games?

[Shaun Dreclin]

So I've read a few articles suggesting that DOM is actually a faster way to render 2D games, but I was unable to find anything recent. Is this still the case?

I'm wanting to make an isometric sprite-based game ;o

[rich]

DOM is perfectly fine, up to a point. Where that point is depends a lot on what you're doing, and what platform you're doing it on. But I would go so far as to add that even with the best-case DOM implementation it will still never beat the speed you can get from WebGL, especially when a large quantity of sprites are involved (like you'd have in an isometric game)

[mattstyles]

I'd second Rich's points.

 

DOM is absolutely fine, in some cases easier, but for anything requiring any real rendering performance, canvas (webgl) is going to be your go-to.

[d13]

Does anyone know if there are any recent Bunnymarks comparing: DOM, Virtual DOM, Canvas and WebGL?

Browsers have been doing some crazy optimizations for super-fast DOM rendering lately.

[Shaun Dreclin]

Is WebGL different than rendering sprites to the canvas? I heard canvas was slower because you first have to create a DOM image, wait for it to load, then add it to the canvas. Does WebGL skip that step? Or am I misunderstanding something here?

[mattstyles]

webGL is totally different, it uses the GPU rather than the CPU, for most modern devices this is far quicker with the additional benefit of freeing up the CPU for other tasks. Rendering is slightly different as the GPU is simply a method of drawing triangles very very fast, but you get (pretty much) the same access to the GPU as native programs do. In theory (and probably in practise, I just dont have the stats to back it up) nothing should be able to come close to rendering on the GPU at the moment.

[rich]

Is WebGL different than rendering sprites to the canvas? I heard canvas was slower because you first have to create a DOM image, wait for it to load, then add it to the canvas. Does WebGL skip that step? Or am I misunderstanding something here?

 

You have to create a DOM image element and wait for it to load no matter which rendering method you use (dom, canvas, webgl), so that step is identical between them all.

[WombatTurkey]

As others  have said: DOM for the user interface (unless you're doing something really fancy) and WebGL / Canvas for game rendering.  Infact, a lot of my action rpg game was used via dom. Animations, tweening / movement, game rendering with sprites, player's equipped items, aura's, etc.  I got to the point where if my friend joined my game and he started to move around.. ugh not happening  . DOM just cannot handle it all.  I learned the hard-way, but I didn't know I was going to get involved and make all this stuff in the first place. I just used dom as a skeleton template basically, kind of freaking glad I did now that I think about it.  And converting everything to Phaser has been heaven . Atleast that's how I try to view it, haha.    

 

Check out play.treasurearena.com their dom interface molds perfectly within their game.  

 

For your isometric dilemma, I recommend this to give you a head start. Cannot get this much simpler really: https://developer.tizen.org/community/tip-tech/using-easystar.js-implement-pathfinding-tizen-game-projects

[WombatTurkey]

DOM is perfectly fine, up to a point. Where that point is depends a lot on what you're doing, and what platform you're doing it on. But I would go so far as to add that even with the best-case DOM implementation it will still never beat the speed you can get from WebGL, especially when a large quantity of sprites are involved (like you'd have in an isometric game)

 

I would like to see a Maplestory type game 100% created via the DOM.  I think it's quite possible actually. Just not sure how many player's you could get on your screen.. haha  

[BenWiley4000]

The idea of creating a complex game, even 2D, using the DOM sounds absurd to me. The DOM is designed with overlapping content as an exception, not a rule, and I would think the inability to place images using precise coordinates would slow down the development process. Does anyone have an example of a reasonably elaborate game that uses the DOM to render?

[d13]

I would think the inability to place images using precise coordinates would slow down the development process.

You can use absolute positioning - all modern browsers do this with perfect consistency.

[Shaun Dreclin]

Is canvas not handled by the GPU? I'm a little confused on the distinction between canvas and webgl here. Doesn't webgl draw to the canvas?

[rich]

WebGL does indeed render to a Canvas element. When devs here talk about 'canvas vs. webgl' however they are referring to the rendering method used. 'canvas' meaning you are rendering images using native canvas functions like drawImage. While these are still GPU optimised where possible, it's still not as performant as WebGL. The advantage is that 'canvas' rendering has a software fallback should the video card not be supported by WebGL, or should the browser itself not support WebGL (like IE < 10 for example).

 

When we talk about 'webgl' we're talking about using WebGL functions to render to a canvas dom element. This requires a dedicated GPU and must be supported by your browser. Using techniques like sprite batching and shaders you can literally render tens to hundreds of thousands of sprites in WebGL, something impossible from DOM or 'canvas'.

[Shaun Dreclin]

Ahh alright I've done some more reading and stuff, 2D WebGL seems to be the best way to go for me. Is it worth learning webgl though? or should I use something like pixi?

I don't want to be bogged down by massive libraries I don't fully understand, but I also don't want to go re-inventing the wheel when it involves complicated systems.

 

is pixi fast? will I run into any issues using it in a commercial application?

[mattstyles]

Pixi is super quick and there has been a lot of work to optimise its speed, not to mention it is also very easy to use. It is a large library but considering its functionality its raw filesize is very good. I made a quick test using a few stackgl libraries and could only get to about 80% of the pure rendering speed of pixi (best case) and didnt make that much saving on filesize (of course, I didnt optimise much just for a test and you could get quicker).

 

Phaser (currently) uses pixi and also solves many other problems you might face during your games' development.

 

Is it worth learning webgl though?

 

 

That is totally up to you and depends on how deep you want to get into it. Learning webgl is fun, but challenging, you'll need your maths to be top-notch and you'll probably have to change your thinking a little bit if you're going to get into writing shaders. The good thing is though that you can take that knowledge with you, writing shaders on the web is identical to writing them elsewhere (webgl uses a slightly older version/variant of opengl).

[BenWiley4000]

Ahh alright I've done some more reading and stuff, 2D WebGL seems to be the best way to go for me. Is it worth learning webgl though? or should I use something like pixi?

I don't want to be bogged down by massive libraries I don't fully understand, but I also don't want to go re-inventing the wheel when it involves complicated systems.

 

is pixi fast? will I run into any issues using it in a commercial application?

All free HTML5 renderers/engines that I know of, including Pixi and Phaser, are MIT licensed. This means that you can do pretty much literally whatever you want with them with no consequences. If you end up distributing the game as a downloadable, make sure the licenses for your libraries are included -- that's my interpretation of the MIT license, since it says you should include a copy of the license with substantial distributions of the code. http://whatis.techtarget.com/definition/MIT-License-X11-license-or-MIT-X-license

[Skratti]

How good is the support of webGL at the moment? 

I am using the Canvas element (without any engine), and I am starting to get performance issues, as well as graphic problems with stacked semi-transparent images. 

Since the draw-routine isn't overly complex, I am pondering if it would be advisable to switch to webGL, and if it is a feasible task.

[mattstyles]

Pretty much ubiquitous, if you're having perf issues IE9 isnt going to be a blocker for you.

 

http://caniuse.com/#search=webgl

[Skratti]

Thanks @mattstyles

 

 

And of course stackoverflow has already the right answer. Seems like it was a good idea to first use the canvas, and to only switch to webgl if the need arises.

 

http://stackoverflow.com/questions/12758915/canvas-2d-context-or-webgl-for-2d-game

 

Now I have to decide which framework to use. For a start, Three.js and pixi.js are the ones I will take a look at...

[mattstyles]

 

Now I have to decide which framework to use. For a start, Three.js and pixi.js are the ones I will take a look at...

 

There's lots out there...

 

If you're serious about learning webgl (i.e. shaders) then check out stackgl. It can be fairly intimidating at first but there is a wealth of knowledge there and even if you ultimately choose to use a more 'comforting' framework/library those lessons go with you. shader-school and webgl-workshop are both excellent bits of kit (getting them running isnt straight-forward any more though).

[WombatTurkey]

How do you even learn WebGL? The code syntax and language is atrocious in my honest opinion. Isn't it better to just use a 3rd party app that creates the shaders and 'converts it' to be used within WebGL? Or am I wishful thinking? Just thinking, wouldn't that be a lot easier while you can actually work on html 5 canvas, networking, and other stuff instead of investing all your time learning WebGL. I guess it depends what your position is for the game you're working on (Artist, Developer, etc)

[chg]

How do you even learn WebGL? The code syntax and language is atrocious in my honest opinion. Isn't it better to just use a 3rd party app that creates the shaders and 'converts it' to be used within WebGL? Or am I wishful thinking?

It's pretty much OpenGL ES 2.0 I think. There's not that much to know if you are familar with OpenGL I suspect, there's a quick reference card here: https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

[WombatTurkey]

It's pretty much OpenGL ES 2.0 I think. There's not that much to know if you are familar with OpenGL I suspect, there's a quick reference card here: https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

 

Never actually seen an easy readable chart like that, I bookmarked it. Busy on the network side right now, but will look at this again once I get to more advance skill effects to see what I can come up with. (Highly doubt I can make anything special...)

[mattstyles]

How do you even learn WebGL? The code syntax and language is atrocious in my honest opinion. Isn't it better to just use a 3rd party app that creates the shaders and 'converts it' to be used within WebGL? Or am I wishful thinking? Just thinking, wouldn't that be a lot easier while you can actually work on html 5 canvas, networking, and other stuff instead of investing all your time learning WebGL. I guess it depends what your position is for the game you're working on (Artist, Developer, etc)

 

You can use off-the-shelf shaders, shadertoy has a number, glsl.io has some interesting effects going on, glslb.in has more shaders to compose, plus, of course, most rendering libraries will implement their own as well. Composition is great but learning the nuts and bolts is great too.

 

All depends how much you want to push the envelope of what is possible I guess.

[Skratti]

Just found this awesome three.js website containing about 200 running examples and their sourcecode!

 

http://threejs.org/examples

 

I will probably use part of this example:

http://threejs.org/examples/#canvas_camera_orthographic2

with the settings "Top view" and "orthografic", and using sprites instead of boxes.

 

Later, if I find the time, all other 3D stuff (like proper models, perspective, light source, shaders) can be added without having to switch again to a new framework/technique.