Creation of a scalable 3D configurator for furniture e-commerce

Exclusive Spaces is a team of professional designers who create furniture, interiors and decorations. The brand offers furniture that fits the customer's needs, style and creative expression. Its clients include B2B partners and end consumers buying through the e-commerce website and in the Johannesburg Showroom.

In a very competitive furniture market, standing out can make a difference in the success or failure of a business. The advantage of the Exclusive Spaces offer is the quality and flexibility in matching the products to individual interiors. Thanks to the wide range of available materials and finishes, the brand's products are available in thousands of variants. To use this advantage well, the client needed an interactive tool to enable high-quality visualization of all possible configurations in real time.

The task: create an effective tool to support the sale of custom products.

Additional API needs were as follows:

• the configurator was to be integrated with the Exclusive Spaces e-store hosted on the Shopify platform,
• the integration was to ensure a dynamic display of prices and the function of adding to the cart from the configurator level,
• allowing users to see the product from every side and from every angle,
• very high quality of visualization, due to the demanding group of business partners, designers and target customers,
• a real representation of an extensive material library, including fabrics, wood, rattan, and metals,
• taking into account the implementation of further functionalities, such as Augmented Reality (AR) or downloading 3d models.

Solution – scalable 3d configurator

The AR-range team proposed to create a 3D configurator that will be opened in the form of a pop-up on individual product subpages (PDP). Each product had to have its own configurator, which allows users to choose from configurable variants for a given piece of furniture and materials available for it. Therefore, the tool had to be universal and repeatable, so that it could be easily applied to many products without unnecessary involvement of large amounts of work and resources.

Workflow of creating the configurator:

• Designing the logic and UI so that the configurator is adapted to various products.
• Digitization of the material library representing all textures, materials, etc.
• Uploading and preparing 3d models on Sketchfab and setting the scene.
• Implementation of the logic and coding of the configurator UI for the first product, with the largest number of configurable variants such as size, frame, backrest, metal arches and upholstery material.
• After minor improvements, the first configurator served as a template, on the basis of which configurators for subsequent products were quickly and smoothly implemented.
• Integration with ecommerce on Shopify and connecting the configurator to product pages.

UV maps vs. patterns

An unexpected obstacle for the AR-range team turned out to be UV maps in the context of visualizing furniture with fabrics with specific, repetitive patterns. UV maps are a technique used in 3D modeling to wrap a 2D image, like a texture or pattern, around a 3D object. Imagine trying to wrap a flat piece of paper around a complex object like a chair or a sofa; UV mapping is the digital version of this process. It ensures that the texture (like fabric or wood grain) correctly aligns with the contours of the 3D model, making the object look realistic in visualizations

Thanks to the additional commitment of time and attention to matching the details in UV maps, we managed to achieve the effect of a faithful UV mapping of the real furniture upholstery.

Results:

1. Fully automated process of customization, visualization and sale of furniture
2. AR-range has created a universal, repeatable product configurator. Thanks to the scalability and efficiency of the solution, the template configurator could be easily adapted to other products.
3. High-quality visuals achieved with 3D models, quality material mapping and dynamic shading provided by Sketchfab.