index.pug

include includes/header.pug
include includes/banner.pug
#wrapper
    //----------------------
    //-LOGO AND BASELINE
    //----------------------
    .presentation-header
        .presentation-img
        .bigimage
            img(src='/img/babylonjs_identity_color.svg')
        h1.bjs-moto POWERFUL, BEAUTIFUL, SIMPLE, OPEN, WEB-BASED 3D AT ITS BEST
    //----------------------
    //-THREE COLUMNS
    //----------------------
    .bjs-components
        .bjs-component
            h1 Easy to Try and Setup
            p
                | The quickest way to see how to use the engine is to head
                | to the <a href="/babylon101/first">First Steps</a>.
                | For your own HTML project nothing needs to be installed on your 
                | computer and nothing needs to be installed by a client 
                | to run your program. 
                | See how simple it is with the <a href="#getting-started">getting started tutorial</a> below.
                | 
                | Check out the <a href = "/resources/Documentation_Category_Map">Index</a> or the <a href = "/features">Features Section</a> to see what is available.
                | Build your first scene and develop it by following the <a href = "/babylon101">Babylon 101 Course</a>
                | Then move on the find out <a href = "/how_to">how to</a> do more.
                | An <a href="#documentation_overview">overview</a> of the documentation is at the bottom of the page.
        .bjs-component
            h1 WebGL
            p
                | Web Graphics Library, or WebGL, is a JavaScript API designed to render
                | interactive 3D computer graphics and 2D graphics within any compatible
                | web browser, without the use of any plug-ins.
        .bjs-component
            h1 Javascript
            p
                | Also known as ECMAScript, JavaScript is a dynamic, prototype-based scripting
                | language, with first-class functions. Widely used on client-side (and sometimes
                | even server-side, like on this website!), Javascript is the language that
                | BabylonJS is based on.

    .horizontal-separator

    //----------------------
    //-GETTING STARTED WITH DOCUMENTATION OVERVIEW
    //----------------------
    .getting-started#documentation_overview
         h1.bjs-moto Documentation Overview
            .bigimage
            img(src='img/overview.jpg', style="max-width: 80%")
    
    
    .horizontal-separator

    //----------------------
    //-GETTING STARTED
    //----------------------
    .getting-started#getting-started
        h1 Getting Started
        p.selection-toggles
            button#js-start.selection-toggle Javascript
            button#ts-start.selection-toggle TypeScript
        p.
            First, check to ensure your browser is WebGL compatible by visiting <a href="https://get.webgl.org/">WebGL.org</a> 
            or <a href="https://caniuse.com/#feat=webgl">Can I use ... WebGL</a>. Browsers such as Internet Explorer 11+, 
            Firefox 4+, Google Chrome 9+ and Opera 15+ support WebGL.
        p.
            The example project below uses the most recent release of BabylonJS via the 
            <a href="https://github.com/BabylonJS/Babylon.js#cdn">BabylonJS CDN</a>, so you don't need to download BabylonJS 
            locally in order to use it.
        p.ts.
            However, you will need to download the BabylonJS TypeScript definition file from 
            <a href="https://preview.babylonjs.com/babylon.d.ts">https://preview.babylonjs.com/babylon.d.ts</a> in order to compile your project. Save this 
            <code>babylon.d.ts</code> file into your project folder and create an empty <code>index.html</code> like so:
        p.js.
            Now create a project folder containing an empty <code>index.html</code> file like so:
        pre
            code.github.js.
                yourAwesomeProject
                    |- index.html
            code.github.ts.
                yourAwesomeProject
                    |- index.html
                    |- babylon.d.ts
        p.js.
            We will only code in the <code>index.html</code> file to keep it as simple and concise as possible. The HTML
            document begins as follow:
        p.ts.
            The HTML document begins as follows (If you prefer using npm/webpack see https://doc.babylonjs.com/features/npm_support):
        pre
            code.html.
                &lt;!DOCTYPE html&gt;
                &lt;html&gt;
                &lt;head&gt;
                    &lt;meta http-equiv="Content-Type" content="text/html" charset="utf-8"/&gt;
                    &lt;title&gt;Babylon - Getting Started&lt;/title&gt;
                    &lt;!-- Link to the last version of BabylonJS --&gt;
                    &lt;script src="https://preview.babylonjs.com/babylon.js"&gt;&lt;/script&gt;
                    &lt;!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf --&gt;
                    &lt;script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"&gt;&lt;/script&gt;
                    &lt;!-- Link to pep.js to ensure pointer events work consistently in all browsers --&gt;
                    &lt;script src="https://code.jquery.com/pep/0.4.1/pep.js"&gt;&lt;/script&gt;
                &lt;/head&gt;
                &lt;body&gt;
                    &lt;canvas id="renderCanvas"&gt;&lt;/canvas&gt;
                &lt;/body&gt;
                &lt;/html&gt;
        p.
            As you can see, we inserted in the <code>&lt;body&gt;</code> a <code>&lt;canvas&gt;</code> element. This
            <code>&lt;canvas&gt;</code> element will be the place where we'll display the result of our 3D rendering.
            Insert some style in the <code>&lt;head&gt;</code>:
        pre
            code.html.
                &lt;style&gt;
                    html, body {
                        overflow: hidden;
                        width   : 100%;
                        height  : 100%;
                        margin  : 0;
                        padding : 0;
                    }

                    #renderCanvas {
                        width   : 100%;
                        height  : 100%;
                        touch-action: none;
                    }
                &lt;/style&gt;
        p.js.
            Now some javascript code to run our project. To begin with, insert at the end
            of your &lt;body&gt;:
        pre.js
            code.html.js.
                &lt;script&gt;
                    window.addEventListener('DOMContentLoaded', function() {
                        // All the following code is entered here.
                    });
                &lt;/script&gt;
        p.js.
            As you can see, we wrap the javascript code inside of a <code>DOMContentLoaded</code> event handler, to be sure
            that the whole DOM is loaded before doing anything else. The code we'll write after this point is to be placed
            inside of this wrapper.
        p.js.
            This project implements the very basics of every BabylonJS program, a scene and two shapes, a sphere and a ground plane. We'll
            go through it step by step.
        p.js.
            The first step is to get the reference of the canvas element from our HTML document:
        pre.js
            code.javascript.js.
                var canvas = document.getElementById('renderCanvas');
        p.js.
            Then, load the Babylon 3D engine:
        pre.js
            code.javascript.js.
                var engine = new BABYLON.Engine(canvas, true);
        p.js.
            Now our scene, which needs a camera and a light as well as the shapes. To generate the scene you use 
            a <code>createScene()</code> function.
        pre.js
            code.javascript.js.
                var createScene = function() {
                    // Create a basic BJS Scene object.
                    var scene = new BABYLON.Scene(engine);

                    // Create a FreeCamera, and set its position to (x:0, y:5, z:-10).
                    var camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5,-10), scene);

                    // Target the camera to scene origin.
                    camera.setTarget(BABYLON.Vector3.Zero());

                    // Attach the camera to the canvas.
                    camera.attachControl(canvas, false);

                    // Create a basic light, aiming 0,1,0 - meaning, to the sky.
                    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

                    // Create a built-in "sphere" shape. 
                    var sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {segments:16, diameter:2}, scene);

                    // Move the sphere upward 1/2 of its height.
                    sphere.position.y = 1;

                    // Create a built-in "ground" shape.
                    var ground = BABYLON.MeshBuilder.CreateGround('ground1', {height:6, width:6, subdivisions: 2}, scene);

                    // Return the created scene.
                    return scene;
                }
        p.js.
            Now that our <code>createScene()</code> function is ready, we need to call it:
        pre.js
            code.javascript.js.
                var scene = createScene();
        p.js.
            The next three javascript lines are very important, as they register a render loop to repeatedly render the
            scene on the canvas:
        pre.js
            code.javascript.js.
                engine.runRenderLoop(function() {
                    scene.render();
                });
        p.js.
            Lastly, you should implement a canvas/window resize event handler, like this:
        pre.js
            code.javascript.js.
                window.addEventListener('resize', function() {
                    engine.resize();
                });
        p.ts.
            We will now add the necessary TypeScript code to run our demonstration.
            To begin with, create a new file <code>game.ts</code> that references the BabylonJS TypeScript 
            definition file in your project folder, then create a new <code>Game</code>
            class with a <code>constructor</code> and two methods, <code>createScene</code>
            and <code>doRender</code>. Then add an Event Listener for <code>DOMContentLoaded</code>
            which will instantiate the <code>Game</code>, create the scene and start the render loop :
        pre.ts
            code.javascript.ts.
                ///&lt;reference path="babylon.d.ts" /&gt;

                class Game {
                  constructor(canvasElement : string) {
                  }

                  createScene() : void {
                  }

                  doRender() : void {
                  }
                }

                window.addEventListener('DOMContentLoaded', () => {
                  // Create the game using the 'renderCanvas'.
                  let game = new Game('renderCanvas');

                  // Create the scene.
                  game.createScene();

                  // Start render loop.
                  game.doRender();
                });
        p.ts.
            Next, add the instance variables needed for our game. These will
            all be private so, following the <a href="/How_To/Approved_Naming_Conventions">BabylonJS 
            coding guidelines</a>, they'll each be prefixed with an underscore :
        pre.ts
            code.javascript.ts.
                class Game {
                    private _canvas: HTMLCanvasElement;
                    private _engine: BABYLON.Engine;
                    private _scene: BABYLON.Scene;
                    private _camera: BABYLON.FreeCamera;
                    private _light: BABYLON.Light;

                    ...
                }
        p.ts.
            Now implement the <code>constructor</code>. It's passed the name of the canvas element
            and constructors have no return value. The code uses the <code>canvasElement</code>
            parameter to create the canvas and then creates the engine :
        pre.ts
            code.javascript.ts.
                constructor(canvasElement : string) {
                    // Create canvas and engine.
                    this._canvas = document.getElementById(canvasElement) as HTMLCanvasElement;
                    this._engine = new BABYLON.Engine(this._canvas, true);
                }
        p.ts.
            Then implement <code>createScene</code>, which takes no parameters and returns nothing,
            hence its type is <code>void</code>. The code comments detail its actions.
        pre.ts
            code.javascript.ts.
                createScene() : void {
                    // Create a basic BJS Scene object.
                    this._scene = new BABYLON.Scene(this._engine);

                    // Create a FreeCamera, and set its position to (x:0, y:5, z:-10).
                    this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), this._scene);

                    // Target the camera to scene origin.
                    this._camera.setTarget(BABYLON.Vector3.Zero());

                    // Attach the camera to the canvas.
                    this._camera.attachControl(this._canvas, false);

                    // Create a basic light, aiming 0,1,0 - meaning, to the sky.
                    this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene);

                    // Create a built-in "sphere" shape; with 16 segments and diameter of 2.
                    let sphere = BABYLON.MeshBuilder.CreateSphere('sphere',
                                                {segments: 16, diameter: 2}, this._scene);

                    // Move the sphere upward 1/2 of its height.
                    sphere.position.y = 1;

                    // Create a built-in "ground" shape.
                    let ground = BABYLON.MeshBuilder.CreateGround('ground',
                                                {width: 6, height: 6, subdivisions: 2}, this._scene);
                }
        p.ts.
            Now implement <code>doRender</code>, which also takes no
            parameters and returns nothing. This routine starts the rendering
            loop and adds the resize Event Listener :
        pre.ts
            code.javascript.ts.
                doRender() : void {
                    // Run the render loop.
                    this._engine.runRenderLoop(() => {
                        this._scene.render();
                    });

                    // The canvas/window resize event handler.
                    window.addEventListener('resize', () => {
                        this._engine.resize();
                    });
                }
        p.ts.
            Finally, save the <code>game.ts</code> file and add the reference to <code>game.js</code>,
            which will be generated from <code>game.ts</code>, to your index.html :
        pre.ts
            code.html.
                &lt;!DOCTYPE html&gt;
                &lt;html&gt;
                &lt;head&gt;
                    &lt;script src="game.js"&gt;&lt;/script&gt;
                &lt;/head&gt;
                &lt;/html&gt;
        p.ts.
            Your Awesome Project directory should now contain:
        pre.ts
            code.github.ts.
                yourAwesomeProject
                    |- index.html
                    |- game.ts
                    |- babylon.d.ts
        p.ts.
            Now compile <code>game.ts</code> which will output <code>game.js</code>:
        pre.ts
            code.github.ts.
                tsc game.ts babylon.d.ts
        p.ts.
            You should now see <code>game.js</code> in Your Awesome Project directory:
        pre.ts
            code.github.ts.
                yourAwesomeProject
                    |- index.html
                    |- game.js
                    |- game.ts
                    |- babylon.d.ts
        p.
            And that's it! Save your files and open <code>index.html</code> with your favorite web browser. You should see the
            following:
        div.bigimage
            a(href="http://www.babylonjs-playground.com/#12S23Y", target="_blank")
                img(src='img/getting_started_demo.jpg').demo-img
        p.
            You can click on the image above to see a live demo on the BabylonJS playground.
        p.
            If you have any trouble with this demonstration, feel free to copy-paste the following code in your <code>
            index.html</code> file:
        pre
            code.html.js.
                &lt;!DOCTYPE html&gt;
                &lt;html&gt;
                &lt;head&gt;
                    &lt;meta http-equiv="Content-Type" content="text/html" charset="utf-8"/&gt;
                    &lt;title&gt;Babylon - Getting Started&lt;/title&gt;
                    &lt;!--- Link to the last version of BabylonJS ---&gt;
                    &lt;script src="https://cdn.babylonjs.com/babylon.js"&gt;&lt;/script&gt;
                    &lt;style&gt;
                        html, body {
                            overflow: hidden;
                            width   : 100%;
                            height  : 100%;
                            margin  : 0;
                            padding : 0;
                        }

                        #renderCanvas {
                            width   : 100%;
                            height  : 100%;
                            touch-action: none;
                        }
                    &lt;/style&gt;
                &lt;/head&gt;
                &lt;body&gt;
                    &lt;canvas id="renderCanvas"&gt;&lt;/canvas&gt;
                    &lt;script&gt;
                        window.addEventListener('DOMContentLoaded', function(){
                            // get the canvas DOM element
                            var canvas = document.getElementById('renderCanvas');

                            // load the 3D engine
                            var engine = new BABYLON.Engine(canvas, true);

                            // createScene function that creates and return the scene
                            var createScene = function(){
                                // create a basic BJS Scene object
                                var scene = new BABYLON.Scene(engine);

                                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

                                // target the camera to scene origin
                                camera.setTarget(BABYLON.Vector3.Zero());

                                // attach the camera to the canvas
                                camera.attachControl(canvas, false);

                                // create a basic light, aiming 0,1,0 - meaning, to the sky
                                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

                                // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
                                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                                // move the sphere upward 1/2 of its height
                                sphere.position.y = 1;

                                // create a built-in "ground" shape;
                                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

                                // return the created scene
                                return scene;
                            }

                            // call the createScene function
                            var scene = createScene();

                            // run the render loop
                            engine.runRenderLoop(function(){
                                scene.render();
                            });

                            // the canvas/window resize event handler
                            window.addEventListener('resize', function(){
                                engine.resize();
                            });
                        });
                    &lt;/script&gt;
                &lt;/body&gt;
                &lt;/html&gt;
            code.html.ts.
                &lt;!DOCTYPE html&gt;
                &lt;html&gt;
                &lt;head&gt;
                    &lt;meta http-equiv="Content-Type" content="text/html" charset="utf-8"/&gt;
                    &lt;title&gt;Babylon - Getting Started&lt;/title&gt;
                    &lt;!--- link to the last version of babylon ---&gt;
                    &lt;script src="https://cdn.babylonjs.com/babylon.js"&gt;&lt;/script&gt;
                    &lt;script src="game.js"&gt;&lt;/script&gt;
                    &lt;style&gt;
                        html, body {
                            overflow: hidden;
                            width   : 100%;
                            height  : 100%;
                            margin  : 0;
                            padding : 0;
                        }

                        #renderCanvas {
                            width   : 100%;
                            height  : 100%;
                            touch-action: none;
                        }
                    &lt;/style&gt;
                &lt;/head&gt;
                &lt;body&gt;
                    &lt;canvas id="renderCanvas"&gt;&lt;/canvas&gt;
                &lt;/body&gt;
                &lt;/html&gt;
        p.ts.
            Then, feel free to copy-paste the following code in your <code>game.ts</code> file:
        pre.ts
            code.javascript.ts.
                ///&lt;reference path="babylon.d.ts" /&gt;

                class Game {
                    private _canvas: HTMLCanvasElement;
                    private _engine: BABYLON.Engine;
                    private _scene: BABYLON.Scene;
                    private _camera: BABYLON.FreeCamera;
                    private _light: BABYLON.Light;

                    constructor(canvasElement : string) {
                        // Create canvas and engine.
                        this._canvas = document.getElementById(canvasElement) as HTMLCanvasElement;
                        this._engine = new BABYLON.Engine(this._canvas, true);
                    }

                    createScene() : void {
                        // Create a basic BJS Scene object.
                        this._scene = new BABYLON.Scene(this._engine);

                        // Create a FreeCamera, and set its position to (x:0, y:5, z:-10).
                        this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), this._scene);

                        // Target the camera to scene origin.
                        this._camera.setTarget(BABYLON.Vector3.Zero());

                        // Attach the camera to the canvas.
                        this._camera.attachControl(this._canvas, false);

                        // Create a basic light, aiming 0,1,0 - meaning, to the sky.
                        this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene);

                        // Create a built-in "sphere" shape; with 16 segments and diameter of 2.
                        let sphere = BABYLON.MeshBuilder.CreateSphere('sphere1',
                                                {segments: 16, diameter: 2}, this._scene);

                        // Move the sphere upward 1/2 of its height.
                        sphere.position.y = 1;

                        // Create a built-in "ground" shape.
                        let ground = BABYLON.MeshBuilder.CreateGround('ground1',
                                                {width: 6, height: 6, subdivisions: 2}, this._scene);
                    }

                    doRender() : void {
                        // Run the render loop.
                        this._engine.runRenderLoop(() => {
                            this._scene.render();
                        });

                        // The canvas/window resize event handler.
                        window.addEventListener('resize', () => {
                            this._engine.resize();
                        });
                    }
                }

                window.addEventListener('DOMContentLoaded', () => {
                    // Create the game using the 'renderCanvas'.
                    let game = new Game('renderCanvas');

                    // Create the scene.
                    game.createScene();

                    // Start render loop.
                    game.doRender();
                });
    // HIGHLIGHT JS
    script(src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/languages/javascript.min.js')
    script.
        hljs.initHighlightingOnLoad();
    script.
        var selectedLanguage = 'js';

        document.getElementById('js-start').addEventListener('click', function() {
            selectedLanguage = 'js';

            var hiddenElements = document.getElementsByClassName('ts');
            var visibleElements = document.getElementsByClassName('js');

            for (var i = 0; i < hiddenElements.length; i++) {
                hiddenElements[i].style.display = 'none';
            }
            for (var i = 0; i < visibleElements.length; i++) {
                visibleElements[i].style.display = '';
            }

            document.getElementById('js-start').className += ' toggle-selected';
            document.getElementById('ts-start').className = document.getElementById('ts-start').className.replace(/\btoggle-selected\b/g,'');
        });

        document.getElementById('ts-start').addEventListener('click', function() {
            selectedLanguage = 'ts';

            var hiddenElements = document.getElementsByClassName('js');
            var visibleElements = document.getElementsByClassName('ts');

            for (var i = 0; i < hiddenElements.length; i++) {
                hiddenElements[i].style.display = 'none';
            }
            for (var i = 0; i < visibleElements.length; i++) {
                visibleElements[i].style.display = '';
            }

            document.getElementById('js-start').className = document.getElementById('js-start').className.replace(/\btoggle-selected\b/g,'');
            document.getElementById('ts-start').className += ' toggle-selected';
        });

        var hiddenElements = document.getElementsByClassName('ts');
        var visibleElements = document.getElementsByClassName('js');

        for (var i = 0; i < hiddenElements.length; i++) {
            hiddenElements[i].style.display = 'none';
        }
        for (var i = 0; i < visibleElements.length; i++) {
            visibleElements[i].style.display = '';
        }

        document.getElementById('js-start').className += ' toggle-selected';
        document.getElementById('ts-start').className = document.getElementById('ts-start').className.replace(/\btoggle-selected\b/g,'');
    style.
        .selection-toggles {
            text-align: center;
        }
        .selection-toggle {
            background-color: #f8eec7;
            color: #ffffff;
            font-size: 20px;
            padding: 10px 20px 10px 20px;
            text-decoration: none;
            border: none;
        }
        .toggle-selected {
            background-color: #fc4349;
        }





           
 
        

include includes/footer.pug