Transformer le virtuel en réalité avec AR sur Shopify

La réalité augmentée est quelque chose que nous voyons de plus en plus apparaître, mais qu'est-ce que c'est exactement et comment est-ce fait ? Tout le monde connaît la réalité virtuelle grâce aux jeux vidéo et aux films comme Ready Player One. Dans Virtual Reality, vous enfilez un casque VR et découvrez une réalité complètement synthétique, vous éloignant du monde physique et vous permettant de vous immerger dans un monde totalement différent. Pendant ce temps, la réalité augmentée brouille la frontière entre virtuel et réel. Il permet à l'utilisateur de découvrir du contenu artificiel dans le cadre de son environnement physique et est sur le point de prendre d'assaut le commerce électronique, car Shopify adopte la technologie pour activer la RA pour ses propriétaires de magasins.

Récemment, Shopify a intégré l'utilisation d'ARKit d'Apple pour fournir du contenu AR à ses utilisateurs et nous, chez Eastside Co, l'expérimentons depuis. Plus récemment, nous avons travaillé avec Lazy Oaf pour proposer des versions en réalité augmentée de leur nouvelle ligne de chaussures développée en partenariat avec le légendaire Doc Martens. Apporter l'esthétique unique des conceptions de Lazy Oaf à la réalité augmentée grâce à la modélisation 3D était un défi amusant et, je crois, a ajouté un niveau d'interactivité aux achats en ligne qui est proche de ce qui n'était auparavant disponible que dans les magasins de détail.

Alors, que se passe-t-il dans la création d'un produit virtuel pour la RA et quels sont les problèmes qui surgissent en cours de route ?

Mise en place

Lazy Oaf a eu la gentillesse de nous envoyer les produits réels avant le lancement, ce qui m'a permis d'avoir une bonne idée de ce à quoi ressemblaient les produits. Cela peut être extrêmement bénéfique, car parfois les photos ne peuvent tout simplement pas capturer les types ou la sensation des matériaux utilisés dans le produit et cela peut être important pour que le produit ait l'air plus loin sur la ligne. Notre photographe et vidéaste, Dave, a gentiment photographié chacune des chaussures Doc Marten de l'avant, de l'arrière, des deux côtés, du haut et du bas ainsi que sous différents angles pour aider à capturer certains détails des surfaces avant de commencer le processus de modélisation 3D.

Une fois que j'ai recadré et mis à l'échelle les photos pour qu'elles soient précises les unes par rapport aux autres, je les ai présentées sous forme de plans dans 3DS Max 2018.

Modélisation de base

A partir de là, la modélisation commence avec des formes simples. La chaussure a commencé sa vie comme un plan unique qui a été extrudé et manipulé pour épouser la forme de la semelle.

Une fois la forme de base terminée, j'ai coupé les bords qui constitueraient la bande de roulement de la semelle et je les ai extrudés suivis du reste de la semelle, en appliquant quelques modificateurs pour obtenir le fond arrondi de la semelle dans son ensemble. Après quelques modélisations de base supplémentaires, la semelle était prête à être intégrée à ZBrush pour effectuer le travail en haute résolution.

Modélisation 3D haute résolution

Prendre un modèle à faible résolution et augmenter le nombre de polygones lisse le modèle. Ce processus a été fait à quelques niveaux donnant une surface beaucoup plus lisse qui m'a permis d'ajouter des points le long du bord de la semelle et de sculpter manuellement les trous de point dans la surface pour donner l'impression qu'il s'agissait de points appropriés.

Une fois la semelle lissée et polie, j'ai commencé par la partie supérieure de la chaussure, créant une forme de base qui suivait le contour de la chaussure elle-même.

En utilisant cette version brute comme base, j'ai pu extraire les formes de toutes les pièces qui composaient le détail de la chaussure. Tous les morceaux de matériau qui se chevauchaient et qui formaient la forme ont été extraits de cette forme et disposés en conséquence. La zone lacée sur le devant de la pointe a été sculptée.

A partir de ce stade, il s'agissait d'ajouter les accessoires comme les boucles et les lacets sur la pointe et bien sûr d'autres petits détails comme les coutures pour les empiècements.

La partie difficile

Avec un peu de couleur ce modèle est sûrement fini, non ? Malheureusement non. Le modèle 3D de la chaussure Doc Marten dans son ensemble est composé d'un peu moins de 10 millions de polygones. Même si les smartphones que nous transportons maintenant dans nos poches sont des appareils informatiques incroyablement puissants, ils auraient beaucoup de mal à restituer autant de polygones à la fois. Tout comme un éditeur de film, vous devez choisir les parties importantes de ce que vous essayez de présenter. Vous remarquerez que l'intérieur de la chaussure n'est pas fini. C'était la première pièce qui a touché le sol de la salle de montage, pour ainsi dire. L'intérieur de la chaussure n'avait aucune importance significative pour l'esthétique globale et donc le fait de ne pas le modeler a réduit la complexité du modèle (et m'a fait gagner du temps). Mais il nous reste encore près de 10 millions de polygones.

Parce que la réalité augmentée rend le modèle en temps réel, nous devons réduire la complexité. Cela implique de réduire le compte à rebours du polygone à des niveaux gérables et c'est un processus incroyablement fastidieux. Heureusement, la plupart des pièces ont commencé leur vie en tant que versions à faible polygone et j'ai pu revenir à ces pièces et les réutiliser pour cette tâche. Dans la capture d'écran ci-dessous, vous pouvez voir que bien que la forme soit représentative de la chaussure elle-même, il lui manque les détails les plus fins tels que les points de suture, les bords légèrement biseautés et la douceur générale que tous ces polygones offraient. Cependant, vous pouvez également voir que le nombre de polygones a été réduit de près de 10 millions à un peu plus de 6000 et pourrait en fait être réduit un peu plus si nécessaire, mais 6000 polygones sont bien dans les limites du budget et avoir une géométrie pour prendre en charge la forme peut être pratique pour la prochaine étape.

Ramener les détails

Nous avons donc maintenant deux versions de la chaussure : une version extrêmement haute résolution et une version basse résolution qui offrira un rendu rapide et fluide sur le matériel mobile. Mais maintenant, il nous manque les détails qui, selon moi, rendent la chaussure unique.

Afin de transférer les détails haute résolution vers la version basse résolution, nous devons les "cuire" dans diverses cartes de texture qui fournissent des informations à la lumière virtuelle dans notre réalité augmentée. Pour ce faire, nous devons d'abord dérouler notre modèle et l'aplatir, créant ainsi une carte UV. Qu'est-ce qu'une carte UV ? C'est une représentation 2D de notre modèle s'il était déplié comme un modèle d'origami ; il permet aux textures d'être projetées sur sa surface plus tard sur la ligne.

Pour que les détails restent nets et nets, j'ai décidé de diviser le modèle en deux parties. La semelle, les boucles et les lanières en une partie, puis la partie supérieure en une autre pièce. Cela m'a permis d'utiliser 2 petites cartes de texture au lieu d'une seule grande, ce qui réduit la taille du fichier et se charge plus rapidement.

Ci-dessous, vous pouvez voir les cartes UV - les versions aplaties des deux parties.

Une fois cela fait, nous pouvons cuire nos cartes et travailler sur les textures, en ajoutant les informations sur le matériau qui feront ressembler le produit au produit.

Le violet dans la capture d'écran ci-dessus peut sembler étrange, mais c'est la principale façon de ramener les détails dans notre modèle. La surface du modèle haute résolution est projetée sur le modèle de résolution inférieure et enregistrée en valeurs de rouge, vert ou bleu selon la direction dans laquelle la surface pointe. Lorsqu'elle est appliquée au modèle et qu'une source de lumière le frappe, la couleur du pixel touché par la lumière détermine la direction dans laquelle la lumière rebondit, créant une surface artificiellement 3D sans le coût du polygone. C'est plus évident avec les points de suture.

Une fois ces cartes créées, il ne reste plus qu'à appliquer des matériaux et de la texture à la surface.

Devenir physique

Les rendus en temps réel modernes utilisent un système appelé PBR ou Physical Based Rendering. Cela signifie que le moteur d'éclairage et de rendu tente de cartographier avec précision le comportement de la lumière lorsqu'elle frappe la surface d'un modèle en fonction du matériau de cette surface. Les logiciels de texturation modernes ont rendu la création de matériaux réalistes très facile. Substance Painter a permis de recréer numériquement les surfaces de ces objets réels. Nous utilisons principalement 5 cartes de texture différentes pour appliquer diverses propriétés au modèle :

• Color Map C'est comme ça, c'est la couleur de base du matériau.
• Métallité Il s'agit d'une carte en noir et blanc qui détermine quelle partie du modèle est métallique ou non métallique.
• Rugosité Tout comme il semble, il définit le degré de rugosité ou de douceur des surfaces du modèle.
• Occlusion ambiante Une carte en niveaux de gris qui imite ces minuscules petites ombres de contact où deux surfaces se rencontrent dans le coin, elle ajoute une profondeur supplémentaire à l'éclairage.
• Carte normale Il s'agit de la carte violette illustrée précédemment et elle est chargée de montrer les détails de la surface - comme indiqué ci-dessous, il n'y a pratiquement aucun détail lorsque la carte normale est désactivée sur la semelle, puis sur la partie supérieure de la chaussure.

Une fois le processus de texturation terminé, nous avons quelque chose qui semble plutôt convaincant. Les étapes finales consistent à exporter le modèle et les textures et à les convertir dans un format compatible AR. Dans ce cas, il s'agit d'USDZ car c'est le format utilisé par Apple ARKit.

Si tu es toujours avec moi, bravo ! Le résultat de la réalité augmentée est bien plus fascinant que le processus de fabrication, mais j'espère que ce petit aperçu des coulisses montre tout ce qui se passe dans le processus de recréation manuelle d'une représentation virtuelle d'un produit réel. Les nouvelles technologies telles que la numérisation 3D et la photogrammétrie faciliteront le processus à l'avenir, mais pour le moment, la qualité n'est pas tout à fait au rendez-vous, à moins que vous n'investissiez une grosse somme d'argent dans la technologie.

Nous en sommes encore aux débuts de la technologie de réalité augmentée - à mesure qu'elle continue de progresser et que les téléphones mobiles deviennent plus puissants et capables, nous commencerons à voir cette technologie de plus en plus dans les lieux de tous les jours. Alors que Ready Player One et d'autres films de science-fiction ont popularisé la réalité virtuelle, je pense que la réalité virtuelle restera dans le domaine du divertissement et de l'éducation, tandis que la réalité augmentée deviendra aussi omniprésente qu'Internet, en particulier lorsque nous obtiendrons tous nos mises à niveau cybernétiques. C'est peut-être un peu loin, mais jusque-là, au moins, je peux mettre des chaussures sur la table et ne pas me faire gronder.

Visitez Lazy Oaf et découvrez les chaussures Dr Marten sur votre propre iPhone ou iPad sous iOS et Safari 12.