WATERFRONT INTERACTIVE
An interactive sales tool for luxury real estate made in Unreal Engine 5
A practice in Scene Optimization, UI design and Blueprint programming
| PROJECT FEATURES:
A dynamic scene with real-time lighting and time of day
UI elements with information about units and nearby shops
High-fidelity 3D scenes of select unit styles
The ability to seamlessly change view and material finishes
| PROGRAMS USED:
Unreal Engine 5 - Project setup, optimization and delivery
Blender - Additional modeling and UVing
Substance Designer - Material creation
Affinity Photo - Texture tweaks and touchups
| My goal with this project was to create an easy to use app that showcases the client’s real-estate project with as much detail and accuracy as possible (within budget). This started as a simple app that showed you the exterior of the building with two buttons to explore each unit in first person. With time it has expanded to include features such as information about the units, amenities, and nearby retail options, a time of day slider for adjusting the lighting, and a whole 3D model of the surrounding area. This was deployed to a touch screen kiosk in the client’s sales center, where it runs throughout the day at 4K (with TSR).
Below is an example of the interactive in action.
| WHERE IT STARTED
This project started as a Datasmith export of a 3DS Max scene that was initially used for Vray renders. This initial model was created by an outsourcing team for the creation of 360 tours, and ended up being sent along to another outsourcing team for initial engine import. When the project reached me, I was given the task of improving performance and setting up material switching and floor changing mechanics. The project I was given had very poor optimization, due to the project being initially build for offline renders. The biggest issue was that most textures had arbitrary sizes that prevented mip mapping. This lead both to texture shimmering and excessive memory usage. Fixing this made the biggest immediate impact.
| LET THERE BE SUBLEVELS
Another way I optimized the project was to take advantage of level streaming. I created a system that loads and unloads sublevels based on a system of bounding boxes. This means that you aren’t rendering anything that you can’t see, and is super helpful for culling high-density meshes like bedding and plants. This also saved rendering budget from less lighting being rendered, as each room’s lights were linked to their sublevel.
The “Cool” finish package, with tile
The “Warm” finish package, with tile
| ONE SPACE, TWO STYLES
Once I had optimization under control, I was tasked with creating two sets of materials for the kitchen and four sets for the flooring. References for these materials were provided by the client and were meant to represent the options available to would-be buyers. I created these materials with the use of Substance Designer and textures I’ve licensed through textures.com. These materials were made to match photo reference and tuned for the best color accuracy on the client’s showroom display.
Early version of the scene and UI (Apple Vision Pro inspired)
| USER INTERFACE
My initial stab at the UI was inspired by the (at that point) recently announced Apple Vision Pro. There was a plan to port it to the headset at the time, so I decided to lean into the UI for the desktop as well. Over the course of the project, we decided to work with the UI from another experience that I had the pleasure of working on instead.
I created an interactive 3D user experience using Vectary and a 3D model of the project site that would be able to run on the web and on mobile with AR. The 3D model was provided by yet another outsourcing team responsible for the fantastic intro animation and amenity renders. This was nothing short of a team effort made possible by talented artists working across the globe.
Finish style switching
Floor Switching
Time-of-day Slider
| INTERACTION
The primary interaction features of the original project were the ability to change the finish options and what floor you were looking from. The material switcher allows you to choose between a warm and a cool color palette, with the option of tile or wood flooring. The floor switcher smoothly moves the environment up and down. The different units have different heights available to show, and the system is programmed to properly limit you to what’s available.
A later addition to the mix was the time slider. The initial setup did not have a 3D environment, so a time of day slider wasn’t possible. Once that changed, I added the widget and linked it to a SunSky blueprint to ensure the sun angles were true to reality.
| ENVIRONMENT
The first iteration used 360 Panoramas that were captured at each respective unit’s height using a drone. While cheap and effective, it wasn’t 100% accurate. Instead, I turned to a plugin that enabled me to import Google Earth models directly into Blender. I was able to bake down sections of the environment into chunks of different density levels and bring them into Unreal. I worked to reserve the highest quality to the immediate surroundings, with model density going down the further from the site I went. I then enabled Nanite to allow the engine to dynamically scale the geometry as needed. This helped make it possible to use such dense geometry and still run a high-quality interior scene at stable framerates.
| IN SUMMARY
This project has grown quite a bit over the past two years. From simple unit tours to a fully featured sales tool, I think this has really come a long way. I’m glad to have been able to learn about and incorporate new technology within Unreal Engine 5, and know that this project wouldn’t have been possible without the groundbreaking rendering tools Epic Games have created. I’m excited to take the skills I’ve learned on this project and employ them towards future endeavors.