Pneuma Design

WebGL: The Future of 3D Web Applications

By Keaton Bishop-Marx Published 30 April 2016

In a world where Flash is all but dead, a new technology rises to take its place—WebGL. Part JavaScript, part OpenGL ES 2.0, this JavaScript API is expected to pave the way for visually outstanding experiences on the web of the future.

What is WebGL?

WebGL is the emerging standard for displaying 2D and 3D graphics on the web. Leveraging HTML5 technologies (namely JavaScript), WebGL allows developers to create visually rich experiences that are otherwise impractical or impossible to achieve on the web.

The WebGL standard was created by the Khronos Group in 2011 as a low-level, web-based deviant of their flagship technology known as OpenGL ES 2.0. The intent of OpenGL ES 2.0 was to implement a single API that would allow developers to create and optimize rich graphics for embedded systems found on devices ranging from desktop computers to gaming consoles to mobile phones, leaning on the side of 3D graphics processing.

WebGL is giving web developers this kind power across the wide spectrum of internet-connected devices.

WebGL Now

Unfortunately, WebGL is still (at the time of this writing) a young and severely underused technology. However, the reasons for its lack of use are legitimate—neither every device, nor every internet connection, is created equal.

WebGL Browser Support

[INSERT IFRAME HERE]

At the time of writing, WebGL has mixed support: It’s supported fully by the Webkit desktop browsers and Edge, partially by Firefox and Webkit mobile browsers, and unsupported in IE10 and below.

WebGL Security

WebGL is subject to security threats. Since WebGL is a low-level API, some browsers, such as Chromium, disable WebGL by default, allowing users to enable it manually if they so choose. Other browsers, like IE8 – IE10, intentionally don’t support WebGL at all for this reason. Microsoft later approved this technology, integrating WebGL support in IE11; one can only assume that WebGL’s security has significantly improved since its release.

WebGL Size Constraints

The biggest feasibility issue surrounding WebGL is its inherent characteristic of having to manage large, 3D model files. These 3D models have to be optimized extensively, considering everything from polygon reduction to texture compression to combining shaders. Even so, these files are still often too large to be feasibly downloaded over a mobile internet connection.

One proposed solution to the issue of large files is the concept of streaming data. Just as online entertainment providers stream their videos, games and other WebGL applications may soon be obtained via streaming.

The Future of WebGL

While it’s hard to predict the future of any given technology, WebGL has a strong track record thus far—being adopted initially by Mozilla and Google, and later by Microsoft—but we still have yet to see its true form; games and other 3D applications on the web.

By dissecting some existing examples of WebGL, we can begin to understand what purposes the technology will serve in years to come.

WebGL Games

At the time of this writing, WebGL games are on the cusp of existence. Engines such as the Unity Engine and the Unreal Engine are beginning to implement beta WebGL exporters, paving the way for a new era of online gaming. Some examples of the games published with WebGL are quite astounding, including these three:

Dead Trigger 2

[INSERT IMAGE]

This game was one of the first, most well-executed mobile games on the android marketplace. Having humble beginnings in the mobile realm, this game was the perfect candidate for WebGL publication.

Assassin’s Creed: Pirates

[INSERT IMAGE]

While this game demo doesn’t have many of the core components that the series is known for, the graphics alone make it a worthwhile endeavor. I foresee many more major developers like Ubisoft creating minigames like this one for their title games.

The Hobbit: A Journey Through Middle Earth

[INSERT IMAGE]

Of the games on this list, this one has the most potential as a marketing tool. The strategy utilized here—creating a simple game to coincide with the release of a movie—shows the potential of interactive marketing materials that can be used across a variety of industries.

Bridging the Gap

We’ve seen the present, we’ve seen the future. The million-dollar question is how do we get from here to there?

WebGL Frameworks

For developers that live and breathe code, several frameworks exist that make the transition from scripting to screening an almost seamless one. These are some of the top dogs competing for the title of ‘industry standard’ at the time of this writing:

Three.js

The projects listed on its home page would make it seem the WebGL Framework equivalent of MoMA. Three.js is a robust yet versatile framework, which has allowed it to be used in many different capacities.

Babylon.js

Geared toward game development, Babylon.js comes preloaded with some game development necessities like collision detection and a physics engine. Having these out-of-the-box resources makes it the top choice for many web game developers.

And More!

A full list of the most popular WebGL frameworks is available at HTML5 Game Engines.

WebGL via Export

Unity Engine

[INSERT IMAGE]

At the time of this writing, the current version of the Unity Engine (Unity 5) has a beta WebGL exporter. Although this exporter doesn’t support all features in all browsers at this time, the features supported have been enough to publish games like Dead Trigger 2.

Unreal Engine

[INSERT IMAGE]

Like the Unity 5 Engine, the Unreal 4 Engine’s HTML5 export is, at the time of this writing, experimental. The significance of the Unreal Engine adopting WebGL export is important because the Unreal Engine is responsible for some of the most compelling games ever made, and will continue to be the engine for some of the largest franchises in the gaming industry.

Conclusion

The evolution of mobile devices will only continue to grow, yielding more performant phones, tablets, and other mobile devices. These devices will soon be capable of rendering the kind of complex graphics we’ve only seen in desktops and game consoles up to this point. When CPU and GPU processing power is no longer a factor in the equation, the web will come alive with a graphical richness never seen before.

Before this day comes, get familiar with WebGL! Check out the WebGL specs from Khronos, or download one of the frameworks or engines above and try your hand at 3D web development today.