WebVR API

Alle VR-Geräte, die mit Ihrem Computer verbunden sind, werden von der Methode Navigator.getVRDisplays() zurückgegeben; jedes wird durch ein VRDisplay-Objekt repräsentiert.

VRDisplay ist die zentrale Schnittstelle in der WebVR-API – über deren Eigenschaften und Methoden können Sie Funktionen nutzen, um:

• Nützliche Informationen abzurufen, um das Display zu identifizieren, welche Fähigkeiten es hat, welche Controller damit verbunden sind und mehr.
• Framedaten für jeden Inhalt zu erhalten, den Sie im Display darstellen möchten, und diese Bilder mit einer konstanten Rate anzuzeigen.
• Die Präsentation für das Display zu starten und zu stoppen.

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

1. Navigator.getVRDisplays() wird verwendet, um eine Referenz auf Ihr VR-Display zu erhalten.
2. VRDisplay.requestPresent() wird verwendet, um mit der Präsentation für das VR-Display zu beginnen.
3. Die spezielle Methode VRDisplay.requestAnimationFrame() von WebVR wird verwendet, um die Rendering-Schleife der Anwendung mit der richtigen Bildwiederholfrequenz für das Display auszuführen.
4. Innerhalb der Rendering-Schleife holen Sie die Daten ab, die benötigt werden, um das aktuelle Bild anzuzeigen (VRDisplay.getFrameData()), zeichnen die Szene zweimal – einmal für die Ansicht in jedem Auge, und dann übergeben Sie die gerenderte Ansicht an das Display zur Anzeige für den Benutzer (VRDisplay.submitFrame()).

Darüber hinaus fügt WebVR 1.1 auf dem Window-Objekt eine Reihe von Ereignissen hinzu, um JavaScript auf Änderungen des Status des Displays reagieren zu lassen.

Die WebVR-API, die nie als Webstandard ratifiziert wurde, wurde zugunsten der WebXR-API abgelehnt, die auf gutem Weg zur Fertigstellung des Standardisierungsprozesses ist. Deshalb sollten Sie versuchen, vorhandenen Code auf die neuere API zu aktualisieren. Der Übergang sollte im Allgemeinen relativ schmerzfrei sein.

Zusätzlich erfordern auf einigen Geräten und/oder Browsern WebVR, dass die Seite unter Verwendung eines sicheren Kontexts ü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 prüfen, ob die Methode Navigator.getVRDisplays() NULL ist:

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

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

VRDisplay

Repräsentiert jedes von dieser API unterstützte VR-Gerät. Es umfasst allgemeine Informationen wie Geräte-IDs und Beschreibungen sowie Methoden, um eine VR-Szene zu präsentieren, Augenparameter abzurufen, Anzeige-Fähigkeiten zu ermitteln und weitere wichtige Funktionen.

VRDisplayCapabilities

Beschreibt die Fähigkeiten eines VRDisplay — seine Merkmale können verwendet werden, um Tests zur VR-Gerätefähigkeit durchzuführen, z.B. ob es Positionsinformationen zurückgeben kann.

VRDisplayEvent

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

VRFrameData

Repräsentiert alle Informationen, die benötigt werden, um ein einzelnes Bild einer VR-Szene zu rendern; erstellt durch VRDisplay.getFrameData().

VRPose

Repräsentiert den Positionsstatus zu einem bestimmten Zeitpunkt (dies umfasst 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 Sichtfeldinformationen.

VRFieldOfView

Repräsentiert ein Sichtfeld, definiert durch 4 verschiedene Winkelgrade, die die Ansicht von einem Mittelpunkt beschreiben.

VRLayerInit

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

VRStageParameters

Repräsentiert die Werte, die den Bühnenbereich für Geräte beschreiben, die Raummaßstäbe unterstützen.

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

Gamepad

Gamepad.displayId Nur lesbar

Gibt den VRDisplay.displayId des zugehörigen VRDisplay zurück — das VRDisplay, das die von dem Gamepad kontrollierte Szene auf dem Display darstellt.

Navigator

Navigator.activeVRDisplays Nur lesbar

Gibt ein Array zurück, das jedes VRDisplay-Objekt enthält, das aktuell 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 mit dem Computer verbunden sind.

Fenster-Ereignisse

vrdisplaypresentchange

Wird ausgelöst, wenn sich der Präsentationsstatus eines VR-Displays ändert – also von präsentierend zu nicht präsentierend 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.

An folgenden Orten finden Sie eine Reihe von Beispielen:

• webvr-tests — sehr einfache Beispiele, die die MDN WebVR-Dokumentation begleiten.
• Carmel starter kit — schöne, einfache, gut kommentierte Beispiele, die mit Carmel, dem WebVR-Browser von Facebook, einhergehen.
• WebVR.info samples — etwas tiefergehende 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 befindet sich 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 ein Polyfill zu verlassen, um WebXR-Anwendungen zu entwickeln, die in allen Browsern funktionieren. Lesen Sie den Portierungsleitfaden von Meta für die Umstellung von WebVR auf WebXR, um mehr Informationen zu erhalten.

• A-Frame — Open-Source-Webframework zum Erstellen von VR-Erlebnissen.
• webvr.info — Aktuelle Informationen über WebVR, Browsereinrichtung und Community.
• threejs-vr-boilerplate — Eine nützliche Startvorlage für das Schreiben von WebVR-Apps.
• Web VR polyfill — JavaScript-Implementierung von WebVR.
• WebVR Directory — Liste qualitativ hochwertiger WebVR-Seiten.