WebGL, like HTML5, is an agreed upon standard that browser software will support. It is based on OpenGL, which is the most widely adopted graphics standard in computing. This means that instead of relying on plug-ins, modern browsers can support rich content and advanced features without installing additional software. Specifically, WebGL allows for hardware accelerated graphics in an HTML5 canvas.
Video games spend most of their time rendering. WebGL provides the opportunity for your browser to access more of your computer’s hardware, which dramatically increases performance. In addition to rendering more efficiently, developers have many more features at their disposal, and it streamlines processes like memory management. WebGL is what bridges the quality gap of HTML5 with other plug-in options like Flash and Unity. (Unity utilized a ‘web player’ plug-in until version 5.4 released in March 2016, at which point its web exporter switched to WebGL).
In the first article I wrote analyzing HTML5 (without WebGL), I addressed some key graphical limitations including texture memory, low draw count, and the necessity to limit alpha renders. In most dimensions – for instance, the number of unique draws, WebGL is four to ten times faster than HTML5. Other dimensions, like alpha rendering and texture swaps, are fast enough to be considered free. With the increased rendering capacity, HTML5 + WebGL projects can produce larger, higher quality games that are faster than HTML5 games without WebGL.
There is still a steep learning curve to getting started in HTML5, and WebGL complicates it further. WebGL requires mastering new rendering code libraries. There are over a dozen library options. Three.js is very popular. At Filament we have been using PIXI. Selecting the right rendering code library is an important decision because it affects the entire art pipeline of the project.
The only downside of WebGL is market share. As developers, we have to wait for browsers to adopt the standard for users to update their browsers, and just like with other HTML5 standards – deal with partial support. Full support for WebGL is only about 60% of the internet, compared to over 90% for HTML5. There are many websites that make it easy to tell if your machine supports WebGL. As HTML5 and WebGL are the next generation of browser software we can expect those percentages to continue to grow.
We have written several articles about how to evaluate features and technology for your project. If you’re considering WebGL, you first to need to be sure that HTML5 is a good fit for your project. As I have mentioned before, one of the biggest reasons to choose HTML5 is to reach as many people as possible, so picking a feature only supported by modern browsers could reduce your project’s impact. Two years ago when there was much less support, Rovio had two versions of Angry Birds for Chrome, one with and one without WebGL. I’m not a believer that better graphics make for better games, but I have worked for many clients that want a key differentiator from their competition. Using the latest technology platform, particularly one that supports better graphics, can really make your project stand out.