Wie Sie WebVR auf WebXR-fähigen Browsern verwenden können.

Oculus Browser 7.0 und höher unterstützen standardmäßig WebXR, da sich diese API nun stabilisiert hat. WebXR ersetzt die WebVR-API, die zwar kein Standard ist, aber von vielen Browsern übernommen wurde. Wenn Oculus Browser und andere Browser mit aktiviertem WebXR veröffentlicht werden, funktionieren Anwendungen, die gegen WebVR erstellt wurden, möglicherweise nicht mehr, weil sie über Code verfügen, der frühere Versionen von WebXR unterstützt, was mit der aktuellen WebXR-Spezifikation nicht kompatibel ist. Dieses Dokument beschreibt einige Kompatibilitätsprobleme, die festgestellt wurden, und die Schritte, die Sie unternehmen können, um sicherzustellen, dass Ihre Webanwendungen weiterhin mit WebXR funktionieren.

Identifizierte Kompatibilitätsprobleme.

Einige ältere Versionen von beliebten VR-Web-Entwicklungsbibliotheken haben Kompatibilitätsprobleme. Browser-Erfahrungen, die mit WebXR möglicherweise wie erwartet funktionieren, sind enthalten.

• Ältere Versionen von ThreeJS, einer JavaScript-Bibliothek. Ältere Versionen von ThreeJS können das Vorhandensein von WebXR-Support in einem Browser erkennen und werden diese über WebVR nutzen, aber es kann Kompatibilitätsprobleme zwischen der im Browser verwendeten Version von WebXR und der von ThreeJS implementierten Version geben.
• A-Frame, ein Web-Framework zum Aufbau von Virtual-Reality-Erfahrungen, weil es auf ThreeJS basiert.

Möglicherweise gibt es noch andere Erfahrungen mit Kompatibilitätsproblemen, die noch nicht identifiziert worden sind.

Test auf Kompatibilität.

Um zu sehen, ob Ihre WebVR-Erfahrungen Kompatibilitätsprobleme haben, können Sie Ihre Web-Erfahrungen sowohl mit aktiviertem WebXR als auch mit aktiviertem WebVR testen.

Für Oculus Browser oder Google Chrome gehen Sie zu chrome://flags und aktivieren Sie WebVR und WebXR (in Oculus Browser 7.0 ist dies die Standardeinstellung). Andere moderne Browser sollten ähnliche Einstellungen haben.

Als nächstes laden Sie Ihre Erfahrung und versuchen, VR einzugeben. Wenn sich Ihre Erfahrung so verhält, wie Sie es erwarten, dann brauchen Sie wahrscheinlich keine Änderungen vorzunehmen. Sie sollten Ihre Erfahrung in mehreren Browsern ausprobieren.

Wenn es fehlschlägt, können die Ergebnisse je nach verwendetem Browser unterschiedlich ausfallen. Ein Fehler kann auftreten, wenn Sie eine ältere Version von ThreeJS verwenden:

• Der Button Enter VR erscheint nicht.
• Eine JS-Exception tritt auf, wenn Sie VR eingeben.

Für den beschriebenen Test wird WebXR-Support vom Framework erkannt und es kann einen Button Enter XR erscheinen, aber wenn Sie darauf klicken, erhalten Sie eine Exception.

Kompatibilitätsprobleme lösen.

Im Allgemeinen können Sie zur Behebung von Kompatibilitätsproblemen prüfen, ob eine neuere Version eines Frameworks oder Tools, das Sie in Ihrer Webanwendung verwenden, vorhanden ist und ob die neueren Versionen mit WebXR kompatibel sind. Falls ja, migrieren Sie auf die neuere Version.

Wenn es keine neuere Version gibt oder die neuere Version WebXR nicht vollständig unterstützt, können Sie möglicherweise den Open-Source-Code so ändern, dass dieser in den neuesten Browsern funktioniert.

ThreeJS Modifikationsbeispiel.

Für das im vorigen Abschnitt beschriebene Kompatibilitätsproblem mit ThreeJS können Sie eine von drei Dingen tun:

• Migrieren Sie Ihre Erfahrung auf ThreeJS r110 oder neuer. Dies könnte eine kompliziertere Lösung sein, da sich die API für ThreeJS zwischen den Versionen geändert hat. Eine Aktualisierung auf r110 (oder neuer) ist jedoch die empfohlene Lösung, da viele Browser den Support für WebVR möglicherweise bald entfernen werden.
• Entfernen Sie die WebXR-Remove Detection Logic aus der von Ihnen verwendeten ThreeJS-Version. In diesem Fall wird die Erfahrung auf WebVR zurückgreifen und wie erwartet funktionieren. Beachten Sie, dass der WebVR-Support in naher Zukunft aus dem Oculus Browser entfernt wird.
• Ändern Sie den WebXR-Support in der von Ihnen verwendeten Version von ThreeJS, um mit dem neuesten Browser-Support zu arbeiten. Dies beinhaltet Änderungen an den Dateien WebXRMnagaer.js und WebVR.js. Dies ist eine komplexere Umgehungslösung, die Kenntnisse über WebXR und die interne Logik von ThreeJS erfordert und in diesem Dokument nicht beschrieben wird.

Remove Detection Logic aus ThreeJS entfernen.

Im Folgenden wird ein Beispiel dafür gegeben, wie Sie die WebVXR Remove Detection Logic aus ThreeJS für eine benutzerdefinierte Version (die Sie bereits geklont und modifiziert haben) entfernen können oder wie Sie eine benutzerdefinierte Version erstellen und modifizieren können.

Entfernen Sie die Remove WebXR Detection Logic aus der benutzerdefinierten ThreeJS.

Die folgenden Schritte gelten, wenn Sie eine angepasste Version von ThreeJS selbst erstellen oder vordefinierte ThreeJS verwenden. Wenn Sie npm/yarn verwenden und das ThreeJS-Modul zur Erstellungszeit aus dem Original-Repo für Sie heruntergeladen wird, funktionieren die folgenden Schritte nicht.

So deaktivieren Sie den veralteten WebXRManager in älteren ThreeJS-Versionen:

• Wenn Sie ThreeJS erstellen, suchen Sie src/renders/WebGLRenderer.js
• Wenn Sie vorkompilierte ThreeJS, also eine einzelne ThreeJS-Datei, verwenden, suchen Sie nach der Funktion WebGLRenderer (in der Datei).

Dann:

• Suchen Sie nach dem WebXRManager und Sie sollten eine Zeile wie diese finden:

Oder finden Sie in neueren Versionen eine Zeile wie die folgende:

• Ersetzen Sie diese Zeilen durch:

VR-Taste eingeben:

• Wenn sich Ihre Erfahrung auf die WebVR.js-Logik für den Button VR eingeben stützt, dann:
  • Suchen Sie die Datei WebVR.js im Verzeichnis examples/js/VR. Alternativ kann diese Datei (oder Teile davon) in das Verzeichnis Ihres Projekts kopiert werden, wenn sie nicht Teil des vorkompilierten Moduls ThreeJS ist.
  • Finden Sie die Zeile, in der der Code entscheidet, ob die Taste Enter XR oder Enter VR verwendet wird, wie z.B. if („XR“ im Navigator).
  • Entfernen Sie das gesamte if („XR“…Anweisung bis zur Zeile `else if („getVRDisplays“ im Navigator) {`.
  • Ändern Sie die folgende Zeile, um die Taste „Enter VR“ anzuzeigen. Ändern Sie:

• zu

• Erstellen, testen und veröffentlichen Sie Ihre App.

Anpassen von ThreeJS und Entfernen der WebXR-Dectection Logic.

Wenn Ihre Anwendung mit npm oder yarn erstellt wurde und wenn ThreeJS nicht von Ihnen angepasst wurde, d.h. npm/yarn läst das Modul ThreeJS aus dem ursprünglichen Repository herunter, müssen Sie eine angepasste Version erstellen, die Sie ändern können. Die wichtigsten Schritte hierfür sind:

• Klonen Sie in GitHub die von Ihnen benötigte ThreeJS-Version.
• Nehmen Sie die im vorigen Abschnitt beschriebenen Änderungen vor.
• Erstellen Sie ThreeJS mit den folgenden Befehlen für npm:

oder für yarn:

1. Veröffentlichen Sie Ihre Version von ThreeJS in Ihrem eigenen GitHub-Repository (einschließlich der build/three.*-Dateien).
2. Schreiben Sie den Hash der letzten Übertragung auf. Der Hash wird ungefähr so aussehen: 1234d3a7a7a6d7f7399bafe7df681453d17d4c2c3c
3. Gehen Sie zu Ihrer Anwendung, suchen Sie die Dateien package.json / yarn.lock und ändern Sie sie so, dass sie auf die Version von ThreeJS mit dem Hash aus dem vorherigen Schritt verweisen.
4. Löschen Sie das node_modules-Verzeichnis und wiederholen Sie Schritt 3, Erstellen und Ausführen von ThreeJS. Hinweis, manchmal kann es erforderlich sein, den Cache für npm/yarn zu löschen, der sich normalerweise in den .npm- oder .yarn-Unterverzeichnissen Ihres Heimatverzeichnisses befindet.
5. Nachdem Sie den Installationsbefehl ausgeführt haben, sollten Sie überprüfen, ob node_modules/three die richtige Version von ThreeJS mit der geänderten Logik enthält.
6. Prüfen Sie, ob Sie die Logik für die im obigen Abschnitt beschriebenen Taste Enter VR modifizieren müssen.
7. Erstellen, testen, veröffentlichen, nochmals testen.

Vielen Dank für Ihren Besuch.