Search Unity

Marketing products in hyper-realistic ways with Unity ArtEngine

July 27, 2021 in Industry | 15 min. read
Image of an office rendered in Unity
Image of an office rendered in Unity
Share

Is this article helpful for you?

Thank you for your feedback!

How does an office furniture manufacturer leverage 3D product visualization technologies to improve its customer experience? Given the bespoke nature of its products, Flokk decided it was time to revamp its entire web platform. A key part of this project involved digitizing all of Flokk’s chair materials and projecting them onto 3D models, which it did with the help of its trusted solutions partner, Forte Digital, and a scanning workflow that leveraged Unity ArtEngine

 

Unity ArtEngine enables photorealistic product visualization for Flokk

Flokk is a market leader in the design and manufacturing of premier workplace furniture. Sold in over 80 countries, its products include those from brands such as HÅG, Offecct, Giroflex, RH, Profim, 9to5 Seating, BMA, RBM and Malmstolen. Each day, its 2,000 employees work together to realize a common vision: Inspire great work.

This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.

Design is at the heart of Flokk’s products. Each of its products can be customized, thanks to its highly efficient supply chain and manufacturing processes. However, design wasn’t always at the center of its online customer experience. In 2019, Flokk decided to change that by making a large investment in a new e-commerce platform, with the help of its trusted partner Forte Digital. A critical piece of work involved digitizing the company’s chair materials using Unity ArtEngine and integrating them into an 3D configurator developed in-house that would enable customers to design a chair in 3D within the comfort of their web browser.

Image of a blue room with a wooden desk and blue chairs.

The results:

  • Increased web traffic by enabling online self-serve checkout for the first time 
  • Internal efficiencies associated with the lower requirement for physical photoshoots since Flokk can now generate high-resolution photos with a 3D configurator 
  • Increased reliability of the ordering experience, resulting in fewer order errors and returns, and more satisfied dealers and customers 
  • Consistency across Flokk’s branding and positioning; Flokk’s value for design is now exhibited not only in its products, but throughout all stages of the customer journey
  • A sustainable competitive advantage by differentiating itself in a traditional industry, where investment in real-time 3D technology can be lagging

Seeing the potential of investing in the best customer experience

Flokk’s chairs are bespoke and have millions of potential configurations, which creates significant complexity in the company’s supply chain and ordering process. For example, for a particular office chair SKU, a customer can choose from among dozens of fabrics, specify characteristics about the seat size, lift, foot base and wheels, and add additional accessories such as a neck rest and arm rests – an experience not so dissimilar to buying a car.

Image of office chair hardware and parts.

Design is one of the Flokk’s core tenets. The company prides itself in creating aesthetic, high-quality, durable products that its customers love. (Indeed, a single office chair is priced at $700–$2,000 USD). Customers expect Flokk’s values of quality and design to manifest in all touchpoints with the company, including the online ordering experience.

Image of a rose colored office with green office chairs.

However, prior to 2019, Flokk did not have the most streamlined web experience. Behind the scenes, static content posed a challenge to engaging customers. Recent acquisitions further compounded the issue of consistency and control. The old website infrastructure had low scalability and could not support the new complexity brought on by the additional brands and products, resulting in a subpar customer journey. Flokk also had no online self-serve channel.

“We saw that both dealers and customers expected to find our products online, and wanted to see how they could customize them based on their needs,” explained Martina Winsell, E-Commerce Manager at Flokk. “Since our products are quite complex, it was important for us to focus on usability when thinking about the future state.”

Indeed, a complete e-commerce platform overhaul was overdue. The project goals were ambitious, but clear: design a common infrastructure that unlocks the self-serve channel, enables the creation of tangential sales tools, scales with the company product portfolio, and facilitates the best customer experience possible.

Laying the foundation for visualizing physical products in 3D

After deciding to make the investment, the next step was to find a trusted partner. 

Working at the intersection of technology, design and strategy, Forte Digital is a consulting company that builds digital products and services through long-term partnerships with its clients. Its portfolio includes companies that span many industries, such as Farmasiet (Norway’s largest online pharmacy), Nationaltheatret (a world-renowned theater), Gyldendal Akademisk (a large academic publisher), and NorgesGruppen (Norway’s largest retailer).

Forte Digital’s interdisciplinary expertise has been core to its success in building solutions that create sustainable value for its customers. Such expertise also made the company an obvious choice as a partner to deliver on Flokk’s goals, and ultimately was selected to do so.

At the center of the project was a common product visualization infrastructure (called the “Configurator”) that could accurately depict Flokk’s products and their many permutations, and be deployed across various web platforms, such as the customer-facing website, a new dealer tool called Flokk Hub, and other sales and marketing tools.

Green circle chart showing how to design the new website.

Given Flokk’s goals for scalability and efficiency, it made sense for the Configurator to be based in 3D, in contrast to, for instance, physically photographing every chair and its configurations at every angle, which would be incredibly time and cost intensive. 

After aligning on the infrastructure, the next step was to do the work that would actually allow Flokk to represent its products virtually, including digitizing its many chair materials.

Digitizing materials with ArtEngine

Visual fidelity and accurate representation of Flokk’s materials were of utmost importance, and thus it made sense to adopt a scanning workflow to create digital twins of the company’s hundreds of chair materials. Other options included generating the materials procedurally (i.e., from scratch) using software, or purchasing scans from a public materials library. However, scanning Flokk’s actual materials was the only way to ensure the results would be true to life.

Specifically, the project team decided to use a scanning workflow called photometric stereo, a technique that allows for the capture of a subject’s surface properties using several photographs taken with different light conditions. Using photometric stereo, one can extract data on not only albedo (i.e., color – just as a typical flatbed scanner can do) but normals (i.e., a surface’s relief pattern), and sometimes specularity and roughness, which are key inputs into creating a physically based rendering (PBR) material – the industry standard format.

Gif of how unity lighting works

Given the number of materials to be digitized, the team needed the process to be as automated and consistent as possible. Piotr Bieryt, a 3D artist at Forte Digital, decided to build a custom, fully automated rig, and process the scans with ArtEngine.

prototype rig using laser-cut plywood and 3D-printed elements

After assembling the rig using laser-cut plywood and 3D-printed elements, Bieryt covered the prototype’s interior with black velour to prevent discoloration and light reflections and installed a removable black plate on the bottom to capture transparency using illumination from below. The rig was then configured to be controlled by Arduino.

“I love building things and automating processes, so I had a lot of fun!” Bieryt explained.

He used a mirrorless Olympus 16 MP camera with a 60mm macro lens (Micro Four Thirds system) to capture the fine details on Flokk’s fabrics, and shot in RAW to ensure accurate white balance and colors. After color correction, Bieryt began his work in ArtEngine.

Here’s an overview of Bieryt’s typical workflow in ArtEngine.

In the example below, the sample was a 10x10 cm swatch of a semitransparent fabric from one of Flokk’s chairs. When digitizing materials, transparency requires an additional transparency channel, which can create complexity. To address this, Bieryt scanned the fabric twice, once with it lit from the sides (a standard photometric stereo capture process), and once lit from the bottom (to capture transparency).

After importing into ArtEngine, he plugged each of the two image sets into a Multi-Angle to Texture node to combine the 16 images into three maps: albedo, normal, and transparency.

 

Image demonstrating the art engine texture node with albedo, normal, and transparent textures.

He then applied Gradient Removal (similar to the High Pass filter in Photoshop) to both the albedo and normal maps to remove visible gradients and enable better tileability.

Image showing a before and after of adding a texture gradient to speakers in ArtEngine
Image showing the process of merging textures in ArtEngine.

After applying Compose Material to merge the three maps into a single material, Bieryt used Pattern Unwarp to correct for natural distortions in the fabric. Bieryt notes, “It’s worth spending time straightening a sample before scanning to reduce time spent post-processing, but if you can’t get all the kinks out, ArtEngine has great tools for correcting after the fact.”

Image showing texture before pattern warp and after pattern warp in ArtEngine

He then used Crop to frame a portion of the straightened texture with a 1:1 aspect ratio. Below is the node graph.

Image describing how the ArtEngine mutation structure works.

Next came Mutation Structure, a node used to further improve tiling by using AI to recognize and eliminate repetitive patterns, while keeping the structure of the underlying pattern intact.

“Mutation Structure is ArtEngine’s magic,” Bieryt notes. “It was a huge game-changer for us that allowed us to focus more on the artistic side of scanning, rather than fight with software or algorithms.”

Image showing how ArtEngine's mutation structure changes the 3D model's appearance.
Image showing how to adjust output dimensions in ArtEngine.

After adjusting several parameters, including the world scale factor and output dimensions, he arrived at a highly detailed 8K texture that was six times larger than the 10x10cm scanned sample and had no obvious tiling artifacts.

Image showing the world scale, pattern map, and mutation structure settings in ArtEngine.

Finally, Bieryt used Height Generation and Roughness / Gloss Generation to create height and roughness maps, as well as a final Compose Material to compile everything for easy export.

Image of the compose material process inside of ArtEngine.

Below is the final node graph.

Final node graph of all the textures used by Bieryt and team in ArtEngine.

Materials that differed only by their color were scanned only once. Creating multiple colors of fabrics with the same underlying structure, as well as applying the materials to the 3D chair models and doing the final rendering, was done in Blender Cycles.

Image showing a green office chair, blue office chair, and grey office chair

Pulling everything together

Since the transformation began, Flokk has already seen tangible results. As online checkout has rolled out on a country-by-country basis, the company has seen a significant increase in web traffic. Its dealers and customers are more satisfied and delighted, boosting brand loyalty and reputation. The company also has fewer overhead costs associated with processing manual orders.

The improvements are perhaps best visualized by taking a stroll through its consumer-facing website, Flokk.com. After selecting a chair of interest, users can customize nearly every aspect, view their configuration up close and different various angles, and understand the costs associated with changing certain features before deciding to place an online order.

Image showing the new layout of the Flokk website
Image showing the updated chair textures created with ArtEngine

The project remains in flight as Flokk continues to expand self-service capabilities on country-specific websites and deploys new tools for its sales team and customers. For example, one current initiative aims to leverage the Configurator for a “Showroom mode,” an app installed on iPads in its showrooms around the world so customers can easily explore and order Flokk’s products while in-store.

More broadly, the work has shown the entire company the importance of investing in the customer experience and adapting to shifting preferences as consumers increasingly feel more comfortable online, making purchases through the web or an app. To be sure, Flokk has positioned itself exceptionally well to compete, particularly in an industry like furniture manufacturing where investment in the end-to-end user journey can be lagging. Indeed, by choosing to continuously keep the customer experience at the forefront of its investment decisions, Flokk has created a sustainable competitive advantage that will carry the company forward through all its future successes.

Simulation of Flokk chairs in a glass walled room looking out to mountains
July 27, 2021 in Industry | 15 min. read

Is this article helpful for you?

Thank you for your feedback!