WebVR API

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Hinweis: Die WebVR-API wurde durch die WebXR-API ersetzt. WebVR wurde niemals als Standard ratifiziert, wurde in nur sehr wenigen Browsern implementiert und standardmäßig aktiviert und unterstützte nur eine geringe Anzahl von Geräten.

Die WebVR-API bietet Unterstützung für die Einbindung von Virtual-Reality-Geräten – zum Beispiel Head-Mounted Displays wie Oculus Rift oder HTC Vive – in Webanwendungen. Dadurch können Entwickler Positions- und Bewegungsinformationen des Displays in Bewegungen innerhalb einer 3D-Szene umsetzen. Dies hat zahlreiche interessante Anwendungen, von virtuellen Produkttouren und interaktiven Trainings-Apps bis hin zu immersiven Ego-Shootern.

Konzepte und Nutzung

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.

Skizze einer Person auf einem Stuhl mit einer Brille, markiert als "Head mounted display (HMD)", gegenüber einem Monitor mit einer Webcam, markiert als "Position sensor"

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.

Hinweis: Sie können mehr darüber erfahren, wie die API funktioniert, in unseren Artikeln Verwendung der WebVR-API und WebVR-Konzepte.

API-Verfügbarkeit

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:

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

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

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.

Hinweis: Unser Artikel Verwendung von VR-Controllern mit WebVR erklärt die Grundlagen der Verwendung von VR-Controllern mit WebVR-Apps.

WebVR-Schnittstellen

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.

Erweiterungen zu anderen Schnittstellen

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

Gamepad

Gamepad.displayId Schreibgeschützt

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

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

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.

Beispiele

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

Spezifikationen

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.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • 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.