08/08/2019: Créer des expériences en XR: Le Panel

Le WebXR a graduellement pris en pas sur le WebVR, encore supporté mais en principe remplacé. Rappelons que le WebXR tend a être un standard international aussi bien pour la réalité augmentée que la réalité virtuelle. Or, en WebVR comme en WebXR, créer une expérience passe par la génération de code, aussi bien pour l'intégration de modèles 3D que des éléments associés, formes, couleurs, textures, lumière, effets de caméra et effets spéciaux, intégration audio/video, interactivité... Heureusement depuis 2016, les plate-formes de génération de ce genre de code, assez proche du Javascript (Wysiwig) ou celle intégrant une partie du process se sont multipliées. Les premières (non couvertes ici) se sont focalisées sur des besoins de "pure players" dans le real estate (Immobilier) comprenant l'intégration de photos 3D et quelques éléments informatifs simple sur un canevas très contrôlé. Donner la possibilité de créer toutes sortes d'expériences, basées sur l'ensemble des bibliothèques, est un challenge. Des plateformes qui couvrent ce besoins sont encore rares. Elles se destinent aux agences de communication qui doivent par exemple "disrupter" leur marché, ou pour des applications spécifiques et ponctuelles, sans avoir a y passer des heures. En effet pour avoir expérimenté pas mal avec le code (voir qwazaam.com) à part l'inspecteur de code, il n'y a guère de solutions pour créer des univers en VR utilisant toute la palette d'effets, textures, couleurs, animations et autres inserts multimédias qu'il est possible d'avoir. Pour s'en convaincre il suffit de parcourir la bibliothèque A-Frame.

L'A-Frame Inspector, qui permet de modifier du code et de générer la version modifiée visuellement à copier-coller dans sa page Il existe en ce moment deux standards de base XR (VR-AR), un pour Google, appelé ARCore, une pour Mac appelée ARKit, et d'une certaine manière une pour Facebook appelé SparkAR, qui développe son propre écosystème principalement autour d'"effets snapchat" pour mobile (en concurrence avec ce dernier).

Le point sur les technos

ARKit et ARCore, frères ennemis: ARKit génère beaucoup plus de bruit que le second, et représente cinq fois plus de développement en volume combiné. Pourtant en 2018, 85% des smartphones sont sur Android et donc utilisent ARCore. Cela se traduit toutefois sur un accès plus faible à la VR/AR de qualité (ou tout court) sachant que les utilisateurs sous Android ont en général des smartphones de moins bonne qualité, donc la performances sont un frein à l'adoption. La dispersion des hardwares spécifique au marché des smartphones android est aussi un frein, tout n'est pas compatible avec la XR.

Les Iphones sont beaucoup plus homogènes. Le gyroscope en particulier est problématique sur la plupart des smartphones android, soi un sous-standard, soi inadéquat pour le support XR. Facebook de son côté mise énormément sur ses filtres AR de caméra avec le marché des smartphones. Donc la logique du hardware conduirait donc a plus de chances de succès pour des éditeurs de solutions XR, afin de proposer des contenus plus recherchés, à même de conquérir et fidéliser une audience par la qualité. L'incompatibilité ARKit/ARCore est totale, les smartphones android n'autorisant pas l'utilisation de ce dernier.

En développement
Si la WebVR a été un petit évènement sur la sphère internet, cela n'a été que de courte durée: Il est actuellement considéré comme non compatible avec l'actuel WebXR qui est considéré toujours "en développement". Cela signifie qu'à cause des rétro-compatibilités, il n'est pas sûr qu'il soit bien judicieux de se lancer à présents dans d'importants développements. Ce que reflète l'actuelle tendance vers du "snacking" au niveau de la production.

Sketchfab Editor (non testé encore)

Protocoles XR:
Deux cas de figures:
-Soit l'application requiers une immersion
-Soit l'application est en "magic window" (non immersif).
1-L'expérience requiers la création d'un calque graphique (rendus en bitmap)
2-Boucle de rendu lancée, produisant des frames graphiques pour display
3-La boucle se fait à travers ses vues et dessine le contenu à partir d'elles
4-Le process se répète à l'infini jusqu'à ce que l'utilisateur quitte la session.

Considérations préalables: Pour développer une application simplissime en AR (sur ARCore) par exemple, afficher un modèle 3D en réalité augmentée, il est nécéssaire pour les tests d'avoir par exemple Android version 8.0 Orea ou plus, avoir ARCore installé, et Chrome Canary sur le device d'affichage, mais aussi un serveur adéquat (sécurisé et rapide). Enfin un cable USB de connection entre la station de travail et le device d'affichage (ex. smartphone). La connaissance du code web mais surtout de Chrome DevTools est un plus. Le webserver de développment Chrome possède l'adresse IP http://127.0.0.1:8887 et le port d'accès doit être à 8887 pour afficher le contenu sur localhost:8887, a vérifier sur chrome://inspect. Il y a des possibilités de l'affichage "unsupported browser", ce qui indique que la version du navigateur n'est pas la bonne. L'hébergement choisi si autre que Chrome, sera nécessairement en https. Notons qu'ici l'affichage passe par l'utilisation de THREE.js.

Coder une expérience AR nécéssitera l'utilisation d'un "hit point", point d'affichage sur le sol "réel", nécéssitant en fait un calibrage du smartphone dans son environnement, et s'assurer que ce dernier, selon son inclination/disposition comprend bien son environnement réel pour une bonne intégration des objets. Cela passe par l'API XRSession. Une fois la mise en place de l'objet, son affichage dépend au préalable de l'affichage d'un réticule au sol. Pour les tests d'affichage les plus basiques, préalables, un simple cube en code peut permettre déjà de sécuriser le placement, l'étape suivante étant de charger par exemple un modèle 3D creative commons de la bibliothèque Google Poly. L'ajout d'une ombre se fait dans un second temps. Il utilise la propriété WebGLrenderer de THREE.js. La propriété pour l'ombre est Shadowmesh dont on définit la position comme propriété enfant du modèle 3D. Voir quelques exemples

A noter que d'après le site Babylon.js, le plein support des animations en AR est toujours en développement, la version actuelle ne supporte que la parité WebVR/WebXR de manière à reconvertir les expériences vers ce format.

Les possibilité de création sans coder

Le grand standard AVEC CODE est assez riche, dès lors que l'on souhaite créer avec: A-Frame: (WebVR, Composants-entités, simple pour débutants), THREE.JS: Librairie javascript pour WebXR et Polyfill. React360: Pour utiliser la librairie React360 de Facebook, d'accès plus facile.

Il existe deux types de plate-forme utilisables pour aider à la création:
-PlayCanvas
-Sumerian

A noter que d'autres acteurs permettent d'utiliser ce système pour des applications: Ex. InstaVR https://www.instavr.co/ Ne pas oublier les acteurs de niche "pure players", notamment dans l'immobilier: https://delight-vr.com offrant aussi des possibilités de création sans code.

Playcanvas

A la base une moteur de rendu 3D pour le web.
Permet de faire aussi bien de la VR que de l'AR. A la base conçu pour WebVR 1.1, mais disposant d'une extension AR. Point fort: Il dispose du PlayCanvas Editor qui permet de créér une expérience en drag-and-drop sans taper une ligne de code.
A première vue, c'est un dérivé de l'inspecteur de code de base WebVR/AFrame. L'éditeur permet une large gamme d'expériences comme par exemple le déplacement par bonds plutôt que par les touches du clavier, ou certains niveaux d'interaction. Ex.https://playcanv.as/p/sAsiDvtC/

Sumerian

Ce dernier fait part de la galaxie Amazon Web Services. Outre l'hébergement optimisé VR/AR d'AWS, les applications développées par Sumerian sont compatibles avec Oculus Rift, Oculus Go, Oculus Quest, HTC Vive, HTC Vive Pro, Lenovo Mirage Solo, Samsung Gear VR et Google Daydream. La mise en place des éléments, variables et interactions se fait via VR Asset Pack, important tout les prérequis dans la scène. Le pack cmprend l'Ajout de la fonctionnalité 'VR Grab' aux entités (haptique quand possible) avec les manettes, l'ajout de la fonctionnalité de téléport VR aux entités, et l'ajout de fonctionnalités aux entités VR déclenchant des comportements d'entités. Le lancement d'une scène demande d'importer les assets (bibliothèques de codes et d'effets) puis d'importer le Current VR camera rig, après avoir importé l'entité VRCameraRig. Coup d'oeil sur le tutorial de création Sumerian.

CreateWebVR pour en savoir plus

Ce site met en exergue les bibliothèques vues plus haut, Create WebXR, et permet de couvrir l'AR et la VR, et l'ensemble des plateformes connus, et les outils tels que: Pour l'AR:

Pour la VR, outre ceux vus plus haut, et l'A-Frame inspector:

En savoir plus & ressources:
https://immersive-web.github.io/webxr-reference/webxr-device-api/lifetime.html
https://webxr.nl/news/
https://ios-viewer.webxrexperiments.com/
https://codelabs.developers.google.com/codelabs/ar-with-webxr/#0
https://developers.google.com/web/updates/2018/05/welcome-to-immersive
https://dev.to/chrystianv1/comparing-google-arcore-and-apple-arkit-2lin
https://immersive-web.github.io/webxr-samples/
https://doc.babylonjs.com/how_to/webxr
https://www.supermedium.com/
https://github.com/immersive-web/webxr/blob/master/webvr-migration.md
https://www.w3.org/TR/webxr/
https://immersiveweb.dev/#aframevr
https://risonsimon.com/days-in-vr/