Einführung in die WebXR-Entwicklung

AR und VR im Web sind erstaunliche Technologien. Sie ermöglichen es, Ideen zu bauen und zu veröffentlichen, ohne den Aufwand, durch kuratierte Stores zu gehen, und bieten gleichzeitig die Möglichkeit, einfach wie eine Website zu teilen.

VR im Web gibt es seit der ersten Veröffentlichung von WebVR 1.0 in Chrome und Firefox im Jahr 2016. Dieses Experiment wurde inzwischen durch die WebXR Device API ersetzt, die schließlich auch Augmented Reality unterstützen wird (und seit November 2020 in Chrome für Android verfügbar ist), nicht nur Virtual Reality. Jetzt, da diese neue Technologie einen stabilen Punkt erreicht hat, an dem Entwickler tatsächlich darauf setzen können, wie fängst Du an?

Frameworks 

Lies unseren letzten Blogbeitrag, um einige Anleitungen zur Auswahl eines Frameworks zu erhalten.

3 web-spezifische Herausforderungen 

Web- und native XR-Entwicklung unterscheiden sich in drei großen Punkten:

Ladezeit 

Warten darauf, dass ein Spiel lädt, ist im Web nicht akzeptabel. Jede Sekunde, die der Nutzer warten muss, erhöht die Absprungrate.

Es ist entscheidend, Deine Spielressourcen klein zu halten, Kompression zu verwenden und generell schnelle Ladezeiten sicherzustellen, um Deine Nutzer zufrieden zu stellen.

Leistung 

Das Web läuft in einer Sandbox des Browsers. Das bedeutet, dass es vom ausführenden Gerät so isoliert ist, dass es dem Gerät nicht schaden kann.

Die Sandbox verursacht Leistungseinbußen, da das, was die Website tun möchte, doppelt überprüft werden muss. Das zusammen mit den Mehrkosten, die JavaScript im Vergleich zu einer nativen Anwendung verursacht, macht VR und AR zu einer noch größeren Leistungsherausforderung.

Skalierbare Qualität 

Wenn Du eine native Anwendung in VR herausbringst, zielst Du normalerweise auf wenige sehr spezifische Geräte ab. Da Du deren Leistungsmetriken kennst, kannst Du jedes Build pro Plattform anpassen.

Der Vorteil des Webs ist, dass Du so radikal plattformübergreifend bist, dass jedes Gerät Deine WebXR-App ausführen könnte. Das bedeutet, dass Du alles von einem Toaster bis zu einem Desktop-PC berücksichtigen musst und die Grenze irgendwo ziehen musst.

In VR kommen die Bandbreite der Geräte auch mit einer Bandbreite an Eingabemethoden: von einfachen Blicksteuerungen (Google Cardboard), über 3-dof, 6-dof Controller, Hand-Tracking (Quest 2) und Eye-Tracking (Quest Pro, Apple Vision Pro).

Du musst entscheiden, was das kleinste gemeinsame Vielfache ist, das Deine Anwendung ausführen können sollte.

Lösungen 

Es ist wichtig, sich diesen web-spezifischen Herausforderungen von Anfang an zu stellen: Sie haben Einfluss auf Deine Wahl des Kunststils, der Wahl der Interaktionserfahrung und können Deine Anwendung zum Erfolg oder Misserfolg führen.

Schneller laden 

Im Allgemeinen gilt: Je kleiner Deine Dateien, desto schneller wird das Spiel heruntergeladen. Im Web ist es am besten, nur die zunächst benötigten Assets zu laden und weitere Assets während der Laufzeit nachzuladen.

Textbasierte Formate erfordern in der Regel längere Parsing-Zeiten, daher solltest Du stattdessen Binärformate verwenden. Bildformate wie WebP und Basis Universal können die Dateigrößen auf CPU und GPU im Vergleich zu herkömmlichen PNG- und JPEG-Bildern verbessern.

Leistung 

Achte darauf, die Leistung im Auge zu behalten und entsprechend Deinem Umfang zu optimieren. Halte Assets klein und “verbringe” Auflösung auf wichtigen Assets und basierend auf der Entfernung zum Benutzer.

Spezielle Browser-Erweiterungen wie OCULUS_multiview2 können bei der GPU-Rendering-Leistung helfen. Andere, wie das kommende WEBGL_multi_draw werden bei der CPU-Leistung helfen.

Die meisten Frameworks haben einen Leitfaden zur Leistung oder Tipps in der Dokumentation. Überprüfe diese, um zu sehen, was Du von Anfang an tun kannst, wenn Du ein größeres Projekt in Angriff nimmst.

Skalierung 

Für eine bessere Skalierbarkeit kannst Du Assets abhängig von der Headset-Eingabemethode oder dem User-Agent-String laden. Auf Blick basierende Systeme sind in der Regel niedriger als 6-dof-Geräte oder solche, die Hand-Tracking unterstützen.

Wonderland Engine 

Die Wonderland Engine zielt darauf ab, diese Optimierungsaufgaben für Dich zu übernehmen. Unser Ziel ist es, Dir zu ermöglichen, Dich auf die Funktionen Deiner App zu konzentrieren, ohne Dich um die technischen Herausforderungen kümmern zu müssen, sie reibungslos zum Laufen zu bringen.

Die Wonderland Engine hat kürzlich Version 1.0 erreicht. Wir würden uns freuen, Dich in unserer Discord-Community willkommen zu heißen!