WebGL and Molehill : an overview of in-browser GPU 3D

The Edge magazine recently asked for my thoughts on hardware accelerated graphics within the browser, and I gave them a fairly comprehensive run down. They published excerpts but here is my response in full with some updates, hopefully you’ll find it useful.

HelloRacer – a gorgeous WebGL demo from Carlos Ulloa who attended my CreativeJS course

In-browser GPU enabled 3D rendering technologies

In terms of GPU accelerated graphics within the browser, there are two major developments. The first, codenamed Molehill, is an API in the prerelease FlashPlayer that can render 3D graphics using the graphics card. The second is WebGL, a native browser implementation that has similar capabilities to Molehill but is implemented directly in browsers and controlled with JavaScript.

There are other 3D browser plug-ins available, my favourite being Unity3D, but despite the fact that Disney and the BBC are using it, it hasn’t got anywhere near the penetration rates of the FlashPlayer.

Molehill

Molehill, officially known as the Stage3D API (although the term Molehill seems well and truly stuck now), is currently in the “incubator” build of FlashPlayer and it’s expected to be in the next release. (Although Adobe have made no promises, it’d be pretty unthinkable for them to leave it out of FlashPlayer 11).

Max Racer made by Alternativa for Adobe MAX last year

It uses OpenGL on OSX and Linux*, and DirectX on Windows, and, unlike WebGL, if it can’t find a compatible graphics card, it reverts back to a software renderer, which will have poor performance and is a last resort fall-back.

* UPDATE thanks to Tom Chiverton for mentioning this forum post that suggests Adobe may drop Linux support for Molehill. Which, if true, is uncool.

Previous versions of the FlashPlayer have shown an incredible take up rate, reaching the 90%s within a few months. Unless the browser vendors start playing dirty tricks, there’s no reason why Adobe won’t continue to achieve these adoption rates, and I would expect that the new FlashPlayer will reach the majority of internet users early in 2012. (An educated guess – I don’t have any inside knowledge as to the release date).

WebGL

WebGL is an open standard so any browser vendor can implement it, Chrome and Firefox already support it, and Safari has implemented it in their nightly builds. It’s a solid technology, but the spanner in the works is IE which currently has no public plans to support it.

Google Body – one of the WebGL Chrome experiments

Recent concerns about WebGL’s security were mostly about a bug in Firefox. But that’s nothing new – bugs in browsers (and the FlashPlayer) frequency cause security scares. Chrome engineer Gregg Tavares claims that these issues were overblown by Microsoft to provide an excuse for not supporting WebGL.

Although IE’s market share is slowly diminishing, WebGL won’t reach as many people as quickly as the upcoming GPU accelerated Flash Player.

Mobile

Chrome and Safari are based on the open source WebKit project; most mobile browsers are also based on this, so it’s fairly safe to assume that WebGL will be implemented on these devices.

Part of the driving force behind Molehill is to improve performance on mobile so future versions of the mobile FlashPlayer and AIR will almost definitely support it.

Workflow

Both Molehill and WebGL directly access the native capabilities of graphics cards, and given the similarity in execution speeds between JavaScript and compiled ActionScript, I would not expect there to be any significant difference in performance between the two.

Although both technologies are extremely capable, they’re not exactly easy to work with, especially if you’re not a hard core GPU programmer.

Even just importing a 3D model and rendering it is a work intensive process. The appearance of code libraries such as Away3D on Molehill and three.js for WebGL do simplify this, but you would still have to do much of the work for yourself.

Unity3D

This is where Unity3D comes in. It’s an app that makes 3D game creation really easily and targets its own web plug-in but can also create iOS and Android apps (not to mention PS3, XBox, Wii etc etc). It has built in character controllers, water simulation, particles, a physics engine and more.

Unity3D demo reel

Why do I mention it? Because it takes a fraction of the time to make a game in Unity as it would do in Molehill or WebGL. The good news is that Unity have announced that they will be targeting Molehill in the future, but no (public) plans to support WebGL.

Unity engineer Jonas Echterhoff (in a reply on the Unity Answers forum) said that JavaScript “wouldn’t quite be up to realistically run an engine like Unity and its content”.

To be honest, I never expected that they’d be able to get it to run in FlashPlayer either and they seem to be getting along well with that. They even employed Flash 3D expert Ralph Hauwert (formerly of Papervision3D) to help out. The fact that Alchemy can compile C and C++ libs into ActionScript bytecode probably helps with the conversion.

Future

Having said all that, I have no doubt that there will be several incredible games and 3D experiences built with Molehill and WebGL. Both technologies are certainly capable of at least PS2 quality 3D games.

We could also see in-browser MMOs like World of Warcraft appearing. Companies like Zynga have proved that there is money to be made in casual browser-based gaming so we may start to see more 3D games in that space.

It remains to be seen which of these 2 will become dominant, assuming Adobe continue to achieve the take-up rates of previous versions, FlashPlayer has the edge in terms of reach.

It’ll only take one “killer app” to push the take-up of one technology over another, and what that app will be remains to be seen. Who could have predicted that YouTube could have driven such a huge uptake in the FlashPlayer? (and that was only 6 years ago believe it or not).

Perhaps a WebGL killer app will encourage people to upgrade their browsers, just like YouTube and MySpace did for the FlashPlayer?

I watch with interest and look forward to seeing whether these 3D technologies can become an intrinsic part of the web, or whether they just remain a useful niche for those few times when you need really good 3D graphics in the browser.