3D Staumodell
Kurz nach Beginn der Sommerferien tönt es jedes Jahr gleich aus dem Radio: «Stau vor dem Gotthardtunnel in Richtung Süden…».
Diese Staumeldungen tönen immer sehr abstrakt. In diesem 3D-Modell kann der Verkehr am Gotthard nun in Echtzeit beobachtet werden und man sieht auch gleich, ob der Gotthardpass geöffnet ist, falls man mal keine Lust auf eine lange Wartezeit in der Hitze hat. Anhand von Grafiken ist zudem ersichtlich, wann die beste Zeit ist, um dem Stau möglichst aus dem Weg zu gehen.
Idee
In IM4 hatten wir das Thema API’s und Datenvisualisierung. Die anstehenden Sommerferien brachten mich dann auf die Idee, ein 3D-Modell im Low Poly-Stil für den Gotthard zu erstellen. Dieses Modell sollte anschliessend auf einer Website abrufbar sein und sich anhand von aktuellen Staudaten und der Passzugänglichkeit dynamisch anpassen. Ich entschied mich für das Projekt, da mir die Kombination aus Kreativem und Technik gut gefiel.
Vorgehen
Zu Beginn hatte ich bereits eine klare Vorstellung, wie das Modell am Schluss aussehen sollte aber keine Ahnung, wie ich bei der Programmierung vorgehen sollte. Eine vergleichbare Arbeit fand ich nicht aber nach einiger Recherche entschied ich mich dafür, das Modell in Blender zu erstellen und dann im GLTF-Format zu exportieren. Anschliessend die JS-Programmierschnittstelle WebGL und die Bibliothek three.js zu verwenden, um das Modell auf der Website zu implementieren und zu animieren.
Eine öffentliche API für das Abrufen von aktuellen Staudaten und den Passzugänglichkeiten in der Schweiz gibt es leider nicht, deshalb scrape ich die Daten laufend von zwei Websites.
Um sicherzustellen, wie und ob das Animieren mit three.js überhaupt funktionierte, begann ich erst mit einem simplen Modell mit einer Plane und einem Cube. Als das funktionierte, gestaltete ich das Modell von da aus weiter, bis ich alle Grundobjekte zusammen hatte, die ich für die Animation brauchte.
Irgendwann war ich dann so weit, dass auf dem Modell eine bestimmte Anzahl von zufälligen Fahrzeugen erstellt wurde und diese den Pfaden folgten, die ich in Blender erstellt hatte. Allerdings schaffte ich es nicht, dass die Fahrzeuge einen Mindestabstand hielten und so fuhren sie teilweise einfach übereinander. Auch das Anpassen auf eine fixe Geschwindigkeit für alle Fahrzeuge auf demselben Pfad hat keine Abhilfe geschaffen.
Da ich keine Lösung fand, wie ich das Problem der fehlerhaften Animation mit three.js auf die Schnelle hätte lösen können, entschied ich mich, die Animation in Blender «von Hand» zu erstellen. Ich habe dann lediglich pro Autobahnrichtung entweder eine Animation mit und eine ohne Stau erstellt. Mit einer Funktion, die an die abgerufenen Staudaten geknüpft ist, wird nun eine Animation pro Richtung sichtbar. Das hat leider auch zur Folge, dass sich die Dateigrösse von 5MB auf über 30MB vergrössert hat und folglich zu einer längeren Ladezeit führt. Ausserdem kann sich das Modell so nicht dynamisch anpassen, was aber einer Person, die die Website kurz besucht, wohl nicht auffällt.
Learnings
Ich habe gelernt, dass ich mir vor dem Projekt ein wenig mehr Gedanken zur Machbarkeit hätte machen sollen. Für das Modul Konvergent Produzieren waren es wohl etwas viele Unbekannte und das Projekt würde sich wahrscheinlich eher für eine Bachelorarbeit eignen. Es ist wichtig, dass man, wenn möglich, einen Backup-Plan hat, was jetzt in diesem Fall noch funktioniert hat.
Mit three.js habe ich schlussendlich einen guten Weg gefunden, um 3D-Modelle auf einer Website einzufügen, zu animieren und ich konnte auch meine Blender-Kenntnisse erweitern, da ich mir von früheren Projekten eher C4D gewohnt war.
Fazit und Ausblick
Es war ein Projekt, dass mich, gerade was das Programmieren mit JS angeht, sehr herausgefordert hat und teilweise auch etwas überfordert hat, da es mein erstes Webprojekt mit JS war, aber ich habe sehr viel dabei gelernt. Mit dem Ergebnis bin ich so halb zufrieden. Es macht zwar, was es soll, aber halt nicht so, wie ich mir das ursprünglich vorgestellt hatte. Ebenfalls hätte ich gerne noch etwas mehr Zeit in die Ausgestaltung des Modells investiert. Schlussendlich war es dann doch primär eine sehr Technik lastige Arbeit. Ich kann mir gut vorstellen, das Modell noch weiterzuentwickeln, da ich noch viele Ideen dafür habe und es sicher auch eine gute Übungsplattform ist.