After //Build: Babylon.js

During //Build 2014, one of the things that Guggs and I talked about was babylon.js, an open source framework developed by David Catuhe and David Rousset. In fact, one of the highlights of the day two keynote was when Guggs showed IE working with Oculus Rift.

If you didn’t catch the demo, go directly to 2:24–2:28 of the replay and see for yourself, as Guggs uses Oculus Rift to navigate through some amazing 3-D scenes created by Michel Rousseau. BTW, David, David and Michel are all on our DX team, doing some leading edge stuff in 3D.

This demo showed how with just one line of code you can transform a 3-D scene into a virtual reality playground. To be able to do that, the team wrote a driver, which transforms orientation information for Oculus Rift to Device Orientation data that is understandable directly by browsers. And with IE 11 it produces some amazingly smooth results.

The complete code that produced the output I showed is the following (in less than 30 lines of code!):

 document.addEventListener("DOMContentLoaded", function () {
    onload();
}, false);

var onload = function () {
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);
    var scene;

    BABYLON.SceneLoader.Load("/Scenes/espilit/", "espilit.incremental.babylon", engine, function (newScene) {
        scene = newScene;
        scene.executeWhenReady(function () {
            scene.activeCamera.attachControl(canvas);
        });
    });

    // Launch render loop
    engine.runRenderLoop(function () {
        if (scene) {
            scene.render();
        };
    });

    var button = document.getElementById("goBigButton");

    button.addEventListener("click", function () {
        var originCamera = scene.activeCamera;
        BABYLON.OculusOrientedCamera.BuildOculusStereoCamera(scene, "Oculus", canvas, originCamera.minZ,
                    originCamera.maxZ, originCamera.position, { yaw: 3, pitch: 0, roll: 0 }, false, true, true);

        // Hide button
        button.style.display = "none";
    });
};

If you have an Oculus Rift device, you can go to the babylon.js site and test some of the other impressive demos (the Oculus Rift demos are the last ones on the page).

Catuhe, who leads Babylon.js team, also presented a session about graphics on IE and Babylon.js:https://channel9.msdn.com/Events/Build/2014/3-558.

If you want to learn more about this framework, check out these links:

• Understanding shaders: https://blogs.msdn.com/b/eternalcoding/archive/2014/04/17/learning-shaders-create-your-own-shaders-with-babylon-js.aspx
• 3-D and physics: https://blogs.msdn.com/b/eternalcoding/archive/2013/12/19/create-wonderful-interactive-games-for-the-web-using-webgl-and-a-physics-engine-babylon-js-amp-cannon-js.aspx
• Understanding Device Orientation API:https://blogs.msdn.com/b/eternalcoding/archive/2013/10/07/understanding-deviceorientation-events-by-creating-a-small-3d-game-with-babylon-js.aspx

Discover Babylon.js: https://blogs.msdn.com/b/eternalcoding/archive/2013/06/27/babylon-js-a-complete-javascript-framework-for-building-3d-games-with-html-5-and-webgl.aspx