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

Question

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?

Solution 1

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 platform-independent

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.

Solution 2

The biggest advantage is the programmability of the pipeline, and the performance. For example, say you are drawing 2 boxes one above other and one is hidden, some GL implementations have scope for discarding the hidden box.

As for comparisons, Since there is no quick way of creating a table here, I just uploaded a picture of the comparison table below. Added Three.js for completeness only.

Solution 3

Speaking from experience on my own applications, graphics shaders have been the one and only reason I've required support for WebGL. Ease of use has little bearing for me since both frameworks can be abstracted away with three.js. Assuming I don't need shaders, I allow use of either framework to maximize browser/machine support.

Solution 4

What 2D capability does WebGL offer that 2D canvas does not? The biggest one IMHO is the programmable fragment shaders on the graphics hardware. For example, in WebGL, one can implement Conway's Game of Life in a shader on your 3D hardware:

http://glslsandbox.com/e#207.3

This kind of 2D display would only run on the CPU, not the GPU, with a 2D canvas. All of the computations would be implemented in JavaScript, and would not be as parallel as the GPU even with the help of web workers. This is just one example of course, all kinds of interesting 2D effects can be implemented with shaders.

Solution 5

Well, performance would be the one of the biggest reasons because when you are coding a game, it has to be fast. But there are a couple of other reasons for which you might want to choose WebGL over canvas. It offers the possibility to coding shaders, lighting and zooming, which is important if you are doing a commercial game app. Also canvas gets laggy after 50 sprites or so.

View more solutions

Comments

[Philipp]

By the way: While you can't use the 2d and the 3d context API on the same canvas, you can still combine them by using multiple canvases. WebGL can use 2d canvases as textures and 2d canvases can use WebGL canvases as sources for drawImage.

[bluenote10]

For a few more details on @Philipp's comment see this Q/A.

[Curtis]

Especially on a device like an android tablet where the CPU gets overloaded quick in javascript, the main reason to use WebGL is to transfer the rendering load onto the GPU.

[Pacerier]

@Abstract, Where are good tutorials for web GL and how many hours will it take?

[Pacerier]

Re "some GL implementations have scope for discarding the hidden box" but couldn't you detect that overridden part in JS and thus not redraw what's not needed?

[Pacerier]

Thus vs canvas, is WebGL more or less taxing on the OS?

[Pacerier]

@Xk0n, Re "fers the possibility to coding shaders, lighting and zooming", But then doesn't it become GPU-dependent?

[Pacerier]

Btw Is WebGL multithreaded? Can you have two threads drawing two parts of the screen concurrently?

[Dragan Okanovic]

@Pacerier just google it, first few hits are probably good enough. However, it will take weeks and months to get good at webgl and graphics programming in general, and years to be really good. It's not just some random "library" that you need to learn API for and that's it.

[Pacerier]

@AbstractAlgorithm, I mean if you're alr a master with programming canvas , how many hours will switching to web GL take?

[scrappedcola]

@Pacerier that depends on the dev and as Abstract already said the math skills of the dev involved. There really isn't a quantification that can be made.

[Dmytro]

I'm curious whether all canvas ends up doing webgl anyway; if it uses precompiled common use case webgl, which would be more efficient than direct webgl; or if it's not interfacing with opengl in any way unless you use webgl.

[emackey]

@Dmitry great question, and different browsers are free to take different approaches to that problem. But, no matter how they accelerate the Canvas 2D API, the Canvas 2D API itself doesn't offer programmable shaders or vertex array buffers. It's a "chatty" API (one JavaScript-to-Native call per element drawn), whereas WebGL's API allows bulk data loading and GPU-based custom processing.

[Kent Weigel]

I think that the answer is "yes and no," since web browsers are inherently single-threaded, so copying the data to be rendered to the GPU is not multi-threaded. But, you are using the massive parallelization of the graphics card once the shaders start rendering, which is essentially drawing to multiple parts of the screen at once. Please correct me if I'm wrong, anyone.

[Frank]

You can still zoom with setTransform in a 2D canvas context. I've been having a hard time with texture bleeding in 2D canvas when scaling from sprite sheets, however, which is why I'm turning to WebGL. I saw a tutorial that stops the nearest neighbor sampling from going outside of the source rect, which should fix my bleeding edge problem.

[gman]

This is untrue. Chrome has run WebGL in software on systems without GPU for the last 8 years.

[user185953]

Quoting the page: "The performance of SwiftShader should be good enough to view simple 3D content". "Working", but unusable for games. @gman

[gman]

Correct, but this "WebGL is unusable without a GPU" is false. It might be slow but it is not unusable. if it was unusable without a GPU there would be no reason for a solution to use it without a GPU to even exist in Chrome.

[Crashalot]

thanks for this comparison. any updates in 2021, or do you believe this analysis still holds?

[Crashalot]

thanks for sharing. do you think this analysis is still true in 2021?

[Crashalot]

any updates on this opinion for 2021 (besides widespread compatibility for webgl now)? thanks for sharing!

[Dragan Okanovic]

@Crashalot It holds up pretty well. Canvas is still an easier API for mostly CPU drawing, and webGL/webGPU is a fully exposed GPU drawing API - you can control it more and make it faster, but you pay the price in dev time probably and required knowledge.

[Pangamma]

After 50? Yikes, I was about to do tens of thousands of tiles...

[Alexis Tyler]

@Xk0nSid can you please expand on "Also canvas gets laggy after 50 sprites or so." do you have a link to back this up?