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 verabschiedet, nur in sehr wenigen Browsern implementiert und standardmäßig aktiviert und unterstützte nur eine kleine Anzahl von Geräten.

WebVR ermöglicht es, Virtual-Reality-Geräte – beispielsweise Head-Mounted Displays wie die Oculus Rift oder HTC Vive – für Web-Apps zugänglich zu machen. So können Entwickler Positions- und Bewegungsinformationen des Displays in Bewegungen innerhalb einer 3D-Szene umsetzen. Dafür gibt es zahlreiche interessante Anwendungen, von virtuellen Produktführungen und interaktiven Trainings-Apps bis hin zu immersiven Spielen aus der Ich-Perspektive.

Konzepte und Verwendung

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

Skizze einer Person auf einem Stuhl, die eine mit „Head mounted display (HMD)“ beschriftete Brille trägt und auf einen Monitor mit einer als „Position sensor“ beschrifteten Webcam blickt

VRDisplay ist das zentrale Interface der WebVR API. Über seine Eigenschaften und Methoden können Sie:

  • Informationen abrufen, um das Display, seine Fähigkeiten, zugehörige Controller und mehr zu ermitteln.
  • Für jeden Frame, den Sie auf einem Display anzeigen möchten, Frame-Daten abrufen und die Frames mit einer gleichmäßigen Bildrate zur Anzeige übermitteln.
  • Die Anzeige auf dem Display starten und beenden.

Eine typische, einfache WebVR-App funktioniert folgendermaßen:

  1. Mit Navigator.getVRDisplays() wird eine Referenz auf das VR-Display abgerufen.
  2. Mit VRDisplay.requestPresent() wird die Anzeige auf dem VR-Display gestartet.
  3. Mit der WebVR-spezifischen Methode VRDisplay.requestAnimationFrame() wird die Rendering-Schleife der App mit der richtigen Bildwiederholrate für das Display ausgeführt.
  4. Innerhalb der Rendering-Schleife werden die für den aktuellen Frame benötigten Daten abgerufen (VRDisplay.getFrameData()). Anschließend wird die Szene zweimal gezeichnet – einmal für jedes Auge – und die gerenderte Ansicht zur Anzeige an das Display übermittelt (VRDisplay.submitFrame()).

Darüber hinaus fügt WebVR 1.1 dem Window-Objekt mehrere Events hinzu, damit JavaScript auf Änderungen des Display-Status reagieren kann.

Hinweis: Weitere Informationen zur Funktionsweise der API finden Sie in unseren Artikeln Verwendung der WebVR API und WebVR-Konzepte.

Verfügbarkeit der API

Die WebVR API wurde nie als Webstandard verabschiedet und zugunsten der WebXR API eingestellt, deren Standardisierung bereits weit fortgeschritten ist. Daher sollten Sie versuchen, bestehenden Code auf die neuere API umzustellen. Im Allgemeinen sollte der Umstieg recht unkompliziert sein.

Auf einigen Geräten und/oder in einigen Browsern setzt WebVR außerdem voraus, dass die Seite in einem sicheren Kontext über eine HTTPS-Verbindung geladen wird. Ist die Seite nicht vollständig sicher, stehen die Methoden und Funktionen von WebVR nicht zur Verfügung. Sie können dies einfach überprüfen, indem Sie feststellen, ob die Navigator-Methode getVRDisplays() NULL ist:

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

Controller verwenden: WebVR mit der Gamepad API kombinieren

Viele WebVR-Hardwarekonfigurationen umfassen Controller, die zum Headset gehören. Diese lassen sich in WebVR-Apps über die Gamepad API verwenden, insbesondere über die Gamepad Extensions API. Diese ergänzt API-Funktionen für den Zugriff auf die Position und Ausrichtung von Controllern, haptische Aktuatoren und mehr.

Hinweis: Unser Artikel VR-Controller mit WebVR verwenden erläutert die Grundlagen der Verwendung von VR-Controllern in WebVR-Apps.

WebVR-Interfaces

VRDisplay

Repräsentiert jedes von dieser API unterstützte VR-Gerät. Das Interface umfasst allgemeine Informationen wie Geräte-IDs und Beschreibungen sowie Methoden zum Starten der Anzeige einer VR-Szene, zum Abrufen von Parametern für jedes Auge und der Fähigkeiten des Displays sowie weitere wichtige Funktionen.

VRDisplayCapabilities

Beschreibt die Fähigkeiten eines VRDisplay. Anhand seiner Eigenschaften lässt sich beispielsweise prüfen, ob ein VR-Gerät Positionsinformationen zurückgeben kann.

VRDisplayEvent

Repräsentiert das Event-Objekt von WebVR-bezogenen Events (siehe die unten aufgeführten Window-Events).

VRFrameData

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

VRPose

Repräsentiert den Positionszustand zu einem bestimmten Zeitpunkt, einschließlich Orientierung, Position, Geschwindigkeit und Beschleunigung.

VREyeParameters

Ermöglicht den Zugriff auf alle Informationen, die benötigt werden, um eine Szene für das jeweilige Auge korrekt zu rendern, einschließlich Informationen zum Sichtfeld.

VRFieldOfView

Repräsentiert ein Sichtfeld, das durch vier verschiedene Winkelwerte definiert ist, die die Sicht von einem Mittelpunkt aus beschreiben.

VRLayerInit

Repräsentiert eine Ebene, die auf einem VRDisplay angezeigt werden soll.

VRStageParameters

Repräsentiert die Werte, die den Bewegungsbereich für Geräte beschreiben, die raumfüllende VR-Erlebnisse unterstützen.

Erweiterungen anderer Interfaces

Die WebVR API erweitert die folgenden APIs um die aufgeführten Funktionen.

Gamepad

Gamepad.displayId Schreibgeschützt

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

Gibt ein Array mit allen VRDisplay-Objekten zurück, die derzeit Inhalte anzeigen (VRDisplay.isPresenting ist true).

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

Window-Events

vrdisplaypresentchange

Wird ausgelöst, wenn sich der Anzeigestatus eines VR-Displays ändert, es also beginnt oder aufhört, Inhalte anzuzeigen.

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 bereit ist, Inhalte anzuzeigen.

vrdisplaydeactivate

Wird ausgelöst, wenn ein Display keine Inhalte mehr anzeigen kann.

Beispiele

Unter den folgenden Adressen finden Sie mehrere Beispiele:

Spezifikationen

Diese API wurde in der alten WebVR API spezifiziert, die durch die WebXR Device API abgelöst wurde. Sie wird nicht mehr als Standard weiterentwickelt.

Bis alle Browser die neuen WebXR APIs implementiert haben, empfiehlt es sich, Frameworks wie A-Frame, Babylon.js oder Three.js oder einen Polyfill zu verwenden, um WebXR-Anwendungen zu entwickeln, die in allen Browsern funktionieren. Weitere Informationen finden Sie in Metas Leitfaden zur Migration von WebVR zu WebXR.

Browser-Kompatibilität

Siehe auch

  • A-Frame – Open-Source-Webframework zum Erstellen von VR-Erlebnissen.
  • webvr.info – aktuelle Informationen zu WebVR, zur Browser-Einrichtung und zur Community.
  • threejs-vr-boilerplate – eine nützliche Vorlage für den Einstieg in die Entwicklung von WebVR-Apps.
  • Web VR polyfill – JavaScript-Implementierung von WebVR.
  • WebVR Directory – Verzeichnis hochwertiger WebVR-Websites.

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