Für das Live-Event zum Albumrelease von Kollektiv Turmstrasse entwickelte Demodern eine virtuelle Klublandschaft in WebGL, in der das Publikum als 3D-Avatar unbeschwert feiern kann.
Klubabend im Cyberspace: Das DJ-Duo Kollektiv Turmstrasse bringt sein neues Album heraus und bat Demodern um Entwicklung und Design einer virtuellen Releaseparty in 3D. Wir zeigen, wie die Szenerie und die Avatare in WebGL entstanden sind.
»Trodes (Headset) auf . . . und da waren sie, alle Daten der Welt, dicht an dicht wie eine einzige riesige Neonstadt, sodass man herumziehen 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
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 Digitalagentur 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.
Die WebGL-Elemente lassen sich je nach Kundenanforderung wiederverwenden, und die auf ihnen basierenden 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 Creative 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 Anwendungen konzeptionell erheblich. Dabei will Demodern keinen Ersatz für ein physisches Live-Format nachbauen, so Produktmanagerin Peters, »sondern ein eigenständiges Erlebnis an dessen Stelle setzen«.
Erfrischung gefällig? An der Bar erhalten Klubgäste die bunten Neonhighlights für ihre Avatare – und dann ab auf die Tanzfläche! Über ein Steuerrad können User aus acht unterschiedlichen Tanzbewegungen wählen. Überall, William Gibson lässt grüßen, leuchten »ElekTrodes«.
Cyberpunks in Neonlights: Visuelles Konzept
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-Gelände kreieren wollten, das auf die Musik einzahlt und technologische Akzente enthält«, berichtet Nadollek. Als Beispiele dienten den Kreativen etwa das Fusion Festival oder der Burning Man in der Wüste Nevadas und die düstere Neonlichtästhetik des Cyberpunk.
Die Crowd im Eventspace Das von Josef Stängl gezeichnete visuelle Konzept des Eventspace für Kollektiv Turmstrasse in düsterer, futuristischer Cyberpunk-Ästhetik.
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 wollten 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 Umsetzung 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 Turmstrasse 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 Erstes 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ürsteher erklärt, wie man die Steuerung benutzt, nämlich klassisch über die Pfeiltasten oder über die Buchstaben W, S, A und D. Weston: »Der Türsteher ist ein nettes erzählerisches Storyelement und hilft beim Onboarding.«
So geht's weiter
Tanzen in der Dystopie: Sound, Licht, Interaktionen
Klubabend mit Freunden: Technische Hürden meistern
