8 Incredible Javascript WebGL Experiments

Written by Kevin Liew on 26 Jul 2011
44,140 Views • Inspirations


The evolution of Javascript has brought a lot of fanciness to the Internet. It enhances websites in a way that we couldn't have thought it's plausible few years ago. In this post, we have a list of experiments that used WebGL (Web-based Graphic Library) - another widely spread technology used in web development to generate interactive 3D graphic within any compatible browser. However, sad enough, most of our modern browsers can't really render it well and you will need a rather powerful computer to run it as well.

We recommend you to use Google Chrome to view the following experiments. Wihout further ado, we present you 8 Incredible Javascript WebGL Experiments.

  • Cars Editor WebGL Cars Editor WebGLExample of Vehicle Editor using webgl and osgjs
  • Cel Shader Cel ShaderThis demo uses GLSL to create a cel or "toon" shader, which allows 3D models to mimic the type of shading used in comic books.
  • Metaball Playground Metaball PlaygroundThis demo uses the Marching Cubes algorithm to create metaballs. You can also customize the material effects and geometry.
  • WebGL Easing WebGL EasingRobert Penner's easing equations have been around for a number of years and are widely used. In this experiment you can choose between a couple of meshes and even get 'extra crazy' if you like.
  • WebGL Solar System WebGL Solar SystemThis experiment is a N-body problem simulation. Using a simplified version of Barnes-Hut algorithm, we can compute the trajectories of thousands of massive bodies spinning around a larger one.
  • CityEngine Model Viewer CityEngine Model ViewerThis is a quick pipeline test to show that Cityengine cities can be easily exported into Three.js model format. Okay, this one took me a while to load all the buildings, but once it's all loaded it's really cool to navigate around the 3d model city.
  • RadioHead WebGL RadioHead WebGLRendering the House of Cards dataset in WebGL. This kinda spooky because of the human face and its bounces like your heartbeat.
  • Skull WebGL Skull WebGLLow poly normal mapped model exported from Blender, rendered in Three.js using Blinn-Phong shader with baked ambient occlusion texture, one directional and one point light. Realistic rendering of human skull with WebGL.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

Jeff Clune 12 years ago
Great post! Here is another experiment in WebGL and JS:


Design objects with evolution and 3D print them!

Here is a youtube video tour http://EndlessForms.com

and a quick description....

On EndlessForms.com objects are evolved in the same way that plants and animals are bred. You pick the ones you like and they become the parents of the next generation of objects. As in biological evolution, the offspring look similar, but not identical, to their parents, allowing you to explore different designs. Under the hood, there is an evolutionary process in which the genomes of parents are mutated and crossed over to produce new offspring objects. Additionally, the objects are grown from their genomes similar to how a single fertilized egg grows into a jaguar, hawk, or human. This grounding in developmental biology enables the evolution of complex, natural-looking forms.

Once designed, the objects can be 3D printed (e.g. in silver, steel, or sandstone). Here are pictures of two things printed in silver and bronze: http://EndlessForms.com

Jeff Clune
Postdoctoral Fellow
Cornell University
lxn 12 years ago
Great! I absolutely have to learn this WebGL technology!
evan neumann 11 years ago
here's a space simulator:

Ian Smith 10 years ago
Note for non-native English speakers:
Just in case you were not aware, the phrase is "without further ado" as in the Shakespeare play "Much ado about nothing".
"Adieu" means "goodbye" in French.
HTH ;)
Kevin Admin 10 years ago
Hehe. Updated! Thanks :)