WebXR Anwendungslebenszyklus
In diesem Leitfaden erhalten wir einen Überblick darüber, was bei der Erstellung und Steuerung einer WebXR-Anwendung beteiligt ist, ohne dabei auf die Codeebene im Detail einzugehen. Dies dient als Vorbereitung für die nächsten Artikel in diesen WebXR-Leitfäden, die das Starten und Beenden einer WebXR-Sitzung, Geometrie, Kamerasimulationen, räumliches Tracking und mehr abdecken.
Überblick über den Lebenszyklus
Die meisten Anwendungen, die WebXR verwenden, folgen einem ähnlichen Gesamtentwurfsmuster:
-
Überprüfen Sie, ob das Gerät und der Browser des Benutzers in der Lage sind, die von Ihnen bereitgestellte XR-Erfahrung darzustellen.
- Stellen Sie sicher, dass die WebXR API verfügbar ist; wenn
navigator.xr
undefiniert ist, können Sie davon ausgehen, dass der Browser und/oder das Gerät des Benutzers WebXR nicht unterstützt. Wenn es nicht unterstützt wird, deaktivieren Sie jede Benutzeroberfläche, die zum Aktivieren von XR-Funktionen verwendet wird, und brechen Sie alle Versuche ab, den XR-Modus zu betreten. - Rufen Sie
navigator.xr.isSessionSupported()
auf und spezifizieren Sie den WebXR-Erfahrungsmodus, den Sie bereitstellen möchten:inline
,immersive-vr
oderimmersive-ar
, um festzustellen, ob der Sitzungsmodus, den Sie bereitstellen möchten, verfügbar ist. - Wenn der gewünschte Sitzungsmodus verfügbar ist, stellen Sie die geeignete Schnittstelle für den Benutzer bereit, um diesen zu aktivieren.
- Stellen Sie sicher, dass die WebXR API verfügbar ist; wenn
-
Wenn der Benutzer die Aktivierung der WebXR-Funktionalität durch Interaktion mit der oben aktivierten Benutzeroberfläche anfordert, beantragen Sie eine
XRSession
im gewünschten Modus. Dies geschieht durch Aufruf vonnavigator.xr.requestSession()
, wobei erneut die Zeichenkette angegeben wird, die den zu aktivierenden Modus kennzeichnet:inline
,immersive-vr
oderimmersive-ar
. -
Wenn das von
requestSession()
zurückgegebene Versprechen erfüllt wird, verwenden Sie die neueXRSession
, um die WebXR-Sitzung während der gesamten WebXR-Erfahrung zu verwalten. Dies umfasst die Verwaltung von Eingaben, Animationen und Rendering.- Rufen Sie die Methode
requestAnimationFrame()
vonXRSession
auf, um das Rendern des ersten Frames für das XR-Gerät zu planen. - Wenn Ihre Szene komplex ist, sollten Sie in Betracht ziehen, einen
Worker
zu erstellen—oder einen zu verwenden, den Sie zuvor zu diesem Zweck erstellt haben—, um die für das Rendern jedes Frames erforderlichen Berechnungen durchzuführen. Dies verringert die Wahrscheinlichkeit, dass der Renderprozess die App spürbar verzögert. - Jeder
requestAnimationFrame()
-Rückruf sollte die Informationen zu den Objekten im 3D-Raum verwenden, um den Frame mit WebGL zu rendern. - Jedes Mal, wenn der Rückruf aufgerufen wird, sollte er
requestAnimationFrame()
erneut aufrufen, um den Browser darüber zu informieren, dass der Rückruf erneut ausgeführt werden muss, wenn es Zeit ist, den nächsten Frame zu rendern.
- Rufen Sie die Methode
-
Wenn die Zeit gekommen ist (zum Beispiel wenn der Benutzer Ihre App verlässt oder von Ihrer Seite weg navigiert), beenden Sie die XR-Sitzung; andernfalls setzen Sie die Schleife fort, bis der Benutzer sich entscheidet, den XR-Modus zu beenden.
- Um die XR-Sitzung selbst zu beenden, rufen Sie
XRSession.end()
auf. - Fügen Sie einen Handler für das
end
Ereignis vonXRSession
hinzu, um informiert zu werden, wenn die Sitzung beendet wird, unabhängig davon, ob Ihr Code, der Benutzer oder der Browser die Beendigung der Sitzung initiiert hat.
- Um die XR-Sitzung selbst zu beenden, rufen Sie