What's new in Babylon.js 2.4

Woot! What a version again! It seems to me that this is my state of mind for every version but, whaou! we put so much love again in this version.

You can find the complete release notes here but I still would like to highlight a few features (Even if they all deserve some attention).

Canvas2D

Canvas2D (by Loic Baumann aka Nockawa) is a HUGE addition to babylon.js. It is basically an entire 2D accelerated engine available out of the box.

Indeed babylon.js is a full featured 3D engine, but the need to handle 2D content is often encountered when working on games or complex applications.

It is to provide an answer to this demand that we’ve developed the Canvas2D feature.

Canvas2D in a non HTML feature, 100% WebGL based, developed to serve the purpose of drawing, animating and interaction with 2D Content.

Here are some samples demonstrating the raw power of this new feature:

• https://babylonjs-playground.com/#1BKDEO#15

  • https://babylonjs-playground.com/#OWCCR#7

    • https://babylonjs-playground.com/#15C96V#4

      • https://babylonjs-playground.com/#1N9RJY#1
      
      You can find a very detailed documentation here: https://doc.babylonjs.com/overviews/Canvas2D_Home

    Refraction

    

    Standard material and physically based rendering material both support refraction channel. You can now use a RefractionTexture to automatically generate a live cubemap of the environment and use it as a source for the refraction channel.

    Materials will then apply optic deformation to simulate real-time refraction.

    You can see a live demo here: https://www.babylonjs.com/Demos/refraction/ and you can also play with it on the playground: https://www.babylonjs-playground.com/?27 (alongside with fresnel and reflection)

    HDR cubemaps

    

    Sebastien Vandenberghe (aka Sevan) introduced support for HDR maps for PBR. The result is mind blowing: https://babylonjs-playground.com/#QJS2W#16

    We now have an outstanding support for physically based rendering directly out of the box:

    • https://doc.babylonjs.com/overviews/Physically_Based_Rendering

      • https://doc.babylonjs.com/overviews/Physically_Based_Rendering_Master

      Unlimited number of dynamic lights

    Babylon.js v2.3 was limited to 4 dynamic lights simultaneously. It was already a great number but with the raise of powerful GPUs, we decided to remove this constraint.

    Now Standard material and PBR material can have an unlimited number of dynamic lights. Well, not that unlimited as you will need to deal with GPU limitation but at least there is no more an arbitrary constraint.

    Example here with 64 lights: https://www.babylonjs-playground.com/#IRVAX#11

    

    Obviously this also applies to dynamic shadows.

    Here is an example with 10 spotlights with shadows: https://www.babylonjs-playground.com/#1G708U#163

    

    Completely rewrite of physic engines support

    Raanan Weber spent a big amount of time working on our physic engines plugins. The goal was to make it more flexible and also to support more features from Oimo.js and Cannon.js.

    The result is quite convincing as we were able to add support for many different joints, mesh and heightmap impostors, etc. : https://www.babylonjs-playground.com/#SFELK#1 (Use cursor keys to control the “car”)

    

    More about our physic engines support: https://doc.babylonjs.com/overviews/Using_The_Physics_Engine

    Improved Unity3D exporter

    We added several missing pieces to our Unity3D exporter:

    • Skeletons are now exported and animations are supported

      • We generate PBR material when we find compatible shaders

        • Lightmaps are exported
        
        More about Unity3D exporter: https://doc.babylonjs.com/exporters/Unity

      Parallax mapping

      Loic (once again!) added support for parallax mapping and parallax occlusion mapping.

      

      As you can see, these techniques allow you to simulate volume with textures only and the result is quite impressive: https://babylonjs-playground.com/#10I31V#8

      You can find more about it here: https://doc.babylonjs.com/tutorials/Using_parallax_mapping

      Shader includes

      To improve (and simplify) shader conception, we added support to shader includes in babylon.js engine. Includes are shader pieces that can be reference by main shader programs (Exactly like a C/C++ include directive).

      This allows us to share code between shaders reducing drastically the required maintenance and the time spent writing shaders.

      For instance, here is an extract of the main shaders with includes highlighted:

      

      We also introduced support to instanced includes. This kind of includes is really useful when you deal with portion of code that you need to repeat over and over (like when you unfold code for lights for instance).

      

      This code will then be automatically unfold using this source (with {X} replaced by values from 0 to maxSimultaneousLights variable):

      

      New design for our documentation site

      We also worked on the documentation side of the house with a rebranded documentation site: https://doc.babylonjs.com/

      

      Conclusion

      I’m not a big fan of long posts so I need to stop here even if I would have loved to detail all wonderful features we shaped with love.

      Do not hesitate to give us your feedback on our forum. It is certainly one of the friendliest you can find out there.

      If you want to learn more about babylon.js, do not forget to try our playground.

       

      Oh and by the way, if you go to https://xboxdesignlab.xbox.com/en-US/customize, you will see a real life usage of Babylon.js!