Getting started with 3D game development using HTML5

This article shows how to get started with 3D game development with HTML5 using Intel XDK. The 3D game engine used in this example is BabylonJS* and Intel XDK is used for development and testing the 3D game app on various mobile platforms like iOS, Android and Windows devices.

BabylonJS

BabylonJS is a JavaScript Framework for developing 3D game with HTML5 and WebGL. 

This example shows how to create a 3D box and rotate it. The 3D object is created and animated using the Mesh, Texture, Lighting, Camera and Animation properties of the game engine. 

The BabylonJS framework can be downloaded from github. Grab the babylon.2.2.js file and import it into the index.html file with a canvas:

<!DOCTYPE html>
<html>
<head>
    <title>BabylonJS</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
    <script src="lib/babylon.2.2.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #gameCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>

<body>
    <canvas id="gameCanvas"></canvas>
</body>
</html>

The BabylonJS framework has an engine object that lets you create a scene and add 3D shapes, camera, lighting, textures and more.

Engine

The main game logic starts with creating an engine object for the canvas

var canvas = document.getElementById('gameCanvas');
var engine = new BABYLON.Engine(canvas, true);

Once the engine is initialized, create the scene with Camera, Lighting, Mesh and Texture.

Scene

The scene helps you create the 3D object, the scene is created as shown below:

var scene = new BABYLON.Scene(engine);

Camera

The camera is used to display the view of 3D environment and is defined as:

var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
camera.setTarget(BABYLON.Vector3.Zero());

Lighting

The Light is used to emit light in the 3D environment and is defined as:

var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

Mesh

The Mesh is used to create a shape for the 3D object.

var box = new BABYLON.Mesh.CreateBox('box1', 2.0, scene);

Texture

A image pattern can be applied on the 3D box using the Texture property:

var texture = new BABYLON.StandardMaterial("texture1", scene);
texture.bumpTexture = new BABYLON.Texture("asset/babylonjs.png", scene);
box.material = texture;

Animation

The 3D box is then animated using the Animation property

var animationX = new BABYLON.Animation.CreateAndStartAnimation('boxrotate', box, 'rotation.x', 60, 360, 1, 10);
var animationY = new BABYLON.Animation.CreateAndStartAnimation('boxrotate', box, 'rotation.y', 60, 360, 1, 10);

Rendering the Scene

Once the scene is created with all the above entities, render it in a loop:

engine.runRenderLoop(function(){
       scene.render();
});

The 3D games sample can be run in the Intel XDK emulator:

Below is complete code with for a rotating 3D box that you can copy and paste into an index.html file using Intel XDK and emulate.

<!DOCTYPE html>
<html>
<head>
    <title>BabylonJS</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
    <script src="lib/babylon.2.2.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #gameCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>

<body>
    <canvas id="gameCanvas"></canvas>

    <script>

        window.addEventListener('DOMContentLoaded', function(){
            // get the canvas DOM element
            var canvas = document.getElementById('gameCanvas');

            // 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());

                // 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 "box" shape
                var box = new BABYLON.Mesh.CreateBox('box1', 2.0, scene);
                
                // add image texture to the box
                var texture = new BABYLON.StandardMaterial("texture1", scene);
                texture.bumpTexture = new BABYLON.Texture("asset/babylonjs.png", scene);
                box.material = texture;
                
                // rotate the box
                var animationX = new BABYLON.Animation.CreateAndStartAnimation('boxrotate', box, 'rotation.x', 60, 360, 1, 10);
                var animationY = new BABYLON.Animation.CreateAndStartAnimation('boxrotate', box, 'rotation.y', 60, 360, 1, 10);
                
                // 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();
            });
        });

    </script>
</body>
</html>

If you copy this code into an index.html file, be aware that there are two dependencies:

  • babylon.2.2.js  has to be downloaded from BabylonJS github
  • babylonjs.png image file can be any image that provides texture for the box

For more information about the Intel XDK cross-platform development environment, see xdk.intel.com.

For more complete information about compiler optimizations, see our Optimization Notice.