Die Entstehung
Das Snowflake Virtual Office ist ein digitaler Nachbau des Büros der Snowflake Productions GmbH in Zürich. Das Projekt entstand im Rahmen der Abschlussarbeit von Yves Holtze, der im Zuge seines Lehrabschlusses als Interactive Media Designer bei Snowflake unser Büro in 3D umgesetzt hat.
Da viele Kundinnen und Kunden unsere Agentur nicht persönlich besuchen können, wurde eine eigenständige digitale Lösung für einen virtuellen Rundgang entwickelt. Dieser vermittelt auf immersive Weise Einblicke in die Geschichte von Snowflake, zeigt Referenzen, Know-how, Prototypen und stellt das Team vor.
Ziel ist es, die Kultur und Arbeitsweise der Webagentur erlebbar zu machen und Snowflake als innovativen Partner für Webprojekte zu zeigen. Zugleich dient das Projekt dazu, die technische und gestalterische Kompetenz mit Tools wie Blender, Unity, Figma und Photoshop sichtbar zu machen.
Sinn & Zweck
Der Sinn des Snowflake Virtual Office liegt darin, neue Wege der Präsentation und Begegnung auszuprobieren. Statt Inhalte nur zu lesen oder anzuschauen, sollen sie erlebt werden können. Das virtuelle Büro dient als Experimentierraum, in dem digitale Technologien sinnvoll eingesetzt werden, um Nähe zu schaffen, auch ohne physischen Besuch.
Gleichzeitig verfolgt das Projekt einen klaren Zweck: Es soll zeigen, wie sich komplexe Inhalte und Räume benutzerfreundlich und performant ins Web bringen lassen. Eine intuitive Steuerung, flüssige Darstellung und kurze Ladezeiten stehen dabei im Vordergrund. Das Virtual Office ist damit nicht nur ein Showcase für Snowflake, sondern auch ein praktisches Beispiel dafür, wie interaktive Web-Erlebnisse gestaltet werden können, die für alle einfach zugänglich sind.
Sie finden 3D cool?
Wir setzen auch Ihre Idee gerne um!
3D-Projekt starten
Das Technische
Steuerung
Eine grosse Herausforderung war die Steuerung on Scroll. Das Virtual office sollte einfach erweiterbar sein. Darum konnte man nicht einfach eine eine fix animierte Kamerafahrt machen, da man diese Animation sonst bei jeder Änderung hätte anpassen müssen. Aus diesem Grund wird man per scroll auf einem Pfad entlanggeführt den man beliebig ändern kann. Die Kamera ist somit wie auf einer Schiene an diesen Pfad gebunden und wenn sich der Pfad ändert, ändert sich auch die Kamerafahrt. Im Virtual Office wurden ausserdem wichtige Hotspots definiert. Auch diese Punkte lassen sich beliebig im Raum anordnen. Sobald man sich jetzt in den Erkennungsradius dieser Hotspots bewegt richtet sich der Blick automatisch auf diesen Punkt. Das Grundgerüst dafür stand relativ schnell. Die grosse Schwierigkeit war, dass Optimieren der Kamerafahrt. Also wie schnell bewegt man sich, in welchem Radius reagieren die Hotspots, wie weich oder hart dreht und bewegt sich die Kamera.
Lightmapping
Da eine Echtzeit-Lichtberechnung sehr viel Performance benötigt, die man im Web nicht hat, wurde für dieses Projekt Lightmapping eingesetzt. Dabei berechnet (baked) man jede Lichtquelle, welche vorher als statisch gekennzeichnet wurde, auf eine Textur. Diese Textur wird am Ende auf die 3D-Objekte gelegt. Dadurch entsteht eine realistische Beleuchtung, ohne dabei viel Performance zu benötigen. Für den finalen Export wurde eine hohe Auflösung für die Lightmap gewählt, um ein möglichst realistisches Resultat zu erzielen. Zusätzlich wurde ein Ambient Occlusion Shader verwendet. Dieser ist eine Art Filter, welcher bei allen Ecken und Kanten eine leichte Abdunkelung bewirkt, die als Schattierung wahrgenommen wird. Das gibt der Szene ebenfalls nochmals etwas mehr Tiefe. Auch dieser Effekt benötigt wenig Performance.
Anmerkungen: Beim Rendern der Lightmaps war es wichtig, den Sweetspot zwischen Qualität und Performance zu finden. Da die generierten Lightmaps relativ gross werden können, verbrauchen sie auch viel Speicherplatz was wiederum zu längeren Ladezeiten führt.
Reflection Probes
Auch für die Reflektionen kann man aus Performance-Gründen keine Reflektionen in Echtzeit berechnen. Daher wurde eine Reflection Probe verwendet. Mit dieser speichert man alle Informationen des definierten Reflection-Probe-Bereichs. Alle glänzenden Oberflächen verwenden jetzt diese gespeicherten Informationen und wenden diese als Reflektion an.
Occlusion culling
Um die Performance weiter zu steigern wurde ausserdem Occlasion culling verwendet. Bei Occlasion culling werden nur die Objekte gerendert welche sich im Blickwinkel befinden. Dabei wurden zuerst alle 3D Objekte welche die Sicht blockieren können definiert. Im Falle des Virtual Offices waren das die Wände, Boden und Decke. Wenn sich jetzt ein 3D Objekt nicht im Blickwinkel befindet oder von einer Wand verdeckt wird, wird es nicht gerendert.
Haben Sie Fragen zu diesem oder ähnlichen 3D-Projekten oder möchten selber eine solche Anwendung? Kontaktieren Sie uns für eine kostenlose Beratung.
Über die Autoren
Luis Shaw arbeitet als Interactive Media Designer bei Snowflake Productions GmbH. Er interessiert sich für Gestaltung, Fotografie und neue Medien. Er beschäftigt sich gerne mit inspirierenden Methoden und Plattformen.
Yves Holtze arbeitet als UX/UI Designer bei Snowflake Productions GmbH. Er interessiert sich für Gestaltung, 3D und Musik.
