Attention, 3D fans: OpenGL in the browser has gradually gotten real. WebGL is a browser-friendly API for OpenGL graphics, and it’s pretty darned close to OpenGL ES 2.0, which in turn will be familiar to anyone doing modern mobile 3D development. WebGL isn’t part of HTML5, but HTML5 makes it possible: the Canvas element is what allows WebGL to work its magic. And WebGL goes nicely with technologies that are part of HTML5 or modern browser experiments, including the web audio API and browser video support. (The superb 20 Things I Learned About Browsers & The Web has a 3D in the browser section, well worth reading.) And you can use JavaScript (among other modern languages) to code 3D creations.
If you love the idea of sharing 3D as easily as a webpage, this is big news. It’s a huge step forward from the clunky, unpredictable, confusing use of Java for browser OpenGL, and unlike that solution, it’s part of the page on which it’s delivered, not part of a plug-in or launched app.
In recent days, we’ve seen the first stable browser with WebGL enabled by default, Google Chrome. Right now, Chrome or Firefox 4 beta are likely the easiest and most stable way to test WebGL graphics. I’ve been testing Firefox 4 beta on Linux and more recently the stable Chrome on Mac, Windows, and Linux, and it’s pretty fantastic.
Read Google’s announcement from Thursday, along with the other enhancements to Chrome:
A dash of speed, 3D and apps
Perhaps more exciting than the Chrome update is the superb Chrome Experiments, which recently added 3D goodness, from creative tools to eye candy to useful tools like an exploration of human anatomy:
WebGL Experiments
Grabbing the latest Chrome or installing Firefox beta will let you see them, but here are a couple of picks are a cool place to start, and have videos attached if you aren’t near a bleeding-edge browser:
http://www.chromeexperiments.com/detail/webgl-aquarium/?f=webgl”>WebGL Aquarium, Human Engines and Gregg Tavares
Field, Gregg Tavares
I’m pretty impressed with performance of experiments like the aquarium. I’m on a fairly low-end, last generation laptop with an NVIDIA 9500M, and they run easily.
WebGL is still early in development – Chrome is the first and only stable browser with support – but we’re getting to the phase when you could actually distribute stuff with it, and it could hit prime time very soon.
Which browsers support WebGL?
Chrome’s release is a very big deal. As I write this, WebGL is available in:
- Chrome stable, from now on
- Firefox 4.0b8 and later, meaning once Firefox 4 stable is shipped, stable Firefox, too
- Nightly builds of Safari/WebKit (which I believe includes both Mac and Windows support, though I haven’t tested on Windows)
Opera plans support, but no public build is available yet.
Microsoft appears not to be planning support for IE9, meaning it’s most likely to be odd man out … again. But you can get support for WebGL inside IE using the free Chrome Frame plug-in.
Really, if you want to try this out, installing Chrome is a good idea. It’s also no accident that Google’s Chrome Web App store means people with interesting creations have an avenue for distribution, which should soon also be true with an open Mozilla-based store for Firefox et al.
Can you use Processing.js with WebGL?
Yes! Processing.js is actually a pretty decent way to fiddle around with it. The caveat is that WebGL support in Processing.js is a work in progress; if you want to get deeper, you’ll probably want to get into direct JavaScript control of WebGL. But that hasn’t stopped people from making some interesting hacks and work, and it’s a great place to start. Some demos —
A Processing.js Web IDE that uses WebGL:
— and a stunning music visualizer we’ve seen here before:
What about Google’s O3D?
O3D is some impressive technology and for many of us was the first truly compelling vision of 3D in a browser. The downside – it’s currently a plug-in. But Google does sometimes live up to their “open Web” hype. They’ve said they’re focused on improving WebGL, and that they’ll take the ideas from O3D (like its scene graph) and port to JavaScript and WebGL. There’s even an early version of the work.
It’s worth reading the (official Google) Chromium blog on the matter, partly to see how they’ve come around on JavaScript performance.
Why wouldn’t you use WebGL?
This is all compelling stuff, so let’s all abandon everything we’re doing and switch to WebGL — right? Well, not necessarily:
- It’s not done yet. WebGL the spec appears pretty stable, but browser support is still forthcoming. When we (presumably) see stable Safari and Firefox builds in the near term, though, I think the whole thing will get a lot bigger.
- Universal browser support is a long ways off. Microsoft’s lack of support in IE could be a side effect of the lack of universal OpenGL drivers on the Windows platform. Whatever the reason, count out IE. And likewise, count out anyone with a capable GPU card. Even compared to the mess of video support, 3D is likely to be a “nice-to-have” feature on the Web, not the universal feature the traditional 2D page is.
- Mobile WebGL isn’t even on the table yet. So, JavaScript – yep, it’s faster on desktop computers. But mobile implementations are still evolving, mobile browsers still lag their desktop counterparts (even sometimes when they’re both based on the same Web engine, like WebKit), and performance on much less-capable mobile chips isn’t there just yet. That said, see the last bullet in this list…
- Live visuals, art will still often need “native” tools. Want to output to a second monitor, or monitors, plural? Doing something crazy like routing textures between apps? Live visualists are pushing the kinds of features that won’t be accessible immediately on the browser.
- Full-blown OpenGL isn’t available. OpenGL ES 2 is pretty great, but if you need the full OpenGL API, this isn’t designed to be that. And…
- Performance is still better with C/C++. Don’t get me wrong – performance with JavaScript is stunningly good, good enough that those Google engineers changed their assessment. But it seems to me this depends on your goals. If you’re really concerned with squeezing every last ounce of performance out of your graphics, necessary if your work is about visuals with greater complexity, this still really isn’t for you.
- This isn’t an either/or choice – OpenGL wins! Here’s the major point for me. You don’t have to choose WebGL as an exclusive solution, partly because you don’t have to choose WebGL. Invest your time in OpenGL, and learn the basic nuances when comparing, say, OpenGL 3.2 on the desktop to OpenGL ES 2 on Android and iOS to WebGL in the browser, and you can be everywhere with relatively minor adjustments.
What’s surprising to me just writing that list is, while it appears long, the advantages of WebGL are still clear, and it makes sense that some of these differences will disappear. I imagine we will still need desktop software. Google, while characterized as some sort of browser-only religion, themselves continue adding native support in their Android platform, so presumably they understand game developers and other parties want that native OpenGL access. The question may not be whether WebGL “replaces” those tools, but whether people find smarter workflows and integrated higher-level APIs to work across the platforms.
Let’s sum it up this way: if you love 3D, and if you’re an OpenGL nerd, you’re in very happy times, indeed.
And regardless, you get to watch a cool jellyfish in Chrome any time you need to unwind.
http://www.khronos.org/webgl/
http://planet-webgl.org/