8 Incredible Javascript WebGL Experiments

8 Incredible Javascript WebGL Experiments


8 Incredible Javascript WebGL Experiments

Introduction

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.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

5 comments

Jeff Clune
Wed, 27th July 2011
Great post! Here is another experiment in WebGL and JS:

http://EndlessForms.com

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

Best,
Jeff Clune
Postdoctoral Fellow
Cornell University
Reply
lxn
Fri, 29th July 2011
Great! I absolutely have to learn this WebGL technology! Reply
evan neumann
Thu, 31st May 2012
here's a space simulator:

orbitingeden.com Reply
Ian Smith
Wed, 1st May 2013
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 ;) Reply
Kevin Admin
Wed, 1st May 2013
Hehe. Updated! Thanks :) Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement