Cette page a été traduite par l'API Cloud Translation.

Réalité augmentée: vous le savez peut-être déjà

Si vous avez déjà utilisé l'API WebXR Device, vous n'avez rien d'autre à faire.

Joe Medley

L'API WebXR Device a été disponible l'automne dernier dans Chrome 79. Comme indiqué précédemment, l'implémentation de l'API par Chrome est en cours de développement. Chrome a le plaisir de vous annoncer que certains travaux sont terminés. Dans Chrome 81, deux nouvelles fonctionnalités sont arrivées:

Cet article porte sur la réalité augmentée. Si vous avez déjà utilisé l'API WebXR Device, vous serez heureux d'apprendre qu'elle n'a rien de nouveau à apprendre. Le processus d'accès à une session WebXR est globalement le même. L'exécution d'une boucle de frames est en grande partie la même. Cette différence réside dans les configurations permettant d'afficher le contenu de manière appropriée pour la réalité augmentée. Si vous ne connaissez pas les concepts de base de WebXR, vous devez lire mes articles précédents sur l'API WebXR Device ou au moins vous familiariser avec les sujets abordés. Vous devez savoir comment demander et accéder à une session, et comment exécuter une boucle de frame.

Pour en savoir plus sur les tests de positionnement, consultez l'article associé Positionner des objets virtuels dans des vues réelles. Le code de cet article est basé sur l'exemple de session de RA immersive (démonst source) tiré des exemples d'API WebXR Device de l'Immersive Web Working Group.

Avant de vous plonger dans le code, vous devez utiliser l'exemple de session de RA immersive au moins une fois. Vous devez disposer d'un téléphone Android récent équipé de Chrome 81 ou d'une version ultérieure.

À quoi sert-elle ?

La réalité augmentée sera un atout précieux pour de nombreuses pages Web nouvelles ou existantes, car elle leur permettra de mettre en œuvre des cas d'utilisation de RA sans quitter le navigateur. Par exemple, elle peut aider les internautes à se former sur des sites éducatifs et permettre aux acheteurs potentiels de visualiser des objets chez eux pendant qu'ils font des achats.

Examinons le deuxième cas d'utilisation. Imaginez une simulation et une représentation en taille réelle d'un objet virtuel dans une scène réelle. Une fois placée, l'image reste sur la surface sélectionnée, s'affiche à sa taille si l'élément réel se trouvait sur cette surface, et permet à l'utilisateur de se déplacer et de s'en rapprocher. Cela permet aux utilisateurs de mieux comprendre l'objet qu'avec une image en deux dimensions.

Je vais un peu trop vite. Pour réaliser ce que j'ai décrit, vous avez besoin d'une fonctionnalité de RA et d'un moyen de détecter les surfaces. Cet article porte sur la première. Pour en savoir plus, consultez l'article associé sur l'API WebXR Hit Test (en lien ci-dessus).

Demander une session

Le processus de demande de session ressemble beaucoup à ce que vous avez déjà vu. Commencez par déterminer si le type de session souhaité est disponible sur l'appareil actuel en appelant xr.isSessionSupported(). Au lieu de demander 'immersive-vr' comme précédemment, demandez 'immersive-ar'.

if (navigator.xr) {
  const supported = await navigator.xr.isSessionSupported('immersive-ar');
  if (supported) {
    xrButton.addEventListener('click', onButtonClicked);
    xrButton.textContent = 'Enter AR';
    xrButton.enabled = supported; // supported is Boolean
  }
}

Comme précédemment, cela active un bouton "Enter AR" (Entrer en RA). Lorsque l'utilisateur clique dessus, appelez xr.requestSession(), en transmettant également 'immersive-ar'.

let xrSession = null;
function onButtonClicked() {
  if (!xrSession) {
    navigator.xr.requestSession('immersive-ar')
    .then((session) => {
      xrSession = session;
      xrSession.isImmersive = true;
      xrButton.textContent = 'Exit AR';
      onSessionStarted(xrSession);
    });
  } else {
    xrSession.end();
  }
}

Établissement de commodité

Vous avez probablement remarqué que j'ai mis en surbrillance deux lignes dans le dernier exemple de code. L'objet XRSession semble avoir une propriété appelée isImmersive. Il s'agit d'une propriété pratique que j'ai créée moi-même et qui ne fait pas partie des spécifications. Je l'utiliserai plus tard pour décider des contenus à montrer à l'utilisateur. Pourquoi cette propriété ne fait-elle pas partie de l'API ? Étant donné que votre application peut avoir besoin de suivre cette propriété différemment, les auteurs des spécifications ont décidé de maintenir l'API propre.

Rejoindre une session

Rappelez-vous à quoi ressemblait onSessionStarted() dans mon article précédent:

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  xrSession.requestReferenceSpace('local-floor')
  .then((refSpace) => {
    xrRefSpace = refSpace;
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

Je dois ajouter quelques éléments pour prendre en compte le rendu de la réalité augmentée. Désactiver l'arrière-plan Tout d'abord, je vais déterminer si j'ai besoin de l'arrière-plan. C'est la première fois que je vais utiliser ma propriété de commodité.

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });

}

Espaces de référence

Mes articles précédents ont survolé les espaces de référence. L'exemple que je décrit en utilise deux d'entre eux, il est donc temps de corriger cette omission.

Un espace de référence décrit la relation entre le monde virtuel et l'environnement physique de l'utilisateur. Pour ce faire, il procède comme suit:

Spécification de l'origine du système de coordonnées utilisé pour exprimer des positions dans le monde virtuel.
Spécifier si l'utilisateur doit se déplacer dans ce système de coordonnées
Indique si ce système de coordonnées a des limites préétablies. (Les exemples présentés ici n'utilisent pas de systèmes de coordonnées avec des limites préétablies.)

Pour tous les espaces de référence, la coordonnée X exprime la gauche et la droite, l'Y exprime le haut et le bas, et Z exprime l'avant et l'arrière. Les valeurs positives sont respectivement "droite", "haut" et "arrière".

Les coordonnées renvoyées par XRFrame.getViewerPose() dépendent du type d'espace de référence demandé. Nous y reviendrons plus en détail lorsque nous arrivons à la boucle de frame. Pour le moment, nous devons sélectionner un type de référence adapté à la réalité augmentée. Encore une fois, cela utilise ma propriété pratique.

let refSpaceType
function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

Si vous avez consulté l'exemple de session immersive en RA, vous remarquerez qu'au départ, la scène est statique et pas du tout en réalité augmentée. Vous pouvez faire glisser votre doigt sur l'écran pour vous déplacer dans la scène. Si vous cliquez sur "START AR" (DÉMARRER la RA), l'arrière-plan disparaît et vous pouvez vous déplacer dans la scène en déplaçant l'appareil. Les modes utilisent différents types d'espaces de référence. Le texte en surbrillance ci-dessus montre comment cette option est sélectionnée. Elle utilise les types de référence suivants:

local : l'origine est à la position du lecteur au moment de la création de la session. Cela signifie que l'expérience n'a pas nécessairement un prix plancher bien défini, et que la position exacte du point de départ peut varier selon la plate-forme. Bien qu'il n'y ait pas de limites préétablies pour l'espace, il est normal que le contenu puisse être visualisé sans autre mouvement que la rotation. Comme vous pouvez le voir d'après notre propre exemple de RA, certains mouvements dans l'espace peuvent être possibles.

viewer : utilisé le plus souvent pour le contenu présenté de manière intégrée dans la page, cet espace suit l'appareil de visualisation. Lorsqu'elle est transmise à getViewerPose, elle ne fournit aucun suivi et signale donc toujours une pose à l'origine, sauf si l'application la modifie avec XRReferenceSpace.getOffsetReferenceSpace(). L'exemple utilise cela pour permettre un panoramique tactile de l'appareil photo.

Exécuter une boucle de frames

Conceptuellement, rien ne change par rapport à ce que j'ai fait dans la session de RV décrite dans mes articles précédents. Transmettez le type d'espace de référence à XRFrame.getViewerPose(). La valeur XRViewerPose renvoyée correspond au type d'espace de référence actuel. Utiliser viewer comme valeur par défaut permet à une page d'afficher des aperçus de contenu avant que le consentement de l'utilisateur ne soit demandé pour la RA ou la RV. Ce point est important: le contenu intégré utilise la même boucle de frames que le contenu immersif, ce qui réduit la quantité de code à gérer.

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
  if (xrViewerPose) {
    // Render based on the pose.
  }
}

Conclusion

Cette série d'articles ne porte que sur les principes de base de l'implémentation de contenu immersif sur le Web. Les exemples d'API WebXR Device de l'Immersive Web Working Group présentent de nombreux autres cas d'utilisation et fonctionnalités. Nous venons également de publier un article sur le test de positionnement qui décrit une API permettant de détecter des surfaces et de placer des objets virtuels dans une vue de caméra réelle. Découvrez-les et consultez le blog web.dev pour découvrir d'autres articles pour l'année à venir.

Photo de David Grandmougin sur Unsplash