What’s new in Babylon.js v2.0

Well, a lot of things are new actually . You can find the complete “What’s new” here but I would like to take some time with you to showcase a few of the cool stuff that we cooked with love for you.

Feel free to ping me on Twitter if you want to discuss about this article: @deltakosh

But before digging into these features, please let me share with you the fantastic demo that Michel Rousseau did for Babylon.js v2.0: https://www.babylonjs.com/?MANSION

This demo showcases 3D sound positioning and

WebAudio that David Rousset added in the framework (Expect a post from him soon on this topic).

This demo contains 6 clickable areas with various Easter eggs…

You will also see a great usage of our volumetric light scattering post-process developed by Julien Moreau-Mathis.

Performance

We added some interesting tools to help web developers debug or optimize their scenes. One of these tools is the debug layer. When activated, it will give you a lot of great information about the current scene. It allows you to enable/disable specific features of the engine and provides performance counters as well.

We also used it to integrate with F12 tools thanks to user marks: https://blogs.msdn.com/b/eternalcoding/archive/2015/02/02/using-user-mark-to-analyze-performance-of-your-javascript-code.aspx

Rendering a scene on a browser is a great experience because you can reach a lot of different users and hardware. But the main associated caveat is that you can encounter very low end devices.

The SceneOptimizer tool is designed to help you reach a specific framerate by gracefully degrading rendering quality at runtime. For more information, please read associated documentation.

Special effects

Creating awesome visual effects is one of my biggest pleasure when I work with a 3D engine. However, a specific option was missing from Babylon.js to allow a huge variety of these effects: the DepthRenderer. Now with Babylon.js v2.0 we introduced a way for post process to read the depth buffer. This is why we were able to also ship the following effects:

Volumetric light scattering: https://www.babylonjs-playground.com/?25 / https://doc.babylonjs.com/page.php?p=24840

Screen Space Ambient Occlusion (SSAO) : https://www.babylonjs-playground.com/?24 / https://doc.babylonjs.com/page.php?p=24837

Rendering optimizations

To allow you to create always more complex scenes, we added support for LOD (Level of Detail). This feature can select different mesh quality based on the distance to the viewer. And obviously this works well with hardware instancing:

https://www.babylonjs.com/?LOD

On the same topic, we also added support for bones and instances. Now you can easily simulate crowds!

https://www.babylonjs.com/?INSTANCEDBONES

New documentation site

We were previously using the wiki feature of GitHub to host our documentation. But some features were missing (control over display, documentation generation from TypeScript code, better rights managements, etc..).

With babylon.js v2.0, we also shipped our new documentation site: https://doc.babylonjs.com. This site is community based as well because anyone can suggest a new page or revisions to any existing page. You can even add comments to API documentation (which obviously will be keep every time we will have to regenerate the API documentation).

And this is just the beginning

The complete change log will give you more insights about all the great stuff we added to Babylon.js.

I would like as well to thank a lot the community that works with us on this engine. Thank to them we added far more features that expected in this release. You guys rock!!!