Configurator 3D
ROLE
RESPONSIBILITIES
TEAM
PROBLEM
Choosing the perfect wedding suit presents several challenges, including the need to match the fabric and style to the wedding season and venue, navigating the overwhelming array of fabric options with varying textures, weights, and appearances, and dealing with the limited availability of fabrics in physical stores due to space constraints.
Addressing these challenges requires a comprehensive approach that combines personalized guidance, innovative technology, and a deep understanding of client needs and preferences.
RESEARCH
Most online configuration solutions utilize WebGL-based engines for showcasing meshes and materials. One popular library is three.js, known for its massive community support and open-source nature. WebGL libraries render directly on the user’s device, resulting in instant loading times. However, we sought a different approach to achieve higher quality: Cloud Streaming.
By leveraging cloud streaming technology, we built a standalone Windows application that runs on powerful devices and serves the rendering to low-budget devices. While this approach introduces challenges such as longer loading times and dependence on internet connection speed, the superior quality of the final product justified the risks.
OUR VISION
To position Modesto Bertotto as an innovator in the wedding suit industry, we needed a cross-platform solution that provides clients with expert guidance and the tools to create their own wedding suits. This solution must also offer a high-quality, realistic representation of the fabrics to ensure confidence in their choices
Variant Manager
We created an Unreal Engine project where all the meshes and materials, crafted by Riccardo and Vasco, are meticulously set up. By integrating these assets into the Variant Manager, we enable seamless interaction between the client and the application. This setup allows for multiple mesh and fabric variants, offering endless possibilities for customization.
Export Configuration
A button that triggers the Unreal Engine application to generate an image of the current render. This image is then passed to the Next.js frontend, which displays it to the user. Additionally, we provided a button that converts the displayed HTML into a PNG image. This allows users to easily export their configurations, take them to the store, and order their custom wedding outfits with confidence.
Outfit Suggestion
We implemented a wizard that prompts users with simple, foundational questions. Based on their responses, we provide personalized outfit recommendations for them to begin customizing. Additionally, this approach allows us to optimize the user experience by initiating the Unreal Engine virtual machine in the background while they answer questions. This ensures a seamless and efficient experience for users as they proceed with customizing their ideal wedding outfit.
IMPLEMENTATION
Instead of reinventing the wheel, we utilized Unreal Engine's built-in Variant Manager. This tool allows for creating variants and assigning properties to in-scene actors. Selecting a particular variant changes the state of the actor in the scene, simplifying the configuration process. Through extensive tests and research with the Variant Manager, we created a functional prototype in Unreal Engine.
We selected Next.js and Tailwind CSS for the frontend stack. Despite my background in game development (Unity and Unreal), I quickly adapted to web development. My goal was to create a basic frontend with a WebSocket client to communicate with the Unreal App. Here are some initial tests of WebSocket communication:
We opted to create all UI elements using web technologies for their simplicity and lightweight nature. Unreal Engine's primary focus is on 3D rendering. Here is a look at the first complete prototype:
RESULTS
After working closely with the team to bring the idea to life, we finally launched the solution on the brand website, and we are excited about the results. After weeks of monitoring, we achieved our most important goal: increasing website visitors. Despite the startup time of the solution being around 2 minutes, most users stayed on the platform and engaged with the experience. A small percentage did not wait for the experience to load, which is a technological constraint we plan to address in the future by improving startup times.
SUMMARY
In this project, I integrated Unreal Engine and Next.js with cloud streaming, which was an amazing learning opportunity where I acquired skills in Tailwind and Next.js, among others. However, if given another chance, I would approach several aspects differently: I would better distinguish between server and client components, avoiding unnecessary "use client" directives; improve page structure by moving some logic to the layout page for better organization; and utilize component libraries like shadcn for a more consistent look and feel. Despite these challenges, the project was immensely rewarding and helped me unlock a new, valuable skill set for the future.