von Beatrice Burkart, Lucia Plaen und Tobias Balmer
Idee und Ausgangslage
Nachdem unser Dreierteam im Dezember einen Workshop zum Thema «Virtual Reality mit A-Frame» veranstaltet hatte, wollten wir nun einen Schritt weiter gehen und unser erworbenes Wissen für eine etwas grössere Anwendung einsetzen. Nach ersten Überlegungen setzten wir uns also zum Ziel, mithilfe des Frameworks «A-Frame» ein kleines VR-Labyrinth zu programmieren, um die Möglichkeiten und die nachgesagte Einfachheit dieses Frameworks weiter auszuloten.
Entwicklungsprozess
Begonnen hat das Projekt mit ersten Skizzen der geplanten 3D-Welt, anhand welcher in einem zweiten Schritt die notwendigen Modelle in MagicaVoxel und Blender erstellt wurden. Da wir wussten, dass sich diese anschliessend relativ einfach in A-Frame einsetzen und kombinieren lassen würden, lohnte sich ein etwas grösserer Arbeitsaufwand durch das Einarbeiten in diese Programme. Wir entschieden uns für MagicaVoxel und Blender, weil sie zum einen kostenlos und einfach zugänglich sind, und zum anderen explizit von A-Frame empfohlen werden. Theoretisch liessen sich die Modelle aber aus jedem beliebigen 3D-Programm in A-Frame importieren.
In einem nächsten Schritt wurden diese Modelle dann ins Projekt eingesetzt und gelayoutet. Als Hintergrund wird ein 360° Bild verwendet, das für ein optimales räumliches User-Erlebnis idealerweise an den beiden Seitenrändern nahtlos ineinander übergehen. Für den Boden empfiehlt sich ebenfalls das Verwenden eines Repeat-Patterns, das man natürlich selber anfertigen oder aber einer der unzähligen Online-Bibliotheken entnehmen kann.
Alles in allem kam es uns sehr gelegen, dass A-Frame auf den Grundlagen von HTML und JavaScript funktioniert. So konnten wir unser Grundwissen in den beiden Bereichen nicht nur einsetzen, sondern auch weiter vertiefen. CSS findet bei A-Frame allerdings keine Verwendung, da die Formatierung über die Zuweisung von Attributen funktioniert. So ist jedes Element in A-Frame (im 3D-Bereich grundsätzlich «Entity» genannt) ein eigenes HTML-Tag, dem verschiedene Eigenschaften wie Position, Grösse oder Rotation zugewiesen werden. Solche Attribute lassen sich anschliessend ohne Mehraufwand wiederverwenden und anderen Elementen übergeben, was komplexe Klassenstrukturen unnötig macht. Diese Programmierstruktur nennt sich «entity component system» und bringt den grossen Vorteil, dass Entities in der Szene immer flexibel und beliebig erweiterbar bleiben. Es wird gerade deshalb so oft bei der Programmierung von Games angewendet.
Ein weiteres Thema war das Einbauen der Interaktionen: A-Frame wurde von Mozilla VR so entwickelt, dass jede eingebaute Funktion oder Interaktion als eigene A-Frame Komponente definiert werden muss. Dieses System war neu für uns und forderte im ersten Moment etwas Einarbeitungs- und Eingewöhnungszeit. Nach einigem Brüten über der Dokumentation des Frameworks, war es aber anschliessend gut anwendbar und funktionierte im Grossen und Ganzen einwandfrei.
Schwierigkeiten
Bei A-Frame handelt es sich um ein noch sehr junges Framework, dass nun erst etwas länger als ein Jahr auf dem Markt ist und von Mozilla VR seither stetig weiterentwickelt wurde. Ein spürbarer Nachteil davon ist, dass es häufig zu Versionskonflikten zwischen der Grundbibliothek von A-Frame und weiteren Komponenten kommt. Das hatte für uns zur Folge, dass wir oft unerwartet viel Zeit für die Fehlersuche und -korrektur investieren mussten.
Die offizielle Dokumentation von Mozilla VR betreffend A-Frame ist hübsch gemacht und auf den ersten Blick sehr vielversprechend, doch leider auch eher knapp gehalten. Während sie uns beim Erstellen der mehr oder weniger banalen Demo-Website, die wir für unseren Workshop entwickelt haben, noch ausreichend geholfen und uns den Einstieg damit wesentlich erleichtert hat, sind wir bei diesem Projekt bereits an ihre Grenzen gestossen und sie konnte uns nur noch begrenzt Hilfestellungen bieten. Leider gibt es auch neben dieser offiziellen Dokumentation noch kaum Ressourcen, was zur Folge hatte, dass sich auch „einfache“ Probleme als relativ zeitfressend erwiesen.
Fazit
Trotz der angesprochenen Schwierigkeiten und Probleme, empfehlen wir die Verwendung von A-Frame jedem, der sich schnelle, erste Erfolgserlebnisse und ein besseres Verständnis von Virtual Reality im Web wünscht. Für einen wenig zeitintensiven Einstieg in den Bereich VR, ist dieses Framework auf jeden Fall das richtige - wenn nicht sogar die einzige geeignete Wahl.
