Making-of: 3D-Experience »Penderecki’s Garden«

PROJEKT 3D-Experience »Penderecki’s Garden«
AUFTRAGGEBER Adam Mickiewicz Institute, Warschau
AGENTUR Huncwot, Warschau
TECHNIK 3D Modelling mit Photogrammetrie und MeshLab, Frontend: TypeScript, GSAP, Three.js, GLSL, Web Audio API; Backend: eigenes CMS auf PHP-Basis
ZEITRAUM ab April 2020 (Launch zum 1. Todestag des Komponisten am 29. März 2021)

Krzysztof Penderecki war einer der bedeutendsten Komponisten des 20. Jahrhunderts. Aber nur we­nige wissen, dass der erst 2020 verstorbene Klangkünstler noch eine zweite Passion pflegte: Er war be­geis­terter Gärtner und besaß einen riesigen Garten in Lusławice, einem kleinen Dorf in der Nähe von Krakau. »Ein Besuch dort würde Sie umhauen«, sagt Arek Romanski, Co-Founder und Head of Design der Warschauer Interactive-Agentur Huncwot, die mit »Penderecki’s Garden« Musik und Natur zu einer immersiven Erfahrung verschmelzen lässt.

Nicht im Geringsten anzumerken ist dem Projekt der holprige Start. »Vor fast einem Jahr – nicht lan­ge nach dem Tod des Komponisten – kam das Adam Mi­ckiewicz Institute auf uns zu«, erzählt Arek Romanski. Das Briefing lautete, den Garten in einer di­gitalen Umgebung darzustellen und mit Pendereckis Musik zu kombinieren. »Darauf waren wir gar nicht vorbereitet: Seine Musik ist sehr ernst, verwurzelt in analogen Klängen und Experimenten – das ist sehr weit entfernt von dem, wie wir normalerwei­se über 3D-Ästhetik denken.« Doch zugleich reizt es die vielfach ausgezeichnete Agentur immer auch, mit einem Projekt Neuland zu betreten.

Wie scannt man einen Garten?

Die nächste Herausforderung ergab sich aus den Dimensionen der Gartenanlage: 1500 Spezies von Bäu­men und Büschen gedeihen dort auf einer Fläche, die so groß ist wie zwanzig Fußballfelder. »Allein den Park abzubilden schien eine unlösbare Aufgabe zu sein. Denn wir wollten keine 3D-gerenderte Welt mit künstli­chen Bäumen und Texturen oder Ähnli­chem er­schaf­fen«, sagt Arek Romanski, sondern etwas Naturnahes und Rea­listischeres. Es dauerte eine Wei­le, bis Huncwot die richtige Technologie gefunden hatte: Photo­gram­me­trie. Bei dieser berüh­rungs­lo­sen Messmethode wird aus vielen verschiedenen Fo­tografien eines Ob­jekts dessen Lage oder Form er­rechnet. Auf diese Weise ist es möglich, sehr präzise räumliche Da­ten zu ermitteln.

Aber wie scannt man einen Garten? Ganz einfach: aus der Luft, mit Drohnen. So ließ sich in mehreren Durchgängen die komplette Anlage scannen. Jetzt hatten die Kreativen zwar die erforderlichen 3D-Daten für den virtuellen Garten, aber es stellte sich die Frage nach der Ästhetik, denn der Haken bei der Pho­togrammetrie ist, »dass alle Websites, die diese Tech­nik nutzen, gleich aussehen«, so Romanski. »Uns war es aber wichtig, eine einzigartige Visualisierung zu finden.« Die Lösung bestand in einem Mix aus illustrativen, organisch wirkenden und bewusst digitalen Elementen (siehe Seite 64 f.).

3D: A Walk in the Park

Um den Garten in 3D begehbar zu machen, musste sich das Team einige Tricks einfallen lassen, damit die Ladezeit möglichst kurz und die Erfahrung für die Besucher:innen flüssig bleibt – wobei Huncwot die Entdeckungsreise an sich nach dem Vorbild von Augmented Reality gestaltete: Auf die Kom­mastelle genau sind die Koordinaten des Ge­län­des angegeben, das man zunächst von oben über­bli­cken kann. Rechts unten findet sich eine Radaransicht, die zur Übersicht führt – dort kann man auswählen, welche Hauptbereiche man als Nächs­tes er­kunden möchte, etwa das Labyrinth, das Amphitheater oder den Musiksalon.

Ist man an einem dieser Orte angekommen, erwarten einen viele Anekdoten und Erinnerungen an den Komponisten – mal als Text, mal als Video –, in denen Weggefährten wie be­freun­dete Künstler:in­nen oder Schüler:innen oder zu Wort kommen. So er­zählt etwa Anne-Sophie Mutter von dessen Liebe zu den Bäumen. Ohnehin erfährt man nicht nur Span­nendes über Krzysztof Penderecki, sondern auch über Pflanzen. Zum Beispiel über die Sequoia, die Mammutbäume, die auch im gleichnamigen Nationalpark in Kalifornien zu finden sind. Den Soundtrack der Entdeckungstour liefert die Musik des Künstlers, auf die die feinen Animationen der Partikel und Ob­jek­te abgestimmt sind.

Ganz bewusst hat die Agentur bei »Penderecki’s Garden« auf eine vorgegebene Struktur oder einen roten Faden verzichtet. Die Besucher:innen können frei flanieren und dabei den Komponisten und seinen Garten kennenlernen. »Wenn Sie – wie wir – wegen der Pandemie zu Hause festsitzen, wird der Besuch der Penderecki-Website wie ein virtueller Spazier­gang im Park sein, der mit aufschlussreichen interaktiven Inhalten zu Leben und Werk des Komponisten gefüllt ist«, erklärt Arek Romanski. Die Site zeigt aber einen Fortschritt zu jedem Kapitel an. So wissen am­bitionierte Nutzer:innen, wie viel Prozent der Entde­ckungsreise sie schon absolviert haben. Übrigens hört diese nie auf – wie auch die Arbeit von Huncwot. Gerade entsteht ein »Garten der Erinnerung« – wenn dieser fertig ist, kann das Flanieren für die Pen­­de­rec­ki-Fans weitergehen. 

3D-Experience: Blühende Partikel

Das perfekte Zusammenspiel der 3D-Optik, der feinen Animationen und der Musik machen das Erlebnis im virtuellen Garten aus. Wir zeigen, wie das Gesamtkunstwerk entstanden ist

1) Bildsprache: Vinyl und Natur

Klassische Vinylcover mit entsättigten Farben in Kombination mit Serif- und geometrischen Sans-Serif-Schriften inspirierten die Desi­g­ner:innen. »Nachdem wir dann Pendereckis Garten im Sommer besucht hatten, fügten wir noch na­türlichere Farbpaletten hinzu. Mit diversen Braun-, Grün- und Violetttönen versuchten wir, das richtige Gleichgewicht und die passende Bildsprache zu finden«, erklärt Arek Romanski. »Um die Schönheit all dieser erstaunlichen Bäume hervorzuheben, haben wir zudem über 55 handgezeichnete Illustrationen in Auftrag gegeben.«

2) 3D-Visualisierung mit reduzierten Details

Die Darstellung des Parks war in mehrfacher Hinsicht anspruchsvoll. Zum einen musste Huncwot zwei völlig unterschiedliche Visua­lisierungen zusammenbringen: die 3D-Partikel-Ästhetik und die handgezeichneten Illustrationen der Bäume und Pflanzen. Zum anderen war da die reine Menge an Daten. Denn die Photogrammetrie lieferte zwar einen sehr exakten Scan des Gartens – aber auch ein Problem: nämlich Milliarden von 3D-Partikeln in Form von Punktwolken.

»Wir haben viele Wochen lang die Daten komprimiert und geformt, damit sie visuell ansprechend sind und – was am wichtigsten ist – recht schnell in den Browser geladen werden können«, sagt Arek Ro­manski. »Zunächst haben wir Millionen von un­nö­ti­gen Punkten entfernt, indem wir die Punk­t­dich­te verringerten und einige Modelle manuell ent­fern­­ten.« Dabei war es das erste Mal, dass die Agentur mit Punktwolken arbeitete.

Nach zahllosen Tests fanden die Develo­per:in­nen das passende Dateiformat und eine geeignete Kompressionsmethode, um die Dateien zu laden (siehe »Kompakt«, rechts). Für die Entwicklung des Front­end-Layers verwendeten sie TypeScript- und Three.js-Bibliotheken, während sie die 3D-Daten als Punkt­wol­ken im PCD-Format speicherten und mit gzip kom­primierten. »So konnten wir schnelle Anfangsladezeiten erreichen und Ruckeln bei der Interak­tion mit der Website verhindern«, erklärt Romanski. Für 3D-Modelling und -Animation kam die Open-Source-Software MeshLab zum Einsatz.

3) Mikroanimationen mit Sounds

Die Bewegungen machen den besonderen Reiz beim Besuch des virtuellen Gartens aus. Sanfte, flüssige Animationen, passend zur Musik, lassen die stilisierte Landschaft lebendig wir­ken. »Wir beschlossen, den Partikeln einige zufällige, unvorhergesehene Bewegungen hinzuzufügen, um das leichte Schwanken der Bäume und das Schau­keln der Äste im Wind in die digitale Welt zu übertragen«, erläutert Arek Romanski. Dafür nutzte das Team WebGL-Shader.

Außerdem galt es, eine große Anzahl an Hotspots zu rendern. Eine einfachere Lösung wäre ge­we­sen, sie als DOM-Elemente zu ergänzen. Um eine gute Performance zu gewährleisten, fügten die De­signer:innen sie aber der WebGL-Schicht hinzu und erstellten dynamische SVG-Texturen für jeden Hotspot-Typ. Mit der Web Audio API analysierten sie die Musik und kombinierten sie mit den subtilen Animationen der Sounds.

4) Intuitive Navigation & Accessibility

Die Website soll für sehr unterschiedliche Zielgruppen funktionieren: Für diejenigen, die sich nur mal kurz umsehen möchten, ebenso wie für leidenschaftliche Penderecki-Bewun­derer, die viel Zeit mitbringen, um den Garten in all seinen Details zu erkunden. »Wir versuchen immer, viele Optionen anzubieten«, sagt Arek Romanski. So gibt es eine 3D-Navigation, mit der die Besu­che­r:in­nen durch den Garten flanieren können. Subtile Mikroanimationen unterstützen die User Experience. Zum Beispiel umkreist beim Roll-over eine feine Linie klickbare Buttons.

Eine »echte« 3D-Erfahrung bietet die Website oh­ne App-Installation auf dem mobilen Browser des Smartphones: Erlaubt man den Zugriff auf die Gyroskopsensoren, ist das Sichumschauen im Garten durch Schwenken des Geräts möglich. Hat man dann noch Kopfhörer auf, ist das Erlebnis besonders intensiv. Wer noch tiefer eintauchen möchte, findet unter  https://pendereckisgarden.pl/vr  auch eine VR-Version für Google Cardboard. Man lädt einfach die Web-App und steckt das Smartphone in den Schlitz der Brille. Auf diese Weise teilt sich der Bildschirm in eine räumliche Stereodarstellung, die echtes Eintauchen und einen 3D-Effekt mitbringt.

Trotz 3D-Navigation zeigt sich die Desktop-Web­site in Sachen Accessibility vorbildlich – und kann so auch von Nutzer:innen mit Seheinschränkungen oder Behinderungen erlebt werden. Eine Vorgabe des Kunden war, dass »Penderecki’s Garden« nur mit einer Tastatur bedient werden kann, für Screenreader zugänglich ist und dass er im Kontrastmodus angezeigt wird. »Wir können uns rühmen, dass dies wahr­scheinlich eine der ersten Anwendungen auf Basis von WebGL mit einer so ausgefeilten Accessibility-Schicht ist«, freut sich Romanski.

Was sind Punktwolken, PCD-Format und PCL?

Punktwolken sind eine Menge von Punkten eines Vektorraums mit einer unorganisierten Struktur – daher »Wolke«. Aufgrund ihres Datenvolumens können solche Punktwolken eine Herausforderung beim Speichern und Laden darstellen. Daher benötigt man einen effizien­ten Zugriff auf einzelne Bereiche.

Das PCD(Point Cloud Data)-Format nutzt aus diesem Grund sogenannte Point Cloud Libraries. Eine Point Cloud Library (PCL) ist eine Open-Source-Bibliothek, die 3D-Auf­gaben wie Berechnungen und 3D-Geometrie in Algorithmen übersetzen kann, etwa für das Abschätzen von Eigenschaften, zur Rekons­truktion von Oberflächen sowie fürs Filtering, Segmentieren oder die Objekterkennung. Zudem können Module in kleinere Bibliotheken imple­mentiert und einzeln kompiliert werden.

WebGL: API für 3D-Rendering in HTML

Das 3D-Erlebnis von »Penderecki’s Garden« basiert auf WebGL, einer API, die auf OpenGL ES 2.0 basiert. Ziel: 3D-Rendering im HTML-Canvas-Element ermöglichen. WebGL-Programme bestehen aus Steuercode in JavaScript und Shadercode (GLSL), der auf dem Grafikprozessor (GPU) des Computers ausgeführt wird. WebGL-Elemente lassen sich mit anderen HTML-Elementen kombinieren.

Dieser Artikel ist in PAGE 11.2021 erschienen. Die komplette Ausgabe können Sie hier runterladen.

PDF-Download: PAGE 11.2021

Produkt-Details anzeigen

Designprojekte kalkulieren – Honorare durchsetzen ++ Sustainable Design ++ Inspiration: Pilze ++ SPE-CIAL Caroline Sinders ++ Making-of 3D-Experience »Penderecki’s Garden« ++ Ratgeber: Mentoring in der Kreativbranche ++ AR-Audioguide Drifter

8,80 €

AGB

Stefan von Gagern, Freelance-Autor und Content Strategist, steht 3D-Navigationen und modernen klassischen Komponisten eigentlich etwas skeptisch gegenüber. Penderecki’s Garden begeisterte ihn. Und: Jetzt gehört er sogar zu den aktiven Hörern des Maestros.