Ideenfindung

Als Szenerie der Applikation sollte hierbei das Beinhaus von Douaumont und dem Feld der unbeschrifteten Gräber beziehungsweise Kreuze dienen.

Eine Herausforderung bestand dabei bei der Form der Darstellung der einzelnen Ereignisse, sowie dem Anspruch, der Thematik mit Respekt und der nötigen Würde zu begegnen.

Nachdem ich verschiedene Ansätze ausprobiert hatte, wie die Präsentation der Daten in Form eines Museums und Textplaketten, entschied ich mich dazu, die einzelnen Daten in Form eines Zeitstrahles begehbar zu machen.

Da sich die Ereignisse über einen Zeitraum von mehreren Monaten erstreckten, galt es nun eine geeignete Darstellung der Daten zu schaffen. Hierbei stieß ich auf eine Aufarbeitung der Daten von Gabriel Cogo auf der Seite Timetoast (https://www.timetoast.com/timelines/the-battle-of-verdun-45377548-ec2d-42ad-9fa6-45a7b87f8b46).

Cogo kategorisierte hierbei einzelne größere Ereignisse auf einem 2D Zeitstrahl, welcher sich für die Darstellung im 3D Raum eignete. Da es sich trotz allem um mehr als 20 einzelne Daten handelte, habe ich mich auf die ersten Einträge beschränkt, um den Arbeitsumfang einzuschränken.

Technische Herausforderungen

A-Frame als Framework bedient sich unterschiedlichster Module, welche die Funktionalität von A-Frame erweitern. Da A-Frame bereits seit mehreren Jahren entwickelt wird und bereits mehrere Updates veröffentlicht wurden, sind viele Module in der aktuellsten Version nicht mehr unterstützt. Dies führte dazu, dass es häufig nicht sehr ersichtlich war, warum unterschiedlichste Funktionen nicht funktionierten.

Dies führte zu einer langen und teilweise beschwerlichen Suche nach Fehlern, sowie Alternativen.

Folgende Module waren unter anderem zur Darstellung meiner Vision notwendig:

Ammo.js & A-Frame Physics Engine

Um die Anzahl der angezeigten Textblöcke zu reduzieren, habe ich mit Hilfe von Collision Detection bei einer Annährung der Kamera die einzelnen Daten eingeblendet.

Geometry.js

Um die Kamera auf einem vordefinierten Pfad zu leiten, habe ich ein Nav Mesh integriert.

aframe-look-at-component.js

Um die einzelnen 2D Textblöcke von allen Seiten lesbar zu machen, war der Plan sie jeweils an der Kamera auszurichten. Dies ermöglicht die Bereisung der Applikation ebenfalls rückwärts.

Blender

Die Darstellung des Beinhaus von Douaumont, sowie des Hügels, erforderte die Verwendung eines 3D Programms. Ich entschied mich hierbei für Blender und wurde von einem Kommilitonen dabei unterstützt die entsprechenden Model zu gestalten. Da ich relativ unerfahren mit Blender bin, war dies eine größere Herausforderung als erwartet.

Soundscape

Um die Szenerie stimmungsvoller zu gestalten, habe ich in Ableton eine Sounddrone erstellt, welche beim Laden der Applikation automatisch abgespielt wird.

Live

Die Live Version der Applikation ist unter folgendem Link aufzurufen:

https://chief-lavender-adjustment.glitch.me/

Fazit

Durch die von Aframe und den verschiedenen Versionen entstandenen Bugs und Fehler, wurde ein einfaches und innovatives Arbeiten leider verhindert. Zukünftig würde ich wohl von der Verwendung von A-Frame absehen und stattdessen mit einem anderen Tool, wie beispielsweise Three.js arbeiten.

Die Darstellung von Text im 3D Raum, hat sich ebenfalls als schwierig erwiesen. Die verschiedenen Perspektiven, welche durch die Bewegung rund um die Texte entstanden, führten zu Limitierungen von kreativen Ideen. Leserichtung, sowie Lesbarkeit der einzelnen Texte, dirigieren hierbei in vielen Bereichen die kreativen Entscheidungen.

Die Arbeit selber war äußerst inspirierend und hat mir die Augen für weitere technische Möglichkeiten im Web geöffnet. Die Verwendung eines VR Headsets, sowie der damit einhergehende Workflow, waren für mich ein völlig neuer Ansatz bei der Arbeit rund ums Web. Ich bedanke mich bei Boris Müller für die Möglichkeit mich im Rahmen des Kurses mit VR und VR Brillen auseinanderzusetzen.