The Babylon.js team recently announced the latest version of the framework: Babylon.js 4.2.
In this post, we’ll look at the major new features and updates this release has to offer.
Here’s a run-down of the newest additions to the framework:
- New particle editor
- New sprite editor
- Skeleton viewer
- Texture inspector
- Physically Based Rendering (PBR) support in the Node Material Editor
- New Node Material Editor modes
- Customize and reuse frames in the Node Material Editor
- Playground templates
- Direct support for
- Babylon React Native
- New and reorganized documentation
- KTX+BasisU Support
- Updated WebXR support
- Soft transparent shadows
- New instancing superpowers
- PBR Next
- Support for the latest
New particle editor
Working with Babylon.js’ rich particle system just got easier and better with the new particle editor.
With the new editor, you can:
- Create particle systems with the click of the mouse
- Access nearly every particle system property through a UI
- Edit and shape particle systems without writing a single line of code
- Export your particle system or even save it to the snippet server and load it into your Babylon.js scene
You can play around with the new particle editor in this playground.
New sprite editor
The sprite editor allows you create, control, and manage sprite systems. Because the sprite editor is built into the inspector, you can save your sprite systems without writing a single line of code. And with one simple command, you can load your sprite systems into your Babylon.js scene.
Debugging is a critical aspect of development. A good debugging tool shouldn’t get in one’s way and should be simple to you.
With tools like Skeleton Map Shader, Bones Viewer, Render Grid, Bone Weight Shader, Physics Viewer, you can easily render a unique colour on the mesh for each bone, render your skeletons, render a grid on the plane, render a heat map showing bones contribution and render physics impostors respectively.
Before now, if you were building a scene and there was an unusual seam or strange visual artifact, you’d have to open → save → reload the loop in an image editor to identify the problem. This process is usually redundant and kills time.
But with the new texture inspector, you now have a tool that can allow you to zoom into individual pixels, inspect color channels, use simple markup tools, and create a live connection to the scene.
You can access the texture inspector from the main inspector panel by selecting a texture from the list and clicking on the “edit” button below the texture preview.
Physically based rendering (PBR) support in the Node material editor
This feature adds PBR support to the Node material editor. This will allow you to create custom PBR materials and shaders. It provides you with access to metallic, roughness, ambient occlusion, environment lighting and reflectivity, clearcoat, sheen, subsurface, anisotropy and more.
You can read more about the PBR support here.
New Node material editor modes
With new modes added to the Node Material Editor (NME), you can not only create mesh shaders, but also create procedure textures, particle shaders, and post process effects.
Customize and reuse frames in the Node material editor
Before Babylon.js 4.2, you could group nodes together into collapsible frames. Cool, right? But now, you can even do more!
Babylon.js.4.2 allows you to customize these frames, export them, save, reuse, and even share them right from the Node material editor.
Code snippets help us speed up development by reducing the amount of things we need to type. With playground templates, you will have access to
autocomplete snippets to reduce your development time.
To use an available template code, press CTRL + SPACE and click one from the suggestions.
Direct support for
Previously, when working with image based lighting (IBL) in Babylon.js, you needed a
.dds file. Babylon.js 4.2 adds direct support for pre-filtering
.hdr files! That means you can now use
.hdr files directly in your Babylon.js scene.
Babylon React Native
If you are a React Native Developer, this is good news for you.
With Babylon.js 4.2, you will be able to combine React Native with Babylon.js to create fluid cross-platform experiences.
See the video below for an idea of how you can use these two powerful tools together:
New and reorganized documentation
A product is as good as its documentation. That’s why the Babylon.js team has decided to breathe new life into the product’s documentation.
This new documentation is more organized and takes a chapter-based approach. The documentation is divided into 7 main sections, which take you through the whole of the platform.
Whether you’re just starting with Babylon.js or you’re looking for a refresher, the new documentation is perfect for you.
The KTX Basis Universal is a Unity package that allows you to load KTX2.0 or Basis Universal texture files.
This new feature gives Babylon.js developers an advanced compression that generates smaller files and GPU sizes compared to
This means that textures that used to contribute to large 3D file sizes will now load and render faster on the web.
Updated WebXR support
Babylon.js 4.2 includes updated support for WebXR. This exciting new standard allows developers to easily create compelling cross-browser AR/VR web experiences. Babylon.js 4.2 adds support for hand tracking, hit-testing, advanced teleportation, cross-device input management and controller support, and much much more.
Soft transparent shadows
The soft transparent shadows feature improves on Babylon.js’ existing rich shadows system. But now, it has support for rendering soft transparent shadows on transparent objects.
New instancing superpowers (thin instances)
Instances are a way to use hardware-accelerated rendering to draw a huge number of identical meshes.
You can create a new thin instance like this:
var matrix = BABYLON.Matrix.Translation(-2, 2, 0); var idx = sphere.thinInstanceAdd(matrix);
Unlike regular instances, thin instances don’t create new objects. As a result, there’s a performance improvement.
However, this improvement comes at a cost:
- All thin instances are always all drawn (if the mesh is deemed visible) or none are drawn — It’s all or nothing
- Adding and removing a thin instance is more costly than it is with
You should only consider using thin instances when you need a lot of static instances that you are sure won’t change often or at all.
PBR Support (physically based rendering)
Babylon.js .4.2 pushes the limits of rendering further with some cool new capabilities.
Simulating the way light bounces around below the surface of semi-translucent object is now possible with advanced sub-surface scattering support. And with the introduction of real-time PBR filtering, advanced refraction and reflection can now be done with just a few lines of code.
Support for the latest
Babylon.js 4.2 features support for the latest
.glTF extensions, both ratified and experimental! With constantly updated support for the latest capabilities of the
.glTF format, Babylon.js ensures your 3D objects will render exactly how you expect them to.
Babylon.js 4.2 adds support for the following
KHR_materials_clearcoat in action here: Clearcoat Demo.
KHR_materials_sheenin action here: Sheen Demo.
KHR_materials_transmissionin action here: Transmission Demo.
KHR_texture_basisUin action here: BasisU Demo.
- See KHR_materials_ior in action here: IOR Demo
- See KHR_materials_specular in action here: Specular Demo
In this guide, we ran through the new enhancements that Babylon.js 4.2 affords us. If you are new to Babylon.js or game rendering on the web in general, the Babylon.js documentation is a good place to start learning.
You can also check out the playground to try out new ideas on the fly.
Babylon.js has a whole lot more to offer, and this newest version is only the beginning. You can check more of the minor features, fixes, and enhancements here.
Are you adding new JS libraries to improve performance or build new features? What if they’re doing the opposite?
LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — Start monitoring for free.