What’s new in Bablyon.js 4.2

The Babylon.js team recently announced the latest version of the framework: Babylon.js 4.2.

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

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 .hdr filtering
• 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 .glTF extensions

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.

Skeleton viewer

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.

Texture inspector

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!

---

Over 200k developers use LogRocket to create better digital experiences

Learn 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.

Playground templates

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 .hdr filtering

Previously, when working with image based lighting (IBL) in Babylon.js, you needed a .env or .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.

You can play with this feature by heading over to HDRI Haven, grabbing your favorite HDR file, and loading it into the Babylon.js Sandbox.

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.

Check out the new documentation.

KTX+BasisU support

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 .jpeg files.

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 InstancedMesh

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 .glTF extensions

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 .glTF extensions:

Ratified:

See KHR_materials_clearcoat in action here: Clearcoat Demo.

• See KHR_materials_sheen in action here: Sheen Demo.
• See KHR_materials_transmission in action here: Transmission Demo.
• See KHR_texture_basisU in action here: BasisU Demo.

Experimental:

• See KHR_materials_ior in action here: IOR Demo
• See KHR_materials_specular in action here: Specular Demo

Conclusion

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?

There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.

LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.

https://logrocket.com/signup/

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.