cglogo

What is BabylonJS and how can it be used?

8 June 2023

BabylonJS is a 3D engine for JavaScript that allows you to create stuff that runs in your browser, including in VR! It’s pretty easy to get started with (you can use the BabylonJS Playground in your browser) and if you want to develop privately (all Playground projects are, in theory, public) that’s not too difficult either. It’s probably best left for the creators to explain:

Our mission is to build one of the most powerful, beautiful, simple, and open web rendering engines in the world

BabylonJS website

How does BabylonJS work?

You can load BabylonJS through NPM if you’re using a NodeJS framework like React, or through a CDN (or by downloading and hosting the files yourself) if you’re using basic web editing techniques. At least to begin with we’ll be using the CDN – It’s much easier to get started and has less of a learning curve.

What’s BabylonJS used for?

Games

Games, that’s what everyone’s here for (I would expect, otherwise let me know 😉) – There’s a bunch of 3D engines out there that are built for the web, but BabylonJS seems to have the best handle on getting started, and includes easy integration into the world of VR, so that’s what we’re going with in this realm.

Don’t worry though, there’ll be other things in the works too, you might see some posts around Unity soon.

Check out Space Pirates, the game made by BabylonJS themselves!

VR experiences

BabylonJS supports WebXR, allowing access to VR experiences as long as the user has a browser and a VR headset, and makes it easy to implement – to get started needs just one line of code!

Plenty of VR experiences already use BabylonJS, but I hope to add to that in a way that’s super easy to access, both if you’re considering developing an experience or playing the games.

See more VR experiences on the BabylonJS site.

Product visualisation

Whether you’re buying a car, a pair of glasses or trying to figure out if a new piece of furniture will fit in your space, if you’ve been met with a realistic 3D representation of what you’re looking it chances are it was made using BabylonJS.

You can see examples of the visualisation and e-commerce uses on the BabylonJS site.

And more

Your imagination really is the limit with BabylonJS. It supports a whole host of tools and features that make it easy to do what you want and not get in the way, let’s go through some:

Realistic rendering – check ✅

Custom shaders – check ✅

Cross-platform – check ✅

Imagination – That’s up to you 🙃

What am I going to be doing with BabylonJS in the blog?

Start with the basics!

Eventually I want to create some browser based VR games using BabylonJS, but I think we should start with some basics first – Loading 3D models into the library, using them, creating UI and a basic shooting gallery game, before getting onto the fun stuff. Hopefully it wont be too long before you’re testing your reaction time, slicing fruit and boxing ghosts in VR.

There should be upcoming posts about getting things set up before going through the following:

  • How to import .gltf (and .glb) files and place them within a scene.
  • Handling animations in .gltf files.
  • Interacting with objects
  • Creating a shooting gallery game (maybe)

Here’s where you can find all the BabylonJS tutorials that have been published so far.

Share to socials