what are the graphical limits WebGL and Three.js can handle gracefully?

Question

I've always been curious about this and have not seen too many examples of what pushes the boundaries.

In terms of graphics, about how far can canvas go? Is there a decent measure of how many polygons it can handle before it starts acting shakey? Perhaps a game that it can be compared to?

Answer 1

Canvas vs. WebGL

First, the term "canvas" is not synonymous with "WebGL".

The following initializer returns a CanvasRenderingContext2D

canvas.getContext("2d");

While this initializer returns a WebGLRenderingContext

canvas.getContext("webgl");

The HTML5 <canvas> element serves as the container, and WebGL is one possible rendering context within that container.

More information about WebGL initialization

WebGL Limitations

As for limitations, theoretically WebGL makes use of the same video drivers that are used by any desktop OpenGL application running on your machine. With that said, it is important to note that WebGL is essentially OpenGL ES 2.0 which imparts a few limitations compared to standard OpenGL.

For more information regarding OpenGL ES, you can refer to Wikipedia

Another limitation is your capability to reach a wide audience. WebGL is only partially supported in IE 11, and not at all supported pre-11. It is also disabled by default in the current version of Opera and older versions of Safari (pre version 8.0). Source: WebGL Support .

In addition, there is the fact that WebGL applications are running a JavaScript engine, as opposed to a natively compiled desktop application. While Chrome's V8 engine has made incredible progress in improving JavaScript's performance, it is still going to be slower than a native app.

For a more in-depth analysis of these challenges and others, see: WebGL Challenges

In Summary

WebGL is based on OpenGL ES 2.0, which is a slightly feature-reduced version of OpenGL. It also runs on top of a JavaScript engine, which is slower than native code. WebGL isn't equally supported or standardized between different web browsers.

Aside from the limitations imparted by the above, WebGL is capable of rendering nearly anything your GPU can render in a desktop application with the possibility of reduced performance.

Limitations aside, Epic Games announced a partnership with Mozilla a few months ago on a project that involves porting Unreal Engine 4 to WebGL , so we certainly shouldn't rush to any conclusions about the real capabilities of WebGL just yet.