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

This post has been republished via RSS; it originally appeared at: Windows Developer Blog.

Our mission is to create one of the most powerful, beautiful and accessible web rendering engines in the world. With Babylon.js 9.0, we’re delivering a major set of enhancements to help you build stunning experiences.

Babylon.js Editor

The Babylon.js Editor has been a passion project from community member Julien Moreau Mathis for many years. His progress on this amazing tool is seriously impressive and with Babylon.js 9.0, the Babylon.js Editor takes a substantial leap forward in rendering and capability. This powerful desktop application is the ideal tool for a more artist-friendly approach to building Babylon.js experiences. Available on Windows, macOS and Linux, the Editor provides a full scene editing environment with support for scripting, physics, asset management and project building, all wrapped in a familiar, intuitive interface. Check out a demo: https://aka.ms/babylon9EditorDemo Learn more: https://aka.ms/babylon9EditorDoc Screenshot of Babylon.js Editor.

Inspector v2

We are excited to introduce Inspector v2, a ground-up rebuild of Babylon’s beloved debugging and inspection tool. The new Inspector features a modern, extensible architecture built on a service-oriented model with full React-based UI components. It supports overlay and inline layout modes, light and dark themes, and is fully extensible through static and dynamic extensions. Developers can now add custom panes, toolbar items, property editors and debug views, all through a clean, well-documented API. Inspector v2 is a massive step forward for developer experience and tooling in Babylon.js. Check out a demo: https://aka.ms/babylon9iv2Demo Learn more: https://aka.ms/babylon9iv2Doc Screenshot from Inspector v2.

Babylon Viewer Updates

The Babylon.js Lightweight Viewer, introduced in 8.0, continues to receive enhancements in 9.0. The Viewer makes it easy to embed stunning 3D content on any web page with just a few lines of HTML. This update brings greatly improved shadows, including IBL dominant light direction for shadow maps and SSAO for untextured models. Whether you need a quick product showcase or a fully interactive 3D embed, the Viewer has you covered. Another shout out to Adobe for contributing more advanced shadow rendering to the Babylon Viewer this year! Check out a demo: https://aka.ms/babylon9VDemo Learn more: https://aka.ms/babylon9VDoc Screenshot of Babylon Viewer.

Playground Updates

The Babylon.js Playground (the beloved online sandbox for experimenting with Babylon.js) receives a major upgrade in 9.0 with multi-file editing, ESM module imports and local session history. The code editor now supports a tabbed interface that lets you split your Playground into multiple files with full support for local module imports and exports between them (e.g., `import MyClass from ‘./module.ts’`). You can add, remove, rename and reorder tabs, and designate any file as the entry point for execution. Beyond local modules, the Playground now supports importing NPM packages directly via esm.sh with version pinning, opening the door to a much richer development experience right in the browser. The Playground also now automatically saves your work to local storage, so if you hit an infinite loop, accidentally navigate away or experience a crash, your code is never lost. Previous sessions can be restored at any time. Whether you’re prototyping a quick idea or building out a complex multi-file project, the Playground is now more powerful than ever. These fantastic and substantial playground updates were contributed to Babylon.js 9.0 by community member knervous. Check out a demo: https://aka.ms/babylon9PGDemo Learn more: https://aka.ms/babylon9PGDoc Screenshot of updated Babylon.js Playground.

Large World Rendering

When working with scenes that span large coordinates, 32-bit floating point numbers lose precision, causing visible jittering. Meshes wobble, shadows flicker and animations stutter. Babylon.js 9.0 solves this with a comprehensive Large World Rendering / Floating Origin system. By keeping the active camera conceptually at the world origin and offsetting all geometry and shader uniforms, the math is precise and the rendering is smooth no matter how far you travel. The system also integrates with Havok physics through a multi-region architecture that distributes physics bodies across multiple simulation regions, each with its own floating origin, allowing physics to function in enormous worlds. From flight simulators to space games to geospatial applications, smooth rendering of large world coordinate scenes is now possible in Babylon.js! Check out a demo: https://aka.ms/babylon9LWDemo Learn more: https://aka.ms/babylon9LWDoc Screenshot of Large World Rendering in Babylon.js 9.0.

Geospatial Camera

Babylon.js 9.0 introduces the all-new Geospatial Camera, designed for orbiting and navigating a spherical planet centered at world origin. It provides map-like interactions out of the box: globe-anchored drag to pan, scroll to zoom toward the cursor scaled with radius and right-click to tilt. It comes with keyboard and touch support, configurable limits, smooth animated flights via flyToAsync, collision detection and optional automatic clip plane adjustment based on altitude. When used alongside useLargeWorldRendering, this camera is the foundation for a whole new class of geospatial web experiences. Check out a demo: https://aka.ms/babylon9GSCDemo Learn more: https://aka.ms/babylon9GSCDoc Screenshot of Geospatial Camera in Babylo.js 9.0.

3D Tiles Support

3D Tiles is an open standard created by Cesium and adopted by the Open Geospatial Consortium (OGC) for streaming massive, heterogeneous 3D geospatial datasets. The recommended solution for rendering 3D Tiles with Babylon.js is to use the new babylonjs/renderer in NASA/AMMOS 3DTilesRendererJS (made possible thanks to Garrett Johnson), which handles tile set traversal, level-of-detail selection and tile loading. This enables efficient visualization of enormous datasets loaded on demand based on the camera’s position. Paired with the new Geospatial Camera and useLargeWorldRendering engine option, this opens the door to using Babylon to render map data! Check out a demo: https://aka.ms/babylon93DTDemo Learn more: https://aka.ms/babylon93DTDoc Screenshot demonstrating 3D Tiles support in Babylon.js 9.0.

Physically Based Atmosphere

Babylon.js 9.0 introduces a stunning Physically Based Atmosphere addon that provides realistic sky and aerial perspective rendering. Using physically accurate Rayleigh and Mie scattering models, along with ozone absorption and multiple scattering, the atmosphere produces breathtaking sunrises, sunsets and day-night cycles. It integrates seamlessly with PBR materials and directional lights, and supports customizable scattering parameters to create atmospheres for any planet or scene — from Earth to entirely alien worlds. The addon is available as a lightweight, opt-in package. Check out a demo: https://aka.ms/babylon9ATMDemo Learn more: https://aka.ms/babylon9ATMDoc Mountain range extending into the distance. This is an extensive list, and more updates are on the way. See the next post for additional rendering features and core engine improvements. See Part 1 of this series on what’s new in Babylon.js 9.0.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.