TideArt

Archive of TideArt content.

Sun, Aug 21 2011 2:31:56 UTC

A short introduction to WebGL

Ever since the web became popular, 15 years ago, designers and artists have wanted to make interesting, captivating multimedia elements that could be seen through a web browser. Whether it's an animation, a game or an interactive simulation, there's always been various ways to do it, but it always involved a plugin, Adobe Flash being the most popular one. But that caused issues, like incompatibilities with those who didn't have the plugin.



Now, with HTML5, new tags have been introduced to take care of these things using native code. There are elements for audio, video, sounds and graphics. WebGL is the 3D part of the canvas tag, a software library allowing simple JavaScript code to access the power of a system's graphics card and create 3D objects on the screen.

Right now, adoption of the technology is getting better, with most of the browsers supporting WebGL, with the notable exception being Internet Explorer, although there are workarounds.

The WebGL library allows designers to do a lot, as evidenced by demos being posted on news sites regularly lately, such as this water demo. Some of the 3D features available with WebGL include raytracing, ambient occlusion, soft shadows and more. Everything you would need to do a realistic 3D simulation or game.



So how can you get started with WebGL? First, you should know JavaSript already. It's not a hard language to learn, but it's at the basis of modern web sites. Then, look for a tutorial about WebGL. One of the best is the one at learningwebgl.com.

Finally, don't forget that WebGL development is moving extremely fast, and as such compatibility is still very raw. One part of WebGL may be supported in Chrome but not Firefox, and so on. Also, some have pointed out potential security flaws of allowing code to access direct system components like a graphics card.

Overall, there's no doubt that WebGL is here to stay, and may be worth learning if you wish to bring your graphics to the web.

Back to index


© 2007-2019 Patrick Lambert - All resources on this site are provided under the MIT License - You can contact me at: contact@dendory.net