Hologramm

Unsere Idee

Im Fach Interaction Design II hatten wir die Aufgabe, eine interaktive Installation zu erstellen. Das Ziel war es, am Ende des Semesters ein prototypisches Exponat fertiggestellt zu haben, welches dann auch ausgestellt wird. Unser Team hat als Exponat ein gestengestuertes, interaktives Hologramm entwickelt. Im Folgenden beleuchten wir unseren gesamten Gestaltungsprozess, von der ersten Idee bis zum fertigen Exponat.

Ideensammlung

Zu Beginn hatten wir viele Ideen gesammelt. Die ersten groben Ideen gingen über eine Tanzmatte mit der man Linienanimationen lenken kann, einen LED Würfel und eine Spiegelwand. Genauere Gedanken machten wir uns zu den Farbexperimenten, bei denen einerseits die Überlegung war mit Farbspielen über Muster und verschiedene Hilfsmaterialien zu arbeiten, andererseits mit den Farbmodellen zu spielen. Dabei kamen Vorschläge auf, wie mit farbigen Lampen zu arbeiten, dass man bestimmte Farben erreichen muss oder auch durch Positionierung von Farben einen bestimmten Farbwert erzielt.

Was jedoch wirklich zur Diskussion wurde, waren die Ideen mit der Bewegungsinteraktion. Mit den Händen oder auch dem Körper wird auf dem Monitor gezeichnet. Bilder könnten erstellt oder ausgemalt, eine Linienanimation gesteuert oder Körper geformt werden.

Ideenentwicklung

Bei der Bewegunginteraktion kam schließlich die Idee von einem Hologramm auf. Durch Spiegelung eines Bildschirms kann das Bild auf eine schräg stehende Glasscheibe geworfen werden. So würden die Nutzer*innen nicht mehr in den Monitor schauen, sondern in das fälschlicherweise frei schwebende Bild. Es sollte die Wirkung entstehen, frei in der Luft interagieren zu können.

Am Ende wurde die Idee des Modellings im Hologramm festgehalten. Objekte sollten durch Handbewegungen frei erzeugt, bearbeitet und verformt werden können.

Konzeptentwicklung

Unser Konzept ist es ein gestengesteuertes Hologramm zu entwickeln.
Anfangs hatten wir hierfür die Idee, ausgehend von einem Punkt geometrische Körper zu erstellen. Das Prinzip war hier, zunächst einen Punkt zu einer Linie zu erweitern und dann aus dieser dreidimensionale Objekte zu formen.
Im Anschluss daran sollten die erstellten Objekte dann zusätzlich skaliert, rotiert und verschoben werden können.
Das Ziel war es hierbei, die Erstellung der Körper intuitiv zu gestalten und - im Gegensatz zu Grafikprogrammen am Computer - die Gegenstände somit greifbar zu machen.

Im Laufe des Semesters wurden hier jedoch einige unserer Vorstellungen verändert und unseren Möglichkeiten angepasst.

Das “Zeichnen” der Formen auf der Grundlage von Punkten und Linien hat sich als sehr schwer umsetzbar herausgestellt. Daher kam uns die Idee, unser Konzept mehr auf die Unterschiede verschiedener geometrischer Körper zu fokussieren. Unser Gedanke war es, verschiedene Objekte mit Buttons auswählbar zu machen und dann die selektierten Objekte manipulieren zu können.

In der späteren Phase unseres Projekts haben wir uns jedoch entschieden uns mehr auf das Design und visuelle Effekte zu konzentrieren. Dafür haben wir unser ursprünglich angedachtes Konzept stark vereinfacht. Unser Exponat bietet Besucher*innen die Möglichkeit, mit Hilfe verschiedener Handgesten, das Hologramm Bild zu bewegen und dessen Dreidimensionalität so zu erkunden.

Moodboard

In unserem Moodboard haben wir Bilder gesammelt, die unser gewünschtes Look and Feel festhalten sollen. Besonders inspiriert hat uns der starke Helligkeits- und Sättigungskontrast zwischen Vorder- und Hintergrund. Für die Hologramm Wirkung haben wir uns für dunkle Hintergründe mit hellen und sehr bunten Formen im Vordergrund entschieden. Sehr interessant fanden wir außerdem die Verwendung von Partikeln statt durchgehenden Linien und Flächen. Zu unserem finalen Design haben uns vor allem die kräfitgen und leuchtenden Farben inspiriert.

Bewegungsinteraktionen

Wir haben uns bereits in der Konzeptionsphase Gedanken zur Gestensteuerung unseres Hologramms gemacht. Wir haben uns dafür für die geplanten Aktionen intuitive Handgesten überlegt.

Die Auswahl von Objekten oder Buttons sollte klassischerweise durch einfaches Zeigen mit einer Hand ausgelöst werden. Die Drehung und Sklaierung von Gegenständen sollte mit Bewegungen von zwei Händen gleichzeitig ausgelöst werden.

In der Umsetzungsphase wurden die Handbewegungen noch angepasst. Um zwischen der Rotations- und der Skalierungsbewegung zu unterscheiden, wurden diese davon abhängig gemacht ob der Leap Motion Sensor eine oder Zwei Hände erkennt. Um das Objekt überhaupt bewegen zu können, muss dieses jeoch zunächst mit einer Greifbewegung ausgeählt werden.

Planung

Umsetzungplanung

Für die Umsetzung haben wir uns für den LeapMotion Sensor zum Aufzeichnen der Bewegungen entschieden. Auch wenn die Programmierung mit diesem Sensor im Verlauf noch einige Kompikationen mit sich brachte, hat dieser einige Vorteile im Gegensatz zum Gestentracking mit herkömmlichen Webcams. Der LeapMotion Sensor erkennt die Gelenke der Hände und auch minimale Bewegungen sehr genau. Außerdem funktioniert die Gestenerkennung auch im Dunkeln, was für unser Vorhaben äußerst vorteilhaft war.

Um den Hologramm Effekt zu erzeugen benötigten wir zudem einen Monitor zur Anzeige, der sich dann in einer Glasscheibe spiegeln soll. Hierfür haben wir eine große Scheibe aus Acrylglas angeschafft. Um die Konstruktion zu befestigen, musste außerdem ein Gerüst gebaut werden.

Aufbau

Wir haben bereits in einer frühen Phase unseres Projektes angefangen, uns Gedanken über den Aufbau zu machen. Dafür haben wir eine Skizze angefertigt, die unsere Vorstellungen veranschlaulicht und uns bei der Planung geholfen hat.

Geplant wurde zunächst, den LeapMotion Sensor auf einen höhenverstellbaren Stativ aufzustellen. Dieser sollte dann über ein langes Verbindungskabel an den Monitor angeschlossen werden. Damit sich der Monitor in der Glasscheibe spiegelt, muss diese in einem schrägen Winkel darüber befestigt werden. Dafür haben wir uns vorgenommen, ein eigenes Konstrukt aus Holz zu bauen. In dern finalen Phase unseres Projekts haben wir den Aufbau, wie später beschrieben, noch leicht abgewandelt und an einigen Stellen verbessert und vereinfacht.

Planung

Installation und Probleme

Nachdem wir uns auf den LeapMotion Sensor geeinigt hatten, suchten wir nach der dazugehörigen Software und fanden nach einer Weile auf der Website von Ultraleap die neueste Gemini Tracking Software. Damit konnten wir das Controllpanel des LeapMotion Sensors öffnen. Dort wird das eigene Bild mit den Händen erfasst und auch das virtuelle Skelett der Hände angezeigt. Auch kann man dort kleinere Einstellungen vornehmen, wie das Spiegeln des Bildes, jedoch ist es keine Umgebung mit der man arbeiten kann. Daher suchten wir nach einer geeigneten Entwicklungsumgebung, mussten jedoch feststellen das es nicht einfach ist eine zu finden. Im Internet gibt es ein paar Videos auf denen wenige Umgebungen zu sehen sind. Sucht man allerdings über LeapMotion ist es sehr schwer etwas zu finden. Nach langem durchsuchen des Webs und externer Hilfe stießen wir auf Unreal Engine. Es ist ein Programm zum Modellieren für Architektur, Videos und Games. Der Gamingbereich funktioniert über C++ Klassen und beinhaltet auch einen LeapMotion Bereich.

Um das ganze zum Laufen zu bringen mussten wir uns zuerst den Epic Games Launcher und dann daraus Ultra Engine 5 installieren, wobei diese allein über eine Stunde Installationszeit in Anspruch nahm.

Das Programm dauerte auch immer sehr lange zum Starten, teilweise zwanzig bis dreißig Minuten bis alles bereit war.

In dem Launcher mussten wir dann noch das LeapMotion Plugin downloaden und danach in das Programm einbauen. Nach einigen Neustarts war schließlich das System startklar. Leider war bis dahin schon sehr viel Zeit vergangen.

Coding

Um die Programmiersprache C++ möglichst schnell zu verstehen holten wir uns eine kurze private Einschulung. C++ hat ein paar Ähnlichkeiten zu dem bisher bekannten Java, basiert jedoch hauptsächlich auf einem Klassensystem. Eine Klasse hat eine Headerdatei (h) und einem dazugehörigen Source File (cpp). Daher stellten wir uns einen Klassenbaum - wie unten zu sehen - zusammen, wie wir unseren Code aufbauen können. Die blauen Flächen stehen dabei für die cpp-Files, die auch die Funktion main ausführen. Die grünen Flächen stehen dabei für Headerdateien, die zu einem cpp-File gehören oder eingebunden werden.

Wir entdeckten, dass Unreal Engine bereits vorgefertigte C++ Klassen hat und erfuhren später, dass ein Tool namens Blueprint entwickelt wurde um über Verbindungen die Klassen zu verbinden und Funktionen aufzustellen. Somit mussten wir nichtmehr direkt mit dem Code arbeiten.

Exkurs Ultra Engine

Auf den ersten Blick sieht Ultra Engine ähnlich zu anderen Modelling-Programmen aus. Beginnt man sich mit dem Programm zu beschäftigen, so merkt man das vor allem für Neuankömmlinge es nicht sehr leicht ist eine Übersicht zu bekommen und die gewünschten Tools, Materials, etc. zu finden.

Öffnet man ein neues, leeres Blanket ist folgendes Grundszenario vorhanden. Bei Bedarf können alle Objekte gelöscht werden. Vorteil daran ist, das eine bereits funktionierende Environment gesetzt ist.

Auf der rechten Seite sind alle benutzten Objekte aufgelistet. Darunter ist ein Detailfenster, bei dem man die genaueren Einstellungen des ausgewählten Objekts vornehmen, beziehungsweise das Objekt verändern kann.

Öffnet man den Conent Browser, so müssen erstmal Einstellungen vorgenommen werden, sodass die wichtigen und benötigten Ordner angezeigt werden. Diese sind sehr unübersichtlich Strukturiert. Weis man jedoch was man braucht, kann man dies schnell über die Suchfunktion finden.
Hier findet man Materialien, Shaders, Lichter und weiteres. Ebenfalls kann man hier einen neuen Blueprint erstellen.

Blueprint

Als visuelles Skriptsystem dient Blueprint in Ultra Engine dazu, dass man über Basissysteme codieren kann. Über Schaltflächen werden Verbindungen mit einem Input-Output-System gezogen und so vorhandener Code verarbeitet. Dabei ist der Code sebst nicht sichtbar. So ist es möglich die Physik, Steuerungen und Regelwerke für das Projekt zu definieren.
Es kann auf mehreren Ebenen gearbeitet werden und für ein Level können auch mehrere Klassen angelegt werden. Dazu gibt es verschiedene Arten von Blueprintklassen.

Für eine gezielte Arbeitseffizienz teilten wir den geplanten Codingbaum auf. Ein Teil war die Auswahl über Buttons für Linien, Flächen und Körper. Der zweite Teil befasste sich mit der Modellierung der Objekte, beispielsweise das Skalieren, Drehen, Formen und Bewegen.

Jeweils wurde ein Tutorial auf Youtube Video verwendet. Da dort aber keine Erklärungen geliefert wurden, war es teilweise sehr schwierig den Anweisungen richtig zu folgen. Außerdem handelte es sich in dem Beispiel um eine vorherige Version der Unreal Engine, weshalb es einige Unterschiede gab.

Erster Teil
Im ersten Abschnitt des Tutorials wurde die Bewegungsfeiheit der Hände auf eine Bilschirmgröße mit 1810 x 1920 eingeschränkt. So konnten den Positionen der Hände Koordinaten verliehen werden mit der Funktion Make Cursor Cordinates

1: Dafür wurden einige neue Variablen und Funktionen verschiedenen Typs deklariert, die in der Übersicht zu sehen sind. Per Drag and Drop konnten sie in die Arbeitsfläche gezogen und weiterverarbeitet werden.

2: Zunächst wurde der LeapMotion Sensor erfasst und nur die rechte Hand für folgende Arbeitsschritte ausgewählt.

3: Für diese Hand wurde dann auch die X- und Y-Achse zugewiesen.

4: Über die gewünschte Bildschirmhöhe wurden die maximalen Koordinaten der Y-Achse festgelegt. Dazu dienten mehrere Berechungen.

5: Schließlich mussten die Werte der X-Achse festgelegt werden. Dazu wurde die Bildschirmbreite geteilt, sodass der LeapMotion Sensor mittig bei dem Nullpunkt der X-Achse liegt. Daher ergab sich eine linke und rechte Seite, die jeweils berechnet werden mussten.

6: Zusammengefasst ergaben beide Hälfte die X-Achse. Jedoch mussten die Zahlenwerte noch so umgerechnet werden, dass auf der äußersten linken Hälfte die Null gezählt wurde. Somit ergab sich ein Koordinatensystem über eine Bildschirmfläche.

7: Zum Schluss mussten dann noch die beiden Axen zusammen ausgegeben werden.

8: In der Blueprintklasse Event Graph wurde die gerade erstellte Funktion Make Cursor Cordinates dem LeapMotion Sensor zugewiesen und ausgegeben.

Der nächste Schritt im Tutorial wäre mit einem weiteren Tool vorangegangen, um die Handgesten an bestimmten Punkten festzulegen und zu erkennen. Leider war dieses Tool jedoch nicht für uns zugänglich und es fehlten die benötigten Materialien in der Engine-Ordnerstruktur.

Es gibt auch keine anderen Tutorials in diese Richtung oder Erklärungen, wie man an das Tool und die Materialien herankommt. Daher waren wir gezwungen an dieser Stelle abzubrechen.

Zweiter Teil

Für das Rotieren und das Skalieren wurden zwei einzelne Blueprints angelegt, die dann zusammengeführt werden.

Um die Rotation hinzubekommen, mussten zunächst neue Variablen für die Hände und die Greifstärke erstellt werden. Damit überprüft der Leap Motion Sensor, ob es sich um die linke oder die rechte Hand handelt und ob die Hand greift oder nicht. Wenn die Hand eine Greifbewegung ausführt, wird so die Rotation ermöglicht. Je nach der Richtung, in die sich die Hand dann bewegt, wird die Rotation ausgelöst. Dies geschieht mit Hilfe einer Funktion entweder in X- oder Y-Richtung.

Die Skalierung funktioniert nur mit beiden Händen, sodass der Leap Motion Sensor zwischen den beiden Aktionen unterscheiden kann. Die Bedingung dafür ist also, dass beide Hände die richtige Greifbewegung machen. Geschieht dass, kann sich das Objekt um den Faktor 0.5 verkleinern oder auf das 5-fache vergrößert werden. Mithilfe der Funktion ... wird dies dann schließlich ausgeführt.

Im Event Graph wurden die beiden Blueprints dann miteinander verknüpft. Hier wurde festgelegt, dass die Rotation nur mit einer und die Drehung mit beiden Händen funktioniert. Je nach dem, was der Leap Motion Sensor trackt, werden dann die entsprechenden Befehle ausgelöst.

Visuelle Anpassung

Aufgrund der mangelnden Umsetzbarkeit mussten wir unser Projekt sehr stark reduzieren. Nachdem keine Auswahl vonstatten finden konnte einigten wir uns auf eine Kugel. Das Skalieren und Drehen des Objekts vom ursprünglichen Plan blieb. Nun einigten wir uns das wir auf Ästhetik umsteigen.

Die Kugel wurde bearbeitet und verformt, dass sie wie Stück ungeschliffener Kristall aussieht. Durch eine inneres Pointlight leuchtet die Kugel von innen heraus.

Je kleiner die Kugel ist, desto mehr sieht sie wie ein Stück Kristall aus. Je größer man sie jedoch Skaliert, sieht man einzelne Strukturen, Reflexionen und Faserungen. Dadurch lässt sich die Drehung auch schön erkennen, die vorhin bei der Standardsphere nicht zu sehen war.

Zusätzlich bearbeiteten wir die Enwironment. Der Ground wurd sehr dunkel gemacht, sodass die Leuchtende Kugel hervorsticht.

Wir experimentierten mit der Tagesstimmung, dem Sonnenauf- und untergang und blieben dann in der Nacht hängen.

Die Sterne unterstützen mit einer leicht erhöhten Brightness die leuchtende Kugel. Dazu ergibt sich mit den weißen Wolken ein bläuliches Farbschema. Denn auch auch das Material der Kugel setzen wir in Blau.

Der Fog rundet dabei das Bild ab und verbindet den Himmel mit dem Boden.

In der Dunkelheit des Ausstellungsortes, des Hologramms in der Wilhelmsburg, kommt das leuchten der Kugel intensiv zum vorschein und auch der Nachthimmel passt zur Ausstellungsumgebung.

Aufbau

Für den finalen Aufbau unseres Exponats waren die zuvor erstellten groben Skizzen sehr hilfreich. Dennoch haben wir in der finalen Phase einige Aspekte angepasst und verbessert.
Für eine gute Bedienbarkeit musste sich unser Ausstellungsobjekt auf Hüfthöhe der Besucher*innen befinden. Hierfür wurden zwei einfache Tische nebeneinandergestellt.

Anschließend haben wir die Spiegelung in der Glasscheibe getestet, um die beste Position und den optimalen Winkel zu ermitteln.

Daraufhin haben wir selbst ein Holzgerüst gebaut, das die Glasscheibe so halten soll. Dafür haben wir zunächst Holzplatten gekauft und diese nach einigen Berechnungen mit einer Handsäge zugeschnitten. Unser Ziel hierbei war es, mit möglichst wenigen Einzelteilen eine stabile Konstruktion zu schaffen. Anders als in unserer ursprünglichen Skizze haben wir keine senkrechten Stützen gebaut, sodass die Glasscheibe einen schwebenden und mühelosen Zustand vermittelt. Auf beiden Seiten haben wir dafür zwei Bretter in einem schrägen Winkel durch kleine Verbindungsstücke aneinandergeschraubt. So wurde quasi eine Ablage für die Glasscheibe geschaffen, die nicht zu sehr vom Hologramm ablenkt und besonders im Dunkeln sehr in den Hintergrund tritt.

Als Bildschirm wollten wir ursprünglich einen iMac der Hochschule nutzen. Da das System jedoch nicht den Anforderungen für die Unreal Engine erfüllt, mussten wir stattdessen einen etwas kleineren Bildschirm nutzen. Der Monitor wird als zweiter Bildschirm für einen Laptop genutzt, auf welchem das Programm dann läuft.

Da der Leap Motion Sensor auch im Dunkeln funktioniert, wurde keine zusätzliche Beleuchtung benötigt. So wirkt auch der Hologramm Effekt sehr gut. Der Sensor wurde auf der Tischfäche direkt vor dem Hologramm ausgerichtet. Auf der Höhe können die Hände der Besucher*innen gut getrackt werden und der Abstand zum Hologramm ist genau richtig, um die Formen bestens in einer angenehmen Größe erkennen zu können.

Fazit

Abschließend kann man sagen, dass wir in diesem Semester einiges dazugelernt haben. Besonders in der Anfangsphase hatten wir sehr viele Ideen für unser Projekt und haben uns einige Ziele gesetzt, die realistisch gesehen in der uns zur Verfügung stehenden Zeit mit unseren Kenntnissen einfach nicht umsetzbar waren. Generell hat uns die Arbeit mit dem Leap Motion Sensor vor einige Hürden gestellt und uns definitiv sehr viel Zeit und Mühe gekostet. Doch auch wenn wir an einigen Stellen etwas zurückschrauben mussten, haben wir am Ende unser Ziel, ein bewegungsgesteuertes Hologramm zu erstellen, erreicht.

Abgesehen davon haben wir einiges an Programmierkenntnissen dazugewonnen und können nun auch mit Unreal Engine umgehen, welches auch abgesehen von diesem Projekt viele Möglichkeiten für kreatives Arbeiten bietet.

Generell hat es sehr viel Spaß gemacht, in einer so freien und unabhängigen Atmosphäre zu arbeiten und so viel kreativen Spielraum zu haben.