Hey everyone!
We’re excited to share a project we recently launched: a virtual real estate tour, now running seamlessly in your browser thanks to Babylon.js!
Here are some glimpses of the tour:
Choosing Babylon.js
Previously, this tour was built in Unity3D. Our Unity application was embedded within another application using Unity as a library. We decided to migrate to WebGL for wider accessibility and to remove the dependency on that specific architecture. Sadly, at the time, Babylon Native, which enables running Babylon.js scenes in native applications, didn’t offer the features we needed, leading us to explore WebGL only path.
ECS and Data-Oriented Design
As part of our migration, we aimed to leverage an Entity Component System (ECS) framework to decouple our game logic and create a more flexible architecture for future experimentation. We wanted to embrace data-oriented design principles for improved performance and maintainability.
While we made initial progress in implementing an ECS structure, we partly fell short of our goals in this area. The tight timeframe of 6 months and, admittedly, a lack of consistent self-discipline in fully practicing data-oriented design meant that the ECS implementation wasn’t as comprehensive as we initially envisioned.
Benefits of Babylon.js
Despite this partial setback with our ECS ambitions, Babylon.js proved to be an excellent foundation for our project. Its robust features, including:
-
Physically Based Rendering (PBR) materials for realistic surface appearance
-
Dynamic lighting to create immersive environments
-
Feature ready interactions
-
Quick web build iterations
allowed us to achieve the visual fidelity and smooth performance necessary for a compelling virtual tour. The well-structured API and supportive community were also invaluable in navigating the complexities of the migration.
Virtual Tour details
Our tour features detailed environments, including multiple building complexes, interiors with furnishings, and outdoor areas. Users can freely navigate the spaces, zoom in on details, and get a true sense of the properties. The scale of our service is substantial and growing, currently supporting 3M monthly active users (MAU), with a portfolio encompassing more than 30k building complexes and over 80k unique household unit types.
Tailored Implementations
To optimize the tour, we used GPU-instanced Signed Distance Field (SDF) fonts to display the thousands of texts in 3D space efficiently. We also faced a significant challenge leveraging existing legacy data, which wasn’t well-planned from the initial Unity MVP. To address this, we created a batch system in the cloud to convert FBX files and literal Unity prefab YAML data to GLB.
Unfixed problems
Debugging unusual crashes with Unity wasn’t a great experience. WebGL still have constraints on web browsers as well. We’re still addressing performance issues on mobile devices within the app’s webview. We had to reduce graphic resources and qualities for mobile devices.
Experience the Tour
You can experience some virtual tour live here(please excuse non-english language, best viewed on desktop):
We’re incredibly proud of what we’ve accomplished in these 6 months with Babylon.js. While our journey with ECS and data-oriented design is ongoing, Babylon.js provided the stability and tools we needed to successfully bring our complex real estate tour to the web. We do have some regrets that the unpolished release isn’t perfectly on par with the original Unity version, and that this project is ending for now due to shifting priorities from our employer. Hoping to fulfill the remaining polishing and many new feature ideas later.
We’d love to hear your thoughts and are happy to answer any questions you might have about our experience migrating from Unity, our initial assessment of Babylon.js’s features, our use of Babylon.js, or our (partially successful) foray into ECS!
Thanks for checking it out!
Best regards,
(Disclaimer: Generative AI proofred this posting)