WebVR API

Konzepte und Verwendung

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

VRDisplay ist das zentrale Interface in der WebVR API – über seine 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 Bildwiedergabedaten für jedes Bild, das Sie auf einem Display anzeigen möchten, und Einreichen dieser Bilder zur konsistenten Wiedergabe.
• Starten und Stoppen der Darstellung auf dem Display.

Eine typische (einfache) WebVR-App funktioniert folgendermaßen:

1. Navigator.getVRDisplays() wird verwendet, um einen Verweis auf Ihr VR-Display zu erhalten.
2. VRDisplay.requestPresent() wird verwendet, um die Darstellung auf dem VR-Display zu starten.
3. Die dedizierte WebVR-Methode VRDisplay.requestAnimationFrame() wird verwendet, um die Rendering-Schleife der App mit der richtigen Bildwiederholfrequenz für das Display auszuführen.
4. Innerhalb der Rendering-Schleife holen Sie sich die Daten, die zum Anzeigen des aktuellen Bildes notwendig sind (VRDisplay.getFrameData()), zeichnen die dargestellte Szene zweimal – einmal für jeden Blickwinkel – und reichen die gerenderte Ansicht zur Anzeige an das Display ein (VRDisplay.submitFrame()).

Zusätzlich 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.

Verfügbarkeit der API

Die WebVR-API, die nie als Webstandard ratifiziert wurde, wurde zugunsten der WebXR API veraltet, die sich auf dem Weg zur Fertigstellung des Standardisierungsprozesses befindet. Daher sollten Sie versuchen, vorhandenen Code auf die neuere API umzustellen. Im Allgemeinen sollte der Übergang relativ schmerzlos sein.

Zusätzlich erfordert WebVR bei manchen 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 einfach testen, indem Sie überprüfen, ob die Navigator-Methode getVRDisplays() NULL ist:

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

Verwendung von Controllern: Kombinieren von WebVR mit der Gamepad-API

Viele WebVR-Hardwarekonfigurationen verfügen über Controller, die mit dem Headset einhergehen. Diese können in WebVR-Apps über die Gamepad API genutzt werden, insbesondere die Gamepad Extensions API, die API-Funktionen zum Zugriff auf Controller-Pose, haptische Aktoren und mehr hinzufügt.

WebVR-Schnittstellen

VRDisplay

Repräsentiert jedes VR-Gerät, das von dieser API unterstützt wird. Es umfasst generische Informationen wie Geräte-IDs und Beschreibungen sowie Methoden zum Starten der Darstellung einer VR-Szene, Abrufen von Augaparametern und Anzeigeoptionen und andere wichtige Funktionen.

VRDisplayCapabilities

Beschreibt die Fähigkeiten eines VRDisplay – seine Merkmale können verwendet werden, um Tests zur Gerätekompatibilität durchzuführen, z.B. ob es Positionsinformationen zurückgeben kann.

VRDisplayEvent

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

VRFrameData

Repräsentiert alle Informationen, die zum Rendern eines einzelnen Bildes einer VR-Szene benötigt werden; erstellt durch VRDisplay.getFrameData().

VRPose

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

VREyeParameters

Bietet Zugriff auf alle Informationen, die erforderlich sind, um eine Szene für jedes gegebene Auge korrekt darzustellen, einschließlich Informationen zum Sichtfeld.

VRFieldOfView

Repräsentiert ein Sichtfeld, das durch 4 verschiedene Gradwerte definiert wird, die die Ansicht von einem Mittelpunkt aus beschreiben.

VRLayerInit

Repräsentiert eine Schicht, die in einem VRDisplay dargestellt werden soll.

VRStageParameters

Repräsentiert die Werte, die den Bühnenbereich für Geräte beschreiben, die raumskalierte Erfahrungen unterstützen.

Erweiterungen anderer Schnittstellen

Die WebVR-API erweitert die folgenden APIs und fügt die aufgelisteten Funktionen hinzu.

Gamepad

Gamepad.displayId Schreibgeschützt

Gibt die VRDisplay.displayId des zugehörigen VRDisplay zurück – das VRDisplay, das die dargestellte Szene steuert.

Navigator

Navigator.activeVRDisplays Schreibgeschützt

Gibt ein Array zurück, das jedes VRDisplay Objekt enthält, das derzeit darstellt (VRDisplay.isPresenting ist true).

Navigator.getVRDisplays()

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

Window-Ereignisse

vrdisplaypresentchange

Wird ausgelöst, wenn sich der Darstellungszustand eines VR-Displays ändert, d.h. von Darstellen zu Nicht-Darstellen wechselt 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 dargestellt werden kann.

vrdisplaydeactivate

Wird ausgelöst, wenn ein Display nicht mehr dargestellt werden kann.

Beispiele

Eine Reihe von Beispielen finden Sie an diesen Orten:

• webvr-tests — sehr einfache Beispiele zur Begleitung der MDN-WebVR-Dokumentation.
• Carmel starter kit — nette, einfache, gut kommentierte Beispiele, die mit Carmel, Facebooks WebVR-Browser, einhergehen.
• WebVR.info samples — etwas tiefere Beispiele sowie Quellcode
• A-Frame-Homepage — Beispiele, die die Verwendung von A-Frame zeigen

Spezifikationen

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, auf Frameworks wie A-Frame, Babylon.js oder Three.js oder ein Polyfill zurückzugreifen, um WebXR-Anwendungen zu entwickeln, die in allen Browsern funktionieren. Lesen Sie den Leitfaden Meta's Porting from WebVR to WebXR für weitere Informationen.

Browser-Kompatibilität

Siehe auch

• A-Frame — Open-Source-Webframework zum Erstellen von VR-Erfahrungen.
• webvr.info — Aktuelle Informationen über WebVR, Browser-Konfiguration und Community.
• threejs-vr-boilerplate — Eine nützliche Vorlage zum Schreiben von WebVR-Apps.
• Web VR polyfill — JavaScript-Implementierung von WebVR.
• WebVR Directory — Liste von hochwertigen WebVR-Seiten.