Using Babylon.js to Build 3D Games for the Web

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

Babylon.js is a WebGL-based 3D engine that focuses mainly on game development and ease of use. As a 3D engine, it has the tools to create, display, and texture meshes in space, and to add light sources and cameras. Because it’s game-focused, Babylon.js has some extra features that a regular 3D engine doesn’t require. It has native support for collision detection, scene gravity, game-¬oriented cameras (for example, a follow-camera that tracks a moving object), as well as native support for Oculus Rift and other virtual reality (VR) devices. It has a physics engine plug-in system, native audio support, a user input-based action manager and much more. I’ll explore all of these features in this tutorial.

Start by getting the code here

About the Tutorial

In this tutorial I’ll develop a simple bowling game. I’ll create a bowling lane, add 10 pins and a bowling ball, and provide the ability to throw the ball. My game will surely not be ready to be released, but it will show how you can develop a game using the tools Babylon.js provides. I’ll deliberately avoid using any external tools during development. The objects, cameras, textures and more will be created using JavaScript code only.

The Babylon.js version I’ll be using during this tutorial is the latest stable release—2.1. David Catuhe and the Babylon development team are trying to keep the framework as backward-compatible as possible, so I can only assume that this tutorial will work properly on future releases, at least until the next major release. And I’m using Visual Studio 2015 Community Edition, but you can use any IDE you’d like.

The tutorial will be divided into two parts. In this article, I’ll present an overview of the basic building blocks of Babylon.js. I’ll create the meshes, texture them, add cameras and light sources, and enable simple user interaction. In part two, I’ll show where Babylon.js really shines by adding collision and physics, audio, user actions, and special types of cameras.

Getting Started: A New Babylon.js Project

A simple Babylon.js project is a static Web site. Because I’m using Visual Studio, I’ll use the local IIS server embedded in Visual Studio to host those static files. Visual Studio doesn’t have a template for a static Web site, so a different approach is needed.

First, create a new blank solution. Open Visual Studio and go to File | New | Project. Select Other Project Types on the left pane and then Blank Solution, as shown in Figure 1. Give the solution a name (I used BabylonBowling) and click OK.

Figure 1 Creating a New Blank Solution in Visual Studio

To create a new static Web site, first you need to create a new directory to host it. Right-click on the empty solution, then click on Open Folder in File Explorer, as shown in Figure 2.

Figure 2 Opening the Solution’s Folder in File Explorer

Create a new directory for the project called BabylonBowling and close File Explorer.

Right-click on the solution and choose Add | Existing Website. Select the newly created folder (make sure you choose the folder you just created and not the solution’s folder) and click Open. You should now have a blank Web site as the only project of this solution.

After creating the project, you need to add the framework and the framework’s dependencies. There are a few ways to do that. The simplest way is to use the NuGet Package Manager.

Right-click on the project and choose Manage NuGet packages. Click in the search field (the keyboard shortcut is Ctrl+E) and type babylon. You’ll see a window similar to the one in Figure 3. Select BabylonJS. Make sure the Version selected is 2.1 (or the latest stable version) and click Install. Click OK in the Preview window that pops up (if one pops up) and Babylon.js will be installed into your empty project, including a demo scene.

Figure 3 Adding Babylon.js Using the NuGet Package Manager

For those using npm as a package manager, you can install Babylon.js using the command:

npm install babylonjs

After installing the package, you should have the following files in the scripts folder:

• babylon.js, a minified version of Babylon.js
• babylon.max.js, a debug version of Babylon.js
• Oimo.js, the Oimo JS physics engine that will be used in part two of this tutorial
• poly2tri.js, an optional triangulation library (http://ift.tt/1JWOgZk)
• hand-minified.js, a pointer-events polyfill; this is missing when using npm, so install using the command:

npm install handjs

The NuGet installer also creates an index.html file and an index.js file.

An error in the NuGet package adds an unneeded line to web.config. Until it’s fixed, double-click on this file and remove the line highlighted in Figure 4 (in my solution, it’s line 9).

Figure 4 Delete the Highlighted Line from web.config

You can now test the project. Open the project in your default browser using Ctrl+Shift+W or by clicking the Run button on the top navbar. If you see the 3D spaceship shown in Figure 5, your project is all set.

Figure 5 The Babylon Default Spaceship

For those using different IDEs, just follow the “Creating Basic Scene” tutorial on the Babylon.js Documentation page to get to the current state. I still recommend using the npm to install the dependencies if not using NuGet. The tutorial can be found at bit.ly/1MXT6WP.

To start from scratch, delete the function createScene in index.js.

Continue reading %Using Babylon.js to Build 3D Games for the Web%

by Raanan Weber via SitePoint