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
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...