WebVR API

Alle an Ihren Computer angeschlossenen VR-Geräte werden von der Methode Navigator.getVRDisplays() zurückgegeben; jedes wird durch ein VRDisplay-Objekt repräsentiert.

VRDisplay ist die zentrale Schnittstelle der WebVR API — über ihre Eigenschaften und Methoden können Sie auf folgende Funktionen zugreifen:

• Abrufen nützlicher Informationen, um das Display zu identifizieren, welche Fähigkeiten es hat, welche Controller damit verbunden sind und mehr.
• Abrufen von Frame-Daten für jeden Frame, den Sie in einem Display präsentieren möchten, und Einreichung dieser Frames zur Anzeige in einer konsistenten Rate.
• Start und Stopp der Wiedergabe auf dem Display.

Eine typische (einfache) WebVR-App würde so funktionieren:

1. Mit Navigator.getVRDisplays() erhalten Sie eine Referenz zu Ihrem VR-Display.
2. Mit VRDisplay.requestPresent() beginnen Sie, auf dem VR-Display zu präsentieren.
3. Die spezielle Methode VRDisplay.requestAnimationFrame() von WebVR wird verwendet, um die Rendering-Schleife der App mit der richtigen Bildwiederholrate für das Display auszuführen.
4. In der Rendering-Schleife holen Sie die Daten ab, die benötigt werden, um den aktuellen Frame anzuzeigen (VRDisplay.getFrameData()), zeichnen die dargestellte Szene zweimal — einmal für die Ansicht in jedem Auge, und dann überreichen Sie die gerenderte Ansicht an das Display, um sie dem Benutzer zu zeigen (VRDisplay.submitFrame()).

Darüber hinaus fügt WebVR 1.1 eine Reihe von Ereignissen am Window-Objekt hinzu, um es JavaScript zu ermöglichen, auf Statusänderungen des Displays zu reagieren.

Die WebVR API, die nie als Web-Standard ratifiziert wurde, wurde zugunsten der WebXR API veraltet, die gut auf dem Weg ist, den Standardisierungsprozess abzuschließen. Daher sollten Sie versuchen, bestehenden Code zu aktualisieren, um stattdessen die neuere API zu verwenden. In der Regel sollte der Übergang ziemlich schmerzlos sein.

Zudem erfordert WebVR auf einigen Geräten und/oder Browsern, dass die Seite in einem sicheren Kontext über eine HTTPS-Verbindung geladen wird. Wenn die Seite nicht vollständig sicher ist, sind die WebVR-Methoden und -Funktionen nicht verfügbar. Sie können dies leicht testen, indem Sie prüfen, ob die Navigator-Methode getVRDisplays() NULL ist:

if (!navigator.getVRDisplays) {
  console.error("WebVR is not available");
} else {
  /* Use WebVR */
}

Viele WebVR-Hardware-Setups verfügen über Controller, die mit dem Headset verwendet werden. Diese können in WebVR-Apps über die Gamepad-API und insbesondere die Gamepad Extensions API verwendet werden, die API-Funktionen zum Zugriff auf Controller-Posen, haptische Aktuatoren und mehr hinzufügt.

VRDisplay

Stellt jedes von dieser API unterstützte VR-Gerät dar. Es enthält generische Informationen wie Geräte-IDs und Beschreibungen sowie Methoden zum Starten der Präsentation einer VR-Szene, zum Abrufen von Augenparametern und Display-Fähigkeiten und anderer wichtiger Funktionen.

VRDisplayCapabilities

Beschreibt die Fähigkeiten eines VRDisplay — seine Funktionen können verwendet werden, um die Fähigkeiten eines VR-Geräts zu testen, zum Beispiel ob es Positionsinformationen zurückgeben kann.

VRDisplayEvent

Repräsentiert das Ereignisobjekt von WebVR-bezogenen Ereignissen (siehe die unten aufgeführten Fensterereignisse).

VRFrameData

Stellt alle Informationen bereit, die benötigt werden, um einen einzelnen Frame einer VR-Szene zu rendern; erstellt durch VRDisplay.getFrameData().

VRPose

Repräsentiert den Positionszustand zu einem gegebenen Zeitstempel (einschließlich Orientierung, Position, Geschwindigkeit und Beschleunigung).

VREyeParameters

Bietet Zugriff auf alle Informationen, die erforderlich sind, um eine Szene für jedes Auge korrekt zu rendern, einschließlich Informationen zur Sichtfeld.

VRFieldOfView

Stellt ein Sichtfeld dar, das durch vier verschiedene Gradwerte beschrieben wird, die die Sicht von einem Mittelpunkt aus beschreiben.

VRLayerInit

Stellt eine Ebene dar, die in einem VRDisplay präsentiert werden soll.

VRStageParameters

Stellt die Werte dar, die den Bühnenbereich für Geräte beschreiben, die Raummaßstab-Erfahrungen unterstützen.

Die WebVR-API erweitert die folgenden APIs, indem sie die aufgeführten Funktionen hinzufügt.

Gamepad

Gamepad.displayId Schreibgeschützt

Gibt die VRDisplay.displayId des zugehörigen VRDisplay zurück — das VRDisplay, das die vom Gamepad gesteuerte Szene anzeigt.

Navigator

Navigator.activeVRDisplays Schreibgeschützt

Gibt ein Array zurück, das jedes VRDisplay-Objekt enthält, das gerade präsentiert (VRDisplay.isPresenting ist true).

Navigator.getVRDisplays()

Gibt ein Versprechen zurück, das mit einem Array von VRDisplay-Objekten aufgelöst wird, die alle verfügbaren VR-Displays repräsentieren, die an den Computer angeschlossen sind.

Fensterereignisse

vrdisplaypresentchange

Wird ausgelöst, wenn sich der Präsentationsstatus eines VR-Displays ändert — das heißt, vom Präsentieren zum Nichtpräsentieren oder umgekehrt.

vrdisplayconnect

Wird ausgelöst, wenn ein kompatibles VR-Display mit dem Computer verbunden wurde.

vrdisplaydisconnect

Wird ausgelöst, wenn ein kompatibles VR-Display vom Computer getrennt wurde.

vrdisplayactivate

Wird ausgelöst, wenn ein Display präsentiert werden kann.

vrdisplaydeactivate

Wird ausgelöst, wenn ein Display nicht mehr präsentiert werden kann.

Sie finden eine Reihe von Beispielen an diesen Orten:

• webvr-tests — sehr einfache Beispiele, die die MDN WebVR-Dokumentation begleiten.
• Carmel Starter Kit — einfache, gut kommentierte Beispiele, die mit Carmel, Facebooks WebVR-Browser, verbunden sind.
• WebVR.info-Beispiele — etwas ausführlichere Beispiele plus Quellcode
• A-Frame-Homepage — Beispiele, die die Verwendung von A-Frame zeigen

Diese API wurde in der alten WebVR API spezifiziert, die durch die WebXR Device API ersetzt wurde. Sie ist nicht mehr auf dem Weg, ein Standard zu werden.

Bis alle Browser die neuen WebXR-APIs implementiert haben, wird empfohlen, sich auf Frameworks wie A-Frame, Babylon.js oder Three.js oder auf ein Polyfill zu verlassen, um WebXR-Anwendungen zu entwickeln, die in allen Browsern funktionieren. Lesen Sie das Leitfaden von Meta zur Portierung von WebVR auf WebXR für weitere Informationen.

• A-Frame — Open-Source-Web-Framework zum Erstellen von VR-Erlebnissen.
• webvr.info — Aktuelle Informationen über WebVR, Browsereinstellungen und Community.
• threejs-vr-boilerplate — Eine nützliche Startervorlage zum Schreiben von WebVR-Apps.
• Web VR Polyfill — JavaScript-Implementierung von WebVR.
• WebVR Directory — Liste von qualitativ hochwertigen WebVR-Seiten.