Babylon.js 5.0: Beyond the Stars
Our mission is to create one of the most powerful, beautiful, and simple web rendering engines in the world. Our passion is to make it completely open and free for everyone.
Today is an important milestone for the Babylon.js platform. Babylon.js was named with a deep love and admiration of one of the greatest sci-fi shows of all time, and today we are thrilled to announce the launch of the next version of the Babylon.js platform, Babylon.js 5.0.
Babylon.js 5.0 is quite simply the biggest, boldest, and most ambitious update to the platform to date. From full support of WebGPU, to the ability to deploy experiences across platforms with Native Capabilities, to more tools, features, and improvements than you can count — Babylon.js 5.0 ushers in the next generation of web rendering technology for everyone.
Before diving into more detail, we want to take a quick moment to humbly thank the incredible community of developers, the 400+ contributors, and the steadfast advocates that contribute their knowledge, expertise, help, and passion to this amazing platform. Babylon.js would not be here without you.
WebGPU
WebGPU represents the next evolution in browser to GPU communication. The W3C’s “GPU for the Web” Community Group built it from the ground up with performance in mind. WebGPU offers web developers access to some of the most advanced modern graphics capabilities such as compute shaders and lightning-fast texture loading. We have been actively participating in the WebGPU Workgroup from its earliest days and are proud to announce that Babylon.js 5.0 offers FULL support for WebGPU.
This means that with Babylon.js 5.0 you can develop mind-bending, rendering experiences on the web using both WebGL and WebGPU - you don’t have to learn a new graphics API, Babylon.js takes care of it for you!
As WebGPU becomes more broadly available in your favorite browsers later this year, and Babylon.js 5.0 is set up and ready for you to take advantage of this new performance rocket ship!
WebGPU Demos (Must use a WebGPU compatible browser):
- WebGPU Compute Shaders Demo
- 10,000 Assets — WebGPU Performance Demo vs. WebGL Performance Demo
Learn more: WebGPU Documentation
Cross-Platform Native Deployment
We know developers want to reach as many people as possible with as little effort as possible. We are proud to announce that Babylon.js 5.0 unlocks the ability to use the Babylon.js API to develop web AND native applications. Whether you’re targeting Web, Windows, Mac, iPhone, or Android Phone, Babylon.js 5.0 allows you to write your rendering code once and deploy it across the platforms of your choice, using the browser OR as native applications!
Learn More about Babylon.js’s Cross Platform Capabilities: Babylon Cross Platform AR Demo, Babylon Cross Platform Documentation
Space Pirates Demo
What would the Babylon.js 5.0 release be without an appropriately themed demo to go with it? The Babylon Space Pirates Demo is designed to give game developers a tiny glimpse at the amazing possibilities of the Babylon.js Platform.
Animation Curve Editor
Up until now, creating and modifying animation data in a rendering engine can be complicated and verbose. Not anymore! Babylon.js 5.0 adds a built-in Animation Curve Editor (ACE), making it incredibly easy to create and modify animation data directly in your Babylon scene. Also, as with all Babylon.js Platform tools, you can save your animation data to the Babylon.js Snippet Server and load it back into your Babylon.js scene with one single line of code!
See it in action here: Play with the Animation Curve Editor
Learn more: Animation Curve Editor Documentation
Performance Profiler
Performance is one of the most important things to keep on the front of your mind as you create advanced interactive 3D experiences. After all, you don’t want to create an awesome experience that only runs on the most high-end graphics cards, right? You want to create something that EVERYONE can enjoy, and this means keeping track of and optimizing the performance of your scene. Babylon.js 5.0 makes performance debugging and management a breeze with the introduction of the new Performance Profiler. This handy tool allows you to see a real time graph of key performance indicators of your scene, all hooked up live! Make a change, see the impact on perf. It’s really that simple!
See it in action here: Performance Profiler Demo
Learn more: Performance Profiler Documentation
Unlimited Morph Targets
No matter what you call them, Blend Shapes, Shape Keys, or Morph Targets, Babylon.js 5.0 adds rocket fuel to your ability to use influenced vertex positions. This new feature now gives you literally unlimited amounts of Morph Targets. Want to have a complex animated face with thousands of Morph Targets to get that perfect expression? Now you can, all in the web, all for free!
See it in action here: Unlimited Morph Targets Demo
Learn more: Unlimited Morph Targets Documentation
YouTube Series: Tech Artist’s Journey YouTube Playlist
GUI Editor Beta
Babylon.js has a powerful GUI system that offers countless widgets, controls, and properties to help you create rich GUIs. With Babylon.js 5.0 that powerful system becomes far simpler to use with the introduction of the GUI Editor Beta. While still in active development, the GUI Editor Beta is a rich and modern tool, allowing you to create the perfect GUI with a simple and intuitive drag-and-drop interface. Say goodbye to thousands of lines of GUI code and hello to a world of design with the GUI Editor Beta and loading your creations with a single line of code!
See it in action here: GUI Editor Beta Demo
Try it out for yourself: GUI Editor
Learn more: GUI Editor Beta Documentation
Order Independent Transparency
Rendering transparent objects is complicated! The Babylon.js Platform has always strived to make it as easy as possible to help you inform the system of rendering order, alpha index, run depth-prepasses, and much more, so your scene can look correct. With Babylon.js 5.0 we’ve wrapped a bow on it all. All of the complexity of rendering transparent objects can now disappear with one single, simple line of code:
Try it out: Order Independent Transparency Demo
Learn More: Order Independent Transparency Documentation
New Node Material Nodes
The Node Material Editor is one of the most advanced tools available in the Babylon Platform. One simple UI that helps you generate stunning GLSL shaders with ease. With Babylon.js 5.0 the Node Material gets even better with the introduction of several powerful new nodes!
Check out the new nodes:
Learn More: Node Material Documentation
WebXR Advancements
WebXR is an incredible web standard allowing web developers to create amazing cross-browser XR experiences. Using WebXR to add a mobile AR component to your web site can be a simple and fun way to engage your readers/users even further. While the technology to render world-locked 3D objects has existed in Babylon.js for some time, Babylon.js 5.0 steps the beauty-factor up several notches with the introduction of Light Estimation. This powerful yet easy-to-use new feature allows your Babylon.js scenes to estimate the light in your real-world location and automatically match the lighting and shadows of your virtual world-locked object. This creates a cutting-edge level of immersion between the physical and digital worlds…and it’s all here in Babylon.js…all for free! Babylon.js 5.0 also adds support for WebXR image tracking and WebXR Layers!!!
Check it out on your Android Phone: Light Estimation Demo, Image Tracking Demo
Learn More: Light Estimation Documentation
glTF Updates
The Babylon.js Platform prioritizes support for the absolute latest and greatest advancements to the glTF file format. This means every new version of Babylon.js unlocks new beautiful advancements in rendering capabilities, and Babylon.js 5.0 turns up the heat! With full support for KHR_materials_volume, KHR_materials_transmission, and KHR_materials_ior, you can now render some absolutely STUNNING visuals!
Check it out: KHR_materials_volume Demo
Learn More: KHR_materials_volume, KHR_materials_transmission, KHR_materials_ior
Mixed Reality Toolkit for Babylon.js
Babylon.js 5.0 also adds updated support for the world’s most advanced 3D interface component library, Mixed Reality Toolkit. This advanced library makes it incredibly easy to add advanced XR UX elements into your Babylon.js scenes such as: holographic slates, 3D Sliders, Touch Holographic Buttons, Touch Mesh Buttons, and much, much more!
Check it out: MRTK Demo
Learn More: MRTK Documentation
Asset Librarian
The Babylon.js Platform offers a large library of free Creative Commons 0 assets available for you to use in your Babylon.js scenes, completely for free. With Babylon.js 5.0, accessing these assets is easier and faster than ever! The new Asset Librarian brings a new Assets namespace that you can use in your projects to easily access the 200+ free assets to make your Babylon.js scenes soar.
Try it out: Asset Librarian Demo
Learn More: Asset Librarian Documentation
Material Plugin Manager
When it comes to creating real-time shaders power, performance, and flexibility are critical! Babylon.js 5.0 brings introduces a brand new feature that doubles down on all of three. The Material Plugin Manager gives you the ability to add custom code to any Babylon.js shader. This means that you can fully customize any advanced shader, such as PBR, to go even further. The Material Plugin Manager provides developers with the flexibility to fully customize the power, performance, and look of any shader!
Check it out: Material Plugin Manager Demo
Learn More: Material Plugin Manager Documentation
Dev Stories Documentation
Babylon.js 5.0 adds a whole new category of documentation called “Dev Stories.” These new tutorials are designed to walk you, step-by-step, through some common scenarios that many Babylon.js developers ask about. From setting up a Babylon.js project quickly, adding interactive 3D elements to your e-commerce site, to deploying your Babylon.js project to a Native Application, “Dev Stories” are rich, deep, detailed tutorials aimed at helping you take your project from idea to reality!
Check It Out: Dev Stories!
“Going The Distance With Babylon.js” A New Book
We are also incredibly excited to share that alongside Babylon.js 5.0, community member and talented author Josh Elster has written an entirely new book about Babylon.js 5.0. Published by Packt Publishing, “Going The Distance With Babylon.js” is written from the mindset of taking you through the entire development process of building a game with Babylon.js from the ground up. We are thrilled to partner with Josh and Packt on this book and think it’ll be a great addition to your library and accelerate your Babylon.js learning journey.
Pick Up Your Copy Here: Babylon.js 5.0: The Book
Much Much More
Wow that’s a lot, but that’s only the tip of the iceberg! Improved Shadow Performance, Vertex Animation Textures, a brand-new Build System, there’s more to Babylon.js 5.0 than you can imagine! Want a full view of everything that’s new? For a full list of features, enhancements, and fixes you can head on over here.
Babylon.js 5.0 launches the Babylon.js platform to incredible new heights and we cannot wait to see you reach for the stars with it!
