Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Graphic AR Lab

Ein Semester lang drehte es sich hier um Augmented Reality und damit auch um anfangs unbekannte Software, Anwendungsbereiche, aber auch Möglichkeiten der visuellen Kommunikation. In 7 Übungen und einem eigenen Semesterprojekt machten wir Stück für Stück Bekanntschaft mit der Welt der erweiterten Realität.

1| App Analyse - Lens Studio

Zum Kurseinstieg galt es als Gruppe jeweils ein AR Tool zu analysieren und auszuwerten. Unsere Gruppe beschäftigte sich mit dem Snapchat AR Tool „Lens Studio“.

Lens Studio ist ein von Snapchat entwickeltes AddOn, das es Nutzern ermöglicht, interaktive AR-Erlebnisse zu erstellen und zu teilen. Mit einer benutzerfreundlichen Oberfläche und einer Vielzahl von Werkzeugen können Nutzer 3D-Modelle importieren, Gesichts- und Objekterkennung nutzen sowie interaktive Animationen und Effekte erstellen. Die Plattform bietet Vorlagen, eine aktive Community und regelmäßige Updates, um die Erstellung kreativer AR-Inhalte zu erleichtern und zu verbessern.

Wir haben herausgefunden, dass Lens Studio allerlei Anker für AR-Erlebnisse verwendet. Zu diesen zählen: Gesichts-, Hand-, Körper-, aber auch Raum-, Objekt-, und Bildanker. Sehr umfangreiches Tool auf jeden Fall, das hat uns sehr überrascht.

LensStudio trägt dadurch einen ziemlich hohen Spaßfaktor in sich. Vor allem durch die Interaktion mit Anderen aber auch durch die riesige Auswahl an Spielen und erweiterten Filtern.

Bildschirmfoto 2024-03-27 um 00.29.19.pngBildschirmfoto 2024-03-27 um 00.29.19.png

2| Artivive Poster

Als nächstes nahmen wir gemeinsam die AR-Anwendung „Artivive“ unter die Lupe.

Artivive ist eine Augmented-Reality-App, die es Gestalter und Künstler ermöglicht, ihre Kunstwerke mit digitalen Inhalten zum Leben zu erwecken. Durch visuelle Marker erkennt die App Kunstwerke und projiziert dann Animationen, Videos oder Klänge darauf, wenn sie durch ein Smartphone oder Tablet betrachtet werden. Dies schafft ein immersiveres Erlebnis für Betrachter und ermöglicht es Designern, ihren Werken eine neue Dimension zu verleihen. Die App wird weltweit von Künstlern, Galerien und Museen genutzt, um ihre Werke innovativ zu präsentieren und mit dem Publikum zu interagieren.

Damit auch wir unsere ersten Erfahrungen mit Artivive machen konnten, war es die Aufgabe, ein eigenes Poster oder Bild durch eine Animation zu erweitern.

Die Wahl meines Posters traf ich durch die Erkenntnis, dass Dieses keine visuell identischen Wiederholungen aufzeigt und somit leichter von der Anwendung erkannt werden kann. Dadurch lief auch alles wirklich smooth. :)

indigo_poster_marie Unterlage.jpgindigo_poster_marie Unterlage.jpg

Main_2-ezgif.com-video-to-gif-converter.gifMain_2-ezgif.com-video-to-gif-converter.gif

recording_2024_03_27_11_50_34_409-ezgif.com-video-to-gif-converter.gifrecording_2024_03_27_11_50_34_409-ezgif.com-video-to-gif-converter.gif

3| Aero Poster

Zunächst widmeten wir uns einem großen und wichtigem AR Tool - „Adobe Aero“.

Adobe Aero ist eine Augmented-Reality-Software, die es Nutzern ermöglicht, interaktive und immersiven AR-Inhalte zu erstellen und mit einem QR-Code zu teilen, welcher auch bei Anpassungen des Erlebnisses gleich bleibt. Benutzer können 3D-Modelle, Bilder und Animationen importieren und sie in der realen Welt platzieren. Die App bietet Tools zur Erstellung von interaktiven AR-Erlebnissen ohne Programmierkenntnisse, darunter Animationen, Trigger und Interaktionen. Hierfür können auch Bildanker verwendet werden.

Nun war es die Aufgabe, wieder ein Poster als Bildmarker zu verwenden und dieses durch Aero mit 3D-Objekten, welche wir durch die 3D-Funktionen von Adobe Illustrator erstellten und einzeln exportierten, zu ergänzen.

Auch hier lief im Arbeitsprozess alles fein. Der 3D-Objekt-Export und Import in Aero funktionierte auch. Ein bisschen schade nur, dass man noch keine Texturen und Filter mit Illustrator exportieren kann. Deswegen musste ich mit zwei Arten von Mangos in meinem Projekt leben.

MANGO_Anker.jpgMANGO_Anker.jpg
MANGO QR Code.jpgMANGO QR Code.jpg

IMG_1225888.jpgIMG_1225888.jpg

4| Reality Composer Szene

Jetzt schauten wir uns den „Reality Composer“ an.

Reality Composer ist eine Augmented-Reality-App von Apple, die es Nutzern ermöglicht, interaktive AR-Erlebnisse ohne Programmierkenntnisse zu erstellen. Mit einer benutzerfreundlichen Oberfläche können Benutzer 3D-Modelle importieren oder erstellen, sie in AR-Szenen platzieren und mit der realen Welt verschmelzen. Die App bietet eine Vielzahl von Animationsoptionen und ermöglicht die Integration mit Apples ARKit-Framework für die nahtlose Einbindung in iOS-Apps.

Die Aufgabe für uns, beinhaltete das Bauen einer AR-Szene mit Objekten auf der Reality Composer Asset Library und dem Hinzufügen von mindestens einem neuen USDZ aus Sketchfab oder einer anderen kostenlosen Datenbank für 3D-Modelle. Zu guter Letzt sollten wir auch mindestens einen Sound in die Szene einbinden.

Mir machte es wirklich Spaß mit den verschiedensten 3D-Modellen zu arbeiten und die vielen Interaktion- und Animationsmöglichkeiten auszutesten. Natürlich ist noch keine AR-Anwendung in ihrer Benutzung perfekt und ich muss mich selbst nach dem Kurs noch an die Interfaces gewöhnen, aber ich hatte Freude am Ausprobieren. :)

IMG_122588.jpgIMG_122588.jpg

5| Vectary & Reality Converter

Nun zu „Vectary“!

Vectary ist eine webbasierte Plattform für 3D-Design, die es Benutzern ermöglicht, hochwertige 3D-Modelle und Grafiken ohne komplexe Software zu erstellen. Mit Drag-and-Drop-Funktionalität und einer umfangreichen Bibliothek vorgefertigter Inhalte kann man schnell und einfach 3D-Modelle bearbeiten, animieren und rendern. Die Plattform unterstützt Echtzeit-Kollaboration und integriert Augmented Reality.

Und genau mit diesem Tool, ein 3D-Modell zu erstellen, war nun die Aufgabe. Da das fertige Objekt jedoch als FBX-Datei gerendert wird, sollten wir anschießend, unser Modell im Reality Converter in eine USDZ-Datei umwandeln. Mit diesem Dateiformat ist sie auf dem Macbook bettachtbar.

Obwohl die Umwandlungsfunktion des Reality Converter noch sehr fehlerbehaftet ist, lief bei mir glücklicherweise auch wieder alles nach Plan. Ich hätte noch lange mit diesem Tool herumprobieren können.

Bildschirmfoto 2024-03-26 um 23.17.17.jpgBildschirmfoto 2024-03-26 um 23.17.17.jpg
Bildschirmfoto 2024-03-26 um 23.17.172.jpgBildschirmfoto 2024-03-26 um 23.17.172.jpg

Bildschirmaufnahme2024-03-26um23.31.30-ezgif.com-video-to-gif-converter.gifBildschirmaufnahme2024-03-26um23.31.30-ezgif.com-video-to-gif-converter.gif

6| Meta Spark Studio

Ran an den Filter! Ab zu „Meta Spark Studio“.

Meta Spark Studio ist eine kreative Plattform für Augmented Reality (AR), die es Benutzern ermöglicht, interaktive AR-Erlebnisse zu erstellen und zu teilen. Mit diesem Tool können Benutzer AR-Inhalte für verschiedene Anwendungen wie Spiele, Bildung und Marketing entwickeln und diese leicht auf Plattformen wie Facebook und Instagram teilen.

Für den Kurs, haben wir uns auf Filter für Instagram fokussiert. Hierfür haben wir uns eine Grundform des Gesichtsmodells als JPG heruntergeladen und in Procreate als Art Schablone für unser Design genutzt. Anschließend haben wir unseren Filter als PNG mit Transparenz gespeichert und in der Anwendung durch die Default-Filterdatei ausgetauscht. 

Und voilà! Da hatten wir schon unseren ersten eigenen Filter.

Bildschirmfoto 2024-03-26 um 23.17.1722.jpgBildschirmfoto 2024-03-26 um 23.17.1722.jpg

Bildschirmfoto 2024-03-26 um 23.00.17.jpgBildschirmfoto 2024-03-26 um 23.00.17.jpg

7| Scenery

Alles ist bisher erstaunlich glatt gelaufen, aber jetzt kommt mein Sorgenkind -„Scenery“.

Scenery sieht den AR-Anwendungen wie beispielsweise Adobe Aero recht ähnlich ist jedoch relativ weit vorn in der Entwicklungsphase. Das tolle an Scenery ist, dass man AR-Werke anhand von geobasierten Markern erstellen kann. Das heißt man kann AR-Erlebnisse nur an bestimmten Orten erleben. Auch finde ich das Interface und die Benutzerfreundlichkeit dieser Anwendung angenehmer als bei Aero.

Die Aufgabe war es ein AR-Erlebnis anhand von 3D-Modellen, Schrift und Ton auf dem Campus unserer Hochschule zu platzieren. Das hatte bei mir auch soweit geklappt. Nur wollte sich das Programm beim zweiten Mal nicht mehr öffnen, sodass ich es neu installieren musste und nach der Neuinstallation mein Projekt weg war. 

Schade, aber trotzdem hat der erste Berührungspunkt mit Scenery und geobasierter AR wirklich Spaß gemacht. Ich bin auf die Zukunft dieser Anwendung sehr gespannt!

8| Eigenes Projekt - AR-Shirt

Nun waren wir schon in der letzten Hälfte unseres Semesters angekommen und es war an der Zeit unser eigenes Konzept eines AR-Erlebnisses zum Leben zu Erwecken.

Für meine Ideenfindung habe ich mir viel Inspiration angeschaut. Dabei habe ich mich gefragt: Wo hat AR seine Grenzen? Ich wollte etwas wagen und ein bisschen experimentieren. Nach einigem hin und her überlegen kam ich von der Idee eines AR-Shirts nicht mehr los. Ich fand den Gedanken toll, sein eigenes AR-Erlebnis immer bei sich zu tragen. Aber irgendwie wollte ich dem Tshirt einen Nutzen geben. Erst dachte ich an Shirts für den Stura, dann wurde ich inspiriert von unserem Fachbereichssymbol - dem schrägen Rechteck. Also versuchte ich mich schließlich an einem Prototyp eines Shirts für unseren Fachbereich Design.

Ich dachte über eine informationsvermittelnde Funktion nach. Was wäre, wenn einem das Shirt etwas über die drei Studiengänge erzählt? Also entwickelte ich einen Entwurf in welchem 3 Rechtecke für unsere 3 Studiengänge stehen.

Untitled_Artwork 1.jpgUntitled_Artwork 1.jpg

Diese drei Rechtecke sollten wie Schichten voreinander schweben und angeklickt werden können. Beim Klick würde dann Informationen über den Studiengang als Text erscheinen und auch jeweils ein Sound abspielen. Kleine Icons passend zum Studiengang könnten den Spaßfaktor etwas steigern und einen Wiedererkennungswert erzeugen.

Auch könnte man die Funktion einbauen, durch einen Klick auf die Webseite der FH weitergeleitet zu werden, um dem Nutzer weitergehend zu informieren.

FB4 Shirt .jpgFB4 Shirt .jpg

Als das Konzept stand, ging ich zur Ausarbeitung des eigentlichen Designs  und somit auch dem Bildanker über, denn über diesen sollte meine AR-Erlebnis funktionieren.

Es war eine Herausforderung, ein Bildanker zu gestalten, der nicht zu langweilig aussieht, aber trotzdem von Adobe Aero erkannt wird und dann auch flüssig läuft. 

Es brauchte einige Versuche.

Bildschirmfoto 2024-03-26 um 23.12.23.pngBildschirmfoto 2024-03-26 um 23.12.23.png

Schließlich funktionierte es mit einem Bildrahmen als markanten Ankerpunkt. Komisch war nur, dass Aero über IOS Geräte ohne Probleme lief, auf Android Geräten bei der Anker Erkennung jedoch große Probleme hatte.

Bildanker.jpgBildanker.jpg
Stura Shirt QR Code.jpgStura Shirt QR Code.jpg

Nun stand der Bildanker, also konnte es in Aero mit der Entwicklung der eigentlichen Szene mit Objekten und deren Interaktionsmöglichkeiten weitergehen.

Ich exportierte alle notwendigen Objekte als einzelne Dateien aus dem Photoshop Projekt und fügte sie in Aero an die richtige Stelle ein. So fix wie in den Programmen, die ich normalerweise nutze ging das aber nicht. Es muss schließlich in drei Dimensionen gearbeitet werden. Dazu kommt, dass das Interface von Adobe Aero wirklich ein Sache ist, an die man sich gewöhnen muss.

Bildschirmfoto 2024-03-26 um 23.08.02.pngBildschirmfoto 2024-03-26 um 23.08.02.png

Zwischen durch muss man natürlich auch immer wieder probieren ob auch alles so funktioniert wie man sich es vorgestellt hat. Ich druckte den Bildanker auch aus um zu schauen, wie gut er als analoges Medium erkannt wird. Schließlich soll ja alles später auf ein Shirt.

Und als alles soweit stand konnte das Shirt bedruckt werden. Wobei man mit mehr Zeit noch ewig weiter an diesem Projekt hätte arbeiten können.

20240327_163100_HDR.jpg20240327_163100_HDR.jpg
20240327_154909.jpg20240327_154909.jpg
20240327_163613.jpg20240327_163613.jpg

Beim Druck war die größte Herausforderung die Positionierung des Designs, aber vor allem des Aero QR-Codes. Ich entschied mich dafür das komplette Design auf den Rücken zu drucken, da es dort einerseits besser gescannt werden kann und es andererseits ein angenehmeres Erlebnis für den Träger des Shirts ist. 

Der QR-Code wollte aber nirgends auf dem Shirt wirklich gewollt aussehen. Schließlich landete er unter dem Design auf dem Rücken mit etwas Abstand um das Design an sich nicht zu sehr zu beeinflussen. Nach dem Druck, als ich das Shirt anprobierte hatte ich dann aber eine kleine Krise, da der QR-Code auf dem angezogenen Shirt so weit unten irgendwie deplatziert aussah. 

Vielleicht bedrucke ich ein weiteres Shirt, sobald mir eine bessere Lösung für die Position des QR-Codes eingefallen ist. Man kann nur draus lernen.

AR_Shirt-4.jpgAR_Shirt-4.jpg
AR_Shirt-3.jpgAR_Shirt-3.jpg

Bildschirmfoto 2024-03-26 um 2003.17.17.jpgBildschirmfoto 2024-03-26 um 2003.17.17.jpg

Ein paar Schwierigkeiten beim Erkennen des Bildmarkers sind, wie ich schon befürchtet habe, durch die Faltenwürfe des Shirts entstanden. Aber irgendwie war das ganze ja auch ein Experiment und dafür hat das alles schon ziemlich gut geklappt. 

Obwohl ich das Design des Bildankers ganz gern auf dem T-shirt mag, muss ich sagen, dass aus rein funktionellen Gründen, dieses Konzept wahrscheinlich am besten als Print oder Digital auf flacher Oberfläche funktionieren würde. Das ganze wird auf dem Shirt manchmal schon ganz schön wackelig. 

Man könnte aber auch überlegen, die ganzen Informationen bei der Shirt-Version auditiv zu gestalten, damit man keinen Schwindelanfall beim lesen bekommt. :)

AR_Shirt-2.jpgAR_Shirt-2.jpg

Reflexion

Ich muss sagen, dass ich mich vor allem im ersten Semester sehr vor dem Thema AR gescheut habe. Ich war schon in der zweiten Dimension total mit den Möglichkeiten der visuellen Gestaltung überfordert. Nach diesem Kurs muss ich nun aber sagen: „Ein Glück habe ich mit dieser Welt Bekanntschaft gemacht“. 

Ich konnte wirklich viel lernen. Durch die Infos und Inspiration, welche wir mit auf den Weg bekommen haben, aber vor allem durch die Erfahrungen und Fehler die ich gemacht habe, sowie die Learnings die ich daraus ziehen konnte.

Es ist unglaublich was für Potential AR, besonders auf die Zukunft bezogen, in sich trägt. Ich bin sehr gespannt auf die Entwicklung der Software die wir kennenlernen durften und wie diese AR weiterbringen. 

Das Shirt ist letzten Endes nicht perfekt geworden, aber ich bin stolz auf meinen Experimentiergeist, mein Durchhalte vermögen und das daraus entstandene Ergebnis. Gern würde ich bei Gelegenheit noch mehr daran tüfteln. :)

Ein Projekt von

Fachgruppe

Werkstattpraxis

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Henriette Greßler - AR Lab

Zugehöriger Workspace

Graphic AR Lab: Einführung in Augmented Reality

Entstehungszeitraum

Wintersemester 2024 / 2025

zusätzliches Material