Virtueller Ausstellungsraum mit Unreal

Wie wir den Vertrieb von FM Büromöbel unterstützen, indem wir mit Unreal Engine einen virtuellen Ausstellungsraum kreiert haben.

Aus der Mitte des letzten Jahrhunderts ist bei vielen noch das Klischee vom reisenden Staubsaugervertreter präsent. Er zog von Haus zu Haus, klingelte und präsentierte das neuste Produkt seiner Firma direkt vor Ort. Für jeden Vertriebler, dessen Firma weniger portable Geräte herstellt, wie z.B. Möbel, Fußbodenbeläge oder Industrieanlagen, war dies wohl schon immer ein frommer Wunsch. Die längste Zeit behalfen sie sich deswegen mit Katalogen, die sie dem Kunden zeigen oder schicken konnten, oder Ausstellungsräumen, zu denen der Kunde herkommen musste.  

Diese Ansätze bringen ihre eigenen Probleme mit sich: Kataloge veralten schnell und müssen mit jedem überarbeiteten Produkt neu gedruckt und verteilt werden. Ausstellungsräume brauchen Platz und Ressourcen und erfordern aktives Interesse des Kunden, da er sich dorthin begeben muss. Ein großes oder komplexes Produkt für den Kunden erlebbar zu machen und verständlich zu erklären war stets ein Problem für den Vertrieb. 

Mit Hilfe digitaler Vertriebsunterstützung können wir diese Probleme heute lösen, indem wir virtuelle Ausstellungsräume schaffen. Ein virtueller Ausstellungsraum braucht nur so viel Platz wie das Gerät, auf dem er installiert ist, und bietet trotzdem nahezu grenzenlose Ausstellungsfläche. Er kann über das Internet regelmäßig mit den neusten Produkten und Informationen geupdated werden. Da der virtuelle Ausstellungsraum ein interaktives Medium ist, können Informationen Schritt für Schritt präsentiert werden, so dass selbst die komplexesten Produkte erklärt und in allen Details gezeigt werden können.

FM Office World

Mit der FM Office World haben wir für unseren Kunden FM Büromöbel einen solchen virtuellen Ausstellungsraum geschaffen. Das Ziel war es dabei zu zeigen wie mit der breiten Produktpalette von FM Büromöbel die unterschiedlichen Themengebiete bei der Einrichtung moderner Büros abgedeckt werden können. Es ging nicht darum die zahlreichen Konfigurationen einzelner Möbel vollständig abzubilden, da dies bereits über die Website abgedeckt ist, sondern vollständige Einrichtungskonzepte zu zeigen, um dem Endkunden zu vermitteln, dass FM Büromöbel nicht nur einzelne Teile liefert, sondern komplette Büros entwerfen, gestalten und einrichten kann. 

Das Projekt begann mit einer Testphase, in der ermittelt wurde, ob man eine freie Bewegung durch virtuelle Räume auf Touch Eingabegeräten wie Tablets für ungeübte Benutzer realisieren könnte. Nachdem ein zufriedenstellendes Bedienkonzept entwickelt war, begann die eigentliche Projektphase mit der Entwicklung eines Layouts für die Benutzeroberfläche. In diesem Schritt wurde mit dem Kunden auch das Gesamtkonzept ausgearbeitet eine Stadt zu haben, von der aus man in architektonisch diverse Gebäude gelangt.

Technische Umsetzung

Um ein komplexes Projekt, das dutzende Produkte über mehrere Erlebniswelten auf zahlreichen Betriebssystemen in anspruchsvoller 3D Grafik präsentieren kann, umzusetzen bedienten wir uns der Unreal Engine von Epic Games. Diese ursprüngliche für Computerspiele entwickelte 3D Engine ist heute zum Schweizer Taschenmesser für digitale Anwendungen geworden, mit Unterstützung für unter anderem Architekturvisualisierung, virtuelle Filmproduktion und Veranstaltungstechnik. 

Um das Projekt möglichst effizient und barrierefrei umsetzen zu können, entwickelten wir einen Workflow, bei dem wir den Kunden dort abholten, wo er zu Hause war. Die Architektin des Kunden lieferte uns fertig eingerichtete Gebäude im pCon-Planner, einem Standard Tool für Innenarchitektur. Von dort exportierten wir die Modelle einzeln, um sie in Cinema 4D aufzuarbeiten, in Substance Painter zu texturieren und schließlich in Unreal zu importieren. Zwar bietet Unreal auch die Möglichkeit diverse 3D Formate direkt zu importieren, aber mit diesem Workflow hatten wir zu jedem Zeitpunkt die volle Kontrolle, um die Modelle und Texturen so aufzuarbeiten, dass sie auch auf mobilen Geräten nicht zu Performance-Einbrüchen führen würden.

Für technisch Interessierte sind in den folgenden Erklärungen in kursiver Schrift ein paar Details über unseren Prozess.

Modelle aus dem pCon-Planner exportieren

Unsere Arbeit im pCon-Panner beschränkte sich größtenteils darauf dort einzelne Produkte des Kunden zu exportieren. Auch die eigentlichen Gebäude exportierten wir direkt aus der Datei der Architektin.

Die Produkte waren in einem Mix aus prozeduralen und Polygon-Modellen im pCon-Planner integriert. Wir exportierten alles mit mittlerer oder niedriger Detailstufe in das OBJ Format, da wir damit bei der späteren Weiterverarbeitung die wenigsten Fehler mit umgedrehten Normalen oder defekten Meshes hatten.

Optimierung der Modelle in Cinema 4D

Als nächsten Schritt importierten wir jedes Modell in Cinema 4D, um es zu bereinigen, wenn es Darstellungsfehler aufwies, und zu vereinfachen, wenn wir es als zu komplex für die Darstellung auf mobilen Geräten erachteten. In diesem Schritt bereiteten wir die Modelle auch vor, um entweder im Substance Painter texturiert oder direkt in Unreal importiert und dort mit Materialien versehen zu werden.

Aus dem pCon-Planner exportierte Modelle wiesen teilweise deutliche Geometriefehler auf. Wo es sinnvoll möglich oder für eine optisch einwandfreie Darstellung nötig war, arbeiteten wir die Geometrie mit Hilfe des Mesh-Checkers von Cinema 4D auf. Übermäßig komplexe Geometrie wurde entfernt oder gegen simplere Versionen ersetzt. Dies war vermutlich der aufwendigste Teil der Arbeit an den Produkten, aber notwendig, um ein sauberes Modell zu erhalten, dass auch auf mobilen Endgeräten vernünftig aussieht und performt. 

Um die Performance in Unreal zu optimieren, war unser Ziel Modelle möglichst als Ganzes mit nur einem Material zu importieren. Als vorbereitenden Schritt für Substance Painter, bekamen die Mesh-Komponenten in Cinema 4D eine Vertex Farbe pro eigentlich unterschiedliches Material. 

Eine der größeren Hürden in Cinema 4D war es, saubere UV-Maps zu erstellen ohne exorbitanten Aufwand zu betreiben. Mit dem Paint Setup Wizard konnten wir für den Großteil der Modelle passable UV-Maps mit wenigen Klicks generieren. Bei einfach Modellen war Unreal dann später in der Lage den zweiten UV-Kanal für die Lightmaps automatisch zu generieren. Bei komplexeren Modellen duplizierten wir einfach die bestehenden UV-Tags in Cinema 4D. Für die wenigen Fälle, bei denen mehrere Material-Kanäle zum Einsatz kamen, erstellten wir über ein separates Material und den Paint Setup Wizard auf einer duplizierten Hierarchie einen zweiten UV-Tag, den wir dann wieder der ursprünglichen Hierarchie zuweisen konnten.

Texturierung in Substance Painter

Die meisten Modelle wurden als nächstes in Substance Painter importiert. Hier wurde für jede Komponente festgelegt welche Oberfläche und Farbe sie haben sollte und wie stark sie das Licht reflektiert.

Die meisten Modelle kamen mit einem Textur-Set aus, in dem über mehrere Ebenen mit Masken die unterschiedlichen Materialien abgebildet waren. Um die Masken zu erstellen, ließen wir die ID-Map mit den vorher in Cinema 4D festgelegten Vertex-Farben generieren und konnten dann einfach eine Farbauswahl-Maske auf die Ebene anwenden. 

Mit mobilen Geräten als primärer Zielgruppe beschränkten wir – entsprechend den Empfehlungen von Epic Games – alle Texturen auf eine maximale Auflösung von 2048*2048 Pixel. Zusätzlich exportierten wir nur die Texturen, die sinnvoll waren und Bildinformationen enthielten, die nicht einfach über eine Konstante im Unreal-Material abgebildet werden konnten.

Wie alles in Unreal zusammenkommt

Nachdem sie die vorherigen Schritte durchlaufen hatten, kamen schließlich alle Modelle in Unreal zusammen. Hier wurden sie importiert und wieder so zusammen platziert, wie bereits im ursprünglichen pCon-Planner Entwurf vorgesehen war.

Neben dem Anordnen der Modelle, wurde in Unreal natürlich auch die gesamte Logik und Bedienung der Anwendung implementiert. Das Interface Konzept wurde in klickbare Buttons umgesetzt und im Laufe einiger Iterationen in Abstimmung mit dem Kunden weiter verfeinert. So kam neben der Möglichkeit sich frei durch die Räume zu bewegen, die Option hinzu über Knöpfe direkt in Räume oder zu Produkten zu springen und schlussendlich noch die Möglichkeit sich eine Kamerafahrt durch die Räume anzusehen.

Um die bestmögliche Grafik für eine möglichst breite Palette an mobilen Endgeräten zu bekommen, hielten wir uns recht penibel an die Empfehlungen für Mobile Development. Wir verwendeten nur Baked Lighting mit einer stationären direktionalen Lichtquelle für die Sonne und statischen Lichtern für alles andere. Ein paar Tricks bezüglich der Lightmass-Einstellungen und Aufbereitung der Modelle aus der Architekturvisualisierungs Community halfen dabei die Qualität bei akzeptablen Build-Zeiten zu optimieren. 

PostProcessing kam nur für Helligkeitsanpassungen zum Einsatz und in den Desktop Versionen für Depth of Field während der Kamerafahrten. Wie vorher bereits erwähnt, sind alle Materialien sehr einfach gehalten und beschränken sich fast durchgehend auf die generierten Texturen. Über Substance Painter wurde auch eine Ambient Occlusion Textur für die Modelle erstellt, so dass es in der Engine nicht mehr aktiviert ist. Auf diese Art ist die Shader Komplexität durchgehend niedrig und nur die transparenten Flächen stellen etwas mehr Anforderungen an die Geräte.

Verbreitung auf alle wichtigen Betriebssysteme

Die erste und wichtigste Zielplattform für die Anwendung waren von Anfang an mobile Endgeräte für den Vertrieb wie Tablets, allen voran iPads. Im Verlauf der Entwicklung kam der Wunsch auf, auch andere Betriebssysteme wie Android, Windows und MacOS zu bedienen. Glücklicherweise ermöglicht die Unreal Engine den Export auf alle diese Plattformen, ohne dass dafür eine große Änderung an der Anwendung notwendig war. Der frühe Fokus auf mobile Geräte als hardwareseitig leistungsschwächste Plattform stellte außerdem sicher, dass auch auf den neuen Plattformen eine gute Performance gewährleistet war. 

Damit die Anwendung leicht zugänglich und einfach zu aktualisieren ist, wird sie in den offiziellen Stores der vier Betriebssysteme kostenlos angeboten. Die eigens erstellte Landingpage für die FM Office World bietet, neben Informationen und Links zu allen Stores, die Möglichkeit zertifizierte Versionen der Anwendung direkt herunterzuladen und die Stores so zu umgehen.

Die Zukunft

Die erste Version der FM Office World ist mit einem Gebäude für alle großen Plattformen veröffentlicht. Bereits jetzt kommt ein Vorteil eines virtuellen Ausstellungsraums zum Zuge, denn zwei weitere Gebäude sind noch geplant. In der nächsten Zeit werden sie in die Anwendung integriert und sind dann über die Stores sofort per Update bei allen Benutzern verfügbar. Ebenso einfach können in Zukunft neue Produkte hinzugefügt oder alte ausgetauscht werden, falls sie nicht mehr produziert werden. Auch komplett neue Gebäude sind möglich, da die Anwendung so flexibel aufbaut ist, dass sie auch mit noch ungeplanten Inhalten erweitert werden kann.

Fazit

Ein virtueller Ausstellungsraum wie die FM Office World ist ein langlebiges, erweiterbares Werkzeug, das den Vertrieb auf eine bisher unmögliche Weise unterstützen kann. Es vereint die Vorteile eines physischen Produkts mit denen von gedruckten Unterlagen und Videos und überwindet deren Nachteile. Da es ein interaktives Medium ist, kann der Benutzer es in seiner eigenen Geschwindigkeit erleben und der Spiel- und Entdeckertrieb wird angesprochen, was zu einem besseren Verständnis und größerem Interesse führt. 

Mit der Unreal Engine lassen sich virtuelle Ausstellungsräume und Produktvisualisierungen beliebiger Größe und Komplexität realisieren. Mit einem vertretbaren Aufwand können so alle gewünschten Betriebssysteme bedient werden. Die neu erschienene Version 5 der Unreal Engine wird diesen Trend weiter festigen und neue Maßstäbe für grafische Qualität setzen.  

Wir freuen uns darauf als nächstes Ihren virtuellen Ausstellungsraum umzusetzen.

Diesen Beitrag teilen