Why you should use WebGL

Feb. 02, 2013
comments

There is (among graphics enthusiasts) a lot of debate what API/version of something to use with a bunch of hotly contested alternatives. I would like to convince you to give WebGL a try, and this blog post explains why. It will also quickly summarize a few things people usually ask about WebGL. There are many gotchas (like with anything) as well, and I am aware of a lot more of them than you can imagine. I will perhaps talk about them in another blog post.

A Japanese translation can be found here courtesy of Akihiro Oyamada

Contents

What is WebGL?

WebGL is an implementation of OpenGL ES 2.0 for the web. You program it in Javascript (which is not Java).

Does this run without OpenGL?

Yes WebGL can run without OpenGL. There is a compatibility library called Angle which translates WebGL Shaders to either:

  • Desktop OpenGL GLSL (on Linux and OSX)
  • Mobile OpenGL ES 2.0 ESSL (on android and blackberry)
  • Direct3D 9 HLSL (on windows)

WebGL API calls are also translated:

  • Desktop OpenGL (each browser supplies his own wrapper for that)
  • Mobile OpenGL ES 2.0 (just a pipe trough)
  • Direct3D 9 API (Angle provides a wrapper for that)

Does it run on my favorite browser?

Browsers that support WebGL:

  • Desktop Chrome
  • Desktop Firefox
  • Desktop Safari (on OSX, need to flip a flag)
  • Desktop Opera
  • Mobile Firefox for Android
  • Mobile Chrome Beta for Android (need to flip a flag)
  • Mobile Opera for Android
  • Firefox OS builtin browser
  • Blackberry builtin browser

Browsers that do not support WebGL:

  • Internet Explorer
  • Desktop Safari on Windows
  • Mobile Safari (iOS, iPhone, iPad etc.)
  • Opera for iOS
  • Builtin Android browser

Does it run on my favorite platform?

If a platform works or not depends a bit on driver versions, OS versions and other factors. This is known as a Whitelist/Blacklist.

There are however platforms where WebGL will not run no matter what:

  • Windows on ARM (surface etc.)
  • Windows Phones
  • Windows 8 Modern UI
  • iOS (iPhone, iPad etc.)

This is because Microsoft and Apple have not implemented WebGL and they dissallow other browsers for these platforms. You might find this perplexing since you can find other browsers in these devices App-Stores. However these browsers are just different decorations for Internet Explorer or mobile Safari engines, and unless a browser can make his own engine, WebGL cannot be supported.

So how many people is that?

That is not easy to say. However I have introduced a WebGL statistics platform to answer that question. As of February 2nd 2013 the numbers are:

Data is assembled from over 13 million visits on over 530 participating sites over the last 60 days.

Note that in the last 30 days, Mobile support increased by 2% up from 4% for mobiles. That's huge progress (50% increase)! Mostly that's thanks to the Chrome Beta for android that finally supports WebGL per flag.

It is the easiest 3D API to use

If you write 3D applications you might know all the boilerplate setup and code you need to write just so you can start to do anything. People like John Carmack have complained about this. Well lucky for you, WebGL is not (much) like that.

Get a Canvas:

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

Get a context:

var gl = canvas.getContext('experimental-webgl');

You're done. No messing with makefiles and includes and windows and GLX/GLU/etc. The browser does all that for you. You're now ready to start calling the API.

There are plenty of resources like Learning WebGL with a lot of tutorials and the GLSL Sandbox is a great place to see lots of shader examples.

It is the best tested 3D API

There are many problems when programming hardware accelerated graphics. One of them is the myriad of driver issues and incompatibilities.

Conformance Test Suite

In order to root out all those problems, WebGL has a comprehensive (and growing) conformance suite with thousands of tests ensuring WebGL behaves as it should. Anybody can run these tests and report problems to the browser vendors when it fails. As far as I know WebGL is the only 3D API that has such a suite. Not only will it make WebGL better, it will also help OpenGL, OpenGL ES and even Direct3D since it is now also used by hardware vendors like Nvidia, AMD and Apple to improve their drivers.

Performance regression tests

Sometimes it is possible that a driver update, or a change in the WebGL implementation results in worse performance. To detect these problems, there is also a performance regression test suite. Again, as far as I know WebGL is the only 3D API in posession of such a test suite.

It is the best documented 3D API

Unlike other 3D APIs and frameworks, this is a very open standard.

And a lot of unofficial resources such as

It is extensible

Since WebGL inherited its extension mechanism from OpenGL, it is the only web based 3D technology that can make use of advanced features before a new big point release. And can offer them in legacy versions of the API if the next point release is not yet supported. Currently implemented are:

  • Single and half floating point textures
  • Standard derivatives functions in shaders
  • Vertex Array Objects (VAOs)
  • S3TC Compressed textures
  • Depth Textures
  • Anisotropic texture filtering

More extensions are being proposed, drafted and eventually implemented and everybody hopes we will get Multi-Render Targets and instanced drawing soon.

I don't want to use WebGL why do I care?

WebGL is helping to make browsers, javascript and graphics drivers better.

  • Developers need a lot more speed out of JavaScript, so JavaScript has been improved by browser vendors.
  • Browsers have gotten better Garbage collection partly as a result of WebGL.
  • Since this is a Web technology, everybody has been working very hard to push graphics hardware vendors and OEMs for better drivers.

Click a link, get a customer

Every non Web technology relies on a series of steps for the user to perform before he can launch your application. For instance for classic desktop applications it looks like this:

  • Find download link
  • Save download as
  • Open download folder
  • Click installer
  • Click yes, yes, yes, enter path, more yes
  • Wait
  • Close installer
  • Find installed application
  • Launch Application
  • Wait for auto-update
  • Enjoy application

It is a bit smoother (but not all that much) for App-Store based applications. But what about WebGL applications?

  • Find launch link
  • Click
  • Enjoy application

Is there any money in it?

I think there is. You can find just shy of 50 jobs on the WebGL job board at the time of writing. I have been making a good chunk of my income with WebGL the last 2 years. It's a bit like the question, is there any money in the Web. Yes, lots, figure it out. May I also remind everybody that Minecraft raked in over $90 mio in 2012, and it is a Java applet originally (that is a far more limited environment than we have with Javascript by now).

How does it compare to ...

Of course we have to do the compare against other solutions, so here goes:

Unity 3D

This is an engine more than an API. Most people don't have the Unity3D Web-Player installed, and it doesn't run on mobiles anyway. If an engine is your thing, and you don't care about the web as much, you should try it. I like APIs and the Web a lot, so I don't really use it.

Note that there are ways to bring Unity 3D to the web (and to mobiles).

  • It can be compiled to Google Chrome only NaCL (obvious drawbacks). But that still isn't integrative with the host of web technologies in that none of the various frameworks, libraries etc. available for HTML/CSS/JS will be any use to you.
  • It can be compiled to run on mobiles and be distributed in App-Stores, but that isn't really the same as putting it on a webpage and have it "click -> play".

Flash Stage 3D

Flash uses a non-standard API (neither like Direct3D nor like OpenGL) that seems to be fairly poorly documented (at least the documentation I could find was sparse at best). An unfortunate choice is also flashs shader format, which is practically programming assembler. WebGL allows you to program in a convenient high level C like language. Of course Flash also doesn't run on mobiles (the old story). But from a Web-Developers point of view, it also does not integrate with any of the web technologies. You also need to precompile all your shaders, and compiling shaders online is not possible.

However you can compile flash to run on mobiles with some of the half-dozen or so services/technologies that repackage your flash app to a native app and let it distribute on an App-Store. But again, like Unity 3D, that's not quite the same as putting it on a webpage and have it "click -> play" (one of the biggest traditional strengths of flash).

Silverlight 3D

Microsoft has not given Silverlight much love, much less Silverlight 3D. Aparts from the usual inconveniences (doesn't run on mobiles, needs a plugin, poorly documented etc.) you also need to precompile your shaders. Of course you need Visual Studio and .Net and whatever to even start writing anything in Silverlight. The biggest hurdle however is that Microsoft makes users jump trough half a dozen obscure dialogs to enable 3D for every single silverlight application that wants to use 3D. Last I heard it's practically impossible to do, so this isn't really a choice.

Direct3D

Doesn't run on the Web. Doesn't run on mobiles. Doesn't run on Apple. It's a non standardized API.

OpenGL

Serious driver issues, doesn't run on the Web. Doesn't run on mobiles.

OpenGL ES

Doesn't run on Desktops. Runs on a lot of mobiles, but doesn't run on the Web.

The Future

WebGL/HTML5 etc. isn't perfect. There are lots of issues like with any sufficiently complex technology. But I sincerely believe that WebGL is the best shot we have to bring 3D everywhere. The Web has always been about write once, run everywhere. I have been enjoying WebGL a lot, and I hope you can enjoy it too.

Thanks

I know I can be a grumpy and offensive guy at times, but this is to say a little thanks to all the unsung heroes who make WebGL possible and better. Kenneth Russel, Gregg Tavares, Brandon Jones, Jeff Gilbert, Benoit Jacob, Paul Irish, and everybody else, you do a fabulous job!