Introducing 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: https://aka.ms/babylon8IBLShadows
Learn more: https://aka.ms/babylon8IBLShadowsDoc
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: https://aka.ms/babylon8AreaLightsDemo
Learn more here: https://aka.ms/babylon8AreaLightsDoc
Node Render Graph — Alpha
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): https://aka.ms/babylon8RenderGraphDemo
Learn more here: https://aka.ms/babylon8RenderGraphDoc
All New Lightweight Viewer
Babylon.js is 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. We’re excited to see it starting to gain traction and see contributions from Adobe making it even better, and we can’t wait to see how you use it in your websites!
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): https://aka.ms/babylon8ViewerConfig
Check it out: https://aka.ms/babylon8viewerHome
Learn more here: https://aka.ms/babylon8viewerDoc
WGSL Core Engine Shaders
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: https://aka.ms/babylon8WGSLDemo (try switching between WebGL2 and WebGPU)
Learn more here: https://aka.ms/babylon8WGSLDoc
NME -> WGSL Support
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): https://aka.ms/babylon8nmeWGSL
Learn more here: https://aka.ms/babylon8nmeWGSLDoc
Overhauled Audio Engine
Babylon’s audio engine is long overdue for a tune-up and Babylon.js 8.0 swings for the fences, bringing an entirely fresh audio engine to your ears. This new engine was designed to be powerful — taking advantage of the full suite of web-audio features, modern — class names and architecture you’ve come to expect, and simple-to-use — allowing anyone to leverage these features, no matter what your experience level. For those of you who care passionately about the marriage of audio and visuals to tell a compelling story, Babylon.js 8.0 was built for you!
Check out a demo: https://aka.ms/babylon8AudioEnginev2Demo
Learn more here: https://aka.ms/babylon8AudioEnginev2Doc
Gaussian Splat Updates
Babylon.js 8.0 builds on the exciting foundation of Gaussian Splat support with some exciting new updates such as SPZ and compressed PLY formats, spherical harmonics, as well as runtime optimizations for memory footprint and CPU/GPU usage.
Check out a demo (SPZ): https://aka.ms/babylon8gsplatImrovementsDemo
Learn more here: https://aka.ms/babylon8gsplatImprovementsDoc
Havok Character Controller
With Babylon.js 8.0, we’ve continued our amazing partnership with the very talented team at Havok, this time bringing their fully featured character controller into Babylon.js. This brings a state-of-the-art character controller to your toolbox allowing you to start making your very own character-centered game with just a few lines of code!
Check out a demo: https://aka.ms/babylon8havokCCDemo
Learn more here: https://aka.ms/babylon8havokCCDoc
Smart Filters
Babylon.js 8.0 builds on our rich library of node-based creation tools with the introduction of Smart Filters and the Smart Filter Editor. This new tool allows you to create video filters, texture treatments, post-processes, you name it. If it’s a 2D visual effect, This tool is for you! Under the hood it leverages shaders in the same way you’d expect any of our GPU based tools to do, but it focuses on helping you create elaborate 2D visual treatments for web experiences. We can’t wait to see what you make with this exciting new tool!
Try it out yourself (on desktop): https://aka.ms/babylon8sfe
Check out a demo (on desktop): https://aka.ms/babylon8sfeDemo
Learn more here: https://aka.ms/babylon8sfeDoc
Environment Improvements
Babylon.js 8.0 continues to improve visual realism, leveling up the environment lighting to look closer and closer to real-time ray traced results! Another shout out to Michael Bond at Adobe for this additional great contribution.
Check out a demo: https://aka.ms/babylon8EnvImprovementsDemo
Learn more here: https://aka.ms/babylon8EnvImprovementsDoc
Node Geometry Editor Updates
Last year, Babylon.js introduced the ability to procedurally generate geometry without writing any code through the Node Geometry Editor.
With Babylon.js 8.0, Node Geometry takes a big step up with a massive list of new features including a lattice deformer, point list, clean geometry, interceptor, an aggregator, and the ability to subdivide.
Check out a demo (on desktop): https://aka.ms/babylon8ngeDemo
Learn more here: https://aka.ms/babylon8ngeDoc
Node Material Editor Debug Node
Babylon’s Node Material Editor makes it incredibly simple to create complex visual shaders without writing any code. This artist friendly tool bridges the gap between the complexity of building GPU shaders, and the way artists think and work.
Babylon.js 8.0 introduces some exciting UI improvements as well as the new incredibly useful “visual debug node.” This node allows you to see the visual output at any point in your Node Tree. You no longer have to move the output around and hook it up to different places in your graph. It’s as simple as adding debug nodes throughout your tree to see how your shader changes throughout the computation!
Check out a demo (on desktop): https://aka.ms/babylon8nmedebugnodedemo
Learn more here: https://aka.ms/babylon8nmedebugnodedoc
Improved Booleans
No, not those Booleans. True and False are just fine the way they are. We’re talking about Geometric Booleans!
Babylon.js 8.0 introduces support for the popular Manifold.js library, allowing you to create new shapes with more consistent Geometric Booleans. Or more simply put, “Finally some Booleans that look the way I expect them to look!”
Check out a demo: https://aka.ms/babylon8booleanDemo
Learn more here: https://aka.ms/babylon8booleanDoc
Updated glTF Support — KHR_materials_diffuse_transmission
Babylon.js 8.0 continues the long rich tradition of supporting every extension update to the glTF format. As glTF advances, Babylon.js is in lock-step with support for those advancements. Babylon.js 8.0 brings support for the very beautiful KHR_material_diffuse_transmission!
Check out a demo: https://aka.ms/babylon8gltfdemo
Learn more here: https://aka.ms/babylon8gltfDoc
glTF Exporter Improvements
Babylon.js introduces a host of new improvements to the glTF serializer, allowing you to export your Babylon scenes as glTF objects with support for the latest extensions and features!
Check out a demo: https://aka.ms/babylon8gltfSerializerDemo (try exporting as glTF and opening in your favorite 3D tool)
Learn more here: https://aka.ms/babylon8gltfSerializerDoc
More glTF Loader Options
Babylon.js 8.0 unlocks new loader options for .glTF objects allowing you to programmatically load your assets with pre-determined specifications, such as loading at a specific LOD (Level of Detail). These new loader options will provide new flexibility and control of how you bring assets into your Babylon.js scenes!
Check out a demo: https://aka.ms/babylon8glTFLoaderDemo
Learn more here: https://aka.ms/babylon8glTFLoaderDoc
IES Light Support
IES Lighting is a technique that describes the “shape” of a light that emits from a lamp. You can read more about it here: IES-Library. Babylon.js brings support for IES files, unlocking new ways to express dimension and lighting in your scenes!
Check out a demo: https://aka.ms/babylon8IESLightDemo (click/touch to see different IES light shapes)
Learn more here: https://aka.ms/babylon8IESLightDoc
USDZ Export
Babylon.js 8.0 allows you to export .usdz files, making it easier than ever for you to build AR experiences targeted for iOS devices!
Check out a demo: https://aka.ms/babylon8usdzDemo
Learn more here: https://aka.ms/babylon8usdzDoc
GPU Mesh Picking
Picking meshes in a scene can be an expensive feature since the CPU has to loop through every piece of geometry to find the triangle that most closely intersects the ray cast from the picking location.
Ready for some wizardry? Babylon.js 8.0 introduces the ability to pick meshes from directly from the GPU! Yup, that’s right. This means that in complex scenes, where picking is required, you can boost performance by offloading this to the GPU.
Check out a demo: https://aka.ms/babylon8gpuPickDemo
Learn more here: https://aka.ms/babylon8gpuPickDoc
GPU Bounding Box
Bounding Box calculation can be expensive, especially if you have a few animated meshes with a large number of vertices. Babylon.js 8.0 introduces the ability pass Bounding Box calculation to the GPU, freeing up valuable cycles on the CPU and improving performance for your scene.
Check out a demo: https://aka.ms/babylon8gpuBBoxDemo
Learn more here: https://aka.ms/babylon8gpuBBoxDoc
EXR Texture Support
Babylon.js 8.0 also brings support for EXR files. This feature-rich image format unlocks some new superpowers for you to use in Babylon.js. Negative pixel values for example can be used to store complex visualizations as a texture format that can now be read in Babylon.js!
Check out a demo: https://aka.ms/babylon8exrDemo
WebXR Depth Sensing
Babylon.js 8.0 brings support for a new and exciting WebXR feature called “Depth Sensing.” This feature uses depth information captured from devices to give developers the ability to overlay real world visuals “on top” of computer-generated images! You just have to see it to believe it. It feels like magic!
Check out a demo (on recent Android devices or Oculus Quest 3): https://aka.ms/babylon8webxrDSDemo
Learn more here: https://aka.ms/babylon8webxrDSDoc
A Peek Ahead
Phew! Babylon.js 8.0 is by far the platform’s biggest release to date. There’s so much goodness packed into it that it feels like you’ve been scrolling forever! Would you believe there’s even more in active development?!!! Here’s a tiny tease about a couple of things on the horizon.
glTF Interactivity Support — If you follow the advancement of the glTF file format, then you know that exciting things are coming with the interactivity workstream. We’re actively working on supporting this incredible new extension that will allow asset behaviors to travel with your assets. That means that interactivity is no longer tied to one specific creation tool or engine!
OpenPBR Support — OpenPBR is an open standard for how Physically Based Rendered materials look when rendered. Guess what’s in active development in Babylon? 😉
Tooling For Everyone — We understand that everyone who comes to the Babylon platform comes from different backgrounds and experience levels, from software engineers at the top of their game, to students and artists just beginning their computer graphics journey. We are passionate about ensuring that everyone who is interested in leveraging Babylon.js has the tools and workflows to do so. We’ll have more to share on this later this year.
Thank You
With each evolution of Babylon.js comes a revolution in web rendering technology and an overwhelming feeling of gratitude. The Babylon platform simply wouldn’t be possible without the incredible community of developers, the 500+ contributors, and the steadfast advocates that contribute their knowledge, expertise, help, and passion to this amazing technology. “Thank you” to each one of you for all that you do to help make Babylon.js one of the most powerful, beautiful, simple, and open web rendering platforms in the world.
