Monday, April 9

5 Awesome WebGL Demos to Inspire Web Developers & 3D Artists

Here are 5 simple, yet amazing WebGL demos that I think should be shared more so more web developers and designers can catch the view of 3D development on the browser. These demos range from really easy (to encourage the beginners and newcomers), to really advanced, complex, and just plain complicated (meant to inspire and encourage the HTML5 masters, and open the eyes of the C++ and OpenGL veterans out there).

Parsing 3D Model from Blender in OBJ File Format: Part 1

This OpenGL demo show how to load advanced models into a scene, instead of simply rendering the usual gradiated OpenGL triangle and square. It talks about how to use the common .obj file format to load vertices, normals, and UV coordinates that make up your 3D model object. The demo is done in C++ and the model is sculpted in and exported from Blender.

Parsing 3D Model from Blender in OBJ File Format: Part 2 Texture & Advanced Lighting

The second part of the previous demo. This goes into detail on how to load texture files into your 3D model objects, how to simulate light, and how to produce more realistic, and cool artistic lighting effects in OpenGL. The fragment and vertex shader programs used in this demo is written in GLSL, which means it can be used direclty (without any changes at all) in WebGL, or OpenGL ES on a mobile device (such as the iPhone, iPod touch, iPad, and any Android device that supports WebGL).

Grass Fields

This WebGL demo shows a field with a lot of grass, which move very realistically with the wind. One of the earlier WebGL demos, which is still very impressive.


Another demo that attempts to simulate life. This one shows beautiful water effects reflecting off the Jellyfish. This WebGL demo runs at about 24 frames per second pretty consistently in most newer browsers.

Liquid Galaxy

Finally, this is the classic Google powered WebGL demo. It shows the popular fish bowl, except that it renderes the scene in 8 different computers at the same time. The demo is meant to show off how powerful HTML5 can be. The demo uses web sockets to synchronize all 8 computers, the canvas tag (with a 3D context, of course) to display the aquatic scenery, and web workers to calculate where each model should be, where each vertex should be moved to, etc.