GARAGE VISUALIZER

An interactive sales tool for personal garage rentals made in Unreal Engine 5

A practice in Scene Optimization, UI design and Blueprint programming

| PROJECT FEATURES:

  • A real-time scene of a client’s garage units

  • The ability to modify units with accessories and material styles

  • Easy to use UI/UX

| PROGRAMS USED:

  • Unreal Engine 5 - Project setup, optimization and delivery

  • Blender - Scene modeling and UVing

  • Substance Designer - Material creation

Still01.jpg
Still02.jpg
Still03.jpg
Still04.jpg
Still05.jpg

| My client for this project is a company that is providing luxury garages for rent. These units are designed to be a second space for people to store, showcase property and host social events. My goal with this project was to create an app that shows potential buyers how a unit can be used and configured in a rich and interactive way. I was tasked with creating an experience tailored for a touch screen kiosk in a sales center.

Below is an example of the interactive in action.

| WHERE IT STARTED

I started this project with schematics from the client for one of their garage units. I was able to import these CAD files into Blender to reference and create this space. From there, I took care to set up a scene that realistically depicts what’s possible. This was done through a combination of Unreal Marketplace assets and bespoke modeling for things like cabinets, guardrails, and flags on the wall. I was also able to make use of two stunning models of luxury sports cars that I received from an outsourcing team that collaborated on this project (making some of the renders from the configurator slideshow).

SplashCode01.png
SplashCode02.png
SplashCode03.png
SplashCode04.png

| SPLASH SCREEN

The first thing you see when you run the app is a slideshow widget I made featuring a Ken Burns effect and a call to action. This works thanks to a system I created that takes an array of Texture2D files and automatically cycles through them with subtle panning motion. This system is lightweight and leverages UMG animations for a reliable setup even after hours of looping. After you interact with the screen, you enter the experience and are presented with a collection of hotspots.

Starting state

Hotspot Actor Blueprint

| INTERACTION

These hotspots can be one of 3 types of hotspot: material switcher, mesh switcher, and Mesh visibility toggle. These actors are interspersed throughout the scene and handle all of the interactions available to the user. These hotspots allow you to offset the camera, with it’s orientation always set to look at the hotspot location.