Babylon.js: Going beyond the 2D web

The web has moved on a long way since we started to wave goodbye to Flash. Much of what we could do in animation plug-ins is now native to the browser, thanks to HTML 5 and its roster of JavaScript graphics APIs. One of the most important is WebGL, giving browsers access to the GPU and delivering interactive 2D and 3D graphics.

Microsoft’s Edge browsers, both the new Chromium-based version and the soon-to-be-deprecated EdgeHTML releases, all support WebGL. It’s a powerful tool for building graphical elements in your pages and applications, but like all powerful tools it’s complex, requiring not only JavaScript knowledge but also OpenGL’s ES Shading Language. ESSL is a C-like language that runs on GPUs, defining the shaders that WebGL’s JavaScript APIs assemble into your content.

Introducing Bablylon.js

Luckily for us, HTML 5 makes the web extensible, using JavaScript libraries to provide more user-friendly ways of working with low-level APIs such as WebGL. One of the more popular WebGL frameworks was initially released in 2013 by a pair of Microsoft engineers who were looking for a way to build 3D games on the web.

In the old Microsoft (or any other big software company) a project like Babylon.js would have been unlikely to get the support it has. It’s not connected to Microsoft’s own development tooling, or to any other of its properties. Instead, it’s only a tool that makes life easier for developers working with the modern web.

Nearly seven years later Babylon.js has built a thriving community, with about 200 contributors and many thousands of downloads. Alongside the framework there are design tools and libraries of materials and textures, with a GitHub repo and a set of npm packages for the current and next version of JavaScript.

The latest version, Babylon.js 4.0, has recently been released. It’s a significant update and is ready for the latest browser releases. It’s still used for games, but it’s become a tool for bringing your existing 3D content to the web. For example, it can provide a way of creating a 3D catalog.

Getting started

Getting started with Babylon.js is easy enough, with an online playground to help you build your first scene. Like other web scratchpads, it’s a mix of a rendering surface and a simple JavaScript editor. You can use the editor to create your first scene, editing the basic model mesh and lighting, as well as changing the camera position.

If you’ve used any 3D languages such as Unity, then the concepts in Babylon.js will be very familiar. You start by creating a scene. This is where you host all the elements of your 3D model. Once you have a scene you can attach a camera to any 3D coordinate in relation to the scene. Cameras are then positioned on a vector to a specific position in the scene and are attached to the canvas where the image is rendered.

Scenes need lighting, and you can choose the light source and the type of lighting used, as well as the direction they illuminate. Of course, you need some objects to illuminate, and Babylon.js includes primitives for most common shapes, such as spheres and the ground. These can all be positioned in the scene, which is then rendered in a canvas in your browser. The playground manages the canvas for you; all you need to do is create a scene and it’s automatically rendered.

Using the Babylon.js editor

Once you’re ready to start building a page using Babylon.js you can use its own development tools to build a scene or write a simple one yourself. In-browser and electron-based desktop design tools simplify building scenes and exporting them ready for use. You can add items and textures, change lighting, and even attach scripts to an object.

The Babylon.js team recommends using the desktop editor, and after having experimented with the web tooling, I’m inclined to agree with them. It’s a lot easier to use, and gives you access to your local file system so you can use it in conjunction with the rest of your web development toolchain. Using it is relatively easy, though it’s best suited to designers and developers with 3D experience. However, it should allow you to experiment with adding 3D content to your web applications. If you get lost there’s a quick reset button that returns the editor to its default state. Remember to save your work before clicking it!

The editor has a play option that lets you quickly open a preview window to see what your users will see, with mouse and keyboard controls of the camera position. There’s a record option so you can share your work with colleagues.

One of the more useful aspects of the Babylon.js editor is the graph view pane. This shows all the objects and elements in your scene and how they’re related. It’s an important tool for working with complex scenes and meshes where it may be hard to select a single element in the view pane. You can search the graph as well as scroll down, clicking to select items in the editor.

IDG

Putting 3D objects on the web

You’re not limited to the basic shapes Babylon.js provides by default. It supports physically based rendering of third-party models (you need to convert them to the .dds format used in Babylon.js). The same format is used for skyboxes, which can be used to apply sky effects to a scene by mapping them to the inside of a surrounding cube.

The default format for meshes, used to add rendered 3D objects to your space, is Babylon.js’s own. The team has provided a series of exporters to take models from popular 3D modeling tools and save them as Babylon files. They’re simple to use, and install as plug-ins to familiar applications like 3ds Max. You can export complete models with all their textures.

Once you’ve used the Babylon.js Editor to create a scene, save it in a web project directory. The result is a set of files that can be included in a web application, best thought of as a build output that’s ready for use. Don’t worry that the editor export includes some TypeScript files, as Babylon.js takes advantage of TypeScript’s strong typing to generate more reliable and safer code. The generated code has all the appropriate Yarn files to use it to test your application before adding it to the rest of your site. The Babylon.js team provides their own content delivery platform so you don’t need to host the library yourself: You can download it from the CDN and take advantage of your users’ browsers’ caches.

We’re going to see a lot more 3D content on the web soon, as designers and developers start taking advantage of tools like this one. By making it easy to reuse content between scenes, Babylon.js is a big step towards delivering the framework that’s necessary for this 3D future.