Wenn Sie bereits mit 3D-Grafiken im Allgemeinen und WebGL im Besonderen vertraut sind, ist der nächste mutige Schritt in Richtung Mixed Reality - die Idee, künstliche Szenarien oder Objekte zusätzlich zur oder anstelle der realen Welt zu präsentieren - nicht allzu kompliziert. Bevor Sie beginnen können, Ihr Szenario für erweiterte oder virtuelle Realität zu rendern, müssen Sie die WebXR-Sitzung erstellen und einrichten, und Sie sollten auch wissen, wie man sie richtig beendet. In diesem Artikel erfahren Sie, wie Sie dies tun können.

Zugriff auf die WebXR API

Der Zugriff Ihrer App auf die WebXR API beginnt mit demXRSystem-Objekt. Dieses Objekt repräsentiert die gesamte WebXR-Gerätesuite, die Ihnen durch die auf der Benutzerhardware verfügbaren Hardware und Treiber zur Verfügung steht. Ein globalesXRSystem-Objekt steht Ihrem Dokument über dieNavigator-Eigenschaftxr zur Verfügung, die dasXRSystem-Objekt zurückgibt, wenn geeignete XR-Hardware basierend auf der verfügbaren Hardware und der Umgebung Ihres Dokuments verfügbar ist.

Der einfachste Code, der dasXRSystem-Objekt abruft, sieht folgendermaßen aus:

const xr = navigator.xr;

Der Wert vonxr istnull oderundefined, wenn WebXR nicht verfügbar ist.

Verfügbarkeit von WebXR

Als neue und sich noch in der Entwicklung befindliche API ist die Unterstützung von WebXR auf bestimmte Geräte und Browser beschränkt; und selbst auf diesen ist sie möglicherweise nicht standardmäßig aktiviert. Es können jedoch Optionen verfügbar sein, um mit WebXR zu experimentieren, auch wenn Sie kein kompatibles System haben.

WebXR-Polyfill

Das Team, das die WebXR-Spezifikation entwirft, hat einWebXR-Polyfill veröffentlicht, das Sie verwenden können, um WebXR in Browsern zu simulieren, die keine Unterstützung für die WebXR-APIs haben. Wenn der Browser die ältereWebVR API unterstützt, wird diese verwendet. Andernfalls fällt das Polyfill auf eine Implementierung zurück, die Googles Cardboard VR API verwendet.

Das Polyfill wird zusammen mit der Spezifikation gepflegt und wird laufend mit der Spezifikation aktualisiert. Zusätzlich wird es aktualisiert, um die Kompatibilität mit Browsern zu erhalten, wenn sich deren Unterstützung für WebXR und andere damit verbundene Technologien im Laufe der Zeit ändert.

Stellen Sie sicher, dass Sie die Readme-Datei sorgfältig lesen; das Polyfill gibt es in mehreren Versionen, je nachdem, welcher Grad an Kompatibilität mit neueren JavaScript-Features Ihre Zielbrowser bieten.

Verwendung des Emulators

Obwohl es etwas unhandlich im Vergleich zur Verwendung eines tatsächlichen Headsets ist, ermöglicht dies Experimente mit und die Entwicklung von WebXR-Code auf einem Desktop-Computer, wo WebXR normalerweise nicht verfügbar ist. Es ermöglicht auch einige grundlegende Tests, bevor Ihr Code auf einem echten Gerät ausgeführt wird. Beachten Sie jedoch, dass der Emulator noch nicht vollständig alle WebXR-APIs emuliert, sodass Sie möglicherweise auf unerwartete Probleme stoßen. Lesen Sie die Readme-Datei sorgfältig durch und machen Sie sich mit den Einschränkungen vertraut, bevor Sie beginnen.

Wichtig: Sie solltenimmer Ihren Code auf tatsächlicher AR- und/oder VR-Hardware testen, bevor Sie ein Produkt freigeben oder versenden! Emulierte, simulierte oder polyfüllte Umgebungen sind kein angemessener Ersatz für tatsächliche Tests auf physischen Geräten.

Herunterladen der Erweiterung

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

• Google Chrome
• Mozilla Firefox

DerQuellcode der Erweiterung ist ebenfalls auf GitHub verfügbar.

Probleme und Hinweise zum Emulator

Obwohl dies nicht der Ort für einen vollständigen Artikel über die Erweiterung ist, gibt es einige spezifische Dinge, die erwähnenswert sind.

Version 0.4.0 der Erweiterung wurde am 26. März 2020 angekündigt. Sie führte Unterstützung für erweiterte Realität (AR) durch dasWebXR AR Module ein, das sich einem stabilen Zustand nähert. Dokumentation für AR wird in Kürze hier auf MDN verfügbar sein.

Weitere Verbesserungen umfassen die Aktualisierung des Emulators zur Umbenennung desXR-Interface inXRSystem, die Einführung von Unterstützung für Squeeze (Grip)-Eingabequellen und das Hinzufügen von Unterstützung für dieXRInputSource-Eigenschaftprofiles.

Kontextanforderungen

Eine WebXR-kompatible Umgebung beginnt mit einem sicher geladenen Dokument. Ihr Dokument muss entweder von der lokalen Festplatte (zum Beispiel durch die Verwendung einer URL wiehttp://localhost/…) oder überHTTPS beim Laden der Seite geladen worden sein. Der JavaScript-Code muss ebenfalls sicher geladen worden sein.

Wenn das Dokument nicht sicher geladen wurde, kommen Sie nicht weit. Dienavigator.xr-Eigenschaft existiert nicht einmal, wenn das Dokument nicht sicher geladen wurde. Dies kann auch der Fall sein, wenn keine kompatible XR-Hardware verfügbar ist. In jedem Fall müssen Sie auf das Fehlen einerxr-Eigenschaft vorbereitet sein und entweder den Fehler anmutig behandeln oder eine Art von Alternativlösung bereitstellen.

Rückgriff auf das WebXR-Polyfill

Eine Rückfalloption ist dasWebXR-Polyfill, bereitgestellt von derImmersive Web Working Group, die für den WebXR-Standardisierungsprozess verantwortlich ist. DasPolyfill bietet Unterstützung für WebXR in Browsern, die keine native WebXR-Unterstützung haben, und beseitigt Inkonsistenzen zwischen Implementierungen in den Browsern, die dies tun. Es kann daher manchmal auch nützlich sein, selbst wenn WebXR nativ verfügbar ist.

Hier definieren wir einegetXR()-Funktion, die dasXRSystem-Objekt zurückgibt, nachdem optional das Polyfill installiert wurde, vorausgesetzt, dass das Polyfill unter Verwendung eines vorherigen<script>-Tags enthalten 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 objectconst polyfilledXr = getXR("yes"); // Always returns an XRSystem from the polyfillconst xr = getXR("if-needed"); // Use the polyfill only if navigator.xr missing

Das zurückgegebeneXRSystem-Objekt kann dann gemäß der hier auf MDN bereitgestellten Dokumentation verwendet werden. Die globale VariablewebxrPolyfill wird nur verwendet, um eine Referenz auf das Polyfill zu behalten, um sicherzustellen, dass es verfügbar bleibt, bis Sie es nicht mehr benötigen. Das Setzen aufnull signalisiert, dass das Polyfill von der Garbage Collection entfernt werden kann, wenn keine Objekte mehr darauf zugreifen.

Natürlich kann man dies je nach Bedarf vereinfachen; da Ihre App wahrscheinlich nicht oft zwischen der Verwendung des Polyfill hin- und herwechseln wird, können Sie dies auf den spezifischen Fall vereinfachen, den Sie benötigen.

Berechtigungen und Sicherheit

Es gibt eine Reihe von Sicherheitsmaßnahmen rund um WebXR. Als erstes erfordert die Verwendung desimmersive-vr-Modus, der die Sicht des Benutzers auf die Welt vollständig ersetzt, dass diexr-spatial-trackingBerechtigungsrichtlinie aktiviert ist. Darüber hinaus muss das Dokument sicher sein und derzeit den Fokus haben. Schließlich müssen SierequestSession() von einem Benutzerereignishandler aus aufrufen, wie beispielsweise dem Handler für dasclick-Ereignis.

Für genauere Informationen zur Sicherung von WebXR-Aktivitäten und -Nutzung lesen Sie den ArtikelPermissions and security for WebXR.

Bestätigen, dass der benötigte Sitzungstyp verfügbar ist

Bevor Sie versuchen, eine neue WebXR-Sitzung zu erstellen, ist es oft ratsam zunächst zu prüfen, ob die Benutzerhardware und -software den Präsentationsmodus unterstützen, den Sie verwenden möchten. Dies kann auch verwendet werden, um zu bestimmen, ob eine immersive oder eine Inline-Präsentation verwendet werden soll.

Um herauszufinden, ob ein bestimmter Modus unterstützt wird, rufen Sie die MethodeisSessionSupported() desXRSystem auf. Dies gibt ein Promise zurück, das auftrue aufgelöst wird, wenn der angegebene Sitzungstyp verfügbar ist, oder andernfalls auffalse.

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}

Erstellen und Starten der Sitzung

Eine WebXR-Sitzung wird durch einXRSession-Objekt dargestellt. Um eineXRSession zu erhalten, rufen Sie die MethoderequestSession() IhresXRSystem auf. Diese gibt ein Promise zurück, das mit einerXRSession aufgelöst wird, falls es erfolgreich eine erstellen kann. 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 Codeausschnitt anrequestSession() übergeben wird:immersive-vr. Dieser String gibt den Typ der WebXR-Sitzung an, die Sie einrichten möchten - in diesem Fall eine vollständig immersive Virtual-Reality-Erfahrung. Es gibt drei Optionen:

immersive-vr

Eine vollständig immersive Virtual-Reality-Sitzung unter Verwendung eines Headsets oder ähnlichen Geräts, das die Welt um den Benutzer vollständig durch die von Ihnen präsentierten Bilder ersetzt.

immersive-ar

Eine Augmented-Reality-Sitzung, in der Bilder zur realen Welt hinzugefügt werden, unter Verwendung eines Headsets oder einer ähnlichen Apparatur.Diese Option wird noch nicht weitgehend unterstützt, da die AR-Spezifikation noch im Fluss ist.

inline

Eine On-Screen-Präsentation der XR-Bilder innerhalb des Kontextes des Dokumentfensters.

Wenn die Sitzung aus irgendeinem Grund nicht erstellt werden konnte - wie zum Beispiel, dass die Feature-Policy ihre Verwendung nicht erlaubt oder der Benutzer die Erlaubnis zur Verwendung des Headsets verweigert - wird das Promise abgelehnt. Eine vollständigere Funktion, die eine WebXR-Sitzung startet und zurückgibt, könnte so aussehen:

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

Diese Funktion gibt die neueXRSession zurück oder wirft eine Ausnahme, wenn beim Erstellen der Sitzung ein Fehler auftritt.

Anpassen der Sitzung

Zusätzlich zum Anzeigemodus kann die MethoderequestSession() ein optionales Objekt mit Initialisierungsparametern zur Anpassung der Sitzung enthalten. Derzeit ist der einzige konfigurierbare Aspekt der Sitzung, welcher der Referenzräume zur Darstellung des Koordinatensystems der Welt verwendet werden soll. Sie können entweder erforderliche oder optionale Referenzräume angeben, um eine mit den benötigten oder bevorzugten Referenzräumen kompatible Sitzung zu erhalten.

Zum Beispiel, wenn Sie einenunbounded Referenzraum benötigen, können Sie dies als ein erforderliches Feature angeben, um sicherzustellen, dass die Sitzung, die Sie erhalten, unbegrenzte Räume verwenden kann:

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

Andererseits, wenn Sie eineinline-Sitzung benötigen und einenlocal Referenzraum bevorzugen, können Sie dies tun:

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

DiesecreateInlineSession()-Funktion versucht, eine Inline-Sitzung zu erstellen, die mit demlocal Referenzraum kompatibel ist. Wenn Sie bereit sind, Ihren Referenzraum zu erstellen, können Sie versuchen, einen lokalen Raum zu verwenden, und wenn dies fehlschlägt, auf einenviewer Referenzraum zurückgreifen, den alle Geräte unterstützen müssen.

Vorbereiten der neuen Sitzung auf die Nutzung

Sobald das vonrequestSession() zurückgegebene Promise erfolgreich aufgelöst ist, wissen Sie, dass Sie eine nutzbare WebXR-Sitzung in der Hand haben. Sie können dann mit der Vorbereitung der Sitzung für die Nutzung fortfahren und Ihre Animationen beginnen.

Die wichtigsten Dinge, die Sie tun müssen (oder möglicherweise müssen), um die Konfiguration Ihrer Sitzung abzuschließen, umfassen:

• Hinzufügen von Hand

• ler für die Ereignisse, die Sie beobachten müssen. Dies umfasst höchstwahrscheinlich dasend mindestens, damit Sie erkennen können, wann die Sitzung beendet ist.

• Wenn Sie XR-Eingabesteuerungen verwenden, beobachten Sie dasinputsourceschange-Ereignis, um die Hinzufügung oder Entfernung von XR-Eingabesteuerungen zu erkennen, sowie die verschiedenenAuswahl- und Greifaktionen.

• Sie möchten möglicherweise auf dasXRSystem-Ereignisdevicechange achten, damit Sie benachrichtigt werden, wenn sich die Menge der verfügbaren immersiven Geräte ändert.

• Abrufen eines WebGL-Kontextes für die Leinwand, auf die Sie Ihre Frames rendern möchten, indem Sie die MethodegetContext() auf dem Zielkontext desHTMLCanvasElement aufrufen.

• Einrichten Ihrer WebGL-Daten und -Modelle und Vorbereitung zum Rendern der Szene.

• Setzen Sie den WebGL-Kontext als Quelle für das XR-System, indem Sie eineXRWebGLLayer erstellen und den Wert der SitzungrenderState-EigenschaftbaseLayer setzen.

• Berechnungen für die anfängliche Position und Skalierung Ihrer Objekte nach Bedarf durchführen.

• Beginnen Sie denFrame-Rendering-Zyklus.

In seiner grundlegendsten Form könnte der Code für diese abschließende Einrichtung wie folgt 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 die Zwecke dieses Beispiels wird ein Objekt namensworldData erstellt, um Informationen über die Welt und die Render-Umgebung zu kapseln. Dies umfasst dieXRSession selbst, alle Daten, die zum Rendern der Szene in WebGL verwendet werden, den Weltreferenzraum und die vonrequestAnimationFrame() zurückgegebene ID.

Zuerst wird ein Handler für dasend-Ereignis eingerichtet. Dann wird die Rendering-Leinwand abgerufen und eine Referenz auf ihren WebGL-Kontext abgerufen, und zwar unter Angabe der OptionxrCompatible, wenngetContext() aufgerufen wird.

Als nächstes werden alle für den WebGL-Renderer benötigten Daten und Einrichtungsarbeiten durchgeführt, bevor WebGL so konfiguriert wird, dass es den Framebuffer des WebGL-Kontextes als seinen eigenen Framebuffer verwendet. Dies wird mit der MethodeupdateRenderState() derXRSession durchgeführt, um den RenderstatusbaseLayer auf eine neu erstellteXRWebGLLayer zu setzen, die den WebGL-Kontext kapselt.

Vorbereitung auf das Rendern der Szene

An diesem Punkt ist dieXRSession selbst vollständig konfiguriert, sodass wir mit dem Rendern beginnen können. Zuerst benötigen wir einen Referenzraum, in dem die Koordinaten für die Welt angegeben werden. Wir können den anfänglichen Referenzraum für die Sitzung erhalten, indem wir die MethoderequestReferenceSpace() derXRSession aufrufen. Wir geben beim Aufruf vonrequestReferenceSpace() den Namen des gewünschten Referenzraumtyps an; in diesem Fallunbounded. Ebenso könntelocal oderviewer angegeben werden, je nach Ihren Bedürfnissen.

Der vonrequestReferenceSpace() zurückgegebene Referenzraum platziert den Ursprung (0, 0, 0) in der Mitte des Raumes. Dies ist großartig, wenn der Standpunkt Ihres Spielers genau in der Mitte der Welt beginnt. Aber höchstwahrscheinlich ist das überhaupt nicht der Fall. Wenn dies so ist, rufen SiegetOffsetReferenceSpace() am anfänglichen Referenzraum auf, um einenneuen Referenzraum zu erstellender das Koordinatensystem verschiebt, sodass (0, 0, 0) an der Position des Betrachters im Raum liegt und die Ausrichtung entsprechend der gewünschten Richtung verschoben wird. Der Eingabewert ingetOffsetReferenceSpace() ist eineXRRigidTransform, die die Position und Orientierung des Spielers in den Standardweltkoordinaten kapselt.

Mit dem neuen Referenzraum in der Hand und sicher in demworldData-Objekt gespeichert, rufen wir die MethoderequestAnimationFrame() der Sitzung auf, um einen Rückruf zu planen, der ausgeführt wird, wenn es Zeit ist, den nächsten Animationsrahmen für die WebXR-Sitzung zu rendern. Der zurückgegebene Wert ist eine ID, die später verwendet werden kann, um die Anfrage bei Bedarf abzubrechen, sodass wir diesen ebenfalls inworldData speichern.

Am Ende wird dasworldData-Objekt an den Aufrufer zurückgegeben, damit der Hauptcode die Daten bei Bedarf später referenzieren kann. An diesem Punkt ist der Einrichtungsprozess abgeschlossen und wir haben die Renderphase unserer Anwendung betreten. Um mehr über das Rendern zu lernen, sehen Sie sich den ArtikelRendering und der WebXR-Frame-Animationsrückruf an.

Zu den betrieblichen Details

Offensichtlich war dies nur ein Beispiel. Sie benötigen keinworldData-Objekt, um alles zu speichern; Sie können die Informationen, die Sie aufbewahren müssen, auf jede beliebige Weise speichern. Sie benötigen möglicherweise unterschiedliche Informationen oder haben spezifische Anforderungen, die dazu führen, dass Sie Dinge anders oder in einer anderen Reihenfolge tun.

Ebenso variiert die spezifische Methodik, die Sie zum Laden von Modellen und anderen Informationen sowie zum Einrichten Ihrer WebGL-Daten verwenden - Texturen, Vertex-Buffer, Shader und so weiter - erheblich, je nach Ihren Bedürfnissen, welchen Frameworks Sie verwenden oder dergleichen.

Wichtige Sitzungswartungsereignisse

Im Laufe Ihrer WebXR-Sitzung können Sie eine Reihe von Ereignissen erhalten, die auf Änderungen am Zustand der Sitzung hinweisen oder Sie über Dinge informieren, die Sie tun müssen, um die Sitzung ordnungsgemäß laufen zu lassen.

Erkennen von Änderungen am Sichtbarkeitsstatus der Sitzung

Wenn sich der Sichtbarkeitsstatus derXRSession ändert - wie z.B. wenn die Sitzung ausgeblendet oder angezeigt wird oder wenn der Benutzer einen anderen Kontext fokussiert hat - erhält die Sitzung einvisibilitychange-Ereignis.

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 VariablemyFrameRate in Abhängigkeit vom Sichtbarkeitsstatus, während er sich ändert. Es wird angenommen, dass der Renderer diesen Wert verwendet, um zu berechnen, wie oft neue Frames gerendert werden sollen, während die Animationsschleife fortschreitet, und somit weniger häufig gerendert wird, je „unscharf“ die Szene wird.

Erkennen von Aktualisierungen des Referenzraums

Gelegentlich können während der Verfolgung der Position des Benutzers in der Welt Diskontinuitäten oder Sprünge imnativen Ursprung auftreten. Die häufigsten Szenarien, in denen dies geschieht, sind, wenn der Benutzer eine Neukalibrierung seines XR-Geräts anfordert oder wenn eine Unterbrechung oder ein Fehler im Empfang des Verfolgungsdatenflusses von der XR-Hardware auftritt. Diese Situationen lassen den nativen Ursprung abrupt um die Entfernung und den Richtungswinkel springen, die erforderlich sind, um den nativen Ursprung wieder in Übereinstimmung mit der Benutzerposition und der Blickrichtung zu bringen.

Wenn dies geschieht, wird einreset-Ereignis an denXRReferenceSpace der Sitzung gesendet. Dietransform-Eigenschaft des Ereignisses ist eineXRRigidTransform, die die notwendige Transformation zur Realignierung des nativen Ursprungs beschreibt.

Ein weiterer häufiger Grund fürreset-Ereignisse ist, wenn ein begrenzter Referenzraum (bounded-floor) seine Geometrie ändert, wie sie durch die EigenschaftboundsGeometry desXRBoundedReferenceSpace spezifiziert wird.

Für häufigere Ursachen für Referenzraum-Resets und weitere Details und Beispielcode lesen Sie die Dokumentation für dasreset-Ereignis.

Erkennen von Änderungen an der verfügbaren Menge an WebXR-Eingabegeräten

WebXR führt eine Liste von Eingabegeräten, die spezifisch für das WebXR-System ist. Diese Geräte umfassen Dinge wie Handcontroller, bewegungssensitive Kameras, bewegungsempfindliche Handschuhe und andere Feedback-Geräte. Wenn der Benutzer ein WebXR-Controller-Gerät anschließt oder trennt, wird dasinputsourceschange-Ereignis an dieXRSession gesendet. Dies ist eine Gelegenheit, um den Benutzer über die Verfügbarkeit des Geräts zu informieren, es auf Eingaben zu überwachen, Konfigurationsoptionen anzubieten oder was auch immer Sie damit tun müssen.

Beenden der WebXR-Sitzung

Wenn die VR- oder AR-Sitzung des Benutzers zu Ende geht, endet die Sitzung. Das Herunterfahren einerXRSession kann entweder dadurch erfolgen, dass die Sitzung selbst entscheidet, dass es Zeit zum Beenden ist (zum Beispiel, wenn der Benutzer sein XR-Gerät ausschaltet), weil der Benutzer eine Schaltfläche zum Beenden der Sitzung gedrückt hat oder in einem anderen, für Ihre Anwendung geeigneten Fall.

Hier besprechen wir, wie man sowohl das Herunterfahren der WebXR-Sitzung anfordert als auch wie man erkennt, wann die Sitzung beendet ist, sei es durch Ihre Anforderung oder auf andere Weise.

Die Sitzung beenden

Um die WebXR-Sitzung sauber zu beenden, wenn Sie damit fertig sind, sollten Sie die Methodeend() der Sitzung aufrufen. Diese gibt einPromise zurück, das Sie verwenden können, um zu erfahren, wann das Herunterfahren abgeschlossen ist.

async function shutdownXR(session) {  if (session) {    await session.end();    /* At this point, WebXR is fully shut down */  }}

WennshutdownXR() zu seinem Aufrufer zurückkehrt, ist die WebXR-Sitzung vollständig und sicher heruntergefahren.

Wenn Sie Arbeiten haben, die beim Beenden der Sitzung erledigt werden müssen, wie das Freigeben von Ressourcen und dergleichen, sollten Sie diese Arbeiten in Ihremend-Ereignishandler erledigen, anstatt in Ihrem Hauptcodekörper. So behandeln Sie die Bereinigung unabhängig davon, ob das Herunterfahren automatisch oder manuell ausgelöst wurde.

Erkennen, wann die Sitzung beendet ist

Wie bereits festgestellt, können Sie erkennen, wann die WebXR-Sitzung beendet ist - sei es, weil Sie die Methodeend() aufgerufen haben, der Benutzer sein Headset ausgeschaltet hat oder ein nicht behebbarer Fehler im XR-System aufgetreten ist - indem Sie auf dasend-Ereignis achten, das an dieXRSession gesendet wird.

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

Hier ruft, wenn die Sitzung beendet ist und dasend-Ereignis empfangen wird, einefreeResources()-Funktion auf, um die zuvor zugewiesenen und/oder geladenen Ressourcen zur Behandlung der XR-Präsentation freizugeben. IndemfreeResources() imend-Ereignishandler aufgerufen wird, wird es aufgerufen, sowohl wenn der Benutzer auf eine Schaltfläche klickt, die ein Herunterfahren auslöst, wie z.B. durch das Aufrufen der oben gezeigten FunktionshutdownXR(),als auch wenn die Sitzung automatisch endet, sei es durch einen Fehler oder aus einem anderen Grund.

Siehe auch

• WebXR Device API
• Grundlagen von WebXR
• Räumliche Verfolgung in WebXR
• Blickpunkte und Betrachter: Simulation von Kameras in WebXR
• Verwendung begrenzter Referenzräume
• Eingaben und Eingabequellen