Skip to main content

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

Comments

Post a Comment

Popular posts from this blog

Shard – A Database Design

Scaling Database is one of the most common and important issue that every business confronts in order to accommodate the growing business and thus caused exponential data storage and availability demand. There two principle approaches to accomplish database scaling; v.i.z. vertical and horizontal. Regardless of which ever scaling strategy one decides to follow, we usual land-up buying ever bigger, faster, and more expensive machines; to either move the database on them for vertical scale-up or cluster them together to scale horizontally. While this arrangement is great if one has ample financial support, it doesn't work so well for the bank accounts of some of our heroic system builders who need to scale well past what they can afford. In this write-up, I intend to explain a revolutionary and fairly new database architecture; termed as Sharding, that some websites like Friendster and Flickr have been using since quite sometime now. The concept defines an affordable approach t...
8 comments
Read more

FAINT - Search for faces

Lately, I've been playing around a bit with facial pattern recognition algorithms and their open source implementations. I came across many reference implementation but a very few were implemented in Java, and the Eigenfaces algorithm by far happens to be the best amongst them all. During my research around the said topic i happened to stumble-upon an implementation called FAINT (The Face Annotation Interface - http://faint.sourceforge.net). Faint by far the best facial pattern recognition API and as you must have already guessed, it implements the Eigenfaces algorithm. Now enough of theory talks, how about implementing an example with faint...? Here is one for all you face-recognition enthusiasts. The following example simply searches for faces in a given photograph and thumbnails them. Now, I know thats not face recognition; but be a little creative here. Once you have the facial thumbnails extracted, its never a big deal to look further in the Faint API and find methods which ca...
27 comments
Read more

Is Java String really immutable...?

In many texts String is cited as the ultimate benchmark of Java's various immutable classes. Well, I'm sure you'd have to think the other way once you have read this article. To start with, let's get back to the books and read the definition of immutability. The Wikipedia defines it as follows - 'In object-oriented and functional programming, an immutable object is an object whose state cannot be modified after it is created.' I personally find this definition good as it mentions that an immutable instance's state should not be allowed to be modified after it's construction. Now keeping this in the back of our minds, let's decompile Java's standard String implementation and peep into the hashCode() method - public int hashCode() { int h = hash; if (h == 0) { int off = offset; char val[] = value; int len = count; for (int i = 0; i h = 31*h + val[off++]; } hash = h; } return h; } A detailed ...
2 comments
Read more