Vanilla 3D Web - Der Studenthub in 3D

Der Modulbaum des FHNW-Studenthubs wird mit jedem zusätzlichen Modul unübersichtlicher. Wir haben ihn in den dreidimensionalen Raum übertragen, allein mit HTML, CSS und JavaScript, und mit Studierenden geprüft, wann 3D die Orientierung tatsächlich verbessert.

Ausgangslage

Der Studenthub ist die zentrale Webplattform der FHNW für Studierende. Er zeigt unter anderem einen Modulbaum, der sämtliche Module eines Studiengangs und deren Voraussetzungen als Netz aus Verbindungslinien darstellt. Bei einem vollständigen Studiengang entstehen dabei sehr viele Linien, die sich gegenseitig kreuzen. Ein einzelner Abhängigkeitspfad lässt sich dadurch kaum noch über mehrere Module hinweg verfolgen.

Parallel dazu existiert an der FHNW das Framework Vanilla3D, das in einem früheren Projekt entstanden ist. Es erzeugt dreidimensionale Objekte wie Würfel, Ebenen oder Zylinder ausschliesslich mit nativen Webtechnologien und platziert sie als DOM-Elemente. Position, Rotation und Skalierung werden über CSS-Variablen gesteuert. Damit stand eine Grundlage bereit, um die Fragestellung ohne WebGL und ohne externe 3D-Bibliothek anzugehen.

Zielsetzung

Ziel war eine webbasierte Anwendung, welche die Module eines Studiengangs als dreidimensionale Würfel darstellt und deren Abhängigkeiten räumlich sichtbar macht. Ergänzend bildet eine zweite Ansicht die erreichten Noten über die Höhe der Würfel ab. Anschliessend wurde die Anwendung mit Studierenden evaluiert, um zu bestimmen, unter welchen Bedingungen die dreidimensionale Darstellung gegenüber der bestehenden 2D-Ansicht einen Vorteil bietet und für welche Aufgaben die zweidimensionale Darstellung überlegen bleibt.

Ergebnisse

Entstanden ist eine lauffähige Webanwendung, die den Modulbaum eines Studiengangs interaktiv im Raum darstellt. Die Daten stammen aus der öffentlichen Studenthub-API. Aus diesen Daten berechnet die Anwendung das Layout, baut die Szene auf und steuert die beiden Ansichten. Der Aufbau umfasst:

• Module als farbcodierte Würfel, deren Farbe den persönlichen Studienfortschritt anzeigt.
• Zwei getrennte Ansichten für Abhängigkeiten und Noten, umschaltbar über einen Switch.
• Räumliche Staffelung des ausgewählten Abhängigkeitspfades über mehrere Ebenen.
• Animierte Verbindungslinien als SVG-Overlay, das in jedem Frame an die gerenderten Würfelpositionen angeglichen wird.
• Eine einblendbare Notenskala, welche die Höhe eines Würfels einer konkreten Note zuordnet.
• Kamerasteuerung über Click-and-Drag sowie ein virtuelles Steuerkreuz als Alternative.
• Ein Benchmark, der Bildrate und Frametimes bei 10 bis 400 Würfeln und sieben Darstellungsvarianten misst.

Der Vergleich mit der bestehenden 2D-Ansicht fällt differenziert aus. Zwei Drittel der Teilnehmenden der Evaluation bevorzugen für das schnelle Nachschlagen einzelner Informationen weiterhin die flache Darstellung. Ihren Nutzen entfaltet die dritte Dimension dort, wo mehrere Module zusammenhängen und sich Verbindungslinien im Raum seltener überschneiden. Räumliche Kodierung eignet sich für Beziehungen, weniger für einzelne numerische Werte.

Die Performance-Messung liefert einen eigenständigen Befund. Den mit Abstand grössten Einbruch der Bildrate verursacht der Weichzeichnungseffekt backdrop-filter, der die Darstellung bereits bei wenigen Elementen spürbar ins Stocken bringt. Der im Designprozess getroffene Entscheid, auf Glassmorphism zu verzichten, ist damit messbar belegt.

Technische Schlüsselbegriffe

• Vanilla3DAn der FHNW entwickeltes 3D-Framework auf Basis nativer Webtechnologien
• CSS 3D TransformsPositionierung und Rotation der Objekte über CSS-Variablen statt WebGL
• DOM-RenderingJede Würfelfläche ist ein eigenes HTML-Element
• DatenvisualisierungRäumliche Darstellung von Modulabhängigkeiten und Noten
• SVG-OverlayVerbindungslinien als Bézier-Kurven über der 3D-Szene
• requestAnimationFrameSynchronisation der Linien mit laufenden CSS-Transitionen
• Performance-BenchmarkMessung von FPS und p95-Frametime über sieben Darstellungsvarianten
• backdrop-filterAls dominanter Kostenfaktor der Rendering-Performance identifiziert
• Usability-EvaluationOnline-Umfrage mit Aufgaben, Skalenfragen und offenen Rückmeldungen
• FigmaIteratives Prototyping über drei Designversionen
• REST-APIModul- und Hierarchiedaten aus der öffentlichen Studenthub-API

Team