Easy 3D with WebGL and Three.js

Lately a lot has been happening in 3D around the world. From movies to electronic gadgets like televisions, projectors and gaming consoles, everything seems to be heading toward rendering that additional 3rd dimension. A 3D experience in itself so very enticing that one would just falling it love with it; and thus the creative ones amongst us are constantly thinking about various areas wherein it could be applied. Some of the obvious areas of application would be bio-technology, clinical research, engineering drawings and entertainment media; but meanwhile some creative minds amongst us have gone ahead thinking differently and even made simple software applications that we use in our everyday lives, to render a user interface with 3D. For instance, a few months ago I came across a program called 3DNA Desktop which improves the way we work with Windows and the Web. With 3DNA Desktop one can choose from different 3D worlds to explore and customize the same, to create an immersive and entertaining 3D desktop usage experience.

Screenshot of 3DNA Desktop

As a developer, I've always thought about how these awesome experiences are created. For a while I did try to play around with Adobe Flash, but to by candor found it too exhaustive to understand in a short time; therefore all the time continued to wonder, if there is something simpler, and above all free of cost, which could yield the same results or even better. Until recently, that I came across WebGL.

WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML-5's Canvas element in a Document Object Model (DOM). So, what it essentially means is - now you can have Adobe Flash like experiences created within standard HTML using the Canvas element. You must have seen so many fancy user experiences built atop Adobe Flash, so obviously are wondering how exactly does WebGL compare against Adobe Flash? Therefore, to augment your curiosity here is an example that I built to demonstrate the capabilities WebGL, which shows a real-time day light view of our planet. Just try interacting with the globe using your mouse or touch-pad to get the real feel of the thing. Meanwhile, a quick note about the support – you need to make sure that your browser supports WebGL content rendering for running this example. Ideally one would need Google Chrome, Firefox 4+ or IE 9+ to run this one at its best.

Screenshot of the WebGL and three.js example

A software programming enthusiast would furthermore be amazed to know that this is entirely done using standard Javascript and Mr.Doob's awesome script library called three.js, in just over 80 lines of code (LoC); you might want to right-click and choose to view the source on the example page to have a look at the code for yourselves. Three.js is a framework library developed by Mr. Doob that skillfully abstracts away the complex mathematics involved in implementing 3D, and provides simple APIs with which you can create cameras, objects, lights, materials and more; with a choice of renderers, which means you can decide if you want your scene to be drawn using HTML-5's canvas, WebGL or SVG within a standard browser.

Now, should this little article and the example inspire you to get your hands dirty with some code. The best place to start would be the three.js sources and bundled examples. You may download the latest release of three.js from GitHub (https://github.com/mrdoob/three.js) and get started with simple examples in absolutely no time. :)

Wishing you happy exploration of WebGL and three.js...

Have fun!!!