14/06/2018: Les avantages du WebXR

Imaginez que vous vouliez que votre E-Commerce fonctionne en 2D et que vous profitiez de toute la gamme des possibilités de la réalité étendue (AR et VR). WebXR fournit les bases nécéssaires pour créer des expériences qui fonctionnent partout, permettant de se concentrer sur des expériences utilisateur convaincantes, quelque soit votre périphérique.

Le WebXR est une technologie, comparée au WebVR dont on à déjà parlé abondemment sur ce blog, progressive, montrant des possibilité d'application transmédia comme d'A-Painter adaptée à l'AR tout comme partant de la RV immersive. Mais il existes des dizaines d'autres applications WebXR transmédia sur tous les périphériques compatibles XR.

Cette API de réalité étendue ("XR") se base donc sur l'API WebVR, mais incluant une bien plus large gamme de dispositifs de réalité mixte AR/VR, immersif/portatif). En prenant en charge tous les périphériques de réalité mixte dans une API, la communauté espère faciliter la réponse des applications Web aux fonctionnalités du périphérique choisi par l'utilisateur et présenter une interface utilisateur appropriée pour les écrans AR, VR ou traditionnels 2D. C'est une vraie révolution et un standard attendu sans doute par toute l'industrie pour répondre aux besoins BtoC.

Mozilla avait proposé déjà un polyfill WebXR basé sur le WebVR, et publié l'application WebXR Viewer sur iOS App Store. Cette app iOS, et est l'une des plates-formes cibles de la démo de XR Store vue ici. Cette démo montre comment les futurs sites internet pourront prendre en charge l'API WebXR sur de nombreux périphériques différents.

Périphériques nécessitant une stratégie UX pour être compatible WebXR:

De manière générale, il existe trois catégories d'affichages qui doivent être pris en charge par une application WebXR réactive:
-Les «écrans plats», non WebXR actuels sur les ordinateurs de bureau et les ordinateurs de poche, -Les "Écrans de portail" où ces mêmes écrans présentent l'illusion d'un portail dans un monde 3D en tirant parti du mouvement de l'appareil et de la détection 3D -Des "affichages immersifs" tels que des affichages de casque/lunette englobant les sens de l'utilisateur en vraie 3D. Ecrans non XR:

-Les écrans plats actuels, tels que les moniteurs de bureau, téléphones et tablettes, peuvent ne pas avoir accès aux expériences VR/AR via WebXR, bien que certains puissent simuler WebXR en utilisant un polyfill WebXR. De tels affichages de bureau et mobiles demeureront les moyens les plus fréquents de consommer du contenu Web dans les prochains mois, et sans doute encore années.

-Les smartphone récents avec capteurs d'orientation 3DoF (qui utilisent des accéléromètres, gyroscopes et magnétomètres pour donner 3 degrés de liberté à l'appareil) peuvent simuler une VR 3D monoscopique (et AR, s'ils utilisent getUserMedia pour accéder à la caméra vidéo de l'appareil), en tirant parti de l'orientation de l'appareil ou des API du capteur d'orientation de l'appareil.

-Enfin, les applications écrites pour Google Cardboard, pour ces dispositifs mobiles (c'est-à-dire utilisant l'écran du smartphone avec l'appli Cardboard) utilisent les mêmes capteurs 3DoF, mais restituent une VR stéréoscopique sur l'écran du smartphone.

Ecrans XR:

Les écrans compatibles XR peuvent rendre des expériences AR et VR. Les affichages XR les plus courants actuellement sont de type «Magic Window» réalité augmenté rendue possible par l'ARKit d'Apple pour iOS ou ARCore pour Android de Google (Voir Navigateur expérimental WebAROnARCore). Ils donnent à l'utilisateur l'illusion d'une "fenêtre magique" dans une scène AR entourant l'utilisateur. Les casques optiquement transparents tels que Hololens, Meta et Magic Leap offrent une expérience 3D immersive brillante (mais peu abordable): Le contenu virtuel entoure l'utilisateur avec une qualité photoréaliste. Par ailleurs des solutions plus abordables existent, avec des Cardboard-like dédiés à la réalité augmentée/mixte, mais évidemment les performances sont en rapport avec le prix d'entrée.

Grâce au WebVR, la VR Web est désormais accessible sur une gamme d'écrans comparibles 3DoF, tels que Google Daydream ou Samsung Gear VR, qui utilisent les smartphones. Les casques 6DoF offrent une position et une orientation avec 6 degrés de liberté tels qu'HTC Vive, Oculus Rift et Windows Mixed Reality, peuvent offrir des expériences VR encore plus immersives où l'utilisateur peut se déplacer physiquement.

La deuxième catégorie est de type "Magic Window VR". Ce sont des affichages 2D plats, tirant parti de la position 3D et du suivi d'orientation fonctionnant avec l'API WebXR pour simuler une scène 3D autour de l'utilisateur. Le système imite Magic Window AR, les deux sont possibles en tirant parti d'ARKit et d'ARCore, mais sans montrer de vidéo du monde autour de l'utilisateur.

Le Cas du Magasin XR:

La création d'applications web réactives s'adaptant à la gamme complète des appareils compatibles ou non challenge les développeurs Web pour atteindre le plus large public possible. Le défi consiste à créer un site fournissant en temps réel une interface appropriée pour chaque cas, plutôt que de concevoir l'expérience seulement pour un cas et de la simuler pour les autres. L'exemple ici est une fiche produit sur un site e-commerce qui permet au visiteur de voir le produit en 3D sur un écran traditionnel, dans une scène virtuelle en VR, ou en AR.

Certains diront que c'est l'ultime "responsive", c'est effectivement l'évolution probable des sites Internet.
Ce genre d'expérience emmène avec lui des notions radicalement nouvelles:
Ont peut identifier dans ce cas quatre types d'interfaces utilisateur (UX), empruntant à la terminologie couramment utilisée dans les interfaces utilisateur 3D. Définissons donc:

Diégétique: Eléments d'UX existant dans le monde 3D.
Spatial: Eléments d'UX placés dans une position fixe dans le monde 3D.
Non-Diégétique: Eléments d'UX en 2D sur la scène 3D.
Page: Eléments d'interface utilisateur en 2D dans le DOM du site Web.

Deux types de réalité sont envisagés:

La réalité ancrée (VR exclusivement): Une version mixte de l'espace diégétique où les éléments de l'interface utilisateur sont ancrés dans au regard de l'utilisateur, ou aux positions des contrôleurs d'interaction. Manipulation directe (AR exclusivement): Les utilisateurs manipulent directement les objets à l'aide de l'écran tactile, par opposition à la manipulation de la scène et de la caméra.

Pour les affichages non-XR ou plats, des contrôles d'interface utilisateur de page se combinent avec un élément non-diégétique (bouton) pour passer en mode plein écran (Modèle commun dans les interfaces utilisateur d'applications 2D). Les éléments de la page ne sont pas mélangés avec les contrôles diégétiques incorporés dans la scène 3D, car les internautes s'attendent à se trouver sur une page de détail du produit.

Pour le mode XR/AR, une interface très similaire à celle utilisée pour des écrans plats (contrôles de page, bouton diégétique pour passer en mode AR) sont utilisé. Mais une fois en AR, des éléments d'interface non-Diégétiques sont introduits dans la scène 3D pour rendre plus facile le changements de propriétés du produit. Une interface de manipulation directe de mise à l'échelle, pivotage ou déplacement du produit dans la réalité projetée est été possible, mais complique les choses.

Pour le mode XR/VR, une interface utilisateur diégétique pour les contrôleurs d'interaction serait combinée à une interface utilisateur spatiale pour donner à l'utilisateur une représentation de la partie sélectionnable de la feuille de produit. Une UX pour faciliter la recherche sur le panneau est intéressant. La même interface 3DoF et 6DoF VR, serait utilisable avec de légers changements de l'interface pour les deux cas différents. Exemple: Déplacer le panneau 2D derrière et à droite de l'objet. L'autre option serait de faire glisser le panneau 2D à l'écran chaque fois qu'il sort de l'écran, solution utilisé pour les applications Microsoft HoloLens. Chacun de ces choix a ses avantages et ses inconvénients; l'important est de permettre aux concepteurs d'explorer différentes options et d'utiliser celle qui convient le mieux à leur cas d'utilisation particulier.

Challenges pour le futur:

Ce cas pratique illustre une exploration de la façon dont le web pourrait être accessible dans un avenir proche. Un évolution où les utilisateurs, consommateurs du web, pourront se connecter à partir des appareils les plus divers. Au-delà de la mise en œuvre des plates-formes vues ici, la multiplication de l'offre d'écrans transparents vont s'accompagner nécessairement de nouvelles manière d'interagir avec les contenus. Ces affichages prendront probablement en charge les commandes vocales et les gestes corporels (haptique) en complément du visuel pur, plutôt que les contrôleurs 3D comme leurs homologues VR immersifs, car plus ergonomique, plus naturels.

Très prochainement, vous pourrez avoir plusieurs appareils connectés sur le même contenu en même temps, explorer le contenu sur un smartphone et envoyer la page au casque AR ou VR, coordonné automatiquement. La seule interface non abordée ici, intentionnellement, ici est l'idée de présenter une page web 2D complète en 3D pour avoir le produit en "pop up" hors de la page 2D dans le monde 3D. De telles approches en effet seraient peut-être possibles et souhaitables dans certains cas. On peut très bien imaginer des extensions au HTML marquant certaines parties de la page comme «compatibles 3D» et fournissant des modèles 3D pouvant être rendus au lieu d'un contenu 2D.

Indépendamment de l'évolution de la technologie, les concepteurs doivent continuer à offrir aux visiteurs les meilleures options pour chaque modalité, comme pour les pages 2D, plutôt que d'offrir toutes les options d'interface utilisateur possibles dans toutes les modalités possibles. Les concepteurs doivent toujours se concentrer sur l'expérience de leurs utilisateurs, et offrir le meilleur support pour chacun des affichages possibles en s'appuyant sur la stratégie de conception progressive, populaire sur le web 2D actuellement. Le Web actuel est une plateforme 2D accessible à tous, mais l'API WebXR va permettre de l'utiliser pour se connecter ensemble en le VR et en AR. Ce standard unique va permettre un support de la plus large gamme d'appareils possible et restera un aspect essentiel de la conception d'expériences pour le Web. Résolvant le problème rencontré par l'industrie AR/VR faut de point commun pour toucher enfin le grand public.

Un article traduit et adapté de l'Anglais publié par Brian Yang: http://brianyang.com/progressive-webxr/