Mit WebXR entwickeln

Chrome für Android XR unterstützt WebXR. WebXR ist ein offener Standard des W3C, der leistungsstarke XR-APIs für unterstützte Browser bereitstellt. Wenn Sie für das Web entwickeln, können Sie vorhandene Websites mit 3D‑Modellen ergänzen oder neue immersive Erlebnisse schaffen.

Die folgenden WebXR-Funktionen werden von Chrome for Android XR unterstützt:

Wenn Sie WebXR in Aktion sehen möchten, starten Sie Chrome auf einem Android XR-Gerät oder im Android XR-Emulator und sehen Sie sich die offiziellen WebXR-Beispiele an.

Voraussetzung: WebXR-Framework auswählen

Bevor Sie mit der Entwicklung beginnen, ist es wichtig, das richtige WebXR-Framework auszuwählen. Dies erhöht Ihre Produktivität erheblich und verbessert die Qualität der von Ihnen erstellten Designs.

  • Wenn Sie volle Kontrolle über 3D-Szenen haben und benutzerdefinierte oder komplexe Interaktionen erstellen möchten, empfehlen wir three.js und babylon.js.
  • Für das schnelle Prototyping oder die Verwendung einer HTML-ähnlichen Syntax zum Definieren von 3D-Szenen empfehlen wir A-Frame und Modelviewer.
  • Weitere Frameworks und Beispielcode

Wenn Sie lieber native JavaScript- und WebGL-Technologien verwenden, finden Sie unter WebXR auf GitHub Informationen zum Erstellen Ihres ersten WebXR-Tests.

Für Android XR anpassen

Wenn Sie bereits WebXR-Inhalte auf anderen Geräten verwenden, müssen Sie Ihren Code möglicherweise aktualisieren, damit WebXR auf Android XR richtig unterstützt wird. Beispielsweise müssen WebXR-Inhalte, die auf Mobilgeräte ausgerichtet sind, von einem Bildschirm auf zwei Stereobildschirme in Android XR umgestellt werden. Bei WebXR-Inhalten, die auf Mobilgeräte oder vorhandene Headsets ausgerichtet sind, muss der Eingabecode möglicherweise an die Handsteuerung angepasst werden.

Wenn Sie mit WebXR auf Android XR arbeiten, müssen Sie Ihren Code möglicherweise aktualisieren, um die Tatsache auszugleichen, dass es zwei Bildschirme gibt – einen für jedes Auge.

Für ein Gefühl von Tiefe in WebXR sorgen

Wenn ein Nutzer ein virtuelles Objekt in seinem physischen Raum platziert, sollte der Maßstab korrekt sein, damit es so aussieht, als würde es dort wirklich hingehören. In einer Möbel-Shopping-App müssen Nutzer beispielsweise darauf vertrauen können, dass ein virtueller Sessel perfekt in ihr Wohnzimmer passt.

Chrome for Android XR unterstützt das Tiefe-Sensing-Modul in WebXR, wodurch Geräte die Abmessungen und Konturen ihrer realen Umgebung besser wahrnehmen können. Anhand dieser Informationen können Sie realistischere und immersivere Interaktionen erstellen, die Nutzern helfen, fundierte Entscheidungen zu treffen.

Im Gegensatz zur Tiefenerfassung auf Smartphones ist die Tiefenerfassung in Android XR stereoskopisch. Es werden zwei Tiefenkarten in Echtzeit für das binokulare Sehen gestreamt. Möglicherweise müssen Sie Ihren WebXR-Code aktualisieren, damit Stereotiefe-Frames richtig unterstützt werden.

Im folgenden Beispiel werden Tiefeninformationen stereoskopisch gerendert:

// 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!');  }
}

Wichtige Informationen zum Code

  • Es muss eine gültige Pose zurückgegeben werden, um auf Tiefendaten zuzugreifen.
  • pose.views gibt eine Ansicht für jedes Auge zurück und die entsprechende For-Schleife wird zweimal ausgeführt.

Echtzeit-Tiefenivellierung mit der WebXR Depth Sensing API Rot steht für nähere Pixel, Blau für weiter entfernte.

Handinteraktion in WebXR hinzufügen

Wenn Sie Ihrer WebXR-App Gesteninteraktionen hinzufügen, können Sie die Nutzerinteraktion verbessern, da die Nutzung intuitiver und immersiver wird.

Die Eingabe per Handzeichen ist der primäre Interaktionsmechanismus in Android XR. Chrome für Android XR unterstützt die Hand Input API als Standardeingabe. Mit dieser API können Nutzer auf natürliche Weise mit virtuellen Objekten interagieren. Mit Gesten und Handbewegungen können sie Elemente in der Szene greifen, schieben oder manipulieren.

Geräte wie Smartphones oder XR-Geräte mit Controller werden möglicherweise noch nicht unterstützt. Möglicherweise müssen Sie Ihren WebXR-Code aktualisieren, um die Handeingaben richtig zu unterstützen. In der Immersiven VR-Sitzung mit Händen wird gezeigt, wie Sie die Handerkennung in Ihr WebXR-Projekt einbinden.

Die folgende Animation zeigt ein Beispiel für die Kombination von Zusammenziehen mit der WebXR API, um zu zeigen, wie ein Nutzer die Oberfläche eines virtuellen Raums „wegwischt“, um ein Durchsichtfenster in die reale Welt zu öffnen.

WebXR-Demo, in der mit der Handfläche die Bildschirme ausgeblendet werden, um die physische Realität zu sehen

Berechtigungen in WebXR

Wenn Sie WebXR APIs verwenden, für die eine Berechtigung erforderlich ist, werden Nutzer in Chrome aufgefordert, der Website die Berechtigung zu erteilen. Für alle WebXR APIs ist die Berechtigung für die 3D-Kartierung und das Kamera-Tracking erforderlich. Der Zugriff auf erfasste Gesichts-, Augen- und Handdaten ist ebenfalls durch Berechtigungen geschützt. Wenn alle erforderlichen Berechtigungen gewährt wurden, gibt der Aufruf von navigator.xr.requestSession('immersive-ar', options) eine gültige WebXR-Sitzung zurück.

Die vom Nutzer ausgewählte Berechtigungseinstellung bleibt für jede Domain erhalten. Wenn Sie auf eine WebXR-Umgebung in einer anderen Domain zugreifen, werden Sie in Chrome noch einmal um Berechtigungen gebeten. Wenn für die WebXR-Funktion mehrere Berechtigungen erforderlich sind, werden Sie in Chrome nach jeder Berechtigung einzeln gefragt.

Wie bei allen Berechtigungen im Web sollten Sie Situationen, in denen die Berechtigung abgelehnt wird, ordnungsgemäß handhaben.