The Basics of Developing 3D Games in Intel XDK at BabylonJS

Hello again, Habr! Today we will talk about the development of HTML5 3D games in Intel XDK using BabylonJS . Features Intel XDK will allow you to create a game, and test it in the built-in emulator and on various mobile platforms, such as iOS, Android and Windows.

Babylonjs

BabylonJS is a JavaScript-based 3D framework designed for developing games using HTML5 and WebGL.

In the example given here, it is considered what usually begins familiarity with any development environment of three-dimensional games. We will create a cube and make it rotate. Having dealt with this material, you will learn about the creation and animation of volumetric game objects using tools such as Mesh (mesh), Texture (texture), Lighting (lighting), Camera (camera) and Animation (animation). All this is a concept universal for various 3D game development environments. They are reflected in BabylonJS.
')

About project structure

Please note that in order for this example to work properly, you need to have the following files in the project:

babylon.2.3.js is the main framework file, you need to download it from here and place it in the lib folder, which is located in the www folder of the project
babylonjs.png - this can be any image that will serve as a texture for a three-dimensional cube. It should be located in the asset folder, which is also located in the www folder.

The project was created using the Standard HTML5 template.

Project structure

Library connection

BabylonJS can be downloaded from GitHub . We use Babylon.2.3.js. This file needs to be downloaded and connected to the Index.html file, which has an HTML5 Canvas element - a digital canvas that is designed to create bitmap images using JavaScript. It will look like this:

<!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.3.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>

BabylonJS has an engine object that allows you to create a game scene (scene), add 3D objects to the game, camera, lighting, textures, and much more.

Engine object

Building game logic begins with the creation of an engine object. At the same time, the canvas element in the HTML5 document is passed to it.

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

After initialization of this object, you can create a Scene object, and after that you can add Camera, Lighting, Mesh, Texture objects to the game.

Scene object

The scene is the platform on which the game is built, with the rest of the objects associated with it. When it is created, the Engine class object must be passed to the constructor.

 var scene = new BABYLON.Scene(engine);

Camera object

The camera is used to display some part of the three-dimensional space to which it is directed. When creating the corresponding object, the previously created Scene object is passed to it and parameters are set that affect what appears on the screen.

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

Lighting object

The Lighting object is the light source for a three-dimensional scene. When it is created, the parameters and the Scene object already known to us are specified.

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

Mesh object

An object of the Mesh class is what allows you to specify the shape of a three-dimensional object. In this case, a predefined object is created - a cube.

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

Texture object

Texture object is an image that is superimposed on a three-dimensional object.

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

Animation object

The Animation object allows you to customize the animation of other objects, in our case, the cube on which the texture is applied.

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

Scene rendering

The above commands allowed us to create a scene. Now you need to display everything that happened on the screen.

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

Run the example in the Intel XDK emulator:

Project in Intel XDK emulator

Full sample code

Below is the complete code of the example in question, which can be copied and pasted into the Index.html file:

 <!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.3.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(){           //  DOM- canvas           var canvas = document.getElementById('gameCanvas');           //  3D-           var engine = new BABYLON.Engine(canvas, true);           // createScene – ,                var createScene = function(){               //    Scene               var scene = new BABYLON.Scene(engine);               //    FreeCamera,      (x:0, y:5, z:-10)               var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);               //                     camera.setTarget(BABYLON.Vector3.Zero());               //    ,     0,1,0 –   – ,  «»               var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);               //     —                var box = new BABYLON.Mesh.CreateBox('box1', 2.0, scene);                             //  ,                    var texture = new BABYLON.StandardMaterial("texture1", scene);               texture.bumpTexture = new BABYLON.Texture("asset/babylonjs.png", scene);               box.material = texture;                             //    .   .               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 scene;           }           //   createScene           var scene = createScene();           //              engine.runRenderLoop(function(){               scene.render();           });           //      canvas             window.addEventListener('resize', function(){               engine.resize();           });       });   </script> </body> </html>

findings

Your first encounter with BabylonJS has just been made. In order to evaluate the capabilities of this three-dimensional engine, take a look at its official website . There you can find many demo examples and additional materials on it. And don't forget about the documentation . If you decide to create your own three-dimensional game on BabylonJS, and we hope that this will be so, the documentation will definitely come in handy for you.

Read also about the development of HTML5 games in Intel XDK in 7 parts: