WebXR — Virtuelle und Erweiterte Realität für das Web
Die Konzepte der virtuellen Realität (VR) und der erweiterten Realität (AR) sind nicht neu, aber die Technologie ist zugänglicher denn je. Wir können auch eine JavaScript-API verwenden, um sie in Webanwendungen zu nutzen. Dieser Artikel führt WebXR aus der Perspektive seiner Nutzung in Spielen ein.
Hinweis: Sie könnten auf Verweise zur nicht standardisierten WebVR-API stoßen. WebVR wurde nie als Standard ratifiziert, in sehr wenigen Browsern implementiert und standardmäßig aktiviert, und unterstützte nur wenige Geräte. Die WebVR-API wird durch die WebXR-Geräte-API ersetzt.
VR-Geräte
Mit der Popularität bestehender VR-Headsets wie Meta Quest, Valve Index und PlayStation VR sieht die Zukunft rosig aus — wir haben bereits ausreichende Technologie, um bedeutungsvolle VR-Spielerfahrungen zu schaffen.
Entwicklung von WebVR
Die WebVR-Spezifikation wird durch die WebXR-Geräte-API ersetzt. WebVR kann noch in einigen Browsern verfügbar sein, während WebXR finalisiert wird. Für weitere Informationen siehe die WebVR.info Website.
Die WebXR-API
Der Kern jeder WebXR-Erfahrung basiert auf zwei grundlegenden Konzepten:
- Die Anwendung muss Echtzeitdaten über die Position Ihres Headsets und die Positionen Ihrer Controller im dreidimensionalen Raum erhalten.
- Die Anwendung muss eine Echtzeit-, stereoskopische Ansicht auf dem Display des Headsets basierend auf diesen Positionsdaten rendern.
Die WebXR-API ist die zentrale API zur Erfassung von Informationen über mit einem Computer verbundene XR-Geräte. Die API kann Informationen über die Position, Orientierung, Geschwindigkeit, Beschleunigung und andere Daten von Headsets und Controllern erfassen, die Sie in Ihren Spielen verwenden können.
Es gibt auch andere APIs, die nützlich für die Erstellung von Spielen sind, wie die Gamepad-API für nicht-XR-Controller-Eingaben und die Geräteorientierungs-API für die Handhabung der Anzeigenausrichtung.
Verwendung der WebXR-API
Der beste Ausgangspunkt für die Arbeit mit der WebXR-API ist unser Fundamentals of WebXR-Leitfaden. Anschließend sehen Sie sich Sitzung starten und beenden einer WebXR-Sitzung an.
Werkzeuge und Techniken
A-Frame ist ein Web-Framework, das einfache Bausteine für WebXR bietet, sodass Sie schnell VR-Websites und -Spiele entwickeln und experimentieren können. Sie können das MDN-Tutorial zum Aufbau eines einfachen Demos mit A-Frame lesen, um mehr Details zu erhalten.
Darüber hinaus ist Three.js einer der beliebtesten 3D-Engines für das Web und kann für WebXR-Spiele verwendet werden. Schauen Sie sich die Three.js-Anleitung zur Erstellung von VR-Inhalten an, um Ihnen dabei zu helfen, WebXR-Spiele mit Three.js zu erstellen.
Immersion hat Vorrang vor Gameplay und Grafik - Sie müssen sich als Teil der Erfahrung fühlen. Es ist nicht einfach zu erreichen, aber es erfordert keine realistischen Bilder. Im Gegenteil, selbst einfache Formen, die mit hoher Bildrate vorbeiziehen, können aufregend sein, wenn das Erlebnis immersiv ist. Denken Sie daran: Experimentieren ist entscheidend - fühlen Sie sich frei, was gut für Ihr Projekt funktioniert, zu übernehmen.
Die Zukunft von WebXR
Verbrauchergeräte sind auf dem Markt verfügbar, und wir haben JavaScript-APIs, um sie im Web zu unterstützen. Da Hardware erschwinglicher wird und das Ökosystem sich weiterentwickelt, können Entwickler sich darauf konzentrieren, Erlebnisse durch gutes UX und UI zu gestalten. Es ist der perfekte Zeitpunkt, um in WebXR einzusteigen und zu experimentieren.