Vous savez peut-être déjà

Si ya ha utilizado la API de dispositivo WebXR, ya ha recorrido la mayor parte del camino.

13 février 2020

L'API WebXR Device a été livrée à l'automne dernier dans Chrome 79. Comme indiqué à l'époque, la mise en œuvre de l'API dans Chrome est un travail en cours. Chrome est heureux d'annoncer qu'une partie du travail est terminée. Dans Chrome 81, deux nouvelles fonctionnalités sont arrivées:

Este artículo cubre la realidad aumentada. Si ya ha utilizado WebXR Device API, le alegrará saber que hay muy pocas novedades que aprender. Entrar en una sesión de WebXR es básicamente lo mismo. Ejecutar un bucle de cuadro es básicamente lo mismo. Las diferencias radican en configuraciones que permiten mostrar el Contenu de forma adecuada para la realidad aumentada. Si no está familiarizado con los conceptos básicos de WebXR, debería leer mis publicaciones anteriores sobre la API del dispositivo WebXR, o al menos estar familiarizado con los temas que se tratan allí. Debe saber cómo solicitar e ingresar a una sesión y debe saber cómo ejecutar un bucle de tramas.

Para obtener información sobre las pruebas de positionnement, consulte el artículo complementario Posicionamiento de objetos virtuales en vistas del mundo real. El código de este artículo se basa en el ejemplo de sesión de AR inmersivo (manifestation
Fontaine) de Immersive Web Working Group’s Exemples d'API de périphérique WebXR.

Avant de plonger dans le code, vous devez utiliser le Exemple de session de réalité augmentée immersive
au moins une fois. Vous aurez besoin d'un téléphone Android moderne avec Chrome 81 ou version ultérieure.

Pourquoi est-ce?

La realidad aumentada será una valiosa adición a muchas páginas web nuevas o existentes al permitirles implementar casos de uso de RA sin salir del le navigateur. Por ejemplo, puede ayudar a las gens a aprender en sitios educativos y permitir que los compradores potenciales visualicen objetos en su hogar mientras compran.

Considere el segundo caso de uso. Imagina la simulación de colocar una representación a tamaño real de un objeto virtual en una escena real. Una vez colocada, la imagen permanece en la superficie seleccionada, aparece del tamaño que tendría si el elemento real estuviera en esa superficie y permite al Nom d'utilisateur moverse alrededor de ella, así como más cerca o más lejos de ella. Esto brinda a los espectadores una comprensión más profunda del objeto de lo que es posible con una imagen bidimensional.

Je prends un peu d'avance sur moi-même. Pour faire ce que j'ai décrit, vous avez besoin de la fonctionnalité AR et de certains moyens de détecter les surfaces. Cet article couvre le premier. L'article d'accompagnement sur l'API WebXR Success Test (lien ci-dessus) couvre ce dernier.

Demander une session

Demander une session est très similaire à ce que vous avez vu auparavant. Vérifiez d'abord si le type de session souhaité est disponible sur l'appareil actuel en appelant
xr.isSessionSupported (). Au lieu de demander 'immersive-vr' comme avant, demandez 'immersif-ar'.

si (navigateur.xr) {
  const supported = attendre navigateur.xr.isSessionSupported('immersif-ar');
  si (supported) {
    xrButton.addEventListener('click', onButtonClicked);
    xrButton.textContent = 'Enter AR';
    xrButton.enabled = supported; 
  }
}

Comme précédemment, cela active un bouton «Entrer AR». Lorsque l'utilisateur clique dessus, appelez
xr.requestSession (), se passe aussi 'immersif-ar'.

laisser xrSession = nul;
une fonction onButtonClicked() {
  si (!xrSession) {
    navigateur.xr.requestSession('immersif-ar')
    .then((session) => {
      xrSession = session;
      xrSession.isImmersif = vrai;
      xrButton.textContent = 'Exit AR';
      onSessionStarted(xrSession);
    });
  } else {
    xrSession.finir();
  }
}

Une propriété de commodité

Vous avez probablement remarqué que j'ai mis en évidence deux lignes dans le dernier exemple de code. Les XRSession l'objet semble avoir une propriété appelée isImmersif. Il s'agit d'une propriété de commodité que j'ai créée moi-même et qui ne fait pas partie de la spécification. Je l'utiliserai plus tard pour décider de ce que je vais montrer au spectateur. 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 de la spécification ont décidé de garder l'API propre.

Entrez une session

Souviens-toi que onSessionStarted () cela ressemblait à mon article précédent:

une fonction onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
laisser canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: vrai });
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 rendre compte du 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 le premier endroit où j'utiliserai ma propriété de commodité.

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

  si (session.isImmersif) {
    removeBackground();
  }

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

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

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

}

Espaces de référence

Mes articles précédents sont passés par les espaces de référence. L'exemple que je décris en utilise deux, 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. Il le fait en:

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

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

Les coordonnées renvoyées par XRFrame.getViewerPose () dépend de ce qui est demandé
type d'espace de référence. Más sobre eso cuando lleguemos al bucle de cuadro. En este momento, debemos seleccionar un tipo de referencia que être apropiado para la realidad aumentada. Nuevamente, esto usa mi propiedad de conveniencia.

laisser refSpaceType
une fonction onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  si (session.isImmersif) {
    removeBackground();
  }

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

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

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

Si vous avez visité le Exemple de session de réalité augmentée immersive
Vous remarquerez qu'au départ la scène est en réalité statique et non augmentée. Vous pouvez faire glisser et faire glisser votre doigt pour vous déplacer dans la scène. Si vous cliquez sur "START AR", 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 il est sélectionné. Utilisez les types de référence suivants:

local - L'origine native est à la position du spectateur au moment de la création de la session. Cela signifie que l'expérience n'a pas forcément un plancher bien défini et que la position exacte de l'origine peut varier en fonction de la plate-forme. Bien qu'il n'y ait pas de limites prédéfinies pour l'espace, on s'attend à ce que le contenu puisse être visualisé sans mouvement autre que la rotation. Comme vous pouvez le voir dans notre propre exemple de RA, certains mouvements sont possibles dans l'espace.

téléspectateur - Plus fréquemment utilisé pour le contenu présenté en ligne sur la page, cet espace suit le dispositif d'affichage. Lorsqu'il est passé à getViewerPose, il ne fournit pas de suivi et signale donc toujours une pose à l'origine à moins que l'application ne la modifie avec XRReferenceSpace.getOffsetReferenceSpace (). L'exemple l'utilise pour activer le panoramique tactile de la caméra.

Exécution d'une boucle d'image

Conceptualmente, nada cambia con respecto a lo que hice en la sesión de realité virtuel descrita en mis artículos anteriores. Pase el tipo de espacio de referencia a XRFrame.getViewerPose (). Retour XRViewerPose sera pour le type d'espace de référence actuel. Utilisant
téléspectateur comme valeur par défaut, permet à une page d'afficher des aperçus de contenu avant que le consentement de l'utilisateur pour la RA ou la RV ne soit demandé. Cela illustre un point important: le contenu en ligne utilise la même boucle de trame que le contenu immersif, ce qui réduit la quantité de code à conserver.

une fonction onXRFrame(hrTime, xrFrame) {
  laisser xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  laisser xrViewerPose = xrFrame.getViewerPose(refSpaceType);
  si (xrViewerPose) {
    
  }
}

conclusion

Cette série d'articles ne couvre que les bases de la mise en œuvre de contenu immersif sur le Web. Le groupe de travail Web immersif présente de nombreuses autres fonctionnalités et cas d'utilisation. Exemples d'API de périphérique WebXR. También acabamos de publicar un artículo de prueba de éxito que explica una API para detectar superficies y colocar elementos virtuales en una vista de cámara del mundo real. Échales un vistazo y mira el Blog de web.dev para ver más artículos durante el próximo año.

photo par David Grandmougin au Unsplash