Build 3D games for the web with Babylon.js

  • Article

Cross-post from my Blog post on Code4Word.com
----------------------------------------------------------------------------

Hello Developers! More specifically web developers who are developing/interested in developing 3D games for the web. Are you looking for a JavaScript engine to help you do so? Look no more, there is a complete JavaScript framework called Babylon.js

Babylon.js is a 3D engine based on webgl and javascript, a complete JavaScript framework to help you build HTML5 based 3D games. The library has a repo on Github and is run by a great team of web gurus:
Lead developer: David CATUHE (@deltakosh)
Developer: David ROUSSET (@davrous)
Developer: Pierre LAGARDE (@pierlag)
3D Artist: Michel ROUSSEAU (@rousseau_michel)

The library started back in 2013 and now (at the time of writing) it is in version 2.1.

To get started, you will need the JavaScript file (or the cdn file directly "https://cdn.babylonjs.com/2-1/babylon.js"). You can download the latest version at the root of the Github repo: https://github.com/BabylonJS/Babylon.js

 Now that you have the JS file, you just have to import it to your HTML file and create an HTML5 canvas element (babylon.js will render the scenes in that canvas). Here is a sample code that begins with the HTML elements and some styling to set the stage:

 <!DOCTYPE html> 
<html xmlns="https://www.w3.org/1999/xhtml"> 
<head>
 <title>Demo Babylon</title>
 <script src="babylon.js"></script> 
 <style> 
 html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; } 
 #bablyonCanvas{ width: 100%; height: 100%; } 
</style> 
</head>
<body> 
<canvas id="bablyonCanvas"></canvas> 
</body> 
</html>

Now that we have the HTML ready, lets start interacting with some JavaScript (where the magic happens):

 <script>
 var mainCanvas = document.getElementById("bablyonCanvas"); 
 var mainEngine = new BABYLON.Engine(mainCanvas, true); 
</script>

Now that we have the HTML ready, lets start interacting with some JavaScript (where the magic happens):

 <script>
 var mainCanvas = document.getElementById("bablyonCanvas"); 
 var mainEngine = new BABYLON.Engine(mainCanvas, true); 
</script>

Note that the framework is built around a main object: the engine. This object will let you create a scene where you will be able to add meshes (the 3D objects), lights, cameras and materials.BABYLON.Engine is the hub between babylon.js and WebGL. It is responsible for sending instructions to WebGL and ultimately creating internal WebGL related objects.

So, once the engine is created, we can create the scene as per the following code:

 var scene = new BABYLON.Scene(mainEngine);

The scene object we just created acts as a container for all future entities that works together to create a 3D image. With this scene you can now add light, a camera and a mesh as per the following code snippet (the mesh here will be a sphere):

 var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
var lights = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);
var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene);

If you run the script till now nothing happens (shows) on the web page, because we didn't render the scene yet. Let's add this line of script in order to show the sphere with the light from that camera perspective:

 scene.render();

Run the script again and you will see the sphere with something like the following:

You can paste the previous code snippet, into your code editor and give it a try. Fire it up on a browser that supports WebGL and play around with the params of the effects on the scene.

The beauty of the Babylon.js engine is that it is simple and powerful. The library has a plethora of features, I have listed a few of these below and you can check the complete list at the library’s GitHub repo:

  • Complete scene graph with lights, cameras, materials and meshes
  • Collisions engine
  • Physics engine
  • Scene picking
  • Antialiasing
  • Animations engine
  • Audio engine
  • Particles Systems
  • Sprites and 2D layers
  • Optimizations engines:
    • Sub-meshes clipping
    • Offline mode via IndexedDB (Assets are saved locally to prevent reloading them)
    • Incremental loading
    • Binary compressed format
    • Automatic scene optimizer
    • Debug layer
    • SIMD.js support
  • Standard material is a per pixel material that supports:
    • Ambient lightning and texture
    • Reflection texture (Spheric, planar, cubic and projection)
    • Mirror texture
    • Up to 4 lights (points, directionals, spots, hemispherics)
    • Custom materials
  • Special FX
    • Fog
    • Fullscreen mode
    • Depth of field and lens effects
    • Lens flares
    • Multi-views
  • Textures:
    • Render target textures
    • Dynamic textures (canvas)
    • Video textures
  • Cameras (Perspective and orthographic):
    • Arc rotate camera
    • Free camera
    • Touch camera
    • Anaglyph camera
    • Virtual Joysticks camera
    • Stereoscopic camera
    • Gamepad camera
    • VR Device Oriention camera
    • WebVR camera
    • Follow camera
  • Meshes:
    • Mesh cloning
    • Dynamic meshes
    • Height maps
  • Import:
    • Babylon scene file can be converted from .OBJ, .FBX
    • Exporter for Blender
    • Exporter for Cheetah3d
    • Exporter for 3ds Max
    • Exporter for Unity 5

Again, that’s not the full list of features, I just listed some for the sake of not having a very long post but you can check out the full, great list of features at their repo as I pointed out previously.

You can play directly with the Babylon.js API via the playground on the website. There you can check a lot of simple samples so you can learn how to use it.

Lastly, if you want to learn all about it, here are a few links to get you up-to-speed:

Happy 3D coding :)