Photogrammétrie : utilisation possible avec Magento

Généralement, on voit dans les sites E-Commerce des images “fixes” pour représenter les produits. Parfois, on voit plusieurs images faisant le tour de l’objet, mais la plupart des sites ne permettent pas d’avoir une vision “sans contrainte” des objets présentés. Cette “vision sans contrainte” est rendue en revanche possible avec les modélisations 3D d’objets. Cependant, la plupart des objets sont assez complexes, et on peut donc difficilement avoir une représentation “réaliste” des objets en codant directement leur modélisation. C’est là que peut entrer en jeu la photogrammétrie, qui permet notamment de récupérer une modélisation 3D d’un objet dont on a fait des photographies.

Pour arriver à cela, il va falloir passer par plusieurs étapes :

  • Prendre des photos convenables pour la photogrammétrie
  • Calculer le modèle 3D
  • Nettoyer le modèle 3D et le convertir dans un format approprié
  • Intégrer le modèle dans une interface web
  • Intégrer l’ensemble dans Magento

Prise de photos pour la photogrammétrie

La prise de photos pour la photogrammétrie n’est pas aisée ; néanmoins, j’ai eu la chance de découvrir un excellent article (https://blog.sketchfab.com/how-to-set-up-a-successful-photogrammetry-project/) qui m’a permis après plusieurs essais infructueux de calcul de modèle 3D, de réussir à prendre un jeu de photos qui a convenu pour la modélisation 3D.

Pour résumer, il s’agit de prendre des photos tout autour d’un objet, en ayant une distance focale fixe et un éclairage ambiant diffus, permettant de ne pas générer d’ombres. Les photos doivent avoir des zones de recouvrement assez importantes pour avoir suffisamment de similitudes entre elles.

En pratique :

  • j’ai choisi comme objet un bougeoir qui est assez “plat”, et ne générant ainsi que très peu d’ombres. Comme ce bougeoir est en bois, il présente un aspect assez mat, ce qui convient pour de la photogrammétrie
  • comme il s’agit d’avoir uniquement une lumière ambiante diffuse, il ne faut pas rajouter une lumière directionnelle : autrement dit, on n’a pas le droit au flash pour prendre les photos
  • j’ai disposé du papier journal sous l’objet, de sorte à avoir des lignes de repères qui facilitent la détection de similitudes
  • pour avoir la distance focale fixe, tout en ayant un appareil autofocus, j’ai pu uniquement verrouiller la distance focale après une mise au point automatique de l’appareil. Je n’ai pas eu de bons résultats en tournant moi-même autour de l’objet, et j’ai donc, du fait de l’entrée de blog mentionnée, tenté l’approche avec un plateau tournant. Cette approche fonctionne effectivement, à condition de simuler entièrement une rotation de l’environnement dont on prend la photo. Ceci implique que des éléments d’arrière plan ne doivent pas apparaître, car ils seraient des points fixes qui perturberaient le processus. J’ai donc utilisé un écran de projection pour avoir un fond uniforme, qui permet donc de ne pas avoir de problème avec les points fixes
  • j’ai enfin également utilisé un trépied et le retardateur de l’appareil photo, afin de ne pas avoir de photos floutées

A ma 9ème tentative je suis arrivé à prendre un peu plus de 90 photos en faisant tourner mon objet posé sur un plateau, photos qui n’ont plus posé de problèmes lors de la modélisation 3D.

Modélisation 3D

La modélisation 3D a été réalisée avec le logiciel Micmac de l’IGN, qui est un logiciel libre, sous licence CeCILL-B. J’ai au préalable intégré le modèle d’appareil photo que j’ai utilisé dans les données de micmac, afin qu’il dispose de la taille du capteur, donnée qui est nécessaire pour l’orientation des images. La modélisation se passe en plusieurs étapes, avec pour chacune une commande spécifique, qui est à personnaliser en fonction de la situation.

  • La découverte des points similaires entre les différentes images

    mm3d Tapioca All “.*JPG” -1

    L’utilisation telle quelle de cette commande est certes suboptimale, surtout en terme de temps de calcul, mais c’est la forme la plus simple de la commande qui va comparer toutes les photos les unes par rapport aux autres.

 

  • L’orientation des images les unes par rapport aux autres

    mm3d Tapas RadialStd “.*JPG”

    L’utilisation du modèle RadialStd correspond aux objectifs classiques d’appareil photo.

 

  • Le calcul du nuage de points global de la scène

    mm3d C3DC Statue “.*JPG” Ori-RadialStd

 

  • La reconstruction des faces de l’objet

    mm3d TiPunch C3DC_Statue.ply Pattern=”IMG_.*[803].JPG” Filter=1

    Il n’y a pas besoin d’utiliser toutes les images.

 

  • La texturation des faces de l’objet

    mm3d Tequila “IMG_.*[83].JPG” Ori-RadialStd C3DC_Statue_mesh.ply

    Pour cette commande, l’utilisation de toutes les images risque même de faire échouer la commande.

 

Il y a une vaste documentation du logiciel Micmac qui est livrée directement avec les sources du logiciel. Il faut simplement faire attention lorsque l’on compile le logiciel d’activer l’option BUILD_POISSON afin de pouvoir faire la reconstruction des faces de l’objet.

Les différents calculs prennent beaucoup de temps (alors que les calculs sont la plupart du temps parallélisés sur l’ensemble des cœurs processeurs disponibles) et les résultats intermédiaires prennent une place non négligeable.

Nettoyage du modèle

Les fichiers générés, notamment les fichiers PLY, peuvent être ouverts avec un autre logiciel libre, Meshlab.

On peut voir en-dessous, outre un exemple d’images sources, trois éléments des plus intéressants qui sont issus de micmac : le nuage de points, les faces et enfin la texturation.

jmart_photo

art_points_crop

art_mesh_crop

art_texture_crop

On peut ensuite utiliser Meshlab, justement à plusieurs fins :

  • Nettoyer l’image : j’aurais pu créer au niveau de micmac des filtres sur les images, pour n’avoir en sortie que certaines portions utiles du modèle. Néanmoins, j’ai préféré garder l’ensemble des données jusqu’à la fin, pour éviter de supprimer par mégarde des portions utiles
  • Faire des screenshots (ceux d’au-dessus)
  • Exporter le modèle : le format PLY est un format simple et en bonne partie standardisé, mais d’autres formats dont notamment le format OBJ et le format MTL, sont plus intéressants pour leur exploitation dans le navigateur

Meshlab a été très simple à utiliser, mais je n’ai qu’effleuré ses possibilités.

Intégration web

Reste ensuite à intégrer le résultat dans un navigateur web. C’est là qu’entre en jeu deux technologies : WebGL en couche de base, et surtout Three.js, une librairie qui permet de faciliter grandement l’utilisation de WebGL.

Three.js propose une grande couche d’abstraction pour ne pas avoir à gérer le WebGL directement. Dans le cadre de ma découverte, j’ai constaté que Three.js fournissait tout ce qui m’était nécessaire pour afficher simplement les objets générés :

  • Il fournit un environnement simple à utiliser, avec des objets tels qu’une scène, une caméra, une lumière (ambiante), un objet représentant les repères d’axes
  • Il fournit des chargeurs de modèles, dont un chargeur pour les fichiers MTL (et le fichier de texture) et les fichiers OBJ
  • Il fournit des exemples d’interface utilisateur, dont une assez intéressante : le modèle d’orbite, où l’utilisateur peut simplement avec la souris tourner autour d’un objet

Il m’a donc simplement été nécessaire de positionner mon objet sur la scène, en pensant à mettre une source de lumière, car le type de matériau créé était un matériau Phong, dont le rendu dépend des sources lumineuses. J’ai réalisé le positionnement de manière satisfaisante en faisant une translation de l’objet pour placer le centre de la bounding box (boîte contenant l’objet 3D) sur l’origine du repère. J’ai également positionné la caméra pour regarder vers l’origine. La programmation a donc été nettement plus simple qu’escompté, puisque Three.js fournit tout ce qui est nécessaire.

Une précaution est toutefois nécessaire : dans les fichiers MTL et OBJ, utiliser des chemins relatifs et faire attention à garder la concordance des chemins, et ce également sur le serveur web : en effet, le fichier de texture pour le mappage de texture est indiqué dans le fichier MTL, de même que le fichier MTL est référencé dans le fichier OBJ. Le plus simple est encore d’utiliser un système de répertoire, en dédiant un répertoire pour chaque modèle d’objet (fichier obj, mtl et texture réunis à chaque fois dans un même répertoire).

Intégration à Magento

On déduit de l’intégration web générique qui a été expliquée au-dessus qu’on peut chercher à rendre la fonctionnalité de visualisation 3D disponible à travers Magento via un module dédié - d’autant plus que ce genre de fonctionnalité “insolite” peut aiguiser l’intérêt de l’internaute, et pourrait rendre le visiteur plus attentif que sur d’autres sites, puisque la notion d’interface utilisateur laisse supposer que l’utilisateur puisse agir.

Néanmoins, il faut notamment tenir compte de différentes problématiques spécifiques du module :

  • le stockage des fichiers : le plus simple est de créer une arborescence spécifique dans media
  • la notion de path dans three.js : on a des chemins sous formes d’URL pour chacun des fichiers, avec la cohérence nécessaire avec le contenu des fichiers : cette cohérence est supposée être acquises en définissant la norme de stockage de tout dans un répertoire, avec des chemins de fichiers relatifs
  • la sélection des fichiers dans le BO : cette fonctionnalité peut être simplement remplie par un contrôle de type select, avec une liste de fichiers ayant une extension appropriée (obj pour les fichiers objets, mtl pour les matériaux).

En pratique, j’ai préparé une classe Javascript qui dispose d’un constructeur proposant comme paramètres le chemin des fichiers, le nom des fichiers MTL et OBJ, ainsi que l’ID du container que Three.js devra utiliser.

Ainsi, intégrer dans une page Magento une vue 3D revient donc simplement à instancier un bloc qui portera le container et une instance de la classe JS créée.

Pour rendre la fonctionnalité pratique à utiliser, il faut bien entendu la rendre accessible depuis le Back Office de Magento. La mise en avant d’un modèle 3D pourrait être intéressante à de nombreux niveaux, comme par exemple :

  • la fiche produit : la fiche produit est bien entendu le premier lieu auquel on pense, mais pour autant, on peut supposer que vu la complexité et le temps nécessaire pour obtenir un modèle 3D, tous les produits ne disposeront pas d’un modèle 3D ; donc intégrer directement les modèles 3D sous forme d’attribut de produit serait peut-être un peu disproportionné. En revanche, on peut très bien utiliser les possibilités de custom layout update intégrer au BO de Magento pour intégrer le bloc pour le visionnage 3D
  • les pages de catégorie : les pages de catégorie ne semblent pas être très adaptées pour une implémentation au niveau des présentations de chaque produit, mais en revanche, il est toujours possible de mettre en avant un produit particulier via un bloc CMS configuré via le BO.
  • les pages CMS : ce sont des pages de présentation, donc la mise en avant d’un produit peut justifier la création d’une telle page. Le plus simple dans ce cas est de prévoir un widget qui permet l’insertion du bloc. Une approche qui permet de mieux gérer la maintenance des pages est l’utilisation de blocs CMS réutilisables, les blocs et les pages CMS disposant tous les deux de fonctionnalités WYSIWYG dans le BO de Magento.

Vu les différents emplois possible du bloc, une approche orientée widget m’a semblé être intéressante, car elle permet de bénéficier de la simplicité de création du widget et des possibilités d’intégration des blocs CMS dans les pages.

Dans mon expérimentation, j’en suis arrivé à une interface de widget comme la suivante :

mag_admin_three

Et un résultat sur une page CMS comme par exemple :

mag_three

On constate donc qu’il est possible d’intégrer une modélisation 3D de certains objets dans Magento, et ce en partant de photos “judicieusement prises”. Si on le souhaiterait, on pourrait faire des intégrations plus importantes, comme par exemple en ajoutant des possibilités de mise en situation, comme par exemple placer l’objet sur un socle pour cacher la face qui n’est pas modélisée (la face support), et créer un environnement pour l’objet.

Par ailleurs, même si dans cet article j’ai utilisé la photogrammétrie pour arriver à faire une représentation 3D d’un objet, il n’est pas forcément nécessaire de modéliser en 3D des objets pour pouvoir les exploiter dans une scène 3D : un exemple connu est les billboards, qui sont généralement des polygones simples (comme des quadrilatères) qui plaquent une texture sur le polygone et jouent sur la rotation de l’objet de sorte que le polygone soit toujours de face lorsque le polygone est dans le champ de la caméra. Ainsi, on pourrait par exemple songer à réutiliser les images 2D des produits pour les inclure dans une forme de carrousel ressemblant à un rayon de magasin, voire dans la reproduction d’un “magasin virtuel”...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *