Introduction to Babylon.Js

Whether it be front-end, back-end, mobile, or desktop, Javascript is a strong language to tackle just about any project you need done. The one thing I would never consider Javascript for however, is 3D game development. That is — until I came across Babylon.Js. In this series I will be walking you through the process as I develop a simple 3D maze game with Babylon and vanilla Javascript.

So what is Babylon.JS?

Simply put, Babylon.JS is a web-based graphic rendering engine. What makes Babylon awesome is that it encapsulates all the features of WebGL in a much more user friendly way. While getting a scene setup with raw WebGL may take several hundred lines of code, Babylon can get it done in less than 100.

Let’s get started by making a new Javascript project with two folders:

• A public folder, which will hold our index.html file
• A src folder, which will hold the bulk of our code in an app.js file

Next we’ll need to spin up a package.json (npm init -y), and install a few dependencies:

npm i @babylonjs/core @babylonjs/inspector webpack webpack-cli

This will allow us to access the features in the Babylon.JS library, and leverage webpack to bundle our final project into a much more optimized file that we’ll plug into our index.html via a <script> tag </script>.

Just a bit more setup…

Now we need to be sure to actually configure webpack. There are tons of options you can set in the webpack.config.js file, but for our needs something simple like this will work.

webpack.config.js

Now that we’re done with the initial project setup, we can get to the fun stuff!

The first thing we’ll need to do is create a canvas element — in order to render in a browser, we need a canvas to ‘draw’ our scene on. Because we’ll be building this up as a 3D, first person game, I decided to let the canvas take up 100% of the webpage. In the code snippet below I also called the function, and imported a few classes we’ll need from the @babylonjs/core package

With our canvas made, we can turn our attention to the engine.

I wrapped the engine in a general ‘startGame’ function

Easy, right? For the engine all we need to pass in is the canvas to target, and whether we want to enable anti-aliasing or not.

Lights…Camera…Scene?

Having a running engine is definitely one of the most important steps — without it nothing will run! Unfortunately with just the engine running we still won’t have anything to view, lets fix that.

To keep my code clean, I decided to create a few helper functions to handle setting up these components.

Vector3’s are used for direction because we are working in the 3D space

Lastly, let’s plug everything into our main startGame() function, and create a Mesh(materials/objects) so we have something to view.

From here if you build and run the project locally (I recommend the Live Server VSCode extension) you should see a blue background, with a cube rendered on the screen. Moving the mouse around will control the camera as we did attach the freeCam to our scene. In the next article I’ll be building up the terrain, and making a player character so this starts to feel like more of a game.

• If at this point something doesn’t work, be sure to check the package.json, you’ll need a script to run webpack.
• Be sure to also include the .bundle.js in a script tag inside the body of the index.html, otherwise nothing can run!