art with code

2009-03-26

Why you might like Canvas 3D (or not)

Apparently we now have a highly advanced 3D virtual worlds platform that solves all of world's woes. "But what's the difference between that and VRML?", I hear you ask. Several of you, in fact.

Well, let me shine some light on that by telling you what Canvas 3D is.

Canvas 3D is OpenGL ES 2.0


Canvas 3D is an OpenGL ES 2.0 binding for JavaScript.

No, really. That's it. End of story. (What? You want more?)

OpenGL ES 2.0 is a hardware-accelerated drawing library


OpenGL ES 2.0 is a way of telling the graphics card to draw something. You give it a bunch of coordinates and images and ask it to process them with your shader. Shaders are small image processing programs that run on the graphics processor. At around a thousand times the speed of JavaScript.

Sure, you can do 3D with shaders. You can also do real-time video filters with shaders. Not to mention wobbly windows and fancy slideshows. All things for which plain JavaScript is just way too slow. And if you're really ambitious, you can even do computational biology with shaders.

The 1000x speed difference mentioned above? That's the difference between doing something thirty times per second vs. doing it once every thirty seconds. The difference between unbearably slow and smoothly animated.

And OpenGL ES 2.0 is an open standard that is relatively well documented, and is actually used by numerous developers the world over (shocking, I know.)

For example, Google's Chrome browser uses OpenGL internally to do its drawing. Mac OS X uses OpenGL to do some of its fancy desktop effects. Adobe Photoshop uses OpenGL to accelerate its image filters. Adobe Acrobat Reader uses OpenGL. Most multiplatform games use OpenGL. Your fancy new cellphone likely uses OpenGL for smoothly zooming and panning between your photos.

OpenGL is not VRML


The difference between OpenGL and VRML: You give both your geometry and textures. OpenGL draws what you tell it to draw, when you tell it to draw. VRML draws what it wants to draw, when it wants to draw.

It's like the difference between an oven and a breadmaker. Sure, you can bake bread with both, and it's generally going to be easier with the breadmaker. But perhaps, just perhaps, you might occasionally want to bake something other than bread.

And it's a heck of a lot harder to build a breadmaker than an oven.

Rain on the parade


The OpenGL canvas is not a panacea though. It's OpenGL ES 2.0 for JavaScript, both in good and bad.

First off, OpenGL ES 2.0 is a very low-level API. You need something like 500 lines of code to get a lit spinning cube going. That includes writing your own matrix math library and a lighting shader. So if you just want to put a dancing teapot on your web page, wait for a convenience library to ease your pains.

Second, the slowness of JavaScript means that many of the things that you might wish to do with the OpenGL canvas are not going to run too well. Especially complex animations or anything even remotely resembling an action game are going to require a fairly extensive retooling of the JavaScript runtime, as it's currently causing a lot of framerate glitches. I hear there's work afoot towards fixing that though, but I'll believe it when I see it.

And third, you still need something else to take care of advanced audio (as I kinda doubt the audio-tag is cut out for that.)

Oh, the future is perfect and diamondoid!


But, knowing the obstacles means knowing your goals. Making the JS garbage collector less laggy and writing an OpenAL binding might actually make writing quite impressive action games on the browser a real possibility.

It's still early days for Canvas 3D though, let's see how it unfolds.
Post a Comment

Blog Archive

About Me

My photo

Built art installations, web sites, graphics libraries, web browsers, mobile apps, desktop apps, media player themes, many nutty prototypes, much bad code, much bad art.

Have freelanced for Verizon, Google, Mozilla, Warner Bros, Sony Pictures, Yahoo!, Microsoft, Valve Software, TDK Electronics.

Ex-Chrome Developer Relations.