Babylon.js

Sam Johnson
3 min readMar 16, 2021

You may not be looking into a career based in game design or development, but if you want to build interactive and responsive websites, then Babylon might be the framework for you to do just that. Babylon is a JavaScript framework that quickly renders a 3D environment in the browser. This could be utilized to do anything from building a small video game to showcasing a design for a product. So how does this all work while staying in JavaScript?

Getting started with Babylon

Babylon can be installed as a NPM module and then accessed in all of your files through the above command. Then the next step is setting your canvas for where your 3D rendering is going to happen. That can be done by adding a canvas tag in your HTML file and everything that we want to happen in our webpage will happen on that canvas. Now that we have our canvas set up, we can access the whole Babylon library of commands and start building out the scene that we want. There are a lot of elements that go into building out a usable scene, and just starting out it is so much information to try and parse out by yourself. Thankfully the BabylonJS website has a sort of playground where you can see about a hundred different scenes and how they are built out. They provide you with the code used to build the particular scene, and let you interact with any elements in the scene while showing you what code is allowing that to happen. So once you have gotten comfortable with the basics you can go about building out your own scene.

Scene in the playground of Babylon.js

Applications

There haven’t been any groundbreaking games made with this framework yet, but that doesn’t mean it’s not possible; but with the browser based design, you are probably better served searching out engines like Unity or Unreal if your main goal is in that realm. With that said, hop on to any online retailer and you’ll find galleries on galleries of photos of their products. That’s a solid start, but imagine being able to show how a shirt or pair of pants looks while someone is walking around and moving. Babylon can certainly help you get there and render in every possible aspect of the potential user. The physics engines from Oimo, Ammo, and Cannon all lead to an incredibly fluid looking scene. Babylon is quite an exciting new frontier for JavaScript developers and opens up even more opportunities for them to explore.

Sources:

https://doc.babylonjs.com/

--

--