Réalité augmentée pour le Web

Joe Medley
Joe Medley

Dans Chrome 67, nous avons annoncé le lancement de l'API WebXR Device pour la réalité augmentée (RA) et la réalité virtuelle (RV), bien que seules les fonctionnalités de RV soient activées. La RV est une expérience basée uniquement sur ce qu'il y a dans un appareil informatique. À l'inverse, la RA 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 aide le code Web immersif à placer des objets dans le monde réel.

Où puis-je me procurer Google Wifi ?

Cette API est destinée à rester dans Canary dans un avenir immédiat. Nous souhaitons une période de test prolongée, car il s'agit d'une toute nouvelle proposition d'API et 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 fonctionnant sous Android O ou une version ultérieure
  • Pour installer ARCore,
  • Deux indicateurs Chrome (chrome://flags): API WebXRDevice (#webxr) et test de positionnement WebXR (#webxr-hit-test)

Vous pourrez ainsi accéder aux démonstrations ou essayer notre atelier de programmation.

C'est juste le Web.

Cette année, à l'occasion de Google IO, nous avons présenté la réalité augmentée avec une première version de Chrome. J'ai dit à plusieurs reprises aux développeurs comme aux non-développeurs au cours de ces trois jours que j'aurais aimé pouvoir intégrer dans mon article Web immersif : "C'est juste le Web".

"Quelle extension Chrome dois-je installer ?" "Il n'y a pas d'extension. C'est juste le 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'appli spéciale, juste le Web."

Cela peut être évident pour vous puisque vous lisez ce document sur un site Web dédié au Web. Si vous créez des démonstrations avec cette nouvelle API, préparez-vous à répondre à cette question. Vous le découvrirez beaucoup.

À ce propos, si vous voulez en savoir plus sur le Web immersif en général, sa position actuelle et son orientation, regardez cette vidéo.

À quoi sert-elle ?

La réalité augmentée sera un atout précieux pour de nombreuses pages Web existantes. Par exemple, elle peut aider les gens à apprendre sur des sites éducatifs et permettre à des acheteurs potentiels de visualiser les objets de leur maison pendant leurs achats.

Nos démonstrations le prouvent. Ils permettent aux utilisateurs de placer un objet en taille réelle comme s'il était réel. Une fois placée, l'image reste sur la surface sélectionnée, apparaît la taille qu'elle aurait si l'élément réel se trouvait sur cette surface, et permet à l'utilisateur de se déplacer autour de lui, et de se rapprocher ou s'en éloigner. Cela permet aux utilisateurs de mieux comprendre l'objet qu'avec une image en deux dimensions.

Si vous ne savez pas ce que j'entends par tout cela, vous comprendrez mieux quand vous utiliserez les démonstrations. Si vous ne disposez pas d'un appareil compatible avec la démonstration, consultez le lien vidéo en haut de cet article.

Une chose que la démo et la vidéo ne montrent pas est la façon dont la RA peut transmettre la taille d'un objet réel. La vidéo ci-dessous présente une démonstration éducative que nous avons créée et qui s'appelle Chacmool. Un article associé décrit cette démonstration en détail. Ce qui est important pour cette discussion, c'est que lorsque vous placez la statue de Chacmool en réalité augmentée, vous voyez sa taille comme si elle se trouvait réellement dans la pièce avec vous.

L'exemple de Chacmool est éducatif, mais il pourrait tout aussi bien être commercial. Imaginez un site d'achat de meubles qui vous permette de placer un canapé dans votre salon. L'application de RA vous indique si le canapé s'adapte à votre espace et à quoi il ressemblera à côté de vos autres meubles.

Distributions de rayons, tests de choc et réticules

L'un des principaux problèmes à 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. Pour ce faire, il s'agit de la diffusion par rayon. La diffusion de rayons consiste à calculer l'intersection entre le rayon de pointeur et une surface dans le monde réel. Cette intersection est appelée appel, et déterminer si un appel a eu lieu est un test de positionnement.

C'est le bon moment pour essayer le nouvel exemple de code dans Chrome Canary. Avant toute chose, vérifiez que les indicateurs appropriés sont activés. Chargez maintenant l'exemple et cliquez sur "Start AR" (Démarrer la RA).

Remarquez certaines choses. Tout d'abord, le compteur de vitesse que vous reconnaissez peut-être dans les autres échantillons immersifs affiche 30 images par seconde au lieu de 60. Il s'agit de la fréquence à laquelle la page Web reçoit les images de la caméra.

La RA s'exécute à 30 images par seconde

Démonstration du test de positionnement en RA

L'autre chose que vous devez remarquer est l'image de tournesol. Elle se déplace lorsque vous vous déplacez et s'ancre sur des surfaces telles que les sols et les plateaux de table. Si vous appuyez sur l'écran, un tournesol sera placé sur une surface et un nouveau tournesol se déplacera avec votre appareil.

L'image qui se déplace avec votre appareil et qui tente de se verrouiller sur les surfaces est appelée réticule. Un réticule est une image temporaire qui aide à 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 obligation. 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é.

Jusqu'au code

La démonstration de 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 hit de RA disponible 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 pour accéder à une session de RA et exécuter une boucle de rendu sont les mêmes pour la RA et pour la RV. Vous pouvez lire mon article précédent si ce n'est pas déjà fait. Pour être plus précis, l'entrée et l'exécution d'une session de RA ressemble presque exactement à une session de fenêtre magique de RV. Comme pour une fenêtre magique, le type de session ne doit pas être immersif et le cadre du type de référence doit être 'eye-level'.

La nouvelle API

Je vais maintenant vous montrer comment utiliser la nouvelle API. Rappelez-vous qu'en RA, le réticule tente de trouver une surface avant de placer un élément. Cela se fait grâce à un test de positionnement. Pour effectuer un test de positionnement, appelez XRSession.requestHitTest(). Il se présente comme suit :

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

Les trois arguments de cette méthode représentent une diffusion de rayons. Elle est définie par deux points (origin et direction) sur lesquels ces points sont calculés (frameOfReference). L'origine et la direction sont des vecteurs 3D. Quelle que soit la valeur que vous spécifiez, elles seront normalisées (converties) sur une longueur de 1.

Déplacement du réticule

Lorsque vous déplacez votre appareil, le réticule doit se déplacer avec lui pour trouver l'emplacement d'un objet. Cela signifie que le réticule doit être redessiné dans chaque image.

Commencez par le rappel requestAnimationFrame(). Comme pour la RV, vous avez besoin d'une séance et d'une posture.

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 la séance et la pose terminée, déterminez où le rayon est diffusé. L'exemple de code utilise la bibliothèque mathématique gl-matrix. gl-matrix n'est toutefois pas obligatoire. L'important est de savoir ce que vous calculez avec cet appareil et que tout est basé sur la position de l'appareil. Récupérez la position de l'appareil à partir de XRPose.poseModalMatrix. Avec le casting 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 positionnement, vous devez toujours passer en boucle 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. Nous vous recommandons toutefois d'utiliser un framework. Les exemples Web immersifs utilisent celui créé uniquement pour les démonstrations, appelé Cottontail, et Three.js est compatible avec WebXR depuis mai.

Placer un objet

Un objet est placé en RA lorsque l'utilisateur appuie sur l'écran. Pour ce faire, utilisez l'événement select. À cette étape, il est important de savoir où le positionner. Comme le réticule en mouvement constitue une source constante de tests de positionnement, le moyen le plus simple de placer un objet consiste à le dessiner à l'emplacement du réticule lors du dernier test de positionnement. Si nécessaire, par exemple, si 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 indiqué dans l'exemple.

Conclusion

La meilleure façon de s'y retrouver est de suivre l'exemple de code ou l'atelier de programmation. J'espère que je vous ai fourni suffisamment de contexte pour vous aider à comprendre ces deux aspects.

Nous n'avons pas fini de créer des API Web immersives. Nous publierons de nouveaux articles à mesure que nous progresserons.