WebGL: My First Impressions
Lately I spend some hours for a research on WebGL. It’s quite amazing in which ways internet technologies have evolved. I still remember times, when it was nearly impossible to render any graphics using JavaScript only. Nowadays it’s one of the minor difficulties since we have technologies like SVG or Canvas. Even after animated realtime graphics are nothing special anymore, there’s a new player in town: WebGL.
3d computer graphics in web applications seem to be still a topic thats is heavily associated with technologies like flash, shockwave or other plugin based platforms. This may become history soon. At least if the development of WebGL browsers will proceed as it currently does. If you already use a WebGL enabled browser and had a look at one of the several examples as they appear constantly on http://learningwebgl.com/, then you will figure out quickly what I’m talking about.
Beside the usual operations we are familiar with from nearly any 3D engine, the most Important part on WebGL seems to me that we are able to use vertex and fragment shaders in the usual native way. While the whole application code is written with JavaScript, the shader programs will be implemented in a C style shader code. In the end nothing special for OpenGL veterans. But hey! Exactly that’s the point! If you’ve ever developed your personal, most awesome shader ever, there’s the possibility to reuse or partly use them for WebGL. There’s an amazing experiment written by Inigo Quilez about this shader topic. It’s called Shadertoy (don’t forget to use a WebGL enabled browser). The Shadertoy website, currently offers you about 28 sample shaders of different kinds. All are looking very pretty and all are native shader programs, which are executed on the graphics accelerator. Hardware acceleration for Webapps: Just great!
The basic possibilities offered by this technology may end into enourmous impacts for webstandards. You already may have recognized the Flash Gordon Project of Tobias Schneider. His approach is to implement an open source flash runtime, written in JavaScript. Imagine this implementation, using the powers of GL rendering. Or ways better: a new runtime plattform using WebGL as rendering layer.
Enough of nerdy enthusiastic day dreaming. There are still some difficulties with WebGL. At first of course, the minor density of WebGL enabled browsers out there in userland. But there’s a silverline on the horizon: last September Mozilla announced to implement WebGL in future versions of Firefox. The current nightly builds yet implement it, but it’s disabled by default. So it’s just a matter of time, when WebGL will be available easily by default.
Second flaw: It is quite uncomfortable to keep track of all matrix transformations by yourself. Bare WebGL won’t do that job for you. Many examples on the internet (including the Learning WebGL lessons) implement their own helper functions for identity loading, by encapsuling Sylvester (vector and matrix math for JavaScript) routines. That’s a common but never the less hacky way to fix the problem. And even creating simple basic shapes still produces a lot of code. Many shaders are embedded directly into HTML code, like it is well know from CSS or JavaScript embedding. That feels pretty ugly, when you’ve a complex WebGL application in mind.
In my opinion, the best solution for this case is WebGLU by Benjamin DeLillo. This library is a set of frequently high usefull routines for developing your very own WebGL application. You can load externalized Shader code, enjoy the ease of a camera and many more fine features.
So if you are interested into WebGL now, you should have a look at Learning WebGL. It’s in my opinion one of the best and most up to date resources on the net. If you are interested in the papers and basics of the new standard, it’s the best to search The Khronos Group website for further information.
If you’ve any other interesting news or resources for WebGL, please leave a comment or message me on any of the known ways.
February 11th, 2010 at 6:13 pm
Thanks for recommending Learning WebGL — glad you liked it!
A couple of extra points you might find interesting:
* An alternative to Sylvester for supporting vector maths in JavaScript, optimised for WebGL, is http://code.google.com/p/webgl-mjs/ — I’m seriously considering switching over to it.
* I tend to put vertex attribute lists in the code and shaders into the HTML to keep my tutorial files short, but for larger apps it would be best to put them into JSON or XML files and load them up using XmlHttpRequest. There’s a demo of how to do that for vertex data in lesson 14.
February 13th, 2010 at 10:53 pm
But GL is only one fifth of the interactivity equation. We need real-time bidirectional audio, real-time control input, real-time state sharing and real-time simulation, too.
Fifteen years ago, the ivory tower designed VRML/X3D to solve those kinds of problems, and plug-ins have existed for a long time. It still hasn’t taken off, though.
Could it be that 3D content creation is so much harder than 2D, that it’s a real practical impediment that all the viewer-side improvements in the world won’t solve?
February 14th, 2010 at 10:51 pm
Concerning the missing possibilities with realtime audio I’m totally with you. Realtime controls are kind of a plus but currently not vital. There are several possibilities to grab data from the input devices (f.e. jQuery or GameGLU) that should fit most cases.
April 15th, 2010 at 8:31 pm
As the developer of WebGLU I’ve got to give you a big thanks! If you think of anything that would make it even easier to use don’t hesitate to let me know.