Webbasierter Szene-Graph zur Schulung im Bereich der Computergrafik


Jaroslaw Sarbiewski

Präsentation
02. February 2021, 12:00 Uhr, Raum https://th-koeln.zoom.us/j/86224491085 (Passwort steht im Ilias) Präsentation
Betreuer
Prof. Dr. Martin Eisemann
Kooperationspartner
TH Köln
Stichworte
Computergrafik, Grafik, Schulung, Lernanwendung, Szenegraph, Webanwendung, Javascript, Typescript, three.js, frontend-development
Bildrechte
Jaroslaw Sarbiewski

Abstract

Einige Themenfelder der Computergrafik als Lerndisziplin stellen Student*innen oft vor große Herausforderungen. Das geht aus der Annahme hervor, dass die Theorie der Computergrafik sehr trocken sein kann und/oder ein hohes Maß an räumlichen Vorstellungsvermögen und mathematischen Vorkenntnissen voraussetzt.
Zur Lernunterstützung können professionelle Grafikanwendungen aus dem Produktionsbereich genutzt werden. Diese geben jedoch einen geringen, bis keinen Einblick auf die mathematischen Hintergründe, die im Studium erforderlich sind. Des Weiteren sind diese Anwendungen durch ihre überbordenden Funktionalitäten, beeinträchtigend für das Verstehen des Lernstoffs.

Ein essenzielles Thema der Computergrafik ist der Szene-Graph. Es ist eine Datenstruktur, die einerseits beschreibt wie Objekte im euklidischen Raum bzgl. der Transformation (Kombination aus Rotation, Skalierung und Translation) angeordnet sind und andererseits wie diese Objekte hierarchisch zueinander in Beziehung stehen. In der Hierarchie übernimmt ein Kindobjekt die Transformationen seines Elternobjekts.

Im Rahmen dieser Projektarbeit wurde eine webbasierte Anwendung entwickelt, die zum effizienten Erlernen des Szene-Graphen beitragen soll1. Zu Beginn des Projektes wurde zunächst ermittelt welche Komponenten erforderlich sind, um einen Szene-Graphen aufzubauen, zu manipulieren und dessen Ergebnis mathematisch und visuell zu repräsentieren.
Folgende Komponenten haben sich ergeben:

  • Der Szene-Graph als Hauptkomponente, mit Toolbar um den Szene-Graphen aufzubauen, zu verändern und persistent zu sichern.
  • Eine Benutzerschnittstelle (Schieberegler) um die Knoten (Objekte und Transformationen) und Kanten des Graphen und somit die Lage der 3D-Objekte im Raum einzustellen.
  • Die visuelle Ausgabe (3D-Szene)
  • Die mathematische Ausgabe (Matrizenmultiplikation)

Für jede Komponente wurden die notwendigen strukturellen, visuellen und funktionalen Design-Entscheidungen getroffen und begründet, mit dem Ziel, die Anwendung so abstrakt wie möglich und so konkret wie nötig zu konzipieren.

Zur Implementierung der Webanwendung wurde, durch sein statisches Typsystem, die Programmiersprache Typescript verwendet. Für die hardware-beschleunigte visuelle 3D-Ausgabe kam three.js zum Einsatz und jQuery als Framework für die einfache HTML-DOM-Manipulation.
Da der Szene-Graph, die visuelle Ausgabe und die mathematische Ausgabe sehr stark voneinander abhängen und sich zum größten Teil nur durch ihre Repräsentationen unterscheiden, wurde als Entwurfsmuster das Beobachtermuster zur Implementierung angewandt.

Nach dem ersten Einsatz der Webanwendung und Feedback von Student*innen, wurde die Anwendung in einem letzten Iterationsschritt bzgl. der Gebrauchstauglichkeit optimiert. Die endgültige Anwendung hat ein positives Feedback erhalten, jedoch gab es keine empirischen Untersuchungen.

1Das Wort soll wird hier bewusst verwendet, da es keine empirischen Untersuchungen des Ergebnisses gab.

Vorschläge für weitere Arbeiten im Themenfeld

Inwieweit lässt sich die Lerneffizienz optimieren, durch den Einsatz von Web-Components, für wiederverwendbare Komponenten in den einzelnen Lern-Anwendungen einer Domäne?

Was für Auswirkungen hat die künstliche Intelligenz auf den Workflow, bei der Erstellung von grafischen digitalen Medien? [How A.I. will change the 3D industry - Andrew Price](https://www.youtube.com/watch?v=FlgLxSLsYWQ)