Web Remote Control of an Unreal Engine Car Configurator 1.0

Web Remote Control of an Unreal Engine Car Configurator 1.0

January 2, 2022
Development Lab

Introduction

Shortly after our team began developing Chauncey, we realized it was important to narrow our broad vision by creating demo applications that applied to specific markets. We chose some of the overlapping features on our white board and landed on a plan to develop our first demo, web remote control of an Unreal Engine car configurator. 

Project Overview

The benefits of using game engines such as Unreal to create product configurators are apparent. Unreal provides the ability to deliver stunning graphic fidelity of a client's product. The tools for asset creation, interactivity, animation, check all the necessary boxes to produce incredible interactive product visualization apps.

Generally, the configurator apps available in the Unreal Engine marketplace are designed for interaction via touchscreen interfaces or mouse and keyboard inputs. They also require GPU intensive hardware to run, which tends to make them less accessible than traditional web 3D configurators.

We at Chauncey saw this as a great opportunity to develop a solution that extend the interaction of locally running applications by way of a web based interface that would allow users to remotely control the experience. Additionally we'd pixel streaming the packaged application on our website further extending the reach of the app to users regardless of the device they are accessing it from.

The Applications Layers

Car Customization System by UE4Arch (Unreal Engine 4)

For this demo, we chose to leverage the Car Customization System from UE4Arch. UE4Arch has been pioneering the creation of realistic scenarios with real-time technology since 2014. Out of the box, this sample project provided us a stunning photoreal configurable vehicle and environment with prebuilt blueprint interactions we could connect Chauncey to directly. Starting with this sample project enabled us to focus on development of the remote control interface, networking, and presentation. 

Remote Control Web Interface (React)

One of the features we’ve been developing for the platform is a User Interface Builder. This included a toolkit of modular control components that can be configured and arranged for a variety of use cases. The UI Builder was still a work in progress when we started this demo, however we were able to apply the layout system and control components to create the interface for this demo which again saved our team time and resources in development. The interface is optimized to be scalable on desktop, tablet and mobile devices.

Chauncey Platform

Chauncey was integrated into both the unreal project car project and react based control interface. The platform acts a centralized source of truth for the event driven data and states. Using the web based editor, a project was created with channels that publish and subscribe messages between the two connected client applications. Once those two client applications were integrated with the Chauncey project, messages maintain synchronization through the channels without any custom web-socket connection or server infrastructure setup required. This demo served to be the first use of our platform and laid the groundwork for how we would evolve the platforms features moving forward!

Visit our documentation for details on how to use Chauncey to create similar applications. For more information on this project, reach out to us on our discord channel or send us a message here. 

Related Posts

Join the team of Chauncey Alpha developers today

Start building eventful realtime experiences

sign up for alpha access