Développer avec WebXR

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 créez des contenus pour le Web, vous pouvez améliorer des 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: Choisissez un framework WebXR

Avant de commencer à développer, 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 des scènes 3D et la création d'interactions personnalisées ou complexes, nous vous recommandons three.js et babylon.js.
  • Pour le prototypage rapide ou l'utilisation d'une syntaxe semblable à HTML pour 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 premier test WebXR.

Adapter pour Android XR

Si vous exécutez des expériences WebXR sur d'autres appareils, vous devrez peut-être mettre à jour votre code pour qu'il prenne correctement en charge 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éo dans Android XR. Les expériences WebXR ciblant des appareils mobiles ou des casques existants peuvent nécessiter d'adapter le code de saisie pour qu'il soit prioritaire pour les mains.

Lorsque vous utilisez WebXR sur Android XR, vous devrez peut-être mettre à jour votre code pour tenir compte du fait qu'il existe deux écrans, un pour chaque œil.

Assurer un sentiment de profondeur dans WebXR

Lorsqu'un utilisateur place un objet virtuel dans son espace physique, son échelle doit être précise pour qu'il semble vraiment y appartenir. Par exemple, dans une application d'achat de meubles, les utilisateurs doivent avoir confiance en ce que le fauteuil virtuel s'adaptera parfaitement à leur salon.

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

Contrairement à la détection de profondeur sur les téléphones mobiles, la détection de profondeur dans 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 prenne correctement en charge les images 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 à retenir 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 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 avec les mains dans WebXR

Ajouter des interactions avec les mains à 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, à l'aide de gestes et de mouvements de la main pour saisir, pousser ou manipuler des éléments de la scène.

Il est possible que des appareils tels que les téléphones mobiles ou les appareils XR centrés sur les manettes ne soient pas encore compatibles avec la saisie manuelle. Vous devrez peut-être mettre à jour votre code WebXR pour qu'il prenne correctement en charge la saisie manuelle. La session de 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 "effaçant" la surface d'un espace virtuel pour révéler une fenêtre transparente dans le monde réel.

Démonstration WebXR de l'utilisation d'un 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 à l'accorder au site. Toutes les API WebXR nécessitent l'autorisation de cartographie 3D et de suivi de la caméra. Les données de suivi du visage, des yeux et des mains sont également protégées par des autorisations. Si toutes les autorisations requises sont accordées, l'appel de navigator.xr.requestSession('immersive-ar', options) renvoie une session WebXR valide.

Les préférences d'autorisation choisies par l'utilisateur sont conservées pour chaque domaine. Lorsque vous accédez à une expérience WebXR dans un autre domaine, Chrome demande à nouveau des autorisations. Si l'expérience WebXR nécessite plusieurs autorisations, Chrome demande chaque autorisation une par une.

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