Auf in die dritte Dimension
Ich hatte schon immer große Freude daran, Alltagsgegenstände auseinander zu nehmen, um zu verstehen, wie sie funktionieren oder um sie zu reparieren. In diesem Blogpost möchte ich etwas anderes in seine Einzelteile zerlegen: Eine kleine, aber feine Hintergrundanimation mit DNA-Doppelhelix, Viren und Zellen.
Unser jüngstes Webprojekt ist die neue Unternehmenswebsite für aimed analytics, einem Big Data Analysten aus Bonn. Sie analysieren große medizinische Forschungsdatensätze und helfen bei der Entdeckung neuer Biomarker, der Charakterisierung von Krankheiten, der Analyse von Zellprozessen und noch mehr. Ihr modulares, auf einem Machine-Learning-Ansatz basierenden System wollen Sie jetzt der breiten Masse der Forschenden anbieten.
Eine hochspannende Arbeit, die aber wie so viele andere Arbeiten nur wenige ansprechende Bilder produziert. Für uns sind Grafik und Bild essenziell, um eine Marke im Web zu kommunizieren. Daraus entwickelte sich die Idee, ausgesuchte Untersuchungsgegenstände abstrakt zu visualisieren: Simpel gehaltene 3D-Modelle von Viren, Zellen, DNA und darüber ein Halbtonfilter, monochrom im Corporate-Blau.
Animationen in 2D oder 3D sind ein Thema für sich: Es gibt unzählige Techniken und Tools und es kann auch mächtig kompliziert werden. Aber mit immer besser werdenden Tools und technischen Möglichkeiten werden kleine Anwendungen im Kontext einer Website machbar.
Wir setzen bei unserer Arbeit auf Three.js, einem Open-Source-JavaScript-Framework, mit dem sich 3D-Szenen im Browser umsetzen lassen. Die 3D-Modelle haben wir selbst mithilfe von Blender (ebenfalls Open Source) gestaltet und für das Web exportiert.
Es ist ein Model und es sieht gut aus
In der 3D-Software haben wir zunächst die Modelle gestaltet. Uns war von vornherein klar, dass von den Details am Ende nicht viel zu sehen sein wird. Das kam uns zugute – es reichte also, wenn wir relativ grob modellierten. Wir entschieden uns in enger Abstimmung mit den Expert:innen unserer Kundin für Viren, Blutzellen, Körperzellen und eine DNA-Helix – denn nichts ist peinlicher, als hier etwas völlig Falsches einzusetzen. Zum Einsatz kamen verschiedene Modelling-Techniken und wir haben hier und da ein paar Varianten des selben Objekts modelliert, um es etwas organischer zu halten.
Tinker, tinker, little star …
Zuerst haben wir die grundlegende Szene in Blender arrangiert. Ein grafisches Programm wie Blender ist ergonomischer, um Dinge schnell hin und her zu schieben, statt alles direkt im Code zu machen. Also haben wir erst einmal geschaut, ob alles überhaupt so wirkt, wie wir uns das vorstellen:
- 🎲 Modelle positionieren
- 📹 Kamera animieren
- 🔎 Ergebnis begutachten
Und zurück zu Schritt 1 – bis es sitzt.
Nachdem wir fürs Erste zufrieden waren, haben wir die Szene exportiert und in den Browser geladen, um dann schnell zu merken, dass im Browser doch wieder alles anders wirkt und weiteres Feintuning im Code nötig ist: Dieses Modell ein bisschen nach links, dieses ein bisschen nach rechts – und auf schmalen Bildschirmen wie Smartphones muss es noch mal etwas anders sein. Das ist etwas, was sich in Blender gar nicht prüfen lässt. Mit ein Grund, warum wir allgemein früh für die Gestaltung in den Browser wechseln.
Fake it 'till you make it
Licht- und Schatteneffekte in Echtzeit sind sicherlich mit das visuell Interessanteste, was man mit 2D/3D Computergrafik machen kann, aber auch sehr rechenintensiv. Da klar war, dass es in unserem Fall eine Hintergrundanimation wird, die noch dazu durch einen stilisierenden Filter laufen sollte, fielen aufwendige Licht- und Schattenspielereien in Echtzeit von vornherein raus. Da der Filter aber auf helle und dunkle Pixel reagiert, mussten wir in der gesamten Szene für irgendeine Art von Helligkeitsunterschieden sorgen.
Die Lösung brachte MatCap: Ein Verfahren, was ein 3D-Objekt in Abhängigkeit zu seiner Oberflächenbeschaffenheit unterschiedlich einfärbt. Es sieht dadurch dreidimensional und beleuchtet aus, aber es ist gar kein Licht vorhanden, was berechnet werden müsste. Perfekt für unseren Anwendungsfall.
I like to move it, move it!
Bisher ist es noch eine sehr statische Angelegenheit. Durch feine periodische Bewegungen im dreidimensionalen Raum entsteht eine Animation, die einen fast schon in Trance versetzen kann. Die Objekte wabern wie in einer Flüssigkeit hin und her – unaufdringlich, aber deutlich sichtbar.
Und zum Schluss noch eine Prise wow!
Um die Modelle mit dem Hintergrund zu verschmelzen setzen wir auf Halbtonraster: Wer schon einmal eine Zeitungsseite oder ein anderes im Offset-Verfahren gedrucktes Erzeugnis unter die Lupe genommen hat, weiß, dass diese sich aus ganz vielen unterschiedlich großen Punkten in unterschiedlichen Farben bestehen. So ähnlich funktioniert es hier auch, nur monochrom. Three.js liefert ein Halbtonraster in Form eines Shaders mit, den wir für unsere Zwecke modifizieren konnten.
Zu guter Letzt wird die Kamera an die Scrollbar geknüpft, sodass die einzelne Objektgruppen nach und nach ins Bild geholt werden, wenn die Nutzer:innen die Inhalte scrollen. Die Animation reagiert außerdem subtil auf horizontale Mausbewegung an und kippt die Objekte leicht nach links oder rechts.
Aber das probiert Ihr am Besten selbst auf der Website aus.
It's a wrap!
Das war ein kleiner Einblick in den aufwendigen Prozess, 3D-Animationen auf eine Website zu bringen. Wir und aimed analytics sind zufrieden mit dem Ergebnis und wollen in Zukunft mehr in diese Richtung machen – als Schmuckelemente, aber auch zur Visualisierung von Inhalten. Wenn Ihr Interesse an unserer Arbeit habt, meldet euch gern auf einem unserer vielen Kanäle. Ihr findet sie im Footer dieser Seite.
Was denkt ihr:
3D-Animationen im Web – Spielerei oder „The next big thing“?
