𝗖𝘂𝘀𝘁𝗼𝗺𝗶𝘇𝗲𝘂𝗿 𝗱𝗲 𝗷𝗲𝘂𝘅 𝗱𝗲 𝗷𝗲𝘄𝗲𝗮𝘂𝘅 𝟯𝗗 𝗲𝘁 𝗲𝘅𝗽𝗲́𝗿𝗶𝗲𝗻𝗰𝗲 𝗱𝗲 𝗥𝗲́𝗮𝗹𝗶𝘁𝗲́ 𝗔𝘂𝗴𝗺𝗲𝗻𝘁𝗲́𝗲 (𝗔𝗥)
Les acheteurs de bijoux haut de gamme ont besoin de plus que de simples images en 2D. Ils veulent voir comment l'or réfléchit la lumière ou à quoi ressemble réellement la taille d'un diamant.
Mon équipe et moi avons conçu une plateforme d'e-commerce prête pour la production pour un client du secteur de la bijouterie. Nous avons créé un configurateur 3D et une fonctionnalité d'essai en Réalité Augmentée (AR). Nous avons développé cela pour que cela fonctionne dans un navigateur mobile sans faire planter les appareils.
Voici comment nous avons géré le processus technique.
Le Pipeline d'Actifs (Asset Pipeline)
Les bijoux commencent sous forme de fichiers CAO (CAD) volumineux. Ces fichiers dépassent souvent 50 Mo et possèdent des millions de polygones. Nous ne pouvons pas les utiliser sur le web. Nous avons mis en place un pipeline d'optimisation personnalisé :
- Remeshing : Nous avons utilisé Blender pour réduire le nombre de polygones tout en conservant des formes nettes.
- Baking des détails : Nous avons transformé la géométrie complexe en Normal Maps 2D. Cela permet d'obtenir un éclairage détaillé sans ajouter de fichiers lourds.
- Texturage PBR : Nous avons défini des maps spécifiques pour la rugosité (roughness) et la métallicité (metalness) afin de garantir un aspect réaliste des surfaces.
- Compression : Nous avons exporté les actifs au format GLTF/GLB. Nous avons utilisé la compression Google Draco pour réduire la taille des fichiers de 50 Mo à moins de 2 Mo.
Le Moteur de Rendu (Rendering Engine)
Nous avons utilisé Three.js pour nous connecter directement au GPU de l'utilisateur. Pour donner aux métaux un aspect de luxe, nous avons utilisé une image à haute plage dynamique (HDRI) comme carte d'environnement (environment map). Cela permet au métal d'afficher des reflets en temps réel lorsque les utilisateurs font pivoter la bague.
Nous avons géré les changements de matériaux par le code. Lorsqu'un utilisateur sélectionne un métal, nous parcourons la scène GLTF et mettons instantanément à jour les valeurs de couleur, de rugosité et de métallicité.
Réalité Augmentée (AR)
Nous avons implémenté un flux de travail à double moteur pour les utilisateurs mobiles :
- Android : Nous avons utilisé l'intégration Scene Viewer.
- iOS : Nous avons utilisé les standards du web pour assurer une compatibilité multiplateforme.
La Leçon
L'ingénierie frontend moderne consiste à construire des pipelines efficaces. Vous devez convertir des fichiers lourds en actifs légers. Vous devez vous assurer que des expériences de haute fidélité fonctionnent sur les navigateurs mobiles standards.
Avez-vous déjà construit des éléments 3D interactifs ou utilisé WebXR dans un projet ? Partagez vos méthodes d'optimisation dans les commentaires.
Source : https://dev.to/tharul/engineering-a-3d-customizer-ar-experience-for-a-jewelry-ecommerce-web-app-2fn4