2015-06-08

What’s new in Babylon.js v2.1

It is always a pleasure for me to write this kind of article. Talking about the great stuff we are filling Babylon.js with always make me proud and happy. And this time, this is even more true than ever because this version is definitely the most community oriented ever.

What I mean with community oriented is that community helped David (Rousset) and I a lot to ship this version by literally developing big bunch of it.

As you can see in this chart of top 6 contributor, David and I (we commit under deltakosh account) are clearly helped by others community guys:

Thanks to all these wonderful people we were able to release a LOT of new features and improvements:

https://github.com/BabylonJS/Babylon.js/releases/tag/v2.1

Among these features, I would like to highlight here some of my favorites.

Unity 5 exporter

Unity is an awesome tool to create game that can work on almost all operating systems out there. I love the Unity 5 WebGL exporter. I can export all your game to a WebGL/ASM.JS/WebAudio website.

To complete this solution, if you want to export meshes to a lighter projection that could run without ASM.JS, you can now install the Babylon.js exporter: https://github.com/BabylonJS/Babylon.js/tree/master/Exporters/Unity%205

When installed the exporter allow you to export a scene by going to Babylon.js exporter menu:

After a few seconds, a .babylon is generated alongside associated textures:

You can now load this Babylon from you JavaScript project or directly test it using the Babylon.js sandbox: https://www.babylonjs.com/sandbox

Decals

Decals are usually used to add details on 3d objects (bullets hole, local details, etc…). Internally a decal is a mesh produced from a subset of a previous one with a small offset in order to appear on top of it.

The offset can be seen like the zIndex property when using CSS. Without it, you would have seen z-fighting issues when two 3d objects are exactly at the same place:

The code to create a new decal is this one:

var newDecal = BABYLON.Mesh.CreateDecal("decal", mesh, decalPosition, normal, decalSize, angle);

For instance, in the following demo, you can click on the cat to add some bullet holes on it: https://www.babylonjs-playground.com/#1BAPRM

SIMD.js

Microsoft Edge along with Firefox and Chrome announced support for SIMD.js which is an API to use the raw power of your multi-scalars CPU directly from your JavaScript code. This is especially useful for scalar operations like matrix multiplication.

We decided (with the great help of Intel) to integrate SIMD support directly into our math library.

And this, for instance, leads to evolving this kind of code (where the same operation is applied 4 times):

To:

The main idea is to load the SIMD register with data and then execute only one instruction where multiple were required before.

You can try it now directly on our site: https://www.babylonjs.com/scenes/simd.html

This demo tries to keep a constant framerate (50fps by default) while adding new dancer every second. This leads into a huge amount of matrices multiplication for animating skeletons used by the dancers.

If your browser supports SIMD, you can enable it and see the performance boost (please note that for now, Microsoft Edge support SIMD only inside ASM.js code but this limitation will be removed in a future version).

Collisions webworkers

Ranaan Weber (a top contributor to Babylon.js) did a tremendous work to greatly improve the collisions engine by allowing Babylon.js to compute the collisions on a dedicated webworker.

Before this, if you wanted to enable collisions on a scene you ended adding invisible impostors around your objects in order to reduce the computations required. Now this is still valid but because the computations are not done on the main thread, you can easily address much more complicated scenes.

For instance, let’s take this scene where we have a pretty decent mesh (a beautiful skull) with collisions enabled on the camera (which means that if you use the mouse wheel you won’t be able to go through the skull). This demo does not use an impostor for the collisions but the real mesh itself which has more than 41000 vertices to check.

With regular collisions, the main thread has to work on rendering the scene AND also compute collisions.

With the webworkers enabled, the main thread does not have to care about collisions because a webworker (so another thread) works on it. As mostly all CPU have at least 2 cores nowadays, this is a really awesome optimization.

To enable the collisions on a webworker, you have to execute this code:

scene.workerCollisions = true|false;

To know more about collisions: https://doc.babylonjs.com/page.php?p=22091

Raanan also wrote two great articles on this topic:

· https://blog.raananweber.com/2015/05/26/collisions-using-workers-for-babylonjs/

· https://blog.raananweber.com/2015/05/30/web-worker-without-a-separate-file/

New shadows engine

Adding shadows to a scene always give a boost to realism. The previous version of the shadows engine was only able to process dynamic shadows for directional lights. The new version adds support for spot lights as well as two new filters to produce very good looking soft shadows as you can see with this demo: https://www.babylonjs.com?SOFTSHADOWS

This other demo shows you the various options you now have to cast dynamic shadows: https://www.babylonjs.com?ADVANCEDSHADOWS

To go further with shadows please read associated documentation: https://doc.babylonjs.com/page.php?p=22151

Parametric shapes

Jerome Bousquie (another top contributor) added an insane amount of new meshes based on parametric shapes.

The basic meshes you’ve seen up until now with Babylon.js have an expected shape: when you create a sphere mesh, you expect to see a spherical shape. The same goes for a box mesh, a torus, a cylinder, etc.

There is another kind of mesh whose final shapes aren’t fixed. Their final shape depends upon some parameters used by a specific function. So we call these meshes “Parametric Shapes”.

Jerome, using these parametric shapes added the following shapes to the out of the box list of meshes:

Ribbons (https://www.babylonjs.com/?RIBBONS)
Disc
Dashed lines
Lathe
Tube

If you want to know more about parametric shapes: https://doc.babylonjs.com/page.php?p=24847.

Jerome also created a tutorial to better understand ribbons: https://doc.babylonjs.com/page.php?p=25088

New lens effect

Jahow (guess what? Another top contributor Smile ) used the postprocess rendering pipeline of Babylon.js to allow you to achieve photograph-like realism.