Starten und Beenden einer WebXR-Sitzung

Zugriff auf die WebXR-API

Der Zugriff Ihrer Anwendung auf die WebXR-API beginnt mit dem XRSystem-Objekt. Dieses Objekt repräsentiert die gesamte WebXR-Geräteausstattung, die Ihnen über die Hardware und Treiber des Geräts der nutzenden Person zur Verfügung steht. Über die Navigator-Eigenschaft xr kann Ihr Dokument auf ein globales XRSystem-Objekt zugreifen. Die Eigenschaft gibt das XRSystem-Objekt zurück, wenn angesichts der verfügbaren Hardware und der Umgebung Ihres Dokuments geeignete XR-Hardware zur Nutzung bereitsteht.

Der einfachste Code zum Abrufen des XRSystem-Objekts lautet daher:

const xr = navigator.xr;

Der Wert von xr ist null oder undefined, wenn WebXR nicht verfügbar ist.

Verfügbarkeit von WebXR

Da WebXR eine neue API ist, die sich noch in der Entwicklung befindet, wird sie nur von bestimmten Geräten und Browsern unterstützt. Selbst dort ist sie möglicherweise nicht standardmäßig aktiviert. Unter Umständen können Sie WebXR jedoch auch dann ausprobieren, wenn Sie kein kompatibles System haben.

WebXR-Polyfill

Das Team, das die WebXR-Spezifikation entwickelt, hat einen WebXR-Polyfill veröffentlicht. Damit können Sie WebXR in Browsern simulieren, die die WebXR-APIs nicht unterstützen. Falls der Browser die ältere WebVR-API unterstützt, wird diese verwendet. Andernfalls greift der Polyfill auf eine Implementierung zurück, die Googles Cardboard-VR-API verwendet.

Der Polyfill wird parallel zur Spezifikation gepflegt und an deren aktuellen Stand angepasst. Außerdem wird er aktualisiert, um mit Browsern kompatibel zu bleiben, wenn sich deren Unterstützung für WebXR und andere für den Polyfill relevante Technologien im Laufe der Zeit ändert.

Lesen Sie die Readme-Datei sorgfältig: Der Polyfill ist in mehreren Versionen verfügbar, je nachdem, in welchem Umfang Ihre Zielbrowser neuere JavaScript-Funktionen unterstützen.

Verwendung des Emulators

Auch wenn die Verwendung im Vergleich zu einem echten Headset etwas umständlich ist, können Sie damit WebXR-Code auf einem Desktop-Computer ausprobieren und entwickeln, auf dem WebXR normalerweise nicht verfügbar ist. Außerdem können Sie einige grundlegende Tests durchführen, bevor Sie Ihren Code auf einem echten Gerät ausführen. Beachten Sie jedoch, dass der Emulator noch nicht die gesamte WebXR-API vollständig emuliert. Dadurch können unerwartete Probleme auftreten. Lesen Sie auch hier die Readme-Datei sorgfältig und machen Sie sich mit den Einschränkungen vertraut, bevor Sie beginnen.

Wichtig: Testen Sie Ihren Code immer auf echter AR- und/oder VR-Hardware, bevor Sie ein Produkt veröffentlichen oder ausliefern! Emulierte, simulierte oder durch einen Polyfill bereitgestellte Umgebungen sind kein angemessener Ersatz für Tests auf physischen Geräten.

Erweiterung beziehen

Laden Sie den WebXR API Emulator für Ihren unterstützten Browser herunter:

• Mozilla Firefox

Der Quellcode der Erweiterung ist ebenfalls auf GitHub verfügbar.

Probleme und Hinweise zum Emulator

Eine vollständige Beschreibung der Erweiterung würde den Rahmen dieses Artikels sprengen. Einige Punkte sind jedoch besonders erwähnenswert.

Version 0.4.0 der Erweiterung wurde am 26. März 2020 angekündigt. Sie führte Unterstützung für Augmented Reality (AR) über das WebXR AR Module ein, dessen Spezifikation sich einem stabilen Stand nähert. Eine Dokumentation zu AR wird in Kürze hier auf MDN erscheinen.

Zu den weiteren Verbesserungen gehören die Umbenennung des XR-Interface in XRSystem, die Unterstützung von Squeeze-Eingabequellen (Griffbetätigung) und die Unterstützung der XRInputSource-Eigenschaft profiles.

Anforderungen an die Umgebung

Eine WebXR-kompatible Umgebung setzt ein sicher geladenes Dokument voraus. Ihr Dokument muss entweder lokal geladen worden sein (beispielsweise über eine URL wie http://localhost/…) oder beim Laden der Seite HTTPS verwenden. Auch der JavaScript-Code muss sicher geladen worden sein.

Wenn das Dokument nicht sicher geladen wurde, kommen Sie nicht weit: Die Eigenschaft navigator.xr ist dann gar nicht vorhanden. Das kann auch der Fall sein, wenn keine kompatible XR-Hardware verfügbar ist. In beiden Fällen müssen Sie darauf vorbereitet sein, dass die Eigenschaft xr fehlt, und entweder den Fehler angemessen behandeln oder eine Ausweichlösung anbieten.

Auf den WebXR-Polyfill zurückgreifen

Eine mögliche Ausweichlösung ist der WebXR-Polyfill der Immersive Web Working Group, die für die Standardisierung von WebXR zuständig ist. Der Polyfill stellt WebXR-Unterstützung für Browser ohne native WebXR-Unterstützung bereit und gleicht Unterschiede zwischen den Implementierungen in Browsern aus, die WebXR bereits unterstützen. Daher kann er manchmal auch dann nützlich sein, wenn WebXR nativ verfügbar ist.

Hier definieren wir eine Funktion getXR(), die das XRSystem-Objekt zurückgibt, nachdem sie bei Bedarf den Polyfill installiert hat. Dabei wird vorausgesetzt, dass der Polyfill zuvor mithilfe eines <script>-Tags eingebunden oder geladen wurde.

let webxrPolyfill = null;

function getXR(usePolyfill) {
  let tempXR;

  switch (usePolyfill) {
    case "if-needed":
      tempXR = navigator.xr;
      if (!tempXR) {
        webxrPolyfill = new WebXRPolyfill();
        tempXR = webxrPolyfill;
      }
      break;
    case "yes":
      webxrPolyfill = new WebXRPolyfill();
      tempXR = webxrPolyfill;
      break;
    case "no":
    default:
      tempXR = navigator.xr;
      break;
  }

  return tempXR;
}

const nativeXr = getXR("no"); // Get the native XRSystem object
const polyfilledXr = getXR("yes"); // Always returns an XRSystem from the polyfill
const xr = getXR("if-needed"); // Use the polyfill only if navigator.xr missing

Das zurückgegebene XRSystem-Objekt können Sie anschließend wie hier auf MDN dokumentiert verwenden. Die globale Variable webxrPolyfill dient lediglich dazu, eine Referenz auf den Polyfill zu behalten. So bleibt er verfügbar, bis Sie ihn nicht mehr benötigen. Wenn Sie die Variable auf null setzen, kann der Polyfill durch die Garbage Collection entfernt werden, sobald keine von ihm abhängigen Objekte ihn mehr verwenden.

Natürlich können Sie dies je nach Bedarf vereinfachen: Da Ihre Anwendung wahrscheinlich nicht häufig zwischen der Verwendung und Nichtverwendung des Polyfills wechselt, können Sie den Code auf den für Sie relevanten Fall beschränken.

Berechtigungen und Sicherheit

Für WebXR gelten verschiedene Sicherheitsmaßnahmen. Insbesondere erfordert die Verwendung des Modus immersive-vr, der die Sicht der nutzenden Person auf die Welt vollständig ersetzt, dass die Berechtigungsrichtlinie xr-spatial-tracking eingerichtet ist. Darüber hinaus muss das Dokument sicher sein und aktuell den Fokus haben. Schließlich müssen Sie requestSession() aus einem Handler für ein Benutzerereignis aufrufen, beispielsweise aus dem Handler für das Ereignis click.

Weitere Einzelheiten zur Absicherung und Verwendung von WebXR finden Sie im Artikel Berechtigungen und Sicherheit für WebXR.

Prüfen, ob der benötigte Sitzungstyp verfügbar ist

Bevor Sie eine neue WebXR-Sitzung erstellen, sollten Sie häufig zunächst prüfen, ob die Hardware und Software der nutzenden Person den gewünschten Darstellungsmodus unterstützen. So können Sie beispielsweise auch entscheiden, ob Sie eine immersive oder eine Inline-Darstellung verwenden.

Um festzustellen, ob ein bestimmter Modus unterstützt wird, rufen Sie die Methode isSessionSupported() von XRSystem auf. Sie gibt ein Promise zurück, das mit true erfüllt wird, wenn der angegebene Sitzungstyp verfügbar ist, andernfalls mit false.

const immersiveOK = await navigator.xr.isSessionSupported("immersive-vr");
if (immersiveOK) {
  // Create and use an immersive VR session
} else {
  // Create an inline session instead, or tell the user about the
  // incompatibility if inline is required
}

Sitzung erstellen und starten

Eine WebXR-Sitzung wird durch ein XRSession-Objekt repräsentiert. Um eine XRSession zu erhalten, rufen Sie die Methode requestSession() Ihres XRSystem auf. Sie gibt ein Promise zurück, das mit einer XRSession erfüllt wird, wenn die Sitzung erfolgreich eingerichtet werden konnte. Grundsätzlich sieht das so aus:

xr.requestSession("immersive-vr").then((session) => {
  xrSession = session;
  /* continue to set up the session */
});

Beachten Sie den Parameter, der in diesem Codebeispiel an requestSession() übergeben wird: immersive-vr. Dieser String gibt den Typ der WebXR-Sitzung an, die Sie einrichten möchten – hier ein vollständig immersives Virtual-Reality-Erlebnis. Es gibt drei Möglichkeiten:

immersive-vr

Eine vollständig immersive Virtual-Reality-Sitzung mit einem Headset oder einem ähnlichen Gerät, bei der die Umgebung der nutzenden Person vollständig durch die von Ihnen dargestellten Bilder ersetzt wird.

immersive-ar

Eine Augmented-Reality-Sitzung, bei der mithilfe eines Headsets oder eines ähnlichen Geräts Bilder zur realen Welt hinzugefügt werden. Diese Option wird noch nicht allgemein unterstützt, da sich die AR-Spezifikation noch verändert.

inline

Eine Darstellung der XR-Bilder auf dem Bildschirm innerhalb des Dokumentfensters.

Falls die Sitzung aus irgendeinem Grund nicht erstellt werden kann – etwa weil eine Richtlinie ihre Verwendung untersagt oder die nutzende Person die Berechtigung zur Verwendung des Headsets verweigert –, wird das Promise zurückgewiesen. Eine vollständigere Funktion, die eine WebXR-Sitzung startet und zurückgibt, könnte daher so aussehen:

async function createImmersiveSession(xr) {
  session = await xr.requestSession("immersive-vr");
  return session;
}

Diese Funktion gibt die neue XRSession zurück oder löst eine Ausnahme aus, wenn beim Erstellen der Sitzung ein Fehler auftritt.

Sitzung anpassen

Neben dem Darstellungsmodus kann die Methode requestSession() ein optionales Objekt mit Initialisierungsparametern entgegennehmen, um die Sitzung anzupassen. Derzeit lässt sich nur konfigurieren, welche Referenzräume zur Darstellung des Weltkoordinatensystems verwendet werden sollen. Sie können erforderliche oder optionale Referenzräume angeben, um eine Sitzung zu erhalten, die mit den von Ihnen benötigten oder bevorzugten Referenzräumen kompatibel ist.

Wenn Sie beispielsweise einen Referenzraum vom Typ unbounded benötigen, können Sie ihn als erforderliches Feature angeben. So stellen Sie sicher, dass die erhaltene Sitzung unbeschränkte Räume verwenden kann:

async function createImmersiveSession(xr) {
  session = await xr.requestSession("immersive-vr", {
    requiredFeatures: ["unbounded"],
  });
  return session;
}

Wenn Sie dagegen eine Inline-Sitzung benötigen und einen Referenzraum vom Typ local bevorzugen, können Sie Folgendes tun:

async function createInlineSession(xr) {
  session = await xr.requestSession("inline", {
    optionalFeatures: ["local"],
  });
  return session;
}

Die Funktion createInlineSession() versucht, eine Inline-Sitzung zu erstellen, die mit dem Referenzraum local kompatibel ist. Wenn Sie anschließend Ihren Referenzraum erstellen, können Sie zunächst einen lokalen Raum anfordern. Schlägt das fehl, können Sie auf einen Referenzraum vom Typ viewer zurückgreifen, den alle Geräte unterstützen müssen.

Neue Sitzung für die Verwendung vorbereiten

Sobald das von requestSession() zurückgegebene Promise erfolgreich erfüllt wurde, steht Ihnen eine verwendbare WebXR-Sitzung zur Verfügung. Nun können Sie die Sitzung vorbereiten und mit Ihren Animationen beginnen.

Zu den wichtigsten Schritten, die Sie zum Abschluss der Sitzungskonfiguration ausführen müssen oder möglicherweise ausführen möchten, gehören:

• Fügen Sie Handler für die Ereignisse hinzu, die Sie überwachen müssen. Dazu gehört wahrscheinlich mindestens end, damit Sie erkennen können, wann die Sitzung beendet ist.
• Wenn Sie XR-Eingabecontroller verwenden, überwachen Sie das Ereignis inputsourceschange, um das Hinzufügen und Entfernen von XR-Eingabecontrollern zu erkennen, sowie die verschiedenen Ereignisse für Select- und Squeeze-Aktionen.
• Möglicherweise möchten Sie das XRSystem-Ereignis devicechange überwachen, um über Änderungen an den verfügbaren immersiven Geräten informiert zu werden.
• Rufen Sie die Methode getContext() von HTMLCanvasElement auf dem Ziel-Canvas auf, um einen WebGL-Kontext für das Canvas zu erhalten, in das Sie Ihre Frames rendern möchten.
• Richten Sie Ihre WebGL-Daten und -Modelle ein und bereiten Sie das Rendern der Szene vor.
• Legen Sie den WebGL-Kontext als Quelle für das XR-System fest, indem Sie ein XRWebGLLayer erstellen und es als Wert der Eigenschaft baseLayer des renderState der Sitzung setzen.
• Berechnen Sie bei Bedarf die anfängliche Position und Skalierung Ihrer Objekte.
• Beginnen Sie den Frame-Rendering-Zyklus.

In einfacher Form könnte der Code für diese abschließende Einrichtung etwa so aussehen:

async function runSession(session) {
  session.addEventListener("end", onSessionEnd);

  const canvas = document.querySelector("canvas");
  const gl = canvas.getContext("webgl", { xrCompatible: true });

  // Set up WebGL data and such

  const worldData = loadGLPrograms(session, "world-data.xml");
  if (!worldData) {
    return null;
  }

  // Finish configuring WebGL

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

  // Start rendering the scene

  referenceSpace = await worldData.session.requestReferenceSpace("unbounded");
  worldData.referenceSpace = referenceSpace.getOffsetReferenceSpace(
    new XRRigidTransform(
      worldData.playerSpawnPosition,
      worldData.playerSpawnOrientation,
    ),
  );
  worldData.animationFrameRequestID =
    worldData.session.requestAnimationFrame(onDrawFrame);

  return worldData;
}

Für dieses Beispiel wird ein Objekt namens worldData erstellt, das Daten über die Welt und die Rendering-Umgebung zusammenfasst. Dazu gehören die XRSession selbst, alle zum Rendern der Szene in WebGL verwendeten Daten, der Weltreferenzraum und die von requestAnimationFrame() zurückgegebene ID.

Zunächst wird ein Handler für das Ereignis end eingerichtet. Anschließend wird das Rendering-Canvas abgerufen und eine Referenz auf seinen WebGL-Kontext ermittelt. Beim Aufruf von getContext() wird dabei die Option xrCompatible angegeben.

Danach werden die für den WebGL-Renderer erforderlichen Daten und Einstellungen vorbereitet. Anschließend wird WebGL so konfiguriert, dass der Framebuffer des WebGL-Kontexts für die XR-Darstellung verwendet wird. Dazu wird mit der Methode updateRenderState() von XRSession die Eigenschaft baseLayer des Renderzustands auf ein neu erstelltes XRWebGLLayer gesetzt, das den WebGL-Kontext enthält.

Rendern der Szene vorbereiten

Zu diesem Zeitpunkt ist die XRSession selbst vollständig konfiguriert, sodass wir mit dem Rendern beginnen können. Zunächst benötigen wir einen Referenzraum, in dem die Koordinaten der Welt angegeben werden. Den anfänglichen Referenzraum für die Sitzung erhalten wir durch Aufruf der Methode requestReferenceSpace() der XRSession. Beim Aufruf von requestReferenceSpace() geben wir den Namen des gewünschten Referenzraumtyps an – in diesem Fall unbounded. Je nach Bedarf könnten Sie ebenso local oder viewer angeben.

Der von requestReferenceSpace() zurückgegebene Referenzraum legt den Ursprung (0, 0, 0) in die Mitte des Raums. Das ist ideal, wenn der Blickpunkt der spielenden Person genau in der Mitte der Welt beginnt. Meistens ist das jedoch nicht der Fall. Dann rufen Sie getOffsetReferenceSpace() auf dem anfänglichen Referenzraum auf, um einen neuen Referenzraum zu erstellen, der das Koordinatensystem verschiebt. Dadurch liegt (0, 0, 0) an der Position der betrachtenden Person, und auch die Ausrichtung wird so verschoben, dass sie in die gewünschte Richtung zeigt. Als Eingabewert für getOffsetReferenceSpace() dient ein XRRigidTransform, das die Position und Ausrichtung der spielenden Person in den Standard-Weltkoordinaten beschreibt.

Nachdem wir den neuen Referenzraum erhalten und im Objekt worldData gespeichert haben, rufen wir die Methode requestAnimationFrame() der Sitzung auf. Damit planen wir einen Callback für den Zeitpunkt, an dem der nächste Animationsframe der WebXR-Sitzung gerendert werden soll. Der Rückgabewert ist eine ID, mit der wir die Anfrage später bei Bedarf abbrechen können. Daher speichern wir auch sie in worldData.

Zum Schluss wird das Objekt worldData an den aufrufenden Code zurückgegeben, damit der Hauptcode später auf die benötigten Daten zugreifen kann. Damit ist die Einrichtung abgeschlossen und die Anwendung befindet sich in der Rendering-Phase. Weitere Informationen finden Sie im Artikel Rendering und der WebXR-Callback für Animationsframes.

Hinweise zur praktischen Umsetzung

Dies war selbstverständlich nur ein Beispiel. Sie müssen nicht alles in einem worldData-Objekt speichern; Sie können die benötigten Informationen auf beliebige Weise verwalten. Möglicherweise benötigen Sie andere Informationen oder haben besondere Anforderungen, aufgrund derer Sie die Schritte anders oder in einer anderen Reihenfolge ausführen.

Ebenso hängt die konkrete Vorgehensweise beim Laden von Modellen und anderen Informationen sowie beim Einrichten Ihrer WebGL-Daten – Texturen, Vertex-Buffer, Shader und so weiter – stark von Ihren Anforderungen und den gegebenenfalls verwendeten Frameworks ab.

Wichtige Ereignisse für die Verwaltung der Sitzung

Im Verlauf Ihrer WebXR-Sitzung können verschiedene Ereignisse auftreten, die Änderungen am Sitzungszustand anzeigen oder Sie auf Maßnahmen hinweisen, die für den ordnungsgemäßen Betrieb der Sitzung erforderlich sind.

Änderungen des Sichtbarkeitszustands der Sitzung erkennen

Wenn sich der Sichtbarkeitszustand der XRSession ändert – etwa weil die Sitzung ausgeblendet oder angezeigt wird oder die nutzende Person einen anderen Kontext fokussiert –, empfängt die Sitzung ein Ereignis vom Typ visibilitychange.

session.onvisibilitychange = (event) => {
  switch (event.session.visibilityState) {
    case "hidden":
      myFrameRate = 10;
      break;
    case "blurred-visible":
      myFrameRate = 30;
      break;
    case "visible":
    default:
      myFrameRate = 60;
      break;
  }
};

Dieses Beispiel ändert eine Variable namens myFrameRate entsprechend dem jeweiligen Sichtbarkeitszustand. Vermutlich verwendet der Renderer diesen Wert, um während der Animationsschleife zu berechnen, wie häufig neue Frames gerendert werden sollen. Je stärker die Szene „aus dem Fokus“ gerät, desto seltener wird sie gerendert.

Zurücksetzungen von Referenzräumen erkennen

Beim Verfolgen der Position der nutzenden Person in der Welt können gelegentlich Unstetigkeiten oder Sprünge im nativen Ursprung auftreten. Am häufigsten geschieht dies, wenn die nutzende Person eine Neukalibrierung ihres XR-Geräts anfordert oder wenn die von der XR-Hardware empfangenen Tracking-Daten kurzzeitig gestört sind. In solchen Situationen springt der native Ursprung abrupt um die Entfernung und den Winkel, die nötig sind, um ihn wieder an der Position und Blickrichtung der nutzenden Person auszurichten.

In diesem Fall wird ein Ereignis vom Typ reset an den XRReferenceSpace der Sitzung gesendet. Die Eigenschaft transform des Ereignisses enthält ein XRRigidTransform, das die zur Neuausrichtung des nativen Ursprungs erforderliche Transformation beschreibt.

Eine weitere häufige Ursache für reset-Ereignisse ist eine Änderung der Geometrie eines begrenzten Referenzraums (bounded-floor), wie sie durch die Eigenschaft boundsGeometry von XRBoundedReferenceSpace beschrieben wird.

Weitere häufige Ursachen für die Zurücksetzung von Referenzräumen sowie zusätzliche Einzelheiten und Beispielcode finden Sie in der Dokumentation zum Ereignis reset.

Änderungen an den verfügbaren WebXR-Eingabegeräten erkennen

WebXR verwaltet eine Liste von Eingabegeräten, die für das jeweilige WebXR-System spezifisch ist. Dazu gehören beispielsweise Handcontroller, Kameras zur Bewegungserfassung, bewegungssensitive Handschuhe und andere Geräte, die Eingaben oder Rückmeldungen ermöglichen. Wenn die nutzende Person einen WebXR-Controller verbindet oder trennt, wird das Ereignis inputsourceschange an die XRSession gesendet. Sie können dann die nutzende Person über die Verfügbarkeit des Geräts informieren, dessen Eingaben überwachen, Konfigurationsoptionen anbieten oder andere erforderliche Schritte ausführen.

WebXR-Sitzung beenden

Wenn die VR- oder AR-Nutzung endet, endet auch die Sitzung. Eine XRSession kann aus verschiedenen Gründen beendet werden: etwa weil die Sitzung selbst ihre Beendigung veranlasst, wenn die nutzende Person ihr XR-Gerät ausschaltet, weil die nutzende Person auf eine Schaltfläche zum Beenden klickt oder aufgrund einer anderen für Ihre Anwendung relevanten Situation.

Im Folgenden wird erläutert, wie Sie das Beenden einer WebXR-Sitzung anfordern und erkennen, wann die Sitzung beendet wurde – unabhängig davon, ob dies auf Ihre Anforderung hin oder aus einem anderen Grund geschah.

Sitzung beenden

Um eine WebXR-Sitzung nach Gebrauch ordnungsgemäß zu beenden, rufen Sie ihre Methode end() auf. Sie gibt ein Promise zurück, anhand dessen Sie erkennen können, wann das Beenden abgeschlossen ist.

async function shutdownXR(session) {
  if (session) {
    await session.end();

    /* At this point, WebXR is fully shut down */
  }
}

Wenn shutdownXR() an den aufrufenden Code zurückkehrt, ist die WebXR-Sitzung vollständig und sicher beendet.

Falls beim Ende der Sitzung Arbeiten erforderlich sind, etwa das Freigeben von Ressourcen, sollten Sie diese in Ihrem Handler für das Ereignis end ausführen und nicht im Hauptteil Ihres Codes. So erfolgt die Bereinigung unabhängig davon, ob das Beenden automatisch oder manuell ausgelöst wurde.

Erkennen, wann die Sitzung beendet wurde

Wie bereits beschrieben, erkennen Sie das Ende einer WebXR-Sitzung daran, dass ein Ereignis vom Typ end an die XRSession gesendet wird. Das gilt unabhängig davon, ob Sie ihre Methode end() aufgerufen haben, die nutzende Person ihr Headset ausgeschaltet hat oder im XR-System ein nicht behebbarer Fehler aufgetreten ist.

session.onend = (event) => {
  /* the session has shut down */

  freeResources();
};

In diesem Beispiel wird beim Empfang des Ereignisses end nach dem Ende der Sitzung die Funktion freeResources() aufgerufen. Sie gibt die Ressourcen frei, die zuvor für die XR-Darstellung zugewiesen und/oder geladen wurden. Da freeResources() im Handler für das Ereignis end aufgerufen wird, erfolgt dies sowohl dann, wenn die nutzende Person eine Schaltfläche anklickt, die beispielsweise die oben gezeigte Funktion shutdownXR() ausführt, als auch dann, wenn die Sitzung aufgrund eines Fehlers oder aus einem anderen Grund automatisch endet.

Siehe auch

• WebXR Device API
• Grundlagen von WebXR
• Räumliches Tracking in WebXR
• Blickpunkte und Betrachtende: Kameras in WebXR simulieren
• Begrenzte Referenzräume verwenden
• Eingaben und Eingabequellen