Intégration en Web AR : Donnez vie à vos produits

La web AR désigne le fait d’insérer des images de synthèse 2D ou 3D sur des images du monde réel en temps réel directement sur un site web. On accède à ce type d’expérience directement par le navigateur web plutôt que par une application. Ainsi vous pouvez y accéder depuis Google chrome, safari ou encore Mozilla Firefox. Cette technologie permet d’effectuer le chargement en direct sans même que l’utilisateur ait besoin de passer par une app mobile ou tablette. Accessible au plus grand nombre ce type d’expérience est déployée grâce à deux système AR Kit (iOS) & AR Core (Android). Elle utilise notamment WebGL, WebVR, WebRTC. Grâce à cela l’utilisateur peut s’immerger dans des scènes qui incluent des animations, de la vidéo, des modèles 3D & le tout de manière interactive. La WebAR supporte aussi la détection d’image. En somme, elle casse les barrières et rend la réalité augmentée accessible depuis un QR code ou un lien.

L’AR a ouvert le champ des possibles et est déjà présente dans le quotidien de beaucoup d’entre nous. De nombreuses applications l’utilisent et nous l’utilisons sans même nous en rendre compte. C’est le cas sur Instagram et Snapchat via les filtres & effets mais aussi dans des applications comme IKEA place ou LEGO. C’est applis manquent sont cependant très lourdes à charger et demandent beaucoup d’actions. La web AR vient contrer cela en proposant des expériences simples mais accessibles avec le moins de frein possible. Aussi, on peut déjà réaliser des recherches sur google (un lion par exemple) et avoir accès directement à un modèle en 3D animé devant nous. Les cas d’usages sont plus larges : E-commerce, recherche, santé, éducation, business & Entertainment. Ainsi vous pouvez désormais essayer une paire de lunette et changer directement la couleur pour voir ce qui vous convient le mieux. Vous pouvez également placer une voiture devant vous si vous ne l’avez pas en stock dans votre concession. Il est possible de représenter directement des parties du corps et d’en montrer le fonctionnement en surimpression pour des élèves en médecine. Un autre exemple et pas des moindre est le jeu. Grâce à la web AR vous serez en capacité de jouer en interagissant avec des éléments du réel directement depuis votre smartphone.

ARCore désigne le framework AR d’Android, tandis qu’ARKit est la même chose pour iOS d’Apple. Ces frameworks permettent aux développeurs d’exploiter les outils d’AR les + avancés pour permettre une expérience la plus immersive et réaliste possible. Ainsi c’est grâce à ces outils que les développeurs peuvent ajouter des éléments comme le suivi de mouvement ou autre. Cela permet aux appareils de mieux comprendre leur relation avec l’environnement. De même, des outils comme ARCore et ARKit permettent aux téléphones d’apprécier la taille et de la position des choses comme les tables et les chaises, pour une sensation plus réaliste dans n’importe quel environnement. Pour y parvenir, ARCore & ARkit utilisent les différents capteurs du smartphone afin de détecter les surfaces horizontales mais aussi pour prendre en compte les mouvements du téléphone, et estimer la lumière qui pénètre dans la pièce pour pouvoir éclairer les objets virtuels de façon réaliste en fonction de l’environnement.

Les deux technologies utilisent les fonctionnalités suivantes pour intégrer du contenu virtuel dans le monde réel :

• Suivi du mouvement – pour suivre la position dans le monde réel.
• Compréhension de l’environnement (tailles, emplacements, angles, formes, points et plan)
• Estimation de la lumière – pour détecter des informations sur l’éclairage.

Néanmoins, il existe des différences entre ARKit et ARCore :

Le SDK de Google suit plus de points & de caractéristiques mais l’ARKit détecte les surfaces horizontales et verticales avec plus de précision qu’ARCore. Aussi Les dernières mises à jour ont donné à ARKit plusieurs avantages (Occlusion de personnes, capture de mouvement, caméra avant et arrière simultanées, suivi de plusieurs visages, sessions collaboratives)

8th Wall désigne une des solutions de web AR leader les plus répandues sur le marché. 8th Wall fournit des outils de développement pour créer et déployer des expériences de réalité augmentée sur le Web pour les agences, les marques & les créateurs de contenu. Grâce à son éditeur 8th Wall offre des fonctionnalités puissantes telles que le world tracking, les effets sur le visage et la reconnaissance d’image. Celles-ci sont déployées sur le Web, sans que les utilisateurs aient besoin de télécharger une application. Le Framework de 8th Wall utilise les librairies JavaScript et WebGL et prend en charge des frameworks 3D les plus populaires comprend A-Frame, three.js, babylon.js, Amazon Sumerian et Play Canvas. Le nombre de possibilités sur 8th wall est infini et permet de créer des expériences complexes et approfondies telles que des jeux, ou des œuvres d’art en AR. 8th Wall a également lancé récemment la technologie Curved Image Target, qui offre aux développeurs de nouveaux outils pour donner vie à des surfaces incurvées comme des tasses, des canettes et bien d’autres objets grâce à la réalité augmentée basée sur le Web.

Quand on réalise un effet en réalité augmentée sur le Web plusieurs composantes rentrent en compte pour estimer le prix. Ainsi, il est important de savoir si l’expérience comportera des design en 3D ou en 2D, des animations, des particules, un picker, des actions particulières ou encore tout autre élément. Ceci permet de donner une estimation précise. Néanmoins, il possible de donner plusieurs prix et fourchettes selon la typologie d’effet :

• Intégration de produit simple en 3D -> entre 500€ et 5000€
• Face animation (8th wall) -> entre 2000€ et 30 000€
• Jeux en AR (8th wall) -> entre 5000€ et 50 000€
• Reconnaissance d’image -> entre 4000€ et 50 000€
• Essayage de lunettes ou accessoire en temps réel -> entre 1500€ et 35 000€
• Effets couleur/artistiques/lumière -> entre 1500€ et 20 000€
• Maquillage -> entre 2500€ et 30 000€

A cette partie production, il faut aussi ajouter des frais d’abonnement sur 8th wall entre 1250$ et 5000$ selon le nombre de vues. Des frais de maintenance peuvent aussi être appliqués. Ces chiffres restent approximatifs et peuvent varier selon les projets, deadline et assets fournis. Pour plus de détails, consultez notre page Prix et tarifs ! 

Bien qu’elle offre davantage de possibilités aux utilisateurs de smartphones, les expériences en WebAR présentent des caractéristiques assez limitées. Les performances de la Réalité Augmentée sont tout simplement meilleures sur les applications. Néanmoins, la limitation de la mémoire de la page Web qui affiche une image de RA est l’un des obstacles à l’amélioration des performances de la réalité augmentée sur le web.En outre, les fonctionnalités sont également plus limitée que celle de la Réalité augmentée basée sur les applications. Par exemple, il sera plus difficile de placer des objets sur le mur ou d’effectuer des mesures. Par rapport au processus de développement de la RA basée sur des applications, pendant la création de l’expérience WebAR, les développeurs ne peuvent pas accéder à toutes les capacités et fonctionnalités des appareils pour lesquels ils la conçoivent. Ils ne peuvent donc travailler qu’avec les fonctionnalités de base. La vitesse du réseau internet est un aussi autre facteur qui peut modifier la qualité de l’expérience : elle doit être la plus rapide possible et fonctionner sans interruption, car la RA basée sur un navigateur nécessite une connexion constante à internet. Toutefois, il semble qu’avec l’arrivée de la 5G, ce problème ne sera plus d’actualité.

La Web AR permet de mettre en valeur et de vendre vos produits en utilisant la 3D et la réalité augmentée. Avec ce type de support, vous pouvez offrir une toute nouvelle expérience à vos clients. Ceux-ci peuvent personnaliser vos produits, les voir sous tous les angles possibles et, en un seul clic, ils peuvent visualiser le produit dans leur environnement avec un réalisme époustouflant qui amène cet effet whaou ! Cela leur offre la possibilité de répondre à leurs questions :

“Ce meuble ira-t-il dans notre salon ?”

“Cette couleur conviendra-t-elle à l’intérieur de notre chambre ? ».

“À quoi ressemble l’intérieur de cette nouvelle voiture ? »

Autant de questions auxquelles les clients pourront répondre pour prendre une meilleure décision d’achat, augmentant les ventes d’au moins 50 %. Ces efforts contribuent également à préserver l’environnement en réduisant les taux de retour & de logistique dans le processus.

Filtermaker génère automatiquement des snippets en script (petite parcelle de code) qui contiennent les informations et les variables relatives à vos produits. Les fichiers sont ainsi affichés dans les formats USDZ et GLB compatibles avec tous les navigateurs. Ils sont visibles sur votre page sous forme de configurateur/visionneuse WebAR et 3D. Ces fonctionnalités peuvent être ajoutées à votre page produit en quelques secondes. Ainsi, que vous ayez besoin de produits à afficher en RA sur un mur, le sol ou dans un espace ouvert, nous vous fournissons le code qui convient à votre type d’expérience.

Afin de visualiser des modèles 3D sur un site web, la technologie la plus répandue est un iFrame. Celui-ci est un cadre qui charge une page au sein d’une autre page. 

De nos jours, les robots Google qui vérifient les sites sont assez intelligents pour comprendre que ce qui se trouve à l’intérieur du cadre n’est pas associé au site web et qu’il est la propriété d’un autre site web. Ainsi, ils considèrent que le contenu appartient au propriétaire du configurateur et/ou visionneuse et non au responsable du site web. Les modèles 3D n’impactent donc pas négativement le chargement et le SEO d’un site web, c’est même tout à fait le contraire. 

La visualisation des produits en 3D permet aux utilisateurs de le découvrir sous toutes les coutures. Il possible de zoomer pour l’observer au plus près et de visualiser chaque détail. En moyenne, les futurs clients interagissent avec un configurateur 3D pendant plus de 20 secondes, et + de 30 % d’entre eux le font pendant plus de 30 secondes. Cette grande interactivité fait non seulement grimper le temps passé sur le modèle, mais aussi la durée sur le site et ce jusqu’à 200%.

Pour conclure, chaque seconde supplémentaire passée sur une page d’un site internet permet de minorer le taux de rebond, c’est-à-dire, le pourcentage de visiteurs qui quittent le site sans parcourir d’autres pages. Aux yeux de Google, ce type de donnée signifie que le contenu est très pertinent et implique donc un meilleur référencement.

La mise en place d’un configurateur amène à de meilleurs résultats en terme de ventes et c’est un argument indéniable pour les consommateurs en quête du produit qui leurs convient le plus. Aussi, pour répondre à leur attentes et les conduire à un choix toujours plus précis un certain nombre de fonctionnalités ont été développé dans les configurateurs. Parmi celles-ci on retrouve notamment :

• Le choix de la couleur
• Le choix du modèle 3D (et ses variantes)
• L’ajout d’options customisables
• L’ajout de texte et de caractéristiques liées à une certaine partie du partie
• Des liens vers une page externe
• Un export des options (couleurs, modèle) choisies en PDF
• Sauvegarde de la configuration dans votre galerie
• Un module amenant sur une interface de paiement (comme Apple pay)

En plus de cela, les modèles peuvent répondre à des actions via des gestes comme des clics et des taps sur l’écran. Ces actions peuvent déclencher des animations visuelles (particules, apparition etc) mais aussi des animations physiques (ouverture d’une porte d’un véhicule). Chacune de ses actions est personnalisable et dépend du modèle & l’expérience en elle-même.

Quick Look est une fonctionnalité innovante qu’Apple a lancé en 2018. Cet outil permet aux e-commerçants d’afficher un aperçu de leurs produits en réalité augmentée. La marque à la pomme a depuis déployé une nouvelle fonctionnalité de son outil de réalité augmentée (AR) Quick Look début 2020. Désormais, chaque utilisateur d’iPhone et iPad peut faire son shopping en ligne et apprécier un aperçu en réalité augmentée de leurs futurs achats pour vérifier s’ils s’intègrent convenablement dans leur environnement. A la suite de ce processus, ils sont invités à cliquer sur un bouton en bas de leur écran. Ce bouton, leur permet si leur moyen de paiement est enregistré de validé leur achat et payer le montant indiqué. Le tout facilite le parcours d’achat et réduit e nombre d’actions nécessaires de la découverte du produit à la passe d’achat. Ce bouton est personnalisable et peut être utilisé à des fins diverses. et pourra également servir à ajouter un chat en direct afin que les clients puissent poser leurs éventuelles questions sur un produit directement aux vendeurs.