Dans Chrome 67, nous avons annoncé l'API WebXR Device pour la réalité augmentée (RA) et la réalité virtuelle (RV), mais seules les fonctionnalités de RV étaient activées. La RV est une expérience basée uniquement sur ce qui se trouve dans un appareil informatique. La RA, en revanche, vous permet d'afficher des objets virtuels dans le monde réel. Pour permettre le placement et le suivi de ces objets, nous venons d'ajouter l'API de test de positionnement WebXR à Chrome Canary, une nouvelle méthode qui permet au code Web immersif de placer des objets dans le monde réel.
Où puis-je me procurer Google Wifi ?
Cette API est conçue pour rester en version Canary pour un avenir immédiat. Nous souhaitons une période de test prolongée, car il s'agit d'une proposition d'API très récente. Nous voulons nous assurer qu'elle est à la fois robuste et adaptée aux développeurs.
En plus de Chrome Canary, vous aurez également besoin des éléments suivants:
- Un smartphone compatible équipé d'Android O ou version ultérieure.
- Installer ARCore
- Deux flags Chrome (chrome://flags): l'API WebXRDevice (#webxr) et le test de collision WebXR (#webxr-hit-test)
Vous pouvez ainsi vous plonger dans les démonstrations ou essayer notre atelier de programmation.
Il s'agit uniquement du Web
Lors de la conférence Google IO de cette année, nous avons présenté la réalité augmentée avec une version préliminaire de Chrome. Au cours de ces trois jours, j'ai dit à plusieurs reprises aux développeurs comme aux non-développeurs quelque chose que j'aurais aimé mettre dans mon article Web immersif : "C'est juste le Web."
"Quelle extension Chrome dois-je installer ?" "Il n'y a pas d'extension. Il s'agit simplement du Web."
"Ai-je besoin d'un navigateur spécial ?" "C'est juste le Web."
"Quelle application dois-je installer ?" "Il n'y a pas d'application spéciale. Il s'agit simplement du Web."
Cela peut vous sembler évident, puisque vous lisez ceci sur un site Web consacré au Web. Si vous créez des démonstrations avec cette nouvelle API, préparez-vous à cette question. Vous allez en entendre beaucoup.
Concernant les OI, si vous voulez en savoir plus sur le Web immersif en général, où il se trouve et où il va, regardez cette vidéo.
À quoi cela sert-il ?
La réalité augmentée sera un ajout intéressant à de nombreuses pages Web existantes. Par exemple, il peut aider les utilisateurs à apprendre sur des sites éducatifs et permettre aux acheteurs potentiels de visualiser des objets dans leur maison lorsqu'ils font des achats.
Nos démonstrations en témoignent. Elles permettent aux utilisateurs de placer une représentation grandeur nature d'un objet comme s'il était réel. Une fois placée sur la surface sélectionnée, l'image reste sur la surface sélectionnée et s'affiche dans sa taille si l'élément réel se trouvait sur cette surface. L'utilisateur peut ainsi se déplacer autour d'elle, et se rapprocher ou s'en éloigner. Cela permet aux spectateurs d'avoir une compréhension plus approfondie de l'objet qu'avec une image en deux dimensions.
Si vous ne savez pas ce que je veux dire par tout cela, cela deviendra clair lorsque vous utiliserez les démonstrations. Si vous ne disposez pas d'un appareil compatible avec la démonstration, consultez le lien de la vidéo en haut de cet article.
La démonstration et la vidéo ne montrent pas comment la RA peut transmettre la taille d'un objet réel. La vidéo ci-dessous montre une démonstration pédagogique que nous avons créée, appelée Chacmool. Un article associé décrit cette démonstration en détail. L'important pour cette discussion est que lorsque vous placez la statue Chacmool en réalité augmentée, vous voyez sa taille comme si elle se trouvait dans la pièce avec vous.
L'exemple de Chacmool est à visée pédagogique, mais il pourrait tout aussi bien être à visée commerciale. Imaginez un site d'achat de meubles qui vous permet de placer un canapé dans votre salon. L'application de RA vous indique si le canapé convient à votre espace et à quoi il ressemblera à côté de vos autres meubles.
Raycasts, tests de collision et réticules
Un problème clé à résoudre lors de l'implémentation de la réalité augmentée est de savoir comment placer des objets dans une vue du monde réel. Cette méthode s'appelle le ray casting. Le lancer de rayons consiste à calculer l'intersection entre le rayon du pointeur et une surface dans le monde réel. Cette intersection est appelée succès, et déterminer si un succès s'est produit est un test de succès.
C'est le moment idéal pour tester le nouvel exemple de code dans Chrome Canary. Avant de faire quoi que ce soit, vérifiez que les indicateurs appropriés sont activés. Chargez maintenant l'échantillon, puis cliquez sur "Démarrer la RA".
Notez quelques points. Tout d'abord, le compteur de vitesse que vous pouvez reconnaître dans les autres exemples immersifs affiche 30 images par seconde au lieu de 60. Il s'agit du débit auquel la page Web reçoit des images de la caméra.
Démonstration du test de positionnement en RA
L'autre élément que vous devez remarquer est l'image du tournesol. Il se déplace en fonction de vos mouvements et se fixe sur des surfaces telles que les sols et les dessus de table. Si vous appuyez sur l'écran, un tournesol est placé sur une surface et un autre tournesol se déplace avec votre appareil.
L'image qui se déplace avec votre appareil et qui tente de se verrouiller sur des surfaces est appelée réticule. Un réticule est une image temporaire qui permet de placer un objet en réalité augmentée. Dans cette démonstration, le réticule est une copie de l'image à placer. Mais ce n'est pas une fatalité. Dans la démonstration de Chacmool, par exemple, il s'agit d'une boîte rectangulaire à peu près de la même forme que la base de l'objet placé.
Analyser le code
La démonstration Chacmool montre à quoi peut ressembler la RA dans une application de production. Heureusement, il existe une démonstration beaucoup plus simple dans le dépôt d'exemples WebXR. Mon exemple de code provient de la démonstration du test de positionnement en RA dans ce dépôt. Pour information, j'aime simplifier les exemples de code afin de vous aider à comprendre ce qui se passe.
Les principes de base de l'entrée dans une session de RA et de l'exécution d'une boucle de rendu sont les mêmes pour la RA que pour la VR. Vous pouvez lire mon article précédent si vous ne le connaissez pas. Plus précisément, l'ouverture et l'exécution d'une session de RA ressemblent presque exactement à l'ouverture d'une session de fenêtre magique de RV.
Comme pour une fenêtre magique, le type de session doit être non immersif et le cadre de type de référence doit être 'eye-level'.
Nouvelle API
Je vais maintenant vous montrer comment utiliser la nouvelle API. N'oubliez pas que dans la RA, le réticule tente de trouver une surface avant qu'un élément ne soit placé. Pour ce faire, vous allez utiliser
un test de positionnement. Pour effectuer un test de positionnement, appelez XRSession.requestHitTest(). Elle se présente comme suit :
xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
//
});
Les trois arguments de cette méthode représentent un lancer de rayon. Le lancer de rayon est défini par deux points sur le rayon (origin et direction) et à partir de ces points (frameOfReference). L'origine et la direction sont tous deux des vecteurs 3D. Quelle que soit la valeur que vous envoyez, elle sera normalisée (convertie) en une longueur de 1.
Déplacer le réticule
Lorsque vous déplacez votre appareil, le réticule doit le faire également, car il tente de trouver un emplacement où un objet peut être placé. Cela signifie que le réticule doit être redessiné dans chaque frame.
Commencez par le rappel requestAnimationFrame(). Comme pour la réalité virtuelle, vous avez besoin d'une session et d'une pose.
function onXRFrame(t, frame) {
let xrSession = frame.session;
// The frame of reference, which was set elsewhere, is 'eye-level'.
// See onSessionStarted() ins the sample code for details.
let xrPose = frame.getDevicePose(xrFrameOfRef);
if (xrPose && xrPose.poseModelMatrix) {
// Do the hit test and draw the reticle.
}
}
Une fois que vous avez la session et la pose, déterminez où le rayon est projeté. L'exemple de code utilise la bibliothèque mathématique gl-matrix.
Cependant, la matrice gl-matrix n'est pas obligatoire. L'important est de savoir ce que vous calculez avec elle et qu'elle est basée sur la position de l'appareil. Récupérez la position de l'appareil à partir de XRPose.poseModalMatrix. Une fois le lancer de rayon en main, appelez requestHitTest().
function onXRFrame(t, frame) {
let xrSession = frame.session;
// The frame of reference, which was set elsewhere, is 'eye-level'.
// See onSessionStarted() ins the sample code for details.
let xrPose = frame.getDevicePose(xrFrameOfRef);
if (xrPose && xrPose.poseModelMatrix) {
// Calculate the origin and direction for the raycast.
xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
.then((results) => {
if (results.length) {
// Draw for each view.
}
});
}
session.requestAnimationFrame(onXRFrame);
}
Bien que cela ne soit pas aussi évident dans l'exemple de test de collision, vous devez toujours parcourir les vues pour dessiner la scène. Le dessin est effectué à l'aide des API WebGL. Vous pouvez le faire si vous êtes vraiment ambitieux. Toutefois, nous vous recommandons d'utiliser un framework. Les exemples Web immersifs en utilisent un créé uniquement pour les démonstrations, appelé Cottontail. Three.js est compatible avec WebXR depuis mai.
Placer un objet
Un objet est placé dans la RA lorsque l'utilisateur appuie sur l'écran. Pour ce faire, utilisez l'événement select. L'essentiel à cette étape est de savoir où le placer.
Étant donné que le réticule mobile vous fournit une source constante de tests de collision, le moyen le plus simple de placer un objet consiste à le dessiner à l'emplacement du réticule lors du dernier test de collision. Si vous devez le faire, disons que vous avez une raison légitime de ne pas afficher de réticule, vous pouvez appeler requestHitTest() dans l'événement de sélection comme illustré dans l'exemple.
Conclusion
Le meilleur moyen d'y parvenir est de parcourir l'exemple de code ou de suivre l'atelier de programmation. J'espère que ces informations vous seront utiles.
Nous ne sommes pas encore au bout de la création d'API Web immersives. Nous y publierons de nouveaux articles au fur et à mesure de notre avancement.