With Internet Explorer On Board, WebGL Is Ready For Prime Time

We’ve seen developers create 3D content in the browser for a while now, but to do so, they had to use Flash or other tools because browsers didn’t support this kind of content out of the box. WebGL, a JavaScript API for rendering interactive 2D and 3D graphics in the browser natively, has been around since 2011 and almost all of the major desktop browsers have added support since then. The exception, so far, was Microsoft’s Internet Explorer, but with the release of Windows 8.1 and IE11, even Microsoft has jumped on the WebGL bandwagon. Until now, WebGL was mostly relegated to that part of the Internet where cool web demos live. Because WebGL allows developers to use the power of the user’s graphics card, it can render pretty stunning 3D graphics. They aren’t quite up to par with what you’d expect from a AAA game just yet, but you can create some stunning effects with the tools that are currently available, and those will only get better. It’s already breaking out of its demo niche in small ways, too. To promote the movie Gravity, for example, Warner Bros. built a WebGL experience that lets you explore the space shuttle, Hubble telescope and the international space station in 3D in the browser. Now, however, with built-in WebGL support in all the major browser platforms, I can’t help but think that this technology is now finally ready to take off. With all the major vendors on board already, why did Microsoft wait so long to support WebGL? First of all, it’s worth noting that Microsoft’s development cycle for IE is different from the other vendors now that most of its competitors have switched to a rapid release cycle. Microsoft is sticking with fewer releases that are now timed to coincide with major operating system updates. As the IE team noted when I talked to them ahead of the IE11 launch, Microsoft started adding hardware acceleration to IE since version 9. WebGL was on the team’s radar early on and Microsoft considers it to be a natural progression of where the Web is going. As Frank Olivier, a Senior Program Manager for Internet Explorer at Microsoft, told me, the early days of WebGL felt like they were mostly about cool demos and less about real-world applications. As a standard, WebGL also didn’t feel very mature to the team yet. In addition, Microsoft had a number of security concerns it wanted to address before adding WebGL to its browser. Giving developers direct access to hardware, after all, opens all kinds of new attack vectors for malware. Because of this, Microsoft worked with most of the popular GPU vendors to ensure their drives and hardware were ready for WebGL. When a site overloads the GPU – either because of a basic programming error or as a way to attack the system – IE will reset the GPU automatically to prevent any issues. Adarsh Nair, a group program manager at Microsoft responsible for bringing together engineers, web designers and marketers to build cutting-edge HTML5 and WebGL based websites, also pointed out that WebGL is a very large stack. Just the basic reference sheet for it takes up a good four pages in 10-point font. Right now, most developers aren’t used to working with WebGL and 3D. Regular web development and design is already hard, but adding a third dimension to a site adds a slew of new problems. As of now, the tooling for WebGL development isn’t as advanced as for other web technologies yet. We are, however, already seeing a number of frameworks, such as the Microsoft-sponsored babylon.js, that abstract quite a bit of the complexity of building 3D scenes in WebGL, for example.

WebGL Goes On A Rampage

To showcase the power of WebGL and the kind of experiences it can power, Microsoft partnered with Red Bull and Seattle’s Pixel Lab (the developers behind, among many other things, the web version of Cut The Rope, Contre Jour and Pulse). Together, they built a fully immersive experience that lets users relive the action during Red Bull’s Rampage 2013 freestyle mountain biking event in Utah. The team outfitted all the riders with a GPS tracker and then built a WebGL-based experience that mashes up the GPS data, the terrain of the course and the video from their runs. The terrain map is in 3D and completely interactive, with the GPS data mapped on top (because it’s a freestyle event, every rider takes a different path from start to finish). What’s really cool, though, is that Pixel Lab uses the rider’s position on the track as a scrubber for the video, too. So you can just pick a spot on the map and the video will sync to that exact position. Users can then easily switch between the video (which always runs in the background) and the terrain map (which smoothly moves into the bottom left corner and back as needed). As Pixel Lab’s founder and creative director Robby Ingebretsen told me, web developers are so used to working in 2D that going to 3D brings a number of challenges. The team had to build its own shader for the terrain map, for example, because it couldn’t quite find the right off-the-shelf tool for that. Just building the 3D models, too, brings its own challenges, and the team had to spend quite some time just finding the data for the map, for example. Interestingly, the Pixel Lab team said it had no issues with performance. Part of that, Ingebretsen admitted, probably has to do with the fact that the 3D terrain isn’t all that detailed. Whenever there’s a new web development technique, people will overdo it (just look at all the sites with parallax effects…). Nair likens the state of WebGL to the early days of 3D gaming. Games, he argued, always existed in 3D, but then we realized some games are better in 3D. Hopefully, developers and designers will quickly realize that WebGL is probably best used sparingly. Chances are, though, that their clients will ask them to build 3D into all of their sites, so get ready for a web with a bit more 3D than necessary over the next two years.