Zumindest virtuell ist es nun möglich unser Büro jederzeit und überall zu besuchen. Wir haben unsere Labstunden genutzt, um einen virtuellen Rundgang durch unser Hauptbüro in der Tumblingerstraße 23 zu erstellen. Seht am besten selbst:
Gute Gründe für den Aufbau einer virtuellen Bürotour
Unsere Hauptmotivation war es, mehr über Virtual Reality (VR) zu lernen, denn das Lernen über neue Technologien macht immer Spaß 🙂. Als wir anfingen war unser Wissen über VR ungefähr bei Null und es war an der Zeit, das zu ändern.
Außerdem ist die Tour hoffentlich ein cooler Einblick für Leute, die darüber nachdenken mit uns bei comSysto zusammenzuarbeiten. Es ermöglicht einen Blick hinter die Kulissen bevor man sich bei uns bewirbt.
Darüber hinaus arbeiten immer mehr unserer Kollegen überall in Deutschland (z.B. München, Berlin, Regensburg…) oder Kroatien (Zagreb). Falls jemand unser Hauptbüro vermisst, kann er es jetzt jederzeit besuchen.
So erstellt man eine virtuelle Bürotour
Wir haben das gesamte Büro zweimal mit zwei verschiedenen Kameras abgebildet. Das erste Mal im Juli 2017 wollten wir klein anfangen und kauften eine günstige 360 Grad Kamera (Somikon 360 Grad Action Cam). Drei Kollegen arbeiteten in einem zweitägigen Lab daren, liefen durch jeden Raum, machten Fotos und sammelten alles in einem privaten Github Repo.
Als nächstes wollten wir uns in einem 360-Grad-Foto umsehen und zwischen verschiedenen Räumen wechseln können. Mozillas aframe Framework half uns diese Probleme zu lösen, es bietet ein sky Primitiv um Fotos als Hintergrund zu verwenden und zusätzliche Primitive, die die Erstellung von blickbasierten Interaktionselementen erleichtern. Da aframe in fast jedem Browser laufen kann, ist es wirklich einfach das Ergebnis mit jedem zu teilen, der eine Internetverbindung hat.
aframe ist ein Entity-Component-System (ECS) Framework, es war das erste Mal, dass wir mit einem ECS gearbeitet haben und unser Fazit darüber ist, dass Spieleentwickler einige wirklich coole Ideen haben 🙂.
ECS sind vollständig auf composability ausgerichtet und ermöglichen es, Dinge (Entitäten) mit beliebigen Daten (Komponenten) und Fähigkeiten (Systeme) zu kombinieren. Eine Entität besteht beispielsweise aus einer Komponente, die Daten über ihre Position in einem 3D-Raum enthält. Eine weitere Komponente könnte Daten über eine geometrische Form enthalten. Diese Komponenten können jeder Entität frei zugeordnet und gemischt werden. Ein System verwendet die Daten, die von allen Komponenten gesammelt werden, um die eigentliche Arbeit zu leisten, z. B. das Objekt in Position zu bringen und es als geometrische Form darzustellen. Dieses Prinzip gewährleistet maximale Flexibilität und erleichtert die Wiederverwendung von Code.
Zusätzlich zu aframe haben wir aframe-react verwendet, welches einer Wrapper um React ist, um so von den Vorteilen von React und aframe zu profitieren (die Verwendung von aframe-react wird nicht mehr empfohlen und wirkt sich negativ auf die Performance aus; da Performance nicht unser Hauptziel war, haben wir uns trotzdem entschieden, daran festzuhalten). Jeder Zustand, den unser virtuelles Büro benötigt (z. B. der aktuelle Raum), wird somit innerhalb React gehalten und aktualisiert.
Nach zwei Tagen Arbeit haben wir unser erstes virtuelles Büro erstellt. Wir haben die erste Version nur intern veröffentlicht, da die Qualität der Kamera schlecht war.
Im September 2018 haben wir beschlossen, unser VR-Lab erneut zu starten, diesmal etwas professioneller. Wir haben uns eine bessere Kamera (Z CAM S1) gemietet und weitere Funktionen in unser virtuelles Büro integriert (z. B. Videos abspielen oder Fotos anzeigen). Unser Technologie-Stack blieb zwischen beiden Labs gleich.
Fazit
Die Erstellung eines eigenen virtuellen Büros war einfacher als erwartet. Unsere Bedenken, dass wir in einem zweitägigen Lab nichts erreichen würden, verschwanden dank fantastischer Open-Source-Bibliotheken wie aframe und React völlig. Obwohl wir mit der Qualität der professionellen Kamera immer noch nicht 100% zufrieden sind, haben wir uns entschieden, dass es an der Zeit ist, unsere Arbeit zu veröffentlichen und unser schönes Büro mit allen zu teilen.
Verweise
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY