Dev►Babylon.js

Babylon.js v2.5 and what's next?

Last week we released Babylon.js v2.5. I do not want to catalog here all features we stuffed this version with but instead I would like to underline some really cool ones.

I will also present here non core features that are worth a try.

But before going to the specifics of this article I would like to celebrate the use of Babylon.js as rendering engine in www.remix3d.com.

Babylon.js was also use by Neo Pangea and National Geographics in two multimedia experiences:

And now let’s talk about great stuff that came with v2.5.

Highlight your world

Sebastien Vandenberghe (one of our core developer) worked on a system to allow developers to highlight specific meshes in your scene: The HighlightLayer.

This tool can be used to produced smooth and nice glow effects around your objects:

You can try it live here: https://www.babylonjs.com/Demos/Highlights/

As usual with Babylon.js, the required code is kept to the minimum amount of code:

More information in our documentation: https://doc.babylonjs.com/tutorials/Highlight_Layer

Rendering special effects with the StandardRenderingPipeline

Julien Moreau-Mathis (another core contributor) created the StandardRenderingPipeline which is a set of postprocess effects that can be used to simulate real world effects like lens flare, depth of field or advanced illumination effects:

You can try it live here: https://www.babylonjs.com/Demos/StandardRenderingPipeline/

The StandardRenderingPipeline is a monster with tons of advanced shaders that work together. But for a developer, you only have to instantiate it and play with properties:

More information in our documentation: https://doc.babylonjs.com/tutorials/Using_Standard_Rendering_Pipeline

Build your own Babylon.js

Simplicity is the foundation of Babylon.js and we struggle everyday to keep it our main objective. This is why the framework tries to provide all core services in one single file.

But to avoid bloating it with tons of optional features we also provide additional services available through various .js files.

This is the case for instance for additional materials or post processes.

In order to make them more discoverable, we created the Babylon.js Version Builder page: https://www.babylonjs.com/versionBuilder/

On this page you can find all optional module and get a merged file that you can then use in your own code.

Introducing the Babylon.js editor

Julien Moreau-Mathis also worked on a complete WYSIWYG editor for Babylon.js: https://editor.babylonjs.com/

To illustrate the power you can harness with this editor he created a really impressive demo: https://www.babylonjs.com/demos/ruins/ (please note that Julien is also a talented musician)

To learn more about the editor, you can read the article written by Julien on Medium.

The DebugLayer is dead. Long live the Inspector

Julian Chenard (Once again a core contributor) spent a lot of time revamping the good old DebugLayer.

The DebugLayer is an internal HTML layer that you can activate on any scene using scene.debugLayer.show().

The display UI can help you debug a scene but giving you control over engine features. You can then turn on/off specific channels, display bounding boxes and much more.

The only problem was that the UI was not really responsive nor really modern (ok let’s admit it was awful).

The new version is much cleaner and provide far more features. You can now:

  • get and control the active camera
  • get the list of shaders and materials
  • get the list of lights
  • Textures can be displayed
  • Properties of type text or number can be edited
  • The debugLayer can be moved to a popup window

Please note that this feature is still under heavy development so expect some bugs.

Using Visual Studio Code to contribute to Babylon.js

I used to use Visual Studio to develop Babylon.js. But after the release of Visual Studio Code, I was really interested to move our pipeline to this smaller (and faster) IDE.

This is now done thanks to Sebastien who wrote a really convenient gulp scripts to build all the library in a VS Code compatible way.

In a nutshell, after forking and cloning Babylon.js repo, you are 3 minutes await from being able to test and debug.

You can learn more here: https://doc.babylonjs.com/generals/how_to_start

Call to action

As a conclusion, I would like to give you some pointers about Babylon.js: