Why you should learn WebGL

WebGL lets you render interactive 3D graphics without using plug-ins. It works with any platform that supports OpenGL, and it's so popular right now that you don't have to look far at all to find some awesome examples. From the realistic – and somewhat disturbing – 3D human heads to versions of games like Assassins Creed, WebGL is popping up all over the place.

To make it even better, WebGL is supported in all major browsers including Internet Explorer from version 11, and it works on various mobile platforms including iOS from version 8.

Given that we already have many options for graphical display technologies -- including CSS, Canvas, SVG and plug-in based choices like Silverlight and Flash -- you may be asking yourself how WebGL fits in and whether or not you need to learn it. So let's take a quick look at why you should.

WebGL's advantages

WebGL has three distinct advantages:

1. Tasks. It can perform tasks that are just not possible with other technologies – or, more accurately, would be difficult to accomplish (good luck producing complex lighting and reflective material effects in SVG!).
2. Performance. 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.
3. Shaders. WebGL applications can utilize mini programs known as “shaders” to produce complex visual effects. A simple shader might produce a sepia coloring effect, while a more complex implementation might simulate water or flames. For more on this, check out Shadertoy.

Older developers may note that there have been a number of previous attempts at getting 3D into the browser (e.g. VRML), which have since disappeared into obscurity. Here are some of the reasons why I think WebGL is here to stay:

• It's based on OpenGL, a tried and tested framework for developing 3D applications.
• WebGL's release coincides, and is arguably made possible, with browser performance advances, increasing connection speeds and something of a JavaScript renaissance.
• DOM integration; WebGL is displayed in a canvas element and can be combined with other web technologies.
• It has the ability to run applications on many different platforms and browsers.
• It's an open specification; it isn't controlled by a single vendor.
• It has low barrier to entry to 3D programming.

OK great, tell me more

As briefly mentioned above, WebGL is a JavaScript abstraction over OpenGL that utilizes the Canvas element to display content. It's based on a subset of OpenGL called OpenGL ES 2, which is aimed at mobile devices (ES stands for embedded systems). WebGL comes from experiments started by Vladimir Vukicevic at Mozilla. The specification is managed by the non-profit Khronos group and it contains contributions from Apple, Google, Mozilla, Opera and many smaller organizations and individuals.

Here are some instances when you should use WebGL:

• Data visualization. Some types of data are more useful when viewed in 3D space, this includes things like medical MRI scans or engineering survey data.
• Games. This is probably the most obvious (check this out). It should also be noted that games development framework Unity will offer the ability to export to WebGL in the future.
• Interactive page components. This allows users to explore your product from every angle.

WebGL can also offer an interesting challenge to any developer, and it gives you the satisfaction of having something visual to demonstrate. (Your friends will probably be more impressed by a 3D spinning cube than that new Angular directive you created.)

But, is it versatile?

Yes and no. While WebGL works wonders for 3D graphics, there are times when solutions like Canvas and SVG will be a better choice. This includes:

• Simple 2D games and applications. Although you can certainly develop 2D applications using WebGL, Canvas maybe a better choice given that it has more support and many 2D focused libraries.
• Search. Currently, WebGL content is not understood by search engines, so SVG may be a better option. Though, you could utilize hybrid approaches to benefit from search engine indexing.
• DOM integration. WebGL can integrate with the rest of the page,  but contains no way to attach event handlers to page elements like SVG does (PhysiJs library can help with this).
• Older browsers. WebGL is not ideal when your user-base has older browsers/low spec machines.
• Highly secure environments. WebGL could pose security issues. There have been a few proof of concepts using cross origin images used as textures, but they've since been fixed. WebGL is run through a number of abstractions, but in high security environments, WebGL is typically disabled.

How do I get started writing an application?

You can learn WebGL on its own, but I suggest first understanding what's happening behind the scenes. WebGL is sufficiently different from what you're probably used to working with, and you could end up spending  a lot of time learning the basics, but accomplishing very little.

First, I recommend looking at one of the libraries. The various WebGL libraries make it easier to perform operations such as object manipulation, math/geometry calculations, loading of models, collision detection, functions and integration with the mouse and keyboard.

Currently, the two dominant WebGL libraries are three.js and babylon.js. I suspect the hardest bit of 3d programming is learning the concepts and math, rather than the APIs themselves. So, if you've mastered one framework, it shouldn't be too tricky to move to another.

Takeaway

WebGL can allow you to perform tasks that are simply not possible with other technologies. This makes it suitable for cross-platform complex visualizations and games. My hope is that you'll take a look at WebGL, even if it's just for fun.

If you want to get started right away, check out my Pluralsight introductory course WebGL and Three.js fundamentals. There's also a great book on the topic called "3d Game Programming for Kids" – don't be turned off by the title; it's great for us adults, too.