VR Design in der Praxis

Kopfüber geht es abwärts durch die Wol­kendecke, im Sturzflug über Ulm anno 1890. Die Haare flattern. Dass der Wind da­zu aus dem Ventilator des Ganz­kör­per­flug­simulators Birdly von Somniacs aus Zürich kommt, hat man nach Start der VR-Anwendung gleich wieder vergessen, und auch die Brille spürt man gar nicht mehr. Dort unten funkelt die Stadt in der Morgensonne, mittendrin das fertige Ulmer Münster – nur sein Turm ist noch nach 500 Jahren Bauzeit eingerüstet. Or­gel­klän­ge und Chorgesang hallen herauf, Kirchturmglocken läuten. Schon saust man flügelschlagend durch die engen Gas­sen Rich­tung Donau. »Das Fliegen fühlt sich so echt an, dass die High-End-Technologie, die diese Illusion ermöglicht, völlig in den Hintergrund tritt«, begeistert sich Ina Krüger, Creative Director, beim Kreativ-Projektbüro Interactive Me­dia Foundation (IMF) in Berlin, die das Gesamtkonzept für »Ulm Stories« entwickelte.

»Es geht um keine Guided Tour, sondern um ein emotionales Erlebnis« Ina Krüger, Creative Director bei Interactive Media Foundation in Berlin

Rund ein Jahr dauerte es, bis aus der Idee dieses berauschende Erlebnis hervorging. Den Beginn datiert IMF-Geschäftsführerin Diana Schniedermeier auf das Frühjahr 2016: »Wir hatten von der Initiative ›Zukunftsstadt Ulm 2030‹ erfahren, mit der die Stadt Ulm und ihre Bürger gemeinsam die Zukunft planen und digitale Anwendungen stärker in den Alltag einbinden wollen.« Das inspirierte das achtköpfige IMF-Team in Berlin zu einem technologisch herausfordernden Multiplatform-Konzept, in dem sie unter anderem erstmals auch Virtual Reality einsetzten. Im Sommer 2016 präsentierte IMF dann die »Ulm Stories – Geschichten einer Stadt« den potenziellen Sponsoren und Verantwortlichen der Gemeinde.

Als gemeinnützige GmbH kreiert die IMF häufig selbsttätig Konzepte, die sie dann mit Partnern, Förderungen und anderen Sponsoren umsetzt. In diesem Fall fand sie in der Stadt Ulm und der Müns­ter­gemeinde Ulm starke Partner, ohne die ein solch ehrgeiziges Projekt nicht umzusetzen wäre. Ziel war es, mit einer in Deutschland einzigartigen VR-Flugsimulation sowie einem iBeacon- und App-basierten 3D-Hörerlebnis und – zum Projektlaunch am 14. Juli 2017 – mit einem großen Mul­timedia-Live-Event im Münster die Geschichte der Stadt und ihrer Hauptkirche erlebbar zu machen.

Vor dem Konzept steht die Recherche

Als das Grobkonzept stand, machte sich Ina Krüger, Creative Director bei IMF, an die Recherche. Sie wälzte Bücher im Stadt­archiv und nahm Einsicht in alte Stadtkarten. Wie sah Ulm früher aus? Schließlich entdeckte sie eine Stadtkarte von Ulm um das Jahr 1890. Alles sollte möglichst authentisch aussehen: »Wir wollten mit dem 3D-Nachbau auch vor Experten bestehen können.« Anhand der Karte war schnell auszumachen, welche Gebäude wichtig für Ulms Geschichte waren. Mittelpunkt des Geschehens sollte das Ulmer Münster sein. Krüger berichtet: »Die restlichen Gerüste um die Türme des Müns­ters sind authentisch, denn 1890 wurden dort die letzten Arbeiten durchgeführt. Außerdem sollten sie dem Besucher vermitteln, wie die Menschen vor rund 227 Jah­ren gebaut haben.«

Die historische Recherche war das eine, das Virtual-Reality-Konzept das andere. Die Idee zu einem Flug über die Stadt lag nahe, nicht nur weil das Ulmer Wahrzeichen ein Spatz ist, die Stadt steht auch für Pioniergeist: Hier lebte Albrecht Ludwig Berblinger, der »Schneider von Ulm«, der mit seinem selbst gebauten, den Flügeln der Eule nachempfundenen Hängegleiter erste Flugversuche durchführte – und abstürzte.

Zuerst beschäftigte sich die Kreativdirektorin bei ihrer Recherche mit der Frage: Mit welchen Hilfsmitteln kann man eigentlich in VR fliegen? Kontroller oder Gestensteuerung fand sie nicht überzeugend: »Wer fliegt schon im Stehen?« Dem Traum vom Fliegen kam das Gerät Birdly des Schweizer Herstellers Somniacs da schon näher. »Wir wollten etwas Spek­takuläres. Und das war spektakulär. Das Flug­erlebnis mit Birdly entsprach ziemlich genau unseren Vorstellungen«, freut sich Krüger. »Anfangs stand noch zur Debatte, ob wir uns auf das Flugerlebnis beschränken oder vielleicht eine Storyline mit Hotspots kreieren«, erinnert sie sich. Aber nach ihrem Besuch in Zürich war ihr klar: »Das Gefühl des reinen Fliegens ist so besonders, so einnehmend, dass dies die Hauptattraktion sein musste.« Der Flug über die historische Stadt sollte ohne Vorgaben zu genießen sein, vollkommen frei und ohne Limitierungen, wie unsichtba­ren Tracks. »Es geht nicht darum, eine Guided Tour zu machen, sondern um ein emotionales Erlebnis«, so Krüger.

»Wenn in der Virtual Reality Bewegungen passieren, die nicht durch den User selbst verursacht werden, besteht die Gefahr der Motion Sickness« Christopher Baumbach, Senior Creative Engineer bei Demodern in Hamburg

Erst nachdem diese Rahmenbedingun­gen geklärt waren, setzte sich die Kreativdirektorin in Berlin an die Dramaturgie, um die VR-Anwendung in den Gesamt­kon­text mit Live-Event und 3D-Hörerlebnis zu bringen. Sie stellte sich vor, dass die Anwendung neben einem möglichst detaillierten, dreidimensionalen Nachbau der Häuser auch klangliche Attraktionen bieten sollte. Glockengeläut, Orgelmusik und kirchliche Choräle Ulmer soll­ten die Fliegenden magnetisch zum Münster zurückziehen, damit sie sich nicht in der Peripherie der Stadt verlieren. Für die Akus­tik- und Sounduntermalung en­gagier­te die IMF schließlich die Hörspiel- und Filmmusikspezialisten wittmann/zeit­blom aus Berlin.

Virtuelle Stadtplanung

Die Entwicklung der VR-Anwendung leg­te die IMF vertrauensvoll in die Hand der Digitalagentur Demodern in Hamburg, nicht nur weil man durch persönliche Kontakte verbunden war, sondern weil Demodern bereits unter Beweis gestellt hatte, dass sie im Bereich Virtual Reality frühzeitig fundiertes Know-how aufgebaut hat. Mit dem Birdly hatte Demodern jedoch noch nie gearbeitet. Neugierig auf das Neu­land, stürzte sich das sechsköpfige Team – bestehend aus den Disziplinen Unity Development, 3D Art, User Experience (UX) und Visual Design sowie Projektmanagement – im November 2016 in die Arbeit. Anwendungen für Birdly gab es bis dato erst eine, die vom Hersteller selbst entwickelt wurde. »Wir haben uns in Berlin bei IMF einen Flug über New York angeschaut, der zwar ganz gut, aber in unseren Augen noch nicht optimal war«, so Projektma­nagerin Deborah Montag.

»Zuerst wollten wir uns persönlich einen Eindruck von der Stadt verschaffen, denn die alten Bücher und auch die Karte waren schwarzweiß gedruckt. Damit waren weder Material, noch Farbe und Form der Häuser zu erkennen«, erklärt Marie Lazar, 3D Artist bei Demodern. Die Ameri­kanerin studierte Game Design und Kunst an der Michigan State University und arbeitet seit drei Jahren in Hamburg. Um sich einen realistischen Eindruck machen zu können, fuhr sie zuerst zusammen mit der UX-Designerin Mariana Gütt und Debo­rah Montag in die Geburtsstadt Albert Einsteins. »Ich schoss unzählige Fotos vom Ul­­mer Münster herunter, um ein Gefühl für den Aufbau der Stadt zu bekommen, und Close-ups von Gebäude- und Straßenober­flächen nutzte ich später als Textur«, erinnert sich Marie Lazar.

Mariana Gütt ergänzt: »Wir haben uns natürlich auch umgeschaut, welche Häusertypen es gibt, und dann gemeinsam eine Typologie erstellt.« Herausgekommen sind 45 Häusertypen, die den Grundstock für die rund 2000 historischen Gebäude bilden – variiert mit diversen Texturen sowie Fenstern und Türen aus den Fotos. Es gibt spätgotische Fachwerkhäuser und klas­sizistische Gebäude, die Marie Lazar nach dem damaligen sozialen Umfeld zu Vierteln zusammensetzte, mal aufwendi­ger, mal einfacher modelliert. Dazu elf sogenannte Hero-Häuser, vom Ulmer Müns­ter über das Rathaus und Einsteins Geburtshaus bis hin zur im Zweiten Weltkrieg zerstörten Synagoge oder dem Schwörhaus, die Marie Lazar in mühseli­ger Kleinarbeit in Blender  und ZBrush modelte, in Photoshop texturierte und in Unity platzierte – Fotos von Pflasterstraßen und von der Stadtmauer lieferten beispielsweise die Textur für den Metzgerturm. Weitere 6000 Objekte wie Bäume, Tiere, Kutschen, Stege und so weiter dienen der Dekoration und sind teilweise zugekauft und dann modifiziert.

Abstriche machen

Im Dienste einer flüssigen Performance arbeitete Marie Lazar eng mit Christopher Baumbach, Senior Creative Engineer, zusammen, um die Balance zwischen Details und Performance sicherzustellen.

Für das Prototyping modelte Marie Lazar ein Haus komplett aus – erst die Grund­form, auf die sie dann die Textur und Details mappte. Baumbach checkte dessen Renderzeit und wusste damit, wie weit Lazar jedes der Häuser ausgestalten konnte, ohne die Rechenzeit der Echtzeit-VR-Anwendung zu sprengen. »Man muss frühzeitig den kompletten Durchstich machen und testen, auf welchem qualitativen Level man überhaupt arbeiten kann. So spart man sich viel Arbeit«, erklärt Baumbach, der als Coder kontinuierlich das Render-Budget (siehe unten) und damit die Performance im Hinterkopf hatte.

Das verfügbare Render-Budget von ins­gesamt 11 Millisekunden pro Einzelbild müssen 3D Artist und Programmierer gemeinsam sorgsam verwalten. Schließlich muss die ganze 3D-Szenerie mit 8000 Objekten kontinuierlich 90-mal pro Sekunde gerendert werden, um das Erlebnis flüssig und attraktiv darstellen zu können – da­bei kosten die Bäume in der Szene bereits zwei, die Schornsteine ungefähr 1,5 Milli­se­kun­den. »Reduziert haben wir beispielswei­se Fens­terläden und Fensterbänke, damit die Echt­zeit-Performance nicht leidet«, er­klärt Unity-Spezialist Baumbach, der auch die Programmiersprache C# und die Shader-Programmiersprache C for Gra­phics beherrscht. Das Ergebnis wurde in regelmäßigen Abständen im agilen Workflow von Art- und Kreativdirektoren sowie der verant­wortli­chen UX-Designerin Mariana Gütt geprüft. Alle drei bis vier Wochen fand außerdem ein Review Meeting mit IMF statt, bei dem Ina Krüger die Zwischenergebnisse checkte.

»Man muss frühzeitig testen, auf welchem qualitativen Level man überhaupt arbeiten kann, so spart man sich viel Arbeit« Christopher Baumbach, Senior Creative Engineer bei Demodern in Hamburg

»Manchmal tut es wirklich weh, zwischen künstlerischem Anspruch und Limitierung zu entscheiden«, räumt Marie Lazar ein. Das ist das Schicksal eines 3D Artists. »Gerade das Ulmer Münster hat so viele Schnörkel, Bögen und Schmuck­elemente, diese musste ich in unendlich scheinenden Stunden vereinfachen, also Polygone reduzieren, damit sie nicht so viel Render-Budget fressen.« Das ist ihr ge­lungen. Sie hat das Münster von ursprüng­lich 300 000 auf knapp 160 000 Polygone reduziert, und dennoch hat man nicht den Eindruck, dass die Gebäude nicht ausmodelliert wären.

VR-Konzept verfeinern

Neben der Performance-Optimierung gab dem Team die sinnvolle Begrenzung des Flugareals zu denken, schließlich konnte man die Stadtgrenze und die Landschaft nicht unendlich weitergestalten. Im Grob­konzept war einmal angedacht gewesen, drei Layer zu produzieren: Dabei sollte die Stadt um das Münster herum sehr definiert und fein und zur Peripherie hin immer weniger ausmodelliert werden. »Das haben wir unterlassen, weil diese schlechte Qualität im Modeling die gesamte Experience vehement stört«, erklärt UX-Designerin Mariana Gütt.
Und doch war die Peripherie lange ein Problem. Sollte man langsam von der Land­schaft in Raster übergehen, um dem ausbrechenden User zu signalisieren, dass er in die Stadt zurückkehren sollte? Oder den Gegenwind verstärken? Darüber gab es lange Debatten. »Wenn in der Virtual Reality Bewegungen passieren, die nicht durch den User selbst verursacht werden, besteht ganz schnell die Gefahr der Motion Sickness«, weiß Christopher Baumbach aus Erfahrungen im Gamedesign. Also ver­warf man diese Idee zugunsten eines makellosen Flugerlebnisses. »Stattdessen wird nun die Landschaft immer langweiliger – hier und da ein Haus, ein paar Schafe, das war’s. Da kehrt jeder um«, lacht Mariana Gütt. Aber auch Stadtmauer und die Donau bilden eine natürliche Grenze, und ein Glockenschlag vom Münster erinnert den User klanglich daran, umzudrehen.

Über die Flugsteuerung brauchte sich die UX-Designerin keine Gedanken zu ma­chen, denn diese war von der Hardware vor­gegeben. Wie beim Fliegen muss der User mit den Flügeln schlagen, um Höhe und Geschwindigkeit zu erlangen. Stellt er die Handflächen nach hinten, gewinnt er an Höhe, dreht er sie nach vorn, geht er in den Sinkflug. Man kann den Kör­per drehen, um rechts und links zu fliegen. Also kein Problem, die Bedienung ist intuitiv, erschließt sich jedem. Die Geschwindigkeit ist relativ rasant. Somniacs hat diese nach User-Tests festgelegt. »Wür­de man langsamer fliegen, hätte man das Gefühl, man würde jederzeit herunterfallen«, bestätigt Mariana Gütt.

Natürlich besteht bei einem derart dynamischen Flug die Gefahr der Kollision. »Auf keinen Fall wollten wir den Flug dadurch stoppen«, so Gütt. Sie wollte User nicht zwingen, dann einen Reset-Knopf drücken zu müssen, um den Flug wieder von vorn zu beginnen. »So ein abruptes En­de gibt dem User zudem das Gefühl, wie ein Pfeil in der Wand zu stecken«, fügt Chris­topher Baumbach hinzu. »Deswegen haben wir das verändert und gerade dies­bezüglich ein sehr positives Feedback der Birdly-Hersteller erhalten«, sagt Projektleiterin Deborah Montag. Bei einer Kol­lision mit einem Schornstein oder einem Gebäude wird das Bild nun kurz schwarz und baut sich dann auf einer höheren Ebene in einer sogenannten Safe Zone wieder auf, sodass der User nach wenigen Augenblicken weiterfliegen kann, ohne Gefahr zu laufen, wieder zu kollidieren. In User-Tests bei Demodern haben die Teilnehmer diese positive Experience bestätigt.

»Wir wollten mit dem 3D-Nachbau auch vor Experten bestehen können« Ina Krüger, Creative Director bei Interactive Media Foundation in Berlin

Explorative Arbeit hat sich gelohnt

Alle diese Herausforderungen mündeten bis zur Fertigstellung Ende Mai 2017 in eine Lösung, mit der auch das Kreativ-Projektbüro IMF glücklich ist. »Wir haben eine Menge Learnings aus dem Designprozess mitgenommen. Es war ein sehr prototypi­sches und exploratives Arbei­ten«, resümiert Deborah Montag zufrieden. Sie wür­de sich ein wenig mehr Rechenpower wün­schen, um mehr Ambiente wie Menschen und Tiere in Bewegung unter­zu­brin­gen. Doch auch ohne solche Gimmicks ist der Flug ein Erlebnis, was auch IMF und der Birdly-Hersteller Somniacs bestätigen.
Ausprobieren kann man den Birdly und die Echtzeit-VR-Anwendung »Ulm Sto­ries – Der Traum vom Fliegen« in einem von IMF und dem Interior-Design-Atelier Bou­che­rie & Vollmert gestalteten Raum in der Kram­gasse 3 in direkter Nähe zum Ulmer Münster. Seit Mitte Juli können Flugbegeisterte nun für 5 Euro eine Runde über dem historischen Ulm drehen und durch die Gassen schweben. Sollten Sie demnächst mal in Ulm sein: Viel Spaß und guten Flug.

Was ist eigentlich ein Render-Budget?

Virtuelle Echtzeiterlebnisse wie »Ulm Stories – Der Traum vom Fliegen« müssen flüssig laufen, haben aber nur eine bestimmte Rechenleistung zur Verfügung. Für 3D Artists heißt es dann oft Abschied nehmen von lieb gewonnenen Details

Das Rendern (Zeichnen) der 3D-Grafik in Echtzeit funktioniert in etwa wie ein Daumenkino. Viele Einzelbilder in schneller Abfolge ergeben ein realistisches Bewegtbilderlebnis – je mehr Einzelbilder, desto flüssiger. Die Anzahl der Einzel­bil­der pro Sekunde wird in frames per second (fps) gemessen. Im Games-Bereich halten sich schon seit Langem 30 oder 60 fps als Standard, was für die Wiedergabe auf handelsüblichen Bildschirmen ausreicht. In Virtual-Reality-Anwendun­gen liegt der aktuelle Standard bei 90 fps, denn selbst minimale Kopfbewegungen verändern den Blickwinkel und müssen direkt aufs Auge übertragen werden. Erst ab 90 fps kann man Motion Sickness vermeiden, die entsteht, wenn zu wenige Frames die Bewegung quasi mit Verzögerung darstellen.

Teilt man eine Sekunde in 90 Einzelbil­der auf, ergibt sich eine Anzeigedauer von 11 Millisekunden pro Einzelbild. Da in Virtual Reality allerdings ein Bild pro Auge benötigt wird, um einen dreidimensiona­len Eindruck zu erzeugen, müssen zwei Bilder innerhalb dieser Zeitspanne berechnet werden. Also sind tatsächlich 180 Einzelbilder erforderlich. Bei dieser extrem kurzen Zeitspanne handelt es sich um die verfügbare Render-Zeit, unter 3D Artists und Entwicklern spricht man daher vom »Render-Budget«.
Liegt die gesamte Renderzeit einer VR-Szenerie beispielsweise bei akzeptablen 10 Millisekunden und ein weite­res detailliertes Gebäude, das 2 Millisekunden beansprucht, soll hinzugefügt werden, würde das Render-Budget um ei­ne Millisekunde überschritten werden. In diesem Fall wäre man zwangsläufig gezwungen, die Berechnungszeit zu ver­­kürzen, indem man entweder andere Ob­­jekte aus der Szene entfernt oder den Detailgrad reduziert. Um die Ren­der­zeit für jedes Element exakt zu bemessen, setzt man sogenannte Profiler ein, die Game-Engines wie Unity oder CryEngine mitbringen.

So oder so, die Summe der individu­el­len Renderzeiten aller darzustellen­­den Objekte, Effekte et cetera darf das Ren­der-Budget nicht überschreiten, sonst ließe sich die in der Virtual Reality absolut kritische flüssige Wiedergabe nicht gewährleisten.

Alle weitere PAGE-Connect-Artikel zum Thema VR Design finden Sie hier.

Zum Download des PAGE Connect eDossiers »Das macht ein VR Designer bei der Interactive Media Foundation und bei Demodern« geht’s hier.

[1243] VRDesignCCCIMFD17

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken