Welcome to Babylonjs

Welcome to the new world of 3D in your browser!
Today I'm going to show you just how easy it can be with a help from BabylonJs. BabylonJs is a high level wrapper on top of WebGL. With libraries like this, it is actually very easy to make things like the above scene.

The first thing we will need is some css for where we want the rendered image to be drawn.

       html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        #canvasView{
            width: 100%;
            height: 100%;
        }

Now lets put the canvas element inside the body. Canvas Is a new element introduced in HTML5, specifically for rendering graphics programmatically. So This is our view port ^_^

Download the compressed version of the library at http://www.babylonjs.com/babylon.js and put it in the same folder as your files.

To help keep our code clean you will now create a "myCode.js". I hope you noticed that this file is the one referenced in the above section.

In side "myCode.js" we will add the following:

function babylon(){
 //get a reference to the canvas element on the page
 var canvas = document.getElementById("canvasView");
 //create an instance of the rendering engine
 var engine = new BABYLON.Engine(canvas, true);
 //create an instance of a Scene.
 //This is used to house our camera, lights and shapes
 var scene = new BABYLON.Scene(engine);

Now that we have a Scene, we need to specify a camera

 //a Camera, so the renderer knows what to show us.
 var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);

Lets add some shapes and maybe a light.

 //Parameters are: name, number of segments (highly detailed or not), size, scene to attach the mesh. Beware to adapt the number of segments to the size of your mesh ;)
 var sphere = BABYLON.Mesh.CreateSphere("Sphere", 10.0, 1.0, scene);
 var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 20, scene, false);
 //a light source to make things look pretty
 var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);

Now here's the trick to getting the shapes to move. We will set a function to be called just before each new frame is drawn to the screen. it's pretty self explanatory ;)

 var twist = 0;
 
 scene.beforeRender = function() {
  torus.rotation.z = twist;
  torus.rotation.x = twist;
  torus.rotation.y = twist;
  twist += 0.01;
 };

Now we will get the ball rolling by creating a render function to be looped over.

  // Render loop
  var renderLoop = function () {
   // Start new frame
   engine.beginFrame();
   // process scene 
   //NOTE: at this point the "beforeRender" will be called
   scene.render();
   // draw
   engine.endFrame();

   // Need this to render the next frame
   BABYLON.Tools.QueueNewFrame(renderLoop);
  };
  
  //Need this to call the renderLoop for the 1st time
  BABYLON.Tools.QueueNewFrame(renderLoop);

One final this we should do is to check if the browser supports WebGL

}// END OF babylon funciton

//Check it there browser is supported
if (BABYLON.Engine.isSupported()) {
 babylon();
}
else{
 alert("Sorry! WebGL is to cool for your Browser")
}

and you are done!
Have fun :D