Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any reason for using WebGL instead of 2D Canvas for 2D games/apps?

Is there any reason, except performance, for using WebGL instead of 2D-Canvas for 2D games/apps?

In other word what 2D functionalities are offered by WebGL which are not possible to achieve easily with 2D-Canvas?

like image 884
Ali Shakiba Avatar asked Feb 06 '14 12:02

Ali Shakiba


People also ask

Should I use canvas or WebGL?

Talking of the speed factor, Canvas slows down to its components. WebGL is greater than Canvas in terms of speed. Generally preferred for 2D rendering and works related. More preferred for 3d though it can also work on 2D.

Why is WebGL faster than canvas?

Canvas is slower because it's generic and therefore is hard to optimize to the same level that you can optimize WebGL.

Should I use WebGL?

WebGL is blindingly fast and fully utilizes hardware acceleration, making it suitable for games or complex visualizations. Although other options can benefit from hardware acceleration, WebGL is written with performance in mind and should perform better than other options in many cases.

Does canvas use WebGL?

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins.


1 Answers

Looking at this question from another side:
how does a developer choose one technology over another?

  • integrates better in their already built system
  • is easier to use
  • is faster
  • has more capabilities or better suits their needs
  • cost
  • more platfrom-independant

So I'll discuss the differences between canvas and webGL APIs regarding these qualities.


Both canvas and webGL are JavaScript APIs. They are pretty much the same regarding integration (binding). They are both supported by a number of libraries that could speed up your coding. Different libraries give you different ways to organize your code, so library choice dictates how your drawing APIs are structured, but it's still pretty much the same thing (how the rest of the code binds together with it). If you use library, the ease of writing code depends on the library itself.

If you write code from zero, the canvas API is much easier to learn and understand. It requires minimal math knowledge, and development is fast and straightforward.

Working with the WebGL API requires strong math skills and a full understanding of the rendering pipeline. People with these skills are harder to find, production is slower (due to the size and complexity of such a code base), and therefore it costs more.

WebGL is faster and it has more capabilities. No doubt about that. It's a native 3D API that gives you full access to the rendering pipeline, code and effects are executed faster and are more 'tweakable'. With webGL there really is no limit.

Both canvas and webGL are html5 goodies. Usually the devices that support one will support and the other.

So, to sum up:

  • merging the drawing API code and the rest (integration): similar
  • ease of use:
    • (with library) canvas = webGL
    • (from scratch) webGL << canvas
  • speed: webGL > canvas
  • capabilities: webGL > canvas
  • cost: webGL is much more expensive
  • platform: very similar

Hope this helps.

P. S. Open for discussion.

like image 79
Dragan Okanovic Avatar answered Sep 19 '22 04:09

Dragan Okanovic