Configurateur 3D de chaussures pour femmes

Configurateur 3D WebGL en ligne sur site Prestashop.

Développé avec Babylon.js – Compatible Mac et PC

Un configurateur 3D en ligne proposant un rendu 3D ultra-réaliste des volumes et de la matière, le tout connecté à un site e-commerce sous Prestashop.

Fonctionnalités du configurateur 3D

  • Aucune installation / Full web

  • Connexion/Inscription utilisateur

  • Validation d’inscription par mail

  • Identification de l’utilisateur

  • Accès à l’historique des commandes

  • Gestion du transport

  • Partage sur les réseaux sociaux

  • Choix de la pointure

  • Choix de la forme

  • Ajout d’un embout

  • Forme et hauteur de talon

  • Accessoires clipsables

  • Choix des matières

  • Nuancier thématique

  • Création du panier Prestashop

  • Génération d’une image 3D

  • Calcul du prix selon surfaces de cuir

  • Paiement en ligne sécurisé

  • Interface de gestion des stocks de matières

  • Back-office de gestion des prix

Le besoin client

Ce configurateur 3D a été développé pour Malefic Shoes, une start-up de l’Ouest portée par Morgane Cabaret, récompensée à de multiples reprises par son aspect innovant : médaille d’or au concours Lépine, lauréate au concours « Les ambitieuses » du Réseau Entreprendre, et bien d’autres.

Parfois les idées les plus originales ont du mal à être formalisées. Morgane est passée par 2 agences avant que la 3ème nous contacte pour une sous-traitance du développement d’un configurateur… Finalement, celle-ci nous a transféré l’intégralité d’un projet bien plus complexe qu’elle ne l’avait estimé, et qui nécessitait des compétences plus transversales pour simuler les millions de combinaisons possibles, et les intégrer dans une plate-forme e-commerce.

Grâce au configurateur 3D que notre équipe a développé, les futures clientes de Malefic Shoes peuvent désormais créer et visualiser en 3D la chaussure de leurs rêves, en faisant varier tous les « paramètres » qui peuvent la constituer : sa hauteur, sa pointure, la forme du talon, du socle, ses accessoires et bien entendu ses matières, que nous avons travaillées avec une attention absolue.

Le déroulement du projet

Avant de commencer le développement du configurateur 3D à proprement parler, il a fallu comprendre et synthétiser l’offre de notre cliente, constituée de multiples options et accessoires, et qui n’étaient pas encore tout à fait formalisée.

Fidèles à notre habitude,  nous avons opté pour un bon vieux tableur sur Google Sheets, qui a le mérite d’être compréhensible par toutes les parties, et qui permet une première approche synthétique avant de se lancer dans le configurateur en lui-même.

Quelques échantillons et prototypes de chaussures avaient déjà été réalisées par Malefic. Ainsi, nous avons pu les « prendre en mains » de manière concrète, et les étudier avec minutie. Toutes les formes existaient, mais il manquait de nombreux accessoires, options et matières, que nous avons dû imaginer.

Suite à ces analyses, la modélisation 3D de l’ensemble des produits et accessoires a pu commencer.

L‘ensemble des modèles 3D des chaussures « nues » ont été réalisés en quelques semaines, avec plusieurs présentations et rebouclages auprès de la cliente, afin de respecter au mieux les lignes de sa gamme.

Cette phase de modélisation a été particulièrement difficile, car chaque détail et courbe devait être repris à l’identique, afin de ne pas dénaturer un produit haut de gamme, tel qu’il avait été imaginé par sa créatrice.

Après la modélisation des socles est venue la création des accessoires, et l’ajout de capteurs dans les modèles 3D permettant de placer ces accessoires au bon endroit, quelque soit le modèle utilisé, au sein du futur configurateur.

Les modèles 3D étant validés, le travail sur la matière a constitué un challenge passionnant. En effet, les teintes devaient être reproduites à l’identique, dans des aspects allant du velours au cuir « croco », en passant par du cuir fin avec incrustation de paillettes.

Après la réception d’échantillons de chaque matière, nous avons pu reproduire ces effets sur le configurateur 3D et même parfois les simuler intégralement pour permettre une application sur toute la surface d’une chaussure, avec une couture présente uniquement sur l’arrière. C’était un défi de taille, surtout avec l’utilisation de WebGL qui présente de nombreuses limitations sur les effets de lumière et de matière !

Une fois les textures créées, intégrant les effets de brillance, de relief, et de teinte, nous avons appliqué ces textures sur chaque partie de chaque modèle en veillant à respecter leur échelle, et en proposant une disposition harmonieuse.

Photographie des échantillons de matièreApplication de la matière sur un socle de chaussure

La phase finale du projet de configurateur 3D a consisté à développer un site Internet sur Prestashop, puis à y intégrer le configurateur afin que celui-ci dialogue directement avec le CMS e-commerce.

La difficulté majeure a été de contourner le nombre de combinaisons d’options que Prestashop est en mesure de gérer sur un même produit, beaucoup trop limité pour les besoins de Malefic Shoes. Ainsi, nous avons pris le parti de générer des produits à la volée dans le catalogue de Prestashop, selon les création des clientes, directement depuis le configurateur 3D.

Le projet Malefic Shoes, porté par Morgane Cabaret, remporte de nombreuses récompenses et victoires depuis sa création. Le configurateur 3D, qui permet en quelques clics de visualiser un nombre important de combinaisons et options sur un visuel 3D réaliste, y a sans doute participé !