Part 2 – Babylon.js 9.0: Tooling updates and new geospatial features

Our mission is to create one of the most powerful, beautiful, and accessible web rendering engines in the world. With the release of Babylon.js 9.0, we are excited to unveil a significant array of enhancements designed to empower developers to craft stunning digital experiences.

Babylon.js Editor

The Babylon.js Editor, a labor of love from community member Julien Moreau Mathis, has made remarkable strides over the years. With the latest version, this desktop application has undergone a substantial transformation, enhancing its rendering capabilities and overall functionality. It offers an artist-friendly environment for building Babylon.js experiences, available across Windows, macOS, and Linux. Users can enjoy a comprehensive scene editing interface that supports scripting, physics, asset management, and project building, all presented in an intuitive layout.

Check out a demo: Babylon.js Editor Demo

Learn more: Babylon.js Editor Documentation

Inspector v2

We are thrilled to introduce Inspector v2, a complete overhaul of Babylon’s cherished debugging and inspection tool. This new version boasts a modern, extensible architecture built on a service-oriented model, featuring full React-based UI components. It supports both overlay and inline layout modes, offers light and dark themes, and is fully extensible through static and dynamic extensions. Developers can now create custom panes, toolbar items, property editors, and debug views via a clean and well-documented API, marking a significant advancement in the developer experience within Babylon.js.

Check out a demo: Inspector v2 Demo

Learn more: Inspector v2 Documentation

Babylon Viewer Updates

The Babylon.js Lightweight Viewer, first introduced in version 8.0, continues to evolve with enhancements in 9.0. This tool simplifies the process of embedding captivating 3D content on any web page with minimal HTML code. The latest update features significantly improved shadow rendering, including IBL dominant light direction for shadow maps and SSAO for untextured models. Whether for a quick product showcase or a fully interactive 3D experience, the Viewer is equipped to meet diverse needs. We also extend our gratitude to Adobe for their contributions to the advanced shadow rendering in the Babylon Viewer this year.

Check out a demo: Babylon Viewer Demo

Learn more: Babylon Viewer Documentation

Playground Updates

The Babylon.js Playground, a beloved online sandbox for experimentation, has received a major upgrade in version 9.0. This includes multi-file editing, ESM module imports, and local session history. The code editor now features a tabbed interface, allowing users to split their Playground into multiple files while supporting local module imports and exports. Users can easily manage tabs, designating any file as the entry point for execution. Furthermore, the Playground now allows importing NPM packages directly via esm.sh with version pinning, enriching the development experience directly in the browser. Automatic saving to local storage ensures that work is never lost, even in the event of a crash or accidental navigation away from the page. These substantial updates were contributed by community member knervous, making the Playground more powerful than ever.

Check out a demo: Playground Demo

Learn more: Playground Documentation

Large World Rendering

In scenarios involving expansive scenes, 32-bit floating point numbers can lead to precision loss, resulting in visible jittering effects. Babylon.js 9.0 addresses this challenge with a comprehensive Large World Rendering and Floating Origin system. By conceptually keeping the active camera at the world origin and offsetting all geometry and shader uniforms, the rendering remains smooth regardless of distance traveled. This system integrates seamlessly with Havok physics, employing a multi-region architecture that distributes physics bodies across various simulation regions, each with its own floating origin, thus enabling smooth physics interactions in vast environments.

Check out a demo: Large World Rendering Demo

Learn more: Large World Rendering Documentation

Geospatial Camera

The introduction of the Geospatial Camera in Babylon.js 9.0 offers a new way to orbit and navigate spherical planets centered at the world origin. This camera provides intuitive map-like interactions, including globe-anchored drag for panning, scroll-to-zoom functionality, and right-click tilt options. It supports keyboard and touch interactions, configurable limits, smooth animated flights via flyToAsync, collision detection, and automatic clip plane adjustments based on altitude. When combined with the use of Large World Rendering, this camera lays the groundwork for innovative geospatial web experiences.

Check out a demo: Geospatial Camera Demo

Learn more: Geospatial Camera Documentation

3D Tiles Support

Babylon.js now supports 3D Tiles, an open standard developed by Cesium and endorsed by the Open Geospatial Consortium (OGC) for streaming extensive and diverse 3D geospatial datasets. The recommended approach for rendering 3D Tiles with Babylon.js is through the new babylonjs/renderer in NASA/AMMOS 3DTilesRendererJS, which facilitates tile set traversal, level-of-detail selection, and tile loading. This enables efficient visualization of large datasets loaded on demand based on the camera’s position. When paired with the new Geospatial Camera and the Large World Rendering engine option, Babylon.js opens up exciting possibilities for rendering map data.

Check out a demo: 3D Tiles Demo

Learn more: 3D Tiles Documentation

Physically Based Atmosphere

The latest version of Babylon.js introduces a breathtaking Physically Based Atmosphere addon, enhancing the realism of sky and aerial perspective rendering. Utilizing accurate Rayleigh and Mie scattering models, along with ozone absorption and multiple scattering techniques, this atmosphere creates stunning sunrises, sunsets, and day-night cycles. It integrates smoothly with PBR materials and directional lights, offering customizable scattering parameters to craft atmospheres for any planet or scene, from Earth to entirely alien worlds. This addon is available as a lightweight, opt-in package.

Check out a demo: Physically Based Atmosphere Demo

Learn more: Physically Based Atmosphere Documentation

This extensive list of updates marks just the beginning, with even more enhancements on the horizon. Stay tuned for the next installment, where we will delve into additional rendering features and core engine improvements.

See Part 1 of this series on what’s new in Babylon.js 9.0.

Winsage
Part 2 – Babylon.js 9.0: Tooling updates and new geospatial features