Développer pour le Web sur Android XR

Appareils XR concernés
Ces conseils vous aident à créer des expériences pour ces types d'appareils XR.
En savoir plus sur les types d'appareils XR
Casques XR
Lunettes XR filaires
En savoir plus sur les types d'appareils XR

Chrome sur Android XR est compatible avec WebXR. WebXR est une norme ouverte du W3C qui fournit des API XR hautes performances aux navigateurs compatibles. Si vous développez pour le Web, vous pouvez améliorer les sites existants avec des modèles 3D ou créer de nouvelles expériences immersives.

Les fonctionnalités WebXR suivantes sont compatibles avec Chrome pour Android XR :

Pour voir WebXR en action, lancez Chrome sur un appareil Android XR ou l'émulateur Android XR, puis parcourez les exemples WebXR officiels.

Prérequis : Choisir un framework WebXR

Avant de commencer le développement, il est important de choisir le bon framework WebXR. Cela améliore considérablement votre propre productivité et la qualité des expériences que vous créez.

  • Pour un contrôle total sur les scènes 3D et la création d'interactions personnalisées ou complexes, nous vous recommandons three.js et babylon.js.
  • Pour un prototypage rapide ou pour utiliser une syntaxe de type HTML afin de définir des scènes 3D, nous vous recommandons A-Frame et model-viewer.
  • Vous pouvez également consulter d'autres frameworks et exemples de code.

Si vous préférez utiliser JavaScript et WebGL natifs, consultez WebXR sur GitHub pour créer votre première expérience WebXR.

Adapter pour Android XR

Si vous avez des expériences WebXR existantes qui s'exécutent sur d'autres appareils, vous devrez peut-être mettre à jour votre code pour prendre en charge correctement WebXR sur Android XR. Par exemple, les expériences WebXR axées sur les appareils mobiles devront passer d'un écran à deux écrans stéréoscopiques dans Android XR. Les expériences WebXR ciblant les appareils mobiles ou les casques existants peuvent avoir besoin d'adapter le code d'entrée pour être axées sur les mains.

Lorsque vous utilisez WebXR sur Android XR, vous devrez peut-être mettre à jour votre code pour compenser le fait qu'il y a deux écrans (un pour chaque œil).

À propos de la profondeur dans WebXR

Lorsqu'un utilisateur place un objet virtuel dans son espace physique, son échelle doit être précise pour qu'il ait l'impression qu'il y appartient vraiment. Par exemple, dans une application d'achat de meubles, les utilisateurs doivent être sûrs qu'un fauteuil virtuel s'intégrera parfaitement dans leur salon.

Chrome pour Android XR est compatible avec le module Depth Sensing dans WebXR, qui améliore la capacité d'un appareil à percevoir les dimensions et les contours de son environnement réel. Ces informations sur la profondeur vous permettent de créer des interactions plus immersives et réalistes, ce qui aide les utilisateurs à prendre des décisions éclairées.

Contrairement à la détection de profondeur sur les téléphones mobiles, celle d'Android XR est stéréoscopique et diffuse deux cartes de profondeur en temps réel pour la vision binoculaire. Vous devrez peut-être mettre à jour votre code WebXR pour qu'il accepte correctement les frames de profondeur stéréo.

L'exemple suivant affiche les informations de profondeur de manière stéréoscopique :

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

Points clés concernant le code

  • Une pose valide doit être renvoyée pour accéder aux données de profondeur.
  • pose.views renvoie une vue pour chaque œil, et sa boucle "for" correspondante s'exécute deux fois.

Visualisation de la profondeur en temps réel à l'aide de l'API WebXR Depth Sensing. Le rouge indique les pixels les plus proches, tandis que le bleu indique les pixels les plus éloignés.

Ajouter une interaction manuelle dans WebXR

L'ajout d'interactions manuelles à votre application WebXR améliore l'engagement des utilisateurs en leur offrant des expériences plus intuitives et immersives.

La saisie manuelle est le principal mécanisme d'interaction dans Android XR. Chrome pour Android XR est compatible avec l'API Hand Input comme entrée par défaut. Cette API permet aux utilisateurs d'interagir naturellement avec des objets virtuels, en utilisant des gestes et des mouvements de la main pour saisir, pousser ou manipuler des éléments de la scène.

Il est possible que les appareils tels que les téléphones mobiles ou les appareils XR axés sur les manettes ne soient pas encore compatibles avec la saisie manuelle. Vous devrez peut-être mettre à jour votre code WebXR pour prendre en charge correctement la saisie manuelle. La session VR immersive avec les mains montre comment intégrer le suivi des mains à votre projet WebXR.

L'animation suivante montre un exemple de combinaison du pincement avec l'API WebXR pour montrer à un utilisateur qu'il "essuie" la surface d'un espace virtuel pour révéler une fenêtre de transparence sur le monde réel.

Démonstration WebXR de l'utilisation du pincement de la main pour effacer les écrans et voir à travers la réalité physique.

Autorisations dans WebXR

Lorsque vous utilisez des API WebXR qui nécessitent une autorisation, Chrome invite l'utilisateur à accorder l'autorisation au site. Toutes les API WebXR nécessitent l'autorisation de cartographie 3D et de suivi de la caméra. L'accès aux données de suivi du visage, des yeux et des mains est également protégé par des autorisations. Si toutes les autorisations nécessaires sont accordées, l'appel de navigator.xr.requestSession('immersive-ar', options) renvoie une session WebXR valide.

La préférence d'autorisation choisie par l'utilisateur est conservée pour chaque domaine. Si vous accédez à une expérience WebXR dans un autre domaine, Chrome vous demandera à nouveau des autorisations. Si l'expérience WebXR nécessite plusieurs autorisations, Chrome vous les demande une par une.

Comme pour toutes les autorisations sur le Web, vous devez gérer correctement les situations où l'autorisation est refusée.