1. Web
  2. Web-APIs
  3. WebVR API

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

WebVR API

Deprecated

Avoid using this feature in new projects. Development of the WebVR API halted in favor of WebXR. This feature may be a candidate for removal from web standards or browsers.

Consider using the following features instead: WebXR.

Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.

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

WebVR bietet Unterstützung für die Einbindung von Virtual-Reality-Geräten – zum Beispiel Head-Mounted Displays wie das Oculus Rift oder HTC Vive – in Web-Apps, wodurch Entwickler die Möglichkeit haben, Positions- und Bewegungsinformationen vom Display in Bewegungen in einer 3D-Szene umzusetzen. Dies hat zahlreiche interessante Anwendungen, von virtuellen Produktpräsentationen und interaktiven Trainings-Apps bis hin zu immersiven Ego-Spielen.

Konzepte und Nutzung

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

Skizze einer Person in einem Stuhl mit einer Brille, beschriftet mit "Head mounted display (HMD)" vor einem Monitor mit einer Webcam, beschriftet als "Positionssensor"

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

  • Nützliche Informationen abzurufen, die es uns ermöglichen, das Display zu identifizieren, welche Fähigkeiten es hat, welche Controller damit verbunden sind und mehr.
  • Frame-Daten für jeden Frame von Inhalten abzurufen, den Sie auf einem Display präsentieren möchten, und diese Frames mit einer konsistenten Rate zur Anzeige bereitzustellen.
  • Präsentieren auf dem Display zu starten und zu stoppen.

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

  1. Navigator.getVRDisplays() wird verwendet, um einen Verweis auf Ihr VR-Display zu erhalten.
  2. VRDisplay.requestPresent() wird verwendet, um mit der Präsentation auf dem VR-Display zu beginnen.
  3. Die dedizierte Methode VRDisplay.requestAnimationFrame() von WebVR wird verwendet, um die Render-Schleife der App mit der richtigen Bildwiederholrate für das Display auszuführen.
  4. In der Render-Schleife greifen Sie auf die Daten zu, die benötigt werden, um den aktuellen Frame anzuzeigen (VRDisplay.getFrameData()), zeichnen die angezeigte Szene zweimal – einmal für die Ansicht in jedem Auge – und übergeben dann die gerenderte Ansicht an das Display, um sie dem Benutzer anzuzeigen (VRDisplay.submitFrame()).

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

Hinweis: Sie können viel 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 veraltet, welche sich gut auf dem Weg befindet, den Standardisierungsprozess abzuschließen. Daher sollten Sie versuchen, vorhandenen Code auf die neuere API zu aktualisieren. Im Allgemeinen sollte der Übergang relativ schmerzlos sein.

Darüber hinaus erfordert WebVR auf einigen Geräten und/oder Browsern, dass die Seite über einen sicheren Kontext geladen wird, also über eine HTTPS-Verbindung. 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 überprüfen, ob die Navigator-Methode 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 enthalten Controller, die zusammen mit dem Headset verwendet werden. Diese können in WebVR-Anwendungen über die Gamepad-API und speziell die Gamepad Extensions-API genutzt werden, die API-Features 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, wie VR-Controller mit WebVR-Apps verwendet werden.

WebVR-Schnittstellen

VRDisplay

Repräsentiert jedes VR-Gerät, das von dieser API unterstützt wird. 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 Anzeigeoptionen sowie anderer wichtiger Funktionen.

VRDisplayCapabilities

Beschreibt die Fähigkeiten eines VRDisplay – seine Merkmale können verwendet werden, um VR-Gerätefähigkeitsprüfungen 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 einen einzelnen Frame einer VR-Szene zu rendern; wird von VRDisplay.getFrameData() konstruiert.

VRPose

Repräsentiert den Positionszustand 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 Auge korrekt zu rendern, einschließlich Sichtfeldinformationen.

VRFieldOfView

Repräsentiert ein Sichtfeld, das durch 4 verschiedene Grad-Werte beschrieben wird, die die Ansicht von einem Mittelpunkt aus beschreiben.

VRLayerInit

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

VRStageParameters

Repräsentiert die Werte, die den Bühnenbereich für Geräte beschreiben, die raumgroße Erlebnisse unterstützen.

Erweiterungen zu anderen 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, dessen Szenenanzeige das Gamepad steuert.

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

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

Fenster-Ereignisse

vrdisplaypresentchange

Wird ausgelöst, wenn sich der Präsentationszustand eines VR-Displays ändert – z. B. von Präsentation zu keine Präsentation 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

Sie finden eine Reihe von Beispielen an diesen Orten:

  • webvr-tests — sehr einfache Beispiele, die die MDN-WebVR-Dokumentation begleiten.
  • Carmel-Starter-Kit — schöne einfache, gut kommentierte Beispiele, die mit Carmel, Facebooks WebVR-Browser, einhergehen.
  • WebVR.info-Beispiele — etwas ausführlichere 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 von der WebXR Device API abgelöst wurde. Sie ist nicht mehr im Standardisierungsprozess.

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 Metas Anleitung Portierung von WebVR auf WebXR für weitere Informationen.

Browser-Kompatibilität

Siehe auch

  • A-Frame — Open-Source-Webframework für den Bau von VR-Erlebnissen.
  • webvr.info — Aktuelle Informationen über WebVR, Browser-Einrichtung und Community.
  • threejs-vr-boilerplate — Eine nützliche Startervorlage zum Schreiben von WebVR-Apps.
  • Web VR-Polyfill — JavaScript-Implementierung von WebVR.
  • WebVR-Verzeichnis — Liste qualitativ hochwertiger WebVR-Sites.

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden