WOW! Cooler Look fürs Online-Learning!

Illustration eines Eisbären auf einer Eisscholle
So entstand der Graphic-Novel Look für das interaktive Lernspiel Klima Challenge.

Denkanstoß #18

Mit three.js und conditional Lines zum coolen Look für 3D-Szenen

Die Planet Schule Klima Challenge begleitet die Besucher*innen an vier entlegene Hotspots der Klimaforschung. Die Spieler*innen sollten das Gefühl haben, selbst zu diesen Orten zu reisen, um zu spüren, unter welchen Entbehrungen die Forscher dort arbeiten. Der nächste Supermarkt oder die nächste Tankstelle liegen in Arktis, Antarktis oder im Weltraum schließlich nicht um die Ecke.

Ansatz & Inspiration

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.

Vom Scribble…

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.

Illustration einer Landschaft in der Antarktis

…zum 3D-Modell…

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.

…zur interaktiven Szene.

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.

Das Geheimnis liegt in den conditional Lines

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.

Erfahrung mit Web3D und three.js

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.

Foto des Autors des Artikels

Ein bewegender Beitrag von: Tobias

Über den Autoren

Tobias ist Frontend-Entwickler und hat sich in den letzten Jahren zusammen mit seinen Kollegen in das Thema Web-3D und die entsprechenden Frameworks eingefuchst. Neben der Umsetzung von Lernspielen war Tobias bei der Klima-Challenge auch für das Shading der 3D-Szenen verantwortlich.

Sprechen Sie uns an

Mehr WOW für Ihr Web!

Sprechen Sie uns an, wenn sich mehr WOW in Ihrem Web-Auftritt wünschen. Zum Beispiel mit innovativen Web3D-Lösungen.

Let’s do it. Wir freuen uns auf Ihr Briefing.

Alwin Roppert

Inhaber & Geschäftsführer
Telefon 0 72 43  / 21 59 10

Kontakt per E-Mail