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.
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:
Navigator.getVRDisplays()
wird verwendet, um eine Referenz auf Ihr VR-Display zu erhalten.VRDisplay.requestPresent()
wird verwendet, um mit der Präsentation für das VR-Display zu beginnen.- 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. - 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:
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örigenVRDisplay
zurück — dasVRDisplay
, das die von dem Gamepad kontrollierte Szene auf dem Display darstellt.
Navigator
-
Gibt ein Array zurück, das jedes
VRDisplay
-Objekt enthält, das aktuell präsentiert (VRDisplay.isPresenting
isttrue
). -
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.