Commercialiser des produits de manière hyperréaliste avec Unity ArtEngine

MICHELLE BAUMGARTNER / UNITY TECHNOLOGIESContributor
Jul 27, 2021|15 Min
Commercialiser des produits de manière hyperréaliste avec Unity ArtEngine
Cette page a été traduite automatiquement pour faciliter votre expérience. Nous ne pouvons pas garantir l'exactitude ou la fiabilité du contenu traduit. Si vous avez des doutes quant à la qualité de cette traduction, reportez-vous à la version anglaise de la page web.

Comment un fabricant de mobilier de bureau exploite-t-il les technologies de visualisation 3D des produits pour améliorer l'expérience de ses clients ? Compte tenu de la nature personnalisée de ses produits, Flokk a décidé qu'il était temps de réorganiser l'ensemble de sa plateforme web. Une partie essentielle de ce projet consistait à numériser tous les matériaux des chaises de Flokk et à les projeter sur des modèles 3D, ce qui a été fait avec l'aide de son partenaire de solutions de confiance, Forte Digital, et d'un flux de travail de numérisation qui s'appuie sur Unity ArtEngine.

Unity ArtEngine permet une visualisation photoréaliste des produits pour Flokk

Flokk est un leader du marché dans la conception et la fabrication de mobilier de bureau de première qualité. Vendus dans plus de 80 pays, ses produits comprennent ceux de marques telles que HÅG, Offecct, Giroflex, RH, Profim, 9to5 Seating, BMA, RBM et Malmstolen. Chaque jour, ses 2 000 employés travaillent ensemble à la réalisation d'une vision commune : Inspirer un travail de qualité.

Le design est au cœur des produits Flokk. Chacun de ses produits peut être personnalisé, grâce à une chaîne d'approvisionnement et à des processus de fabrication très efficaces. Cependant, le design n'a pas toujours été au centre de l'expérience client en ligne. En 2019, Flokk a décidé de changer cela en investissant massivement dans une nouvelle plateforme de commerce électronique, avec l'aide de son partenaire de confiance Forte Digital. Un travail essentiel a consisté à numériser les matériaux des chaises de l'entreprise à l'aide d'Unity ArtEngine et à les intégrer dans un configurateur 3D développé en interne, qui permettrait aux clients de concevoir une chaise en 3D dans le confort de leur navigateur web.

Image d'une pièce bleue avec un bureau en bois et des chaises bleues.

Les résultats :

  • Augmentation du trafic sur le web grâce à la mise en place, pour la première fois, d'un système de paiement en ligne en libre-service.
  • Des gains d'efficacité internes associés à la diminution des besoins en photoshoots physiques puisque Flokk peut désormais générer des photos en haute résolution avec un configurateur 3D.
  • Fiabilité accrue de l'expérience de commande, ce qui se traduit par une diminution des erreurs de commande et des retours, et par une plus grande satisfaction des concessionnaires et des clients.
  • Cohérence de l'image de marque et du positionnement de Flokk ; la valeur de Flokk pour le design est maintenant exposée non seulement dans ses produits, mais à toutes les étapes du parcours client.
  • Un avantage concurrentiel durable en se différenciant dans un secteur traditionnel, où les investissements dans la technologie 3D en temps réel peuvent être à la traîne.
Voir le potentiel de l'investissement dans la meilleure expérience client

Les chaises Flokk sont fabriquées sur mesure et présentent des millions de configurations possibles, ce qui complique considérablement la chaîne d'approvisionnement et le processus de commande de l'entreprise. Par exemple, pour un siège de bureau particulier, un client peut choisir parmi des dizaines de tissus, spécifier des caractéristiques concernant la taille du siège, le lift, le piètement et les roues, et ajouter des accessoires supplémentaires tels qu'un repose-nuque et des accoudoirs - une expérience qui n'est pas si éloignée de l'achat d'une voiture.

Image de la quincaillerie et des pièces des chaises de bureau.

Le design est l'un des principes fondamentaux du Flokk. L'entreprise est fière de créer des produits esthétiques, durables et de haute qualité que ses clients apprécient. (En effet, le prix d'une seule chaise de bureau varie entre 700 et 2 000 dollars américains). Les clients s'attendent à ce que les valeurs de qualité et de design de Flokk se manifestent dans tous les points de contact avec l'entreprise, y compris dans l'expérience de commande en ligne.

Image d'un bureau de couleur rose avec des chaises de bureau vertes.

Cependant, avant 2019, Flokk n'offrait pas l'expérience web la plus rationalisée. En coulisses, le contenu statique représentait un défi pour l'engagement des clients. Les acquisitions récentes ont encore aggravé la question de la cohérence et du contrôle. L'ancienne infrastructure du site web était peu évolutive et ne pouvait pas supporter la nouvelle complexité induite par l'ajout de marques et de produits, ce qui se traduisait par un parcours client médiocre. Flokk n'avait pas non plus de canal de libre-service en ligne.

"Nous avons constaté que les revendeurs et les clients s'attendaient à trouver nos produits en ligne et voulaient voir comment ils pouvaient les personnaliser en fonction de leurs besoins", explique Martina Winsell, responsable du commerce électronique chez Flokk . "Comme nos produits sont assez complexes, il était important pour nous de nous concentrer sur la facilité d'utilisation lorsque nous réfléchissions à l'état futur.

En effet, une refonte complète de la plate-forme de commerce électronique s'imposait. Les objectifs du projet étaient ambitieux, mais clairs : concevoir une infrastructure commune qui débloque le canal libre-service, permet la création d'outils de vente tangentiels, s'adapte au portefeuille de produits de l'entreprise et facilite la meilleure expérience possible pour le client.

Poser les bases de la visualisation de produits physiques en 3D

Après avoir décidé d'investir, l'étape suivante consistait à trouver un partenaire de confiance.

Travaillant à l'intersection de la technologie, du design et de la stratégie, Forte Digital est une société de conseil qui crée des produits et des services numériques grâce à des partenariats à long terme avec ses clients. Son portefeuille comprend des entreprises qui couvrent de nombreux secteurs, comme Farmasiet (la plus grande pharmacie en ligne de Norvège), Nationaltheatret (un théâtre de renommée mondiale), Gyldendal Akademisk (une grande maison d'édition universitaire) et NorgesGruppen (le plus grand détaillant de Norvège).

L'expertise interdisciplinaire de Forte Digital a été au cœur de son succès dans la construction de solutions qui créent une valeur durable pour ses clients. Cette expertise a également fait de l'entreprise un choix évident en tant que partenaire pour atteindre les objectifs de Flokk, et elle a finalement été sélectionnée pour le faire.

Au centre du projet se trouvait une infrastructure commune de visualisation des produits (appelée "Configurateur") qui pouvait représenter avec précision les produits de Flokk et leurs nombreuses permutations, et être déployée sur diverses plateformes web, telles que le site web destiné aux clients, un nouvel outil pour les revendeurs appelé Flokk Hub, et d'autres outils de vente et de marketing.

Graphique en cercle vert montrant comment concevoir le nouveau site web.

Compte tenu des objectifs d'évolutivité et d'efficacité de Flokk, il était logique que le configurateur soit basé sur la 3D, contrairement, par exemple, à la photographie physique de chaque chaise et de ses configurations sous tous les angles, qui serait incroyablement chronophage et coûteuse.

Après s'être mis d'accord sur l'infrastructure, l'étape suivante consistait à effectuer le travail qui permettrait à Flokk de représenter virtuellement ses produits, notamment en numérisant les nombreux matériaux de ses chaises.

Numérisation de documents avec ArtEngine

La fidélité visuelle et la représentation précise des matériaux de Flokk étaient de la plus haute importance, et il était donc logique d'adopter un flux de travail de numérisation pour créer des jumeaux numériques des centaines de matériaux de chaises de l'entreprise. D'autres options consistaient à générer les matériaux de manière procédurale (c'est-à-dire à partir de zéro) à l'aide d'un logiciel, ou à acheter des scans auprès d'une bibliothèque publique de matériaux. Cependant, la numérisation des matériaux réels de Flokk était le seul moyen de s'assurer que les résultats seraient fidèles à la réalité.

Plus précisément, l'équipe du projet a décidé d'utiliser un processus de numérisation appelé stéréo photométrique, une technique qui permet de capturer les propriétés de la surface d'un sujet à l'aide de plusieurs photographies prises dans des conditions d'éclairage différentes. En utilisant la stéréo photométrique, on peut extraire des données non seulement sur l'albédo (c'est-à-dire la couleur - comme le fait un scanner à plat typique), mais aussi sur les normales (c'est-à-dire le modèle de relief d'une surface), et parfois sur la spécularité et la rugosité, qui sont des données clés pour la création d'un matériau de rendu physique (PBR) - le format standard de l'industrie.

Gif du fonctionnement de l'éclairage d'Unity

Compte tenu du nombre de documents à numériser, l'équipe avait besoin d'un processus aussi automatisé et cohérent que possible. Piotr Bieryt, artiste 3D chez Forte Digital, a décidé de construire un banc d'essai personnalisé et entièrement automatisé, et de traiter les scans avec ArtEngine.

Prototype de plate-forme utilisant du contreplaqué découpé au laser et des éléments imprimés en 3D

Après avoir assemblé la plateforme à l'aide de contreplaqué découpé au laser et d'éléments imprimés en 3D, Bieryt a recouvert l'intérieur du prototype de velours noir pour éviter la décoloration et les reflets de la lumière, et a installé une plaque noire amovible sur le fond pour capturer la transparence en utilisant l'éclairage par le bas. L'appareil a ensuite été configuré pour être contrôlé par Arduino.

"J'adore construire des choses et automatiser des processus, alors je me suis beaucoup amusé !". Bieryt a expliqué.

Il a utilisé un appareil photo Olympus 16 MP sans miroir avec un objectif macro de 60 mm (système Micro Four Thirds) pour capturer les détails fins des tissus de Flokk, et a pris des photos en format RAW pour garantir la précision de la balance des blancs et des couleurs. Après la correction des couleurs, Bieryt a commencé son travail dans ArtEngine.

Voici un aperçu du flux de travail typique de Bieryt dans ArtEngine.

Dans l'exemple ci-dessous, l'échantillon était un morceau de 10x10 cm d'un tissu semi-transparent provenant d'une des chaises de Flokk. Lors de la numérisation de matériaux, la transparence nécessite un canal de transparence supplémentaire, ce qui peut s'avérer complexe. Pour résoudre ce problème, Bieryt a scanné le tissu deux fois, une fois avec un éclairage latéral (un processus de capture stéréo photométrique standard), et une fois avec un éclairage par le bas (pour capturer la transparence).

Après l'importation dans ArtEngine, il a inséré chacun des deux ensembles d'images dans un nœud Multi-Angle to Texture pour combiner les 16 images en trois cartes : albédo, normale et transparence.

Image montrant le nœud de texture du moteur artistique avec des textures albédo, normales et transparentes.

Il a ensuite appliqué la méthode Gradient Removal (similaire au filtre High Pass de Photoshop) aux cartes d'albédo et de normalité afin de supprimer les gradients visibles et de permettre une meilleure mise en page.

Image montrant un avant et un après l'ajout d'un dégradé de texture à des haut-parleurs dans ArtEngine
Image montrant le processus de fusion des textures dans ArtEngine.

Après avoir appliqué Compose Material pour fusionner les trois cartes en un seul matériau, Bieryt a utilisé Pattern Unwarp pour corriger les distorsions naturelles du tissu. Bieryt fait remarquer qu'"il vaut la peine de passer du temps à redresser un échantillon avant de le numériser afin de réduire le temps passé en post-traitement, mais si vous ne parvenez pas à éliminer tous les défauts, ArtEngine dispose d'excellents outils pour les corriger après coup".

Image montrant la texture avant la déformation du motif et après la déformation du motif dans ArtEngine

Il a ensuite utilisé Cropto pourencadrer une partie de la texture redressée avec un rapport d'aspect 1:1. Le graphique des nœuds est présenté ci-dessous.

Image décrivant le fonctionnement de la structure de mutation d'ArtEngine.

Vient ensuite Mutation Structure, un nœud utilisé pour améliorer encore le pavage en utilisant l'IA pour reconnaître et éliminer les motifs répétitifs, tout en gardant intacte la structure du motif sous-jacent.

"La structure de mutation est la magie d'ArtEngine", note M. Bieryt. "Cela nous a permis de nous concentrer davantage sur l'aspect artistique de la numérisation, plutôt que de nous battre avec des logiciels ou des algorithmes".

Image montrant comment la structure de mutation d'ArtEngine modifie l'apparence du modèle 3D.
Image montrant comment ajuster les dimensions de sortie dans ArtEngine.

Après avoir ajusté plusieurs paramètres, notamment le facteur d'échelle du monde et les dimensions de sortie, il a obtenu une texture 8K très détaillée qui était six fois plus grande que l'échantillon scanné de 10 x 10 cm et qui ne présentait pas d'artefacts de tuilage évidents.

Image montrant les paramètres de l'échelle du monde, de la carte des motifs et de la structure des mutations dans ArtEngine.

Enfin, Bieryt a utilisé la génération de hauteur et la génération de rugosité/brillance pour créer des cartes de hauteur et de rugosité, ainsi qu'un matériau de composition final pour compiler le tout afin de faciliter l'exportation.

Image du processus de composition du matériau dans ArtEngine.

Vous trouverez ci-dessous le graphe de nœuds final.

Graphique de nœuds final de toutes les textures utilisées par Bieryt et son équipe dans ArtEngine.

Les matériaux qui ne différaient que par leur couleur n'ont été scannés qu'une seule fois. La création de plusieurs couleurs de tissus avec la même structure sous-jacente, ainsi que l'application des matériaux aux modèles de chaise 3D et le rendu final, ont été réalisés dans Blender Cycles.

Image montrant une chaise de bureau verte, une chaise de bureau bleue et une chaise de bureau grise
Tout mettre bout à bout

Depuis le début de la transformation, Flokk a déjà constaté des résultats tangibles. Avec le déploiement de la caisse en ligne dans chaque pays, l'entreprise a constaté une augmentation significative du trafic sur le web. Ses revendeurs et ses clients sont plus satisfaits et ravis, ce qui renforce la fidélité et la réputation de la marque. L'entreprise a également moins de frais généraux liés au traitement des commandes manuelles.

La meilleure façon de visualiser les améliorations est peut-être de se promener sur son site web destiné aux consommateurs, Flokk.com. Après avoir sélectionné la chaise qui les intéresse, les utilisateurs peuvent en personnaliser presque tous les aspects, visualiser leur configuration de près et sous différents angles, et comprendre les coûts associés à la modification de certaines caractéristiques avant de décider de passer une commande en ligne.

Image montrant la nouvelle présentation du site web de Flokk
Image montrant les textures actualisées des chaises créées avec ArtEngine

Le projet est toujours en cours, Flokk continuant d'étendre les capacités de libre-service sur les sites web spécifiques à chaque pays et déployant de nouveaux outils pour son équipe de vente et ses clients. Par exemple, une initiative en cours vise à exploiter le configurateur pour un "mode salle d'exposition", une application installée sur les iPads dans les salles d'exposition du monde entier afin que les clients puissent facilement explorer et commander les produits Flokk en magasin.

Plus largement, ce travail a montré à l'ensemble de l'entreprise l'importance d'investir dans l'expérience client et de s'adapter à l'évolution des préférences, les consommateurs se sentant de plus en plus à l'aise en ligne, effectuant leurs achats par le biais du web ou d'une appli. Il est certain que Flokk s'est exceptionnellement bien positionné pour faire face à la concurrence, en particulier dans un secteur comme la fabrication de meubles où l'investissement dans le parcours de l'utilisateur de bout en bout peut être à la traîne. En effet, en choisissant de maintenir en permanence l'expérience client au premier plan de ses décisions d'investissement, Flokk a créé un avantage concurrentiel durable qui portera l'entreprise à travers tous ses succès futurs.

Simulation de chaises Flokk dans une pièce vitrée avec vue sur les montagnes