From Unity to WebGL: Our Journey Building a Virtual Real Estate Tour with Babylon.js

Demos and projects
,
1

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:

Screen_Recording_20250407_093342_Hogangnono(3)ezgif-800ff6ccc46843 Screen_Recording_20250407_135101_Hogangnono(1)

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)

9 Likes
2

This looks great! I love the use of shadows :slight_smile:
Thanks a lot for sharing your experience. It’s great to see that Babylon offered you the featured you needed out of the box. If I may ask:

Does babylon native offer the features you need now? Would you consider using it, or is WebGL in the browser enough for your needs?

1 Like
3

Thanks for the positive feedback!

As for Babylon Native retrospective, I was the one who introduced Babylon.js and insisted on exploration on the native sibling.

The initial evaluation was for an entirely different application from the posted virtual real estate tour. The primary drawback was that the performance did not meet expectations, particularly in terms of startup time, which was a major specification for the app. I cannot recall all the details, but relevant notes in my history includes:

The final blow for decision maker was the There may be other choices better suited to your project than Babylon Native technologies document.

Although we lack sufficient human resource to even continue the bjs project, I would love to tackle Babylon Native again and even contribute in my personal works!

2 Likes