Microsoft announces Babylon.js 8.0

Our mission is to build one of the most powerful, beautiful, simple and open web rendering engines in the world. Today, web graphics and rendering hit the accelerator with the release of Babylon.js 8.0.

Babylon.js 8.0 represents a year of new features, optimizations and performance improvements aimed at helping you create more compelling, interactive web experiences faster than ever.

IBL Shadows​

Image-Based Lighting (IBL) is a computer graphics lighting technique that approximates environment lighting based on a source image. Originating in the visual effects world as a way to blend computer-generated effects with real photography, IBL has become a ubiquitous tool for computer graphics wizards around the world.

Babylon.js first introduced support for IBL over 8 years ago and it has quickly become one of the most commonly used features of the engine.

Today, we are absolutely thrilled to announce that our good friends at Adobe leveled up IBL in Babylon by adding shadows to the mix! Yup, that’s right, now both light and shadows for the scene environment can be approximated from a source image. Special shout out to Michael Bond at Adobe for his incredible work on this!

Check out a demo: Babylon.js Playground

Learn more: Babylon.js docs

Area Lights​

We are thrilled to announce that Babylon.js 8.0 brings a frequently requested feature…Area Lights! This amazing new addition to the lighting palette allows you to specify a 2D shape that emits light from it, much like a large diffuse light that you might find on a movie set! We can’t wait to see how you use this new light type to bring a new dimension to your scene!

Check out a demo: Babylon.js Playground

Learn more here: Babylon.js docs

Node Render​

One of the most powerful new features in Babylon.js 8.0 is something we call the “Node Render Graph.”

Up to now, the specific rendering pipeline for Babylon has been a black box. You tell Babylon what to render and it goes off and does it for you. There have been observables that allow you to manipulate the result after completion of a render, but the render process itself has been opaque. Well…not anymore!

With Babylon.js 8.0 you now have full control of the entire render pipeline. This means that you can fully customize and control every part of the process of how your frames are rendered on the GPU. And if that wasn’t enough, you also now have a fancy new Node Graph tool to allow you to customize your own render pipeline, without writing complex render process code! Please note that the Node Render Graph is in Alpha for you to test and discover but should not be used in production yet as it is subject to change.

Try out the editor (on desktop): Babylon.js Node Render Graph Editor

Check out a demo (on desktop): Babylon.js Node Render Graph Editor

Learn more here: Babylon.js docs

All New Lightweight Viewer​

Babylon.js is a powerful tool used by tens of thousands of people and organizations across the globe to bring complex visual ideas to life on the web. Babylon.js 8.0 unlocks a new super-powered tool for the other end of the spectrum…those scenarios where you want to display a simple 3D object on a web page with zero complexity, and stunning visuals in a tiny package.

Introducing the all new Babylon.js Lightweight Viewer. This new viewer is designed to harness the same rendering beauty and power of the full engine but comes in a smaller bundle footprint and uses dynamic imports and capabilities (audio or animation for example) depending on the model that is loaded. It can be added to any web page with just a few lines of HTML and is also fully extensible!

Of course, this new Lightweight Viewer wouldn’t be complete without a super easy-to-use configurator along with it! The Viewer Configurator is a simple tool that allows you to customize the Viewer to your exact specifications and give you the simple .html properties to set so it looks the same in your website!

Play with the Configurator (on desktop): Babylon.js Viewer Configurator

Check it out: Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best

Learn more here: Babylon.js docs

WGSL Core Engine​

Babylon.js has had support for WebGPU since its inception. The core engine shaders in Babylon.js, however, have been written in GLSL (WebGL shading language) from the beginning. Because WebGPU has its own shading language (WGSL) this posed a very interesting challenge. How do you get GLSL shaders to render in WebGPU? Fortunately, there is a conversion library that’s been available. So, anyone wanting to target WebGPU with Babylon can leverage this library to convert the Babylon shaders into something WebGPU can use. The downside of this is that this conversion library is over 3MB, requiring users to double their download size for a standardBabylon.js project.

With Babylon 8.0, this problem is a thing of the past. All of the core engine shaders for Babylon.js are now available in both GLSL and WGSL. This means direct support for WebGPU right out of the box with no conversion layer, essentially making Babylon.js 2x smaller when targeting WebGPU than in the past!

Check out a demo: Babylon.js Playground (try switching between WebGL2 and WebGPU)

Learn more here: Babylon.js docs

NME -> WGSL​

Well, why stop at core engine shaders? Why not unlock the ability to create custom WGSL shaders using Babylon’s Node Material Editor as well!

OK! Check!

Ability Unlocked! Let’s go Babylon 8.0!!!!!

Check out a demo (on desktop): Babylon.js Node Material Editor

Learn more here: Babylon.js docs


Those are just some of the main features of Babylon.js 8.0, there is much more! Tune in for next posts and learn more about Audio, Gaussian Splat and physics advancements, ….