WOW! Cooler Look fürs Online-Learning!

Wir wollten, dass die Spieler*innen sich VOR die Forschungsstation stellen und sich dort umschauen können. Uns war schnell bewusst, dass wir nicht die ganze Anwendung durchgängig mit Fotomaterial gestalten könnten. Daher wollten wir mit 3D-Technologie arbeiten. Andererseits wollten wir aber nicht alle Inhalte ausschließlich mit 3D-Technologie umsetzen müssen.

Bei der Recherche stießen wir dann über das Computerspiel „Sable“, das die reduzierte Lineart im Stil des Comic-Künstlers Möbius in eine 3D-Welt überträgt. Diese Verbindung von 2D-Lineart und 3D-Objekten zeigte uns den Weg, denn sie ermöglicht einen durchgängigen Look und erlaubt eine spannende Optik im Stil einer Graphic Novel auch für 3D-Objekte.

In der Umsetzung wurden die Außen- und Innenszenen der Klima-Challenge zunächst in Adobe Illustrator skizziert und die Platzierung der Elemente und deren Farbigkeit festgelegt.

Anschließend wurden alle erforderlichen Elemente einzeln mit 3ds Max als 3D-Objekte modelliert und alle erforderlichen Texturen (zum Beispiel die Anzeigen von Messgeräten) erstellt. Die modellierten Objekte wurden dann in Szenen positioniert und diese mit speziellen Rendersettings für Flächen und cartoonige Outlines für die internen Abstimmungen gerendert.

Die Umsetzung der Szenen für das Web erfolgte dann mit dem javascript-Framework three.js, Three.js ermöglicht es, in Verbindung mit WebGL und Canvas, 3D Objekte mit Texturen, Lichtbrechungen, Schatten und Reflektionen in Echtzeit im Browser zu rendern.

Dazu wurden die 3D-Objekte in die javascript-Umgebung importiert. Dort wurden dann jedem Objekt die zuvor erstellten Texturen und Shader manuell zugewiesen. Shader sind Vorgaben, die zum Beispiel errechnen, wie der Schatten fällt oder sich das Licht in einem Objekt bricht.

Mit den Standard-Settings der three.js-Shader ließ sich allerdings der gewünschte Graphic-Novel-Look noch nicht erreichen, da allen Objekten immer nur ein und dieselbe Strichstärke für Outlines zugewiesen werden kann. Für den Graphic-Novel-Look wollten wir, dass unterschiedliche Objekte unterschiedlich starke Outlines haben können. Zum Beispiel dünnere Linien für Objekte, die weiter entfernt liegen oder für feinere Details in einem Objekt.

Um das zu erreichen, benutzten wir die Methode der „conditional lines“. Dabei werden von dem Objekt, je nach Bedarf, mehrere Klone erstellt. Jeder Klon kann dann eine bestimme Shading-Eigenschaft übernehmen; also beispielsweise ein Objekt für eine Outline in Stärke X, ein Objekt für eine Outline in Stärke Y, ein Objekt für den Schatten und so weiter.

Für ein perfektes Ergebnis wurden also einige manuelle Nachbesserungen erforderlich, verschiedene Objekte mit verschiedenen Linienstärken angelegt werden mussten. Bei diesen Elementen wurden über ein Developer-GUI (Graphic User Interface) die Settings so justiert, bis die Optik passte und die Einstellungen dann in den Code übertragen.

Bei der ganzen Umsetzung kam uns zugute, dass wir uns in den letzten Jahren intensiv mit Web3D-Technologien beschäftigt haben und bereits einige Projekte mit three.js realisieren durften. In diesen Projekten haben wir abteilungsübergreifende Workflows und Prozesse aufgebaut, die uns in die Lage versetzen, interaktive 3D-Welten in ganz unterschiedlicher Optik Wirklichkeit werden zu lassen.