Wie Demodern eine WebGL-DJ-Party für Kollektiv Turmstrasse entwickelte

Seit Monaten sind in ganz Deutschland die Klubs geschlossen – eine enorme Belastung für Betreiber, Musiker und Fans. Das DJ-Duo Nico Plagemann und Christian Hilscher aka Kollektiv Turmstrasse wollte trotzdem sein zweites Album in einem Live-Event vor Fans droppen und bat die Hamburger Digital­agentur Demodern, die Releaseparty zu virtualisieren. »Die Klubkultur liegt brach, Corona-Müdigkeit macht sich breit – alle Menschen sehnen sich nach Events«, sagt Katrin Peters, Produktmanagerin für virtuelle Events bei Demodern. Seit 2020 beschäftigt sich Demodern intensiv mit dem Thema und entwickelt auf Basis von WebGL, JavaScript und einem darauf abgestimmten Open-Source-Tech-Stack 3D-Anwendungen, die direkt im Browser laufen.

»Trodes (Headset) auf . . . und da waren sie, alle Daten der Welt, dicht an dicht wie eine einzige riesige Neonstadt, sodass man herum­ziehen konnte und einen gewissen Zugang zu ihnen hatte – zumindest optisch, denn sonst war es zu kompliziert, sich an bestimmte Daten ranzupirschen …«

William Gibson, Mona Lisa Overdrive, 1988

Die WebGL-Elemente lassen sich je nach Kundenanforderung wiederverwenden, und die auf ihnen ba­sierenden Apps kann Demodern beliebig um neue Funktionen erweitern. »Das kann eine Businesslösung sein – zum Beispiel eine Herstellermesse oder eine Lernplattform –, aber auch eine Umgebung für Livestream-Events wie beim Albumrelease von Kollektiv Turmstrasse«, erklärt Crea­tive Developer Sam Bäumer, verantwortlich für die Programmierung des Backends und der 3D-Umgebung der virtuellen DJ-Party. Trotz der stets ähnlichen technischen Basis unterscheiden sich die An­wendungen konzeptionell erheblich. Dabei will Demodern keinen Ersatz für ein physisches Live-Format nachbauen, so Produkt­managerin Peters, »sondern ein eigenständi­ges Erlebnis an dessen Stelle setzen«.

• AGENTUR Demodern, Hamburg
• PROJEKT Virtuelles 3D-Festivalgelände für den Launch von »Unity of Opposites«
• KUNDE Kollektiv Turmstrasse, Hamburg
• TECHNIK Backend-Entwicklung: JavaScript/ECMAScript, React, three.js, React-Three-Fiber, socket.io, node.js, strapi; UX und 3D-Modelling: Unity, Autodesk Maya, Babylon Exporter für Maya, Adobe Mixamo, Advanced-Skeleton für Maya, ZBrush, Adobe Substance Painter; Kollaboration: Miro, Slack, Discord
• ZEITRAUM Januar bis März 2021

Visuelles Konzept: Cyberpunks in Neonlights

Da es für WebGL anders als bei Unity oder Unreal keinen leicht zu bedienenden Editor gibt, war eine enge Zusammenarbeit zwischen Art Direction, 3D Art und Development zu jedem Zeitpunkt des Projekts wichtig. In wöchentlichen Sprints entwickelte das Team um Art Director Niklas Nadollek, UX-­Designerin Tara Weston und 3D Artist Pia Heugel ­zunächst ein grobes visuelles Konzept auf Moodboards in Miro. »Wir einigten uns relativ früh mit Kollektiv Turmstrasse darauf, dass wir ein dystopisch und zugleich futuristisch wirkendes Open-Air-­Ge­lände kreieren wollten, das auf die Musik ein­zahlt und technologische Akzente enthält«, berichtet ­Nadollek. Als Beispiele dienten den Kreati­ven etwa das Fusion Festival oder der Burning Man in der ­Wüste Nevadas und die düstere Neonlicht­ästhetik des Cyberpunk.

Neben den Environment-Entwürfen mit Tanzfläche und DJ-Pult entstanden auch erste Skizzen und Moods für die Charaktere mit zur Szenerie passenden Fashion-Items mit Neonelementen. »Wir woll­ten so aufgeschlossen wie möglich sein, deshalb gibt es in der App keine Vorauswahl, ob man männlich oder weiblich ist, sondern man sucht sich am Anfang einfach einen von sechs Charakteren aus«, sagt Nadollek. Zur Auswahl stehen zwei feminin, zwei maskulin und zwei androgyn wirkende Modelle, die Hautfarbe ist bei allen dem Umgebungslicht geschuldet gleich dunkel.

Knackig eintauchen: UX-Konzept

Aus den ersten groben Skizzen entstand in nur zwei Wochen ein Feinkonzept mit UX-Texten und reingezeichneten Moodboards, ehe das Team in die Um­setzung starten konnte. Die Anwendung besteht im Wesentlichen aus zwei Komponenten: einer HTML-Landingpage und einer 3D-Stage. Auf der Landingpage erinnert dumpfe Musik ans Schlangestehen vor dem Klub. User können sich hier zunächst ein Ticket kaufen und erfahren mehr über Kollektiv Turmstras­se und das neue Album. Sobald das Live-Event startet, wählt man sich mit seiner Mailadresse ein.

»Wir wollten die Hürde möglichst niedrig halten, deshalb haben wir auf eine Passwortvergabe verzichtet. Der Ticketinhaber meldet sich einfach an und erhält dann einen Magic-Link per Mail, über den er kurz und knackig in die Anwendung startet«, sagt UX-Designerin Tara Weston. Hier gelangt man als Ers­tes zur Avatarauswahl, die zugunsten eines flotten Einstiegs keine gängigen Anpassungsoptionen beinhaltet. »Dafür lässt sich das Outfit an der Refreshbar im Klub mit Leuchtstreifen anpassen.«

Nach der Avatarauswahl gelangt man zum Eingang der Eventstage. Ein virtueller Tür­steher erklärt, wie man die Steuerung benutzt, näm­lich klassisch über die Pfeiltasten oder über die Buchstaben W, S, A und D. Weston: »Der Türsteher ist ein nettes erzähleri­sches Storyelement und hilft beim Onboarding.«

Tanzen in der Dystopie: Sound, Licht, Interaktionen

Um das DJ-Pult im Zentrum der Eventstage tanzen bereits ein paar Non-Player-Charaktere. »Die sollen die Bühne optisch füllen, damit es initial nicht so leer aussieht. Wenn die Party losgeht, werden sie nach und nach durch echte Besucher ersetzt«, so Creative Developer Sam Bäumer. Echte Charaktere können dann miteinander chatten, Emojis durch den Raum schmeißen und tanzen. Über ein Steuerungsrad im Interface kann man aus acht Tanzstilen wählen. Die nach der Auswahlroutine startende Animation läuft so lange im Loop, bis man sie ändert oder wieder losläuft, um sich umzuschauen. Die Tanzanimatio­nen stammen aus der Avatar-Library von Adobe Mixamo, das Team musste sie jedoch anpassen: »Die Avatare haben alle das gleiche Skelett, können also alle dieselben Moves machen. Bewegungen, die zu machomäßig aussahen, mussten die 3D Artists aber abmildern«, berichtet Bäumer.

Ein weiteres die Szenerie bestimmendes Element ist der rotierende, soundreaktive Würfel über dem DJ-Pult. Auf ihn werden während der Show Live-Inhalte und Visuals projiziert, die auf Tempo und Stimmung der Musik reagieren. »Wenn der Album-Drop kommt, geht hier oben die Show ab«, sagt Bäumer. »Mittels einer im Vorfeld berechneten Soundana­ly­se lassen wir die Lichter synchron zum Beat pulsie­ren, ohne dass es wie in Realtime den Prozessor belastet.« Was auf dem Würfel passiert, hat Einfluss auf die Beleuchtung der Tanzfläche. Dazu entwickelte Bäumer einen Shader, der die Lichtreflexionen ohne aufwendige Raytracing-Berechnungen im Browser simuliert. »Damit schaffen wir ständig anderes Licht und neue Farben im Spektakel, sodass sich das Erleb­nis noch immersiver anfühlt«, sagt er. Parallel laufen die DJ-Livestreams auf zwei großen Bildschirmen. Nutzer können sie sich per Klick im Fullscreen anzeigen lassen und mit Emojis reagieren.

»Außerdem war uns wichtig, dass man eine weitere Perspektive in der Umgebung hat«, ergänzt Art Dirctor Niklas Nadollek. Durch zwei Portale können sich User in Sekundenbruchteilen auf Plateaus über der Tanzfläche beamen, wo sie über die Stage hinweg auf eine Landschaft blicken. »Wir haben diese Wüsten­atmosphäre mit den großen Monolithen gerendert, damit alles futuristisch und durch die Größenverhältnisse etwas absurd wirkt.«

Klubabend mit Freunden: Technische Hürden meistern

Auch Socialising-Aspekte sollte die Anwendung widerspiegeln. Das Problem: Weder in High-End-Computerspielen noch in virtuellen Events passen mehr als zweihundert Nutzer auf einen Server. Will man mehr Teil­neh­mer, muss man sie auf mehrere Server vertei­len. In diesem Fall erhalten alle Nutzer auf sämtlichen Servern zur selben Zeit dieselben Inhal­te, auch der Chat läuft synchron, aber sie können sich nicht alle gleichzeitig se­hen. »Die Frage ist also: Wie kommt man zusammen auf denselben Server? Man nutzt das ›Find Friends‹-Fea­ture der Anwendung, sucht den Freund, klickt auf ›Join‹, und schon ist man da«, sagt Sam Bäumer. Stehen Freunde am anderen Ende des Klubs, lassen sich so auch innerhalb eines Servers längere Wege bequem zurücklegen. »Was zuerst aus einer techni­schen Notwendigkeit entstand, hat uns insgesamt bei der User Experience weitergeholfen. Mit dem ›Find Friends‹-Feature bin ich immer mit meinen Leuten unterwegs«, sagt UX-Designerin Tara Weston.

Für eine stabile Performance der Browser-App auf älteren Laptops und Tablets mussten die Kreativen die 3D-Szenerie an allen möglichen Stellen optimieren. Für eine prozessorfreundliche Umgebungsbeleuchtung simulierten sie beispielsweise das Licht in Unity und wandelten es mit dem Lightmapping-Plug-in Bakery in Tex­turen um. Man nennt das Light Baking, weil man das Licht sozusagen in die Oberflächen der Objekte einbrennt. So wurden sämtliche Elemente der Szenerie mit einer festen Leuchtfarbe in Lightmaps vorberechnet, sodass der Grafikprozessor des Users die Lichtinformation nicht in Echtzeit berechnen muss.

Avatar Art: Silhouetten modellieren

Die Ausleuchtung der Charaktere wird dagegen in Echt­zeit berechnet. Weil die Experience aber insgesamt recht dunkel ist, musste das Team schon in der Konzeption auf einfache und große Formen achten: »Wir nutzen den Baggy-Style und die Falten in der weiten Kleidung, um das Licht großflächig einzufangen. So entsteht – ganz ohne Muster – ein visuell interessanter Effekt«, erklärt Niklas Nadollek. Wie 3D Artist Pia Heugel die Avatare ganz genau erstellte, erklärt sie in einem eigenen Tutorial.

Heugel und das Team waren während der gesamten Entwicklung abhängig von den Workflows der Developer. »Deshalb haben wir dem Team ein eigenes Dashboard gebaut, auf das es selbstständig Dateien hochladen und diese direkt testen konnte«, berichtet Creative Developer Bäumer. So entstand quasi nebenbei der ers­te Baustein für eine eigene WebGL-Engine.

Ganz anders als die typischen Cyberpunk-Dysto­pien lösen Kollektiv Turmstrasse und Demodern mit ihrer Anwendung also das Versprechen einer besseren Welt durch technologischen Fortschritt ein Stück weit ein. Denn wer weiß schon, wie lange wir noch auf Klubs oder Festivals verzichten müssen – virtuelle Events wie dieses am 17. April gehören jedenfalls zu den positiven Dingen, die uns ein Virus eingehandelt hat.

Web-GL-Tutorial: 3D-Avatare für WebGL optimieren

Pia Heugel, 3D Artist bei Demodern, erklärt, worauf sie beim Design und der technischen Umsetzung der 3D-Avatare für WebGL achten musste, damit sie im Browser gut aussehen und performant laufen.

Dieser Beitrag ist zuerst in PAGE 5.2021 erschienen:

PDF-Download: PAGE 05.2021

Produkt-Details anzeigen

Kalkulation: Das ist Design wert ++ 3D animation with Blender ++ Buchgestaltung ++ Kleine & mittels-tändische Kunden ++ WebGL-DJ-Party ++ Fontfamilie für den Cornelsen Verlag ++ Spezialpapiere für Packa-gings & Co

8,80 €

AGB