Metaverse Prototype: So entstand Journee für 3D-Experiences

 Der Reiz von Messen, Ausstellungen und Events liegt darin, innovative Produkte oder Exponate haut­nah zu erleben, sich unterhaltsam auf den letzten Stand der Entwicklung zu bringen, sich inspirieren zu lassen und neue Kontakte zu knüpfen – Dinge, die seit Corona nicht mehr so einfach analog stattfinden können und daher meist auf irgendeinem Weg ins Web gewandert sind, wo sie seit den letz­ten Monaten als Webinar, Livestream oder VR-Welt wieder auftauchen.

Nach ersten, provisorischen Lösungen in der Aus­stellungs- und Eventgestaltung sehen wir inzwischen langfristig aufgesetzte Ergebnisse dieses Digitali­sierungsschubs – eines davon und ein sehr spannendes ist der Social-Experience-Stream »Journee«. Hinter der cloudbasierten Anwendung des Berliner Designstudios Waltz Binaire verbirgt sich eine maßstabgetreue, acht Hektar große Event­welt mit zahlreichen Features, in der Menschen im virtuellen Raum nicht nur einfacher zusammen-, sondern einander auch wirklich näherkommen sollen.

Dieser Artikel stammt aus

Unity in der Cloud: So macht Waltz Binaire »Journee«  im Browser erlebbar

PROJEKT Virtueller Messe- und Event-Space »Journee« als Social-Experience-Stream ↗ https://journee.live

DESIGNSTUDIO Waltz Binaire, Berlin ↗ https://waltzbinaire.com
TECHNIK three.js, Unity, ProcessWire, Amazon Web Services, Kinect 2, vvvv
ZEITRAUM seit März 2020

So könnten künftig Event-und Ausstellungsräume aussehen. Anders als viele andere Unity-Anwendungen setzt die Grafikpracht bei »Journee« keine anspruchsvolle Hardware beim User voraus – sie lässt sich von jedem Gerät aus über den Browser von einem Cloudserver streamen

Virtuelle Räume: Accessibility ist alles

Als bei Waltz Binaire Mitte März aufgrund des Shutdowns alle Projekte pausieren mussten und das Studio plötzlich leer war, wollte Gründer und Artdirektor Mio Loclair so schnell wie möglich eine Lösung dafür finden, dreidimensionale Objekte der Öffentlichkeit zugänglich zu machen – konkret die eigene KI-generierte Marmorskulptur »Helin«, die seit Jahresanfang darauf wartet, ausgestellt und räumlich erlebt zu werden.

»Also habe ich in Rücksprache mit meinem Geschäftspartner Thomas Lorenz die ersten zwei Wochen zum Thema Wahrnehmung im Raum recherchiert und mir die Frage gestellt, wie Menschen Aus­stellungen und Events erleben wollen. Und welche Wege es gibt, sie in neuen virtuellen Räumen möglichst authentisch zusammenzubringen.« So entstand unter dem Arbeitstitel »IMCA« (International Museum of Contemporary Art) das erste Konzept für einen digitalen Space, der grundsätzlich von jedem Gerät aus direkt über den Browser erreichbar sein sollte, um möglichst vielen Menschen den Zutritt
zu ermöglichen.

Waltz Binaires KI-generierte Skulptur »Helin« (oben links) fräste ein KUKA-Roboter aus schwarzgrünem Mamor aus Carrara (daneben). Mittlerweile hat ihr virtuelles Abbild mit wunderbar glänzender Textur den passenden Platz in »Journee« gefunden

Vom three.js-Prototyp zur Unity-Welt

Ausgehend von der »Accessibility«-Maxime begann das Studio damit, den Prototyp eines Ausstellungsraums zu programmieren, und bereits Anfang April war die erste Version des »IMCA« als three.js-Anwendung über den Browser zugänglich; eine rund 80 Quadratkilometer große Eventfläche mit verschiedensten Räumen, in denen der User dreidimen­sionale Objekte erkunden, Videostreams schauen oder chatten konnte. »Three.js hat allerdings den Nachteil, dass es auf dem Gerät des Besuchers ausgeführt wird. Damit stoßen wir zwangsläufig an Grenzen, was die Performance und vor allem was die Grafikqualität angeht«, so Mio Loclair.

Um ein positives Erlebnis für die User sicher­zustellen, entwickelte Waltz Binaire in nur zwei Monaten eine 20 Gigabyte große Unity-Anwendung – jetzt unter dem Namen »Journee« –, die auf Cloud-Servern ausgeführt wird. Das bedeutet, dass die Besucher nur eine gute Internetverbindung benötigen, um die 3D-Welt über ihren Browser zu streamen. Die verschiedenen Inhalte verwaltet das Studio über eines der gängigen Content-Management-Systeme (zurzeit ProcessWire), das es Kunden von Waltz Binaire ­erlaubt, mit eigenen Medien selbst ein Kon­ferenz­programm aufzusetzen.

»Journee« in the making: oben noch in einer geschlossenen Halle, aber schon detailgenau aufgelöst, unten ist die Anwendung in den Wald und von three.js auf Unity umgezogen

Für die Entwicklung des virtuellen 3D-Space nutzte das Team von Waltz Binaire Unity. Mit dessen Tiefenschärfe-Effekt kann man nähere Objekte realitätsgetreu fokussieren

Die Navigation in »Journee« hat Mio Loclair so einfach wie möglich gehalten: Bei Klick auf den Sneaker am Bildrand drehen wir uns zu dem Schuh hin. Ein weiterer Klick und wir nähern uns ihm so weit, dass wir sämtliche Details genau erkennen können

Als Social-Experience-Stream bietet »Journee« verschiedene Kommunikations-funktio­nen: Zur Begrüßung von Messebesuchern und zum Austausch untereinander gibt es einen Chat und zum Teilen von Events diverse Social-Media-Schnittstellen

Wir konnten »Journee« vorab besichtigen. Begleitet von Mio Loclairs Avatar, verlassen wir hier gerade die gläserne Lobby und starten unsere Tour. Überall treffen wir auf fotorealistisch wirkende Exponate wie diesen Porsche

Move to Click: Navigation in 3D

In 3D-Anwendungen ist das Thema Navigation im Raum von entscheidender Bedeutung. Sowohl im Vorläufer »IMCA« als auch in in der Unity-Anwendung »Journee« konnte man sich ganz klassisch per Maus und Tastatur bewegen – etwas, das gameaffine User problemlos beherrschen, weniger gewandte Nutzer kommen jedoch schnell durcheinander und entsprechend schlecht im Raum voran. Inzwischen sorgt ein Move-to-Click-Point-Script in Unity dafür, dass man nur auf ein virtuelles Objekt klicken muss, um es sich anzusehen oder sich ihm zu nähern. Das Besondere: Alle Aktionen benötigen lediglich einen Klick, und es genügt die rechte Maustaste, sodass sich das Navigationsschema problemlos auch auf Touchscreens übertragen lässt. »Das ist sehr intuitiv. Wir wollten den ersten Navigationsversuch der Nutzer sofort positiv bestätigen«, erklärt Mio Loclair.

Klickt der Anwender ins Zentrum des Bildschirms (oder in seine Nähe), geht die Anwendung davon aus, dass er sich vorwärtsbewegen möchte, während ein Klick am Bildschirmrand nahelegt, dass man sich umschauen möchte. Rückt dadurch ein Objekt weiter ins Zentrum, kann der User per Klick einfach ­darauf zugehen. Ähnlich einem Laserstrahl, den man auf ein Objekt richtet, um zu sehen, wo er auftrifft, bestimmt dabei ein Raycasting-Verfahren in Unity die Position des Klicks im Raum (https://is.gd/unityMTCP). »Wir lassen den Besucher etwa 70 Prozent des Weges zu seinem Klickpunkt zurücklegen, damit er nicht direkt auf dem Objekt landet. Mit ­dieser Navigation kann von 5 bis 95 wirklich jeder umgehen«, so Mio Loclair.

Bild: Stillfoto//Beleuchtungsmeisterjenos@lightsoldier.com

Bild: Stillfoto//Beleuchtungsmeisterjenos@lightsoldier.com

Im Studio von Waltz Binaire in Prenzlauer Berg treffen Kunst, Design, Kommunikation und Technologie aufeinander. Zwischen fünf und zehn Mitarbeiter arbeiten seit März am virtuellen Event-Space »Journee«

3D-Welten: Wald der Entdeckungen – und Begegnungen

Man betritt »Journee« durch eine gläserne Lobby, die den Blick auf einen in Echtzeit gerenderten foto­realistischen Wald eröffnet. Auf einem kleinen Platz vor dem Gebäude parkt ein alter Porsche, kurz da­hinter beginnt ein kleiner Pfad. In »Journee« scheint tagsüber immer die Sonne, und während man­cher Kunstkritiker über das tote Licht in Online-­Ausstellungen klagt, treffen uns hier beim Blick in die Baumwipfel eindrucksvolle Strahlenbün­del – die god rays. Die volumetrische Lichtstreuung ist nicht nur ein beliebter, sondern maßgeblicher 3D-Effekt, um möglichst realitätsnahe 3D-Welten zu schaffen.

Am Wegesrand begegnen uns weitere Skulptu­ren und Objekte, um die wir herumgehen können. So können wir sie aus nächster Nähe in detailgetreuer 4K-Auflösung bestaunen – wie bei einem Parcours das nächste Ziel immer in Sichtweite. Es folgen Gebäude mit Veranstaltungsbühnen, schwebende Exponate und Großbildschirme, auf denen Konzerte, Filme oder Vorträge laufen. Dank virtuellem »Location-based Sound« hören wir den jeweiligen Act, sobald wir nahe genug an ihn herankommen. »Man muss sich mit seinem Avater dem Bildschirm physisch nähern, um die Inhalte zu hören, so entstehen Gruppen von Zuhörern, die sich gegenseitig sehen und ansprechen können.« Besonders angetan hat es uns der volumetrische Stream einer Tiefenkamera, bei dem das Bild des Speakers als Partikelwolke ausgegeben wird und so ein zusätzlicher holografi­scher Effekt entsteht (siehe Making-of hier).

Wollen Nutzer miteinander interagieren, genügt ein Klick auf einen fremden Avatar, um zunächst seine öffentlichen Profilinformationen zu erhalten. Diese kann jeder selbst bearbeiten und mit seinen Accounts in sozialen Netzwerken verknüpfen. Um in Kontakt zu kommen, genügt ein weiterer Klick und ein Chatfenster öffnet sich. »Wir haben auch kleine Gimmicks versteckt, die man entdecken und dann gemeinsam spielen kann. Gokarts zum Beispiel: Ein Wettrennen oder eine Tour durch die Welt damit machen zusammen viel mehr Spaß«, erklärt Mio Loclair. »Auf diese Weise regen wir die Vernetzung und den Austausch der Gäste an.« APIs, um das eigene Erlebnis in Instagram zu teilen oder auf Twitch zu streamen, sind ebenfalls vorhanden. So kommen soziale Aspekte und der Austausch der ­Besucher an keiner Stelle in »Journee« zu kurz.

Waltz Binaire: Keine Trennung von Code und Gestaltung!

Nach einer kurzen, aber intensiven Research­phase beginnt Waltz Binaire stets direkt mit der Programmierung, um möglichst frühe Feedbackphasen zu haben und dabei herauszufinden, ob die Idee – meist eine technologi­sche Innovation – in die richtige Richtung geht, und konkret zu sehen, was sie erwarten können. Dabei übernimmt das 2015 von Mio Loclair und Thomas Johann Lorenz gegründete Studio in Berlin ungefähr zwei bis drei freie Forschungsprojekte im Jahr, und auch die Mitarbeiter – je nach Auslastung zwischen fünf und zehn – sind dazu angehalten, rund 20 Prozent ihrer Zeit für freie Projekte zu nutzen. Diese sollten sich innovativen Technologien widmen, im Bereich Kunst angesiedelt sein oder ein Thema mit gesellschaftlicher Relevanz bearbeiten.

Der Kundenkreis von Waltz Binaire ist breit gefächert und reicht vom Techkonzern bis zum Automobilunternehmen. Allen gemeinsam ist, dass sie ein großes Interesse an der Kombination von Gestaltung und Technologie haben und offen sind für Innovationsprojekte. Ein Steckenpferd des Studios sind Beratung und Forschung zu KI im Kontext von visueller Kommunikation. Das aktuelle Projekt be­leuchtet das Thema Streaming: Der Trend zu 5G und die Auslagerung von Prozessen in die Cloud einerseits und die Frage nach der Zugäng­lichkeit für alle andererseits stehen hier im Zentrum.

Klimaschutz kommt vor Real Life

Wie sich die gebeutelte Event- und Ausstellungsbranche erholen wird, lässt sich momentan höchs­tens erahnen, aber Mio Loclair glaubt nicht zuletzt aus Klimaschutz- und Nachhaltigkeitsgründen an sein Konzept: »Künftig werden wir uns noch kriti­scher fragen, ob es sich lohnt, für eine einzige Veranstaltung um die halbe Welt zu reisen. Dass man dank unterschiedlichster digitaler Lösungen durch­aus darauf verzichten kann, haben die letzten Monate bewiesen.«

Aussteller und Veranstalter lädt Waltz Binaire dazu ein, in der vorhandenen Cloud-Infrastruktur mit Unterstützung des Studios ihre ganz ei­genen virtuellen Welten zu gestalten. »Das kann ­eine Mondlandschaft oder Unterwasserwelt sein – Hauptsache, viele Menschen können zusammenkommen, sich kennenlernen, sich austauschen und sich gegenseitig inspirieren.« Wem der Wald gefällt, der kann die virtuellen Räume von »Journee« auch pro virtuellem Quadratmeter anmieten und über das einfach bedienbare CMS mit eigenen Inhalten wie Videos, Bildern oder PDFs bespielen. So wie Waltz Binaire hier neue Maßstäbe für virtuelle Events setzt, wünschen wir uns noch mehr Veranstaltungen, die für alle zugänglich, so interaktiv und bezaubernd sind.

Volumetrischer Videostream mit Kinect und vvvv

Mio Loclair zeigt, wie man einen volumetrischen Videostream mithilfe der Kinect und der grafischen Entwicklungsum­gebung vvvv realisiert

Damit Besucher unserer virtuellen 3D-Welt holografische Präsentationen erleben, bei der sie sich um einen Sprecher oder ein Objekt herumbewegen, nut­zen wir einen volumetrisch räumlichen Stream. Um diesen zu implementieren, greifen wir auf folgende Lösung zurück: Wir nehmen das Bild mit ­einer gewöhnlichen Kinect 2 auf und verarbeiten es in vvvv, um es streamen und in der 3D-Umgebung visualisieren zu können.

1. Räumliche Aufnahme: Bilder mit PlayerTextur maskieren

Die Aufnahmen machen wir mit einer Kinect-2-­Kamera und empfehlen vvvv als Entwicklungsumgebung zur Auswertung der Daten. Die Kinect liefert drei Bildquellen für unsere Anwendung: Erstens eine sogenannte PlayerTextur, die den menschlichen Akteur vom Hintergrund separiert. Die kinect kann bei jedem Pixel erkennen, ob er zum Körper des Darstellers gehört oder nicht. Zudem erhalten wir von der Kinect-Kamera ein 3D-Bild mit räumlichen Informationen sowie ein klassisches Farbbild. Um unsere Bildinformationen für den Stream vorzubereiten, maskieren wir das 3D- und das Farbbild mit der PlayerTextur in vvvv. Dadurch erhalten wir später die Informationen für unsere Partikel durch die der Stream räumlich wird.

2. 2-Kanal-Streaming in die Cloud

Für das Streaming war es wichtig, das Farb- und das 3D-Bild nebeneinander anzuordnen, sodass wir zwei Kanäle in einem Bild übertragen. Das hat den Vorteil, dass die beiden zusammengehörigen Bilder stets synchron sind. Wir streamen es über das Open-Source-Streaming-Tool OBS und empfangen den Stream auf dem Server, zum Beispiel Ant Media oder Amazon Cloud. Von dort aus können unterschiedliche Applikationen – bei uns die Unity-Anwendung – das Bild via HTTP-Live-Streaming-Link empfangen.

3. 3D-Visualisierung durch GPU-gerenderte Partikel

Wir empfangen nun in unserer Unity-Anwendung ein Bild als Stream, das zum einen die 3D-Positio­nen des Körpers enthält und zum anderen die Farben. Um daraus Punktwolken und den dreidimensiona­len Effekt zu generieren, arbeiten wir in Unity mit GPU-basierten Partikeln, die wir über das Particle System Main Module modifizieren können.

Jeder einzelne Partikel wird durch eine Box dargestellt und erhält eine dieser Box zugeordneten Bildkoordinate. Diese referenziert einen Punkt und ist dafür zuständig, diesen Pixel farblich und räumlich abzubilden. Durch Instancing, also die Berechnung auf der Grafikkarte, können wir so über eine Million fliegender Partikel den Körper des Akteurs visualisieren. So ent­steht ein detailliertes und dynamisches Abbild in 3D, das wir schließlich wir über die VideoPlayer-Komponente in Unity ausspielen.

Mio Loclair studierte Mensch-Maschine-Interaktion am HPI in Potsdam. Für ­»Journee« plant er ein exklusives Opening-Event. Mehr dazu im Newsletter, abonnierbar unter https://journee.live.