Diese Arbeit gibt neue Erkenntnisse in Bezug auf die Implementierung von Extended Reality (XR) in Browsern.
XR, AR, VR, WebXR, Web, A-Frame, React-XR, Babylon.js, PlayCanvas, JavaScript, TypeScript
Das Ziel dieser Arbeit ist es, geeignete Frameworks und Vorgehensweisen zu finden, um Extended Reality in Browsern zu implementieren. Künftige Projekte sollen von den Erkenntnissen dieser Arbeit profitieren können. Vereinfacht werden sollen insbesondere die Auswahl des für den Use Case am besten geeigneten Frameworks und den Einstieg in die Verwendung dieses Frameworks.
Die Bedeutung von XR ist am Zunehmen. Dies kann insbesondere auch daran gesehen werden, dass XR-Geräte günstiger und zahlreicher verfügbar sind, als noch vor einigen Jahren. Applikationen für solche Geräte werden aber weiterhin meistens nativ geschrieben. Jedoch gibt es auch für den Browser Möglichkeiten zur Umetzung von XR-Applikationen, dank des W3C Standards WebXR.
Der Einsatz von Frameworks vereinfacht die Implementierung von XR-Applikationen im Web enorm. Aus einer Vielzahl an Möglichkeiten wurden vier Frameworks ausgewählt und diese anhand selbst definierter Metriken analysiert. Dafür wurden pro Framework sechs Szenarien implementiert, welche die XR-Fähigkeiten der Frameworks testen sollen. Die Wahl des am besten für eine Anwendung geeigneten Frameworks hängt stark von den jeweiligen Anwendungsfällen ab. Sehr breit verwendbare Frameworks sind unten mit ihren jeweiligen Anwendungszwecken dargestellt.
React-XR
React-XR ist eine XR-Abstraktion für React. Sie benutzt unterliegend Three.js für das Rendering. Einige WebXR Abstraktionen sind vorhanden, jedoch werden nicht sämtliche Features abstrahiert. React-XR ist dank des React Kontexts sehr gut geeignet, um komplexere Webapplikationen inkl. XR-Funktionalitäten zu erstellen. Die enge Integration in React ist dabei der grösste Vorteil von React-XR.
A-Frame
A-Frame basiert auf dem «Custom Elements»-Standard und kann so in verschiedene Web-Frameworks wie Angular, React oder auch Vue integriert werden. A-Frame benutzt ebenfalls Three.js für das Rendering. A-Frame punktet am meisten mit seinen vielen bereits vorhandenen Komponenten, welche teils von der Community entwickelt werden. Damit können einfache Use Cases sehr schnell und ohne grossen Aufwand implementiert werden. Bedauerlicherweise sind diese Komponenten allerdings häufig entweder veraltet oder nur sehr starr auf einen spezifischen Use Case ausgelegt.
Babylon.js
Babylon.js ist eine Rendering Engine für das Web, welche XR unterstützt und von Microsoft entwickelt wird. Sie hat eine breite Unterstützung von XR-Features und ist gut geeignet für Spiele oder XR-Showcases mit Fokus auf dem Visuellen.
PlayCanvas
PlayCanvas ist eine Game Engine, welche ausschliesslich im Web funktioniert. Dies gilt ebenfalls für den Editor: PlayCanvas bietet eine eigene IDE inkl. grafischem 3D-Editor direkt im Browser. Entwickler:innen von nativen Engines wie «Unity» werden sich schnell darin zurecht finden. PlayCanvas ist besonders gut geeignet, um XR-Spiele umzusetzen.
| Projekttyp | Bachelorarbeit Informatik IP6 |
| Projektdauer | 20. Februar 2023 - 18. August 2023 |
| Teamgrösse | 2 Studenten |
| Aufwand in Personenstunden | ca. 720 Stunden (je ca. 360 Stunden pro Student) |
| Abteilung | Institut für Interaktive Technologien FHNW Brugg-Windisch |
| Name | Dr. Prof. Hilko Cords und Yves Simmen |
| Adresse | Bahnhofstrasse 6, 5210 Windisch |
| Website | FHNW IIT |
Timothy Grützner, BSc Informatik, timothy.gruetzner@students.fhnw.ch
Nathanael Weber, BSc Informatik, nathanael.weber@students.fhnw.ch
Dr. Prof. Hilko Cords hilko.cords@fhnw.ch
Yves Simmen yves.simmen@fhnw.ch
