Timetravel Fichtelgebirge ist ein interaktives XR-Projekt, das historische Orte und bedeutende Persönlichkeiten der Region des Fichtelgebirges lebendig macht.
Durch den Einsatz von 3D-Scans, generativer KI und VR-Technologien können Besucher des Fichtelgebirgsmuseums auf eine spannende Reise in die Vergangenheit gehen.
Sechs Orte der Region, darunter das Felsenlabyrinth Wunsiedel, Persönlichkeiten wie Johann Wolfgang von Goethe und Alexander von Humboldt – werden virtuell erlebbar und lassen die Geschichte interaktiv erleben.
Das Projekt verknüpft digitale Technologien mit der realen Welt und ermöglicht eine crossmediale Erfahrung. Es fördert das Heimatbewusstsein und die regionale Identität, während es die digitale Teilhabe im Bereich Kultur und Geschichte stärkt.
Das Projekt spricht alle Altersgruppen an: Jugendliche, Technikbegeisterte und Erwachsene mit Interesse an regionaler Geschichte. Ziel ist es besonders, junge Menschen für das Museum zu gewinnen, indem die Geschichte der Region modern und interaktiv erlebbar gemacht wird.
Im Projekt „Timetravel Fichtelgebirge“ war ich für technische und kreative Aufgaben verantwortlich:
Das Projekt wurde unter der Leitung von Prof. Michael Zöllner, Leiter der Forschungsgruppe „Interaction und Data Driven Design“ am iisys der Hochschule Hof, realisiert. Unterstützt wurde ich von Celina Jahn (3D-Modellierung), Moritz Krause (Drohnenaufnahmen), Theresa Gebhardt (Ausstellungsgestaltung) und Prof. Zöllner (Optimierung).
Meine direkte Ansprechpartnerin war Jill Rehfeldt, Projektkoordinatorin des Fichtelgebirgsmuseums. Für die historische Genauigkeit arbeitete ich eng mit Historikern zusammen.
Der Designprozess verlief in mehreren Phasen, um eine benutzerfreundliche und intuitive Anwendung für XR-Umgebungen, Tablets und VR-Brillen zu schaffen.
Ich entwickelte 3 User Flows, die den Ablauf der Nutzer durch die Anwendung visualisierten und verschiedene Nutzungsszenarien wie Museum, mobiler Zugriff und Präsentationen berücksichtigten. So wurde die Struktur und Interaktivität aus der Perspektive der Nutzer optimiert und die Bedienbarkeit in allen Kontexten gewährleistet.
In der Anfangsphase erstellte ich explorative Wireframes und Skizzen, ohne technische Einschränkungen zu beachten. Dies ermöglichte freies Experimentieren und half, die Anordnung und Interaktivität zentraler UI-Elemente wie Infotafeln, Hinweise und Buttons zu entwickeln.
Nach der Erstellung der Wireframes begann die visuelle Gestaltung der Benutzeroberfläche. Ein Style Guide mit der Schriftart Fira Sans aus der Imagekampagne #freiraum diente als Grundlage.
Ich designte Infotafeln, Buttons und das gesamte User Interface (UI) und optimierte diese kontinuierlich mit Schwerpunkt auf Benutzerfreundlichkeit
Die Buttons erhielten ein halbtransparentes XR-Design mit schwebendem Effekt, hoher Lesbarkeit und starkem Kontrast. Farben und Grafiken betonten die historische Atmosphäre, ohne Inhalte zu überlagern. Das Design funktionierte optimal auf Tablets und in VR.
Ein zentraler Aspekt war die Gestaltung interaktiver Infotafeln in WebXR-Szenen. Sie lieferten gut lesbare Informationen zu historischen Orten und Artefakten und fügten sich harmonisch in die Umgebung ein.
Ergänzend entwarf ich gut sichtbare, intuitiv verständliche Buttons für die einfache Navigation zwischen XR-Szenen und Informationsbereichen. Hover-Effekte und Animationen betonten ihre Funktion und erleichterten die Interaktion.
Zu Beginn jeder Anwendung erleichterte eine Einführung den Einstieg. In der VR-Umgebung erschien sie direkt in der Szene, auf Tablets als Startbildschirm mit einem „Jetzt starten“-Button. Gleichzeitig startete ein KI-generiertes Porträt-Video, das die Nutzer in die Geschichte einführte und den interaktiven Einstieg unterstützte.
Das UI-Design auf den Tablets wurde für die Touch-Bedienung optimiert: Nutzer konnten Objekte durch Berühren aktivieren und animieren. Wischbewegungen wurden vermieden, da die 360-Grad-Anwendung durch Drehen des Tablets eine intuitive Erkundung der virtuellen Umgebung ermöglichte.
In der XR-Umgebung für VR-Brillen wurde ein Gaze-Fusor als fixierter Mauszeiger eingesetzt. Nutzer konnten damit durch „Hovern“ Buttons aktivieren oder Animationen von 3D-Modellen auslösen.
Alternativ ermöglichte das Handtracking direkte Interaktionen wie das Greifen oder Bewegen von Museumsartefakten. Hinweis- und Informationstafeln erklärten den Nutzern, welche Interaktionen möglich waren, z. B. ob ein Objekt greifbar war oder per Gaze-Fusor aktiviert werden konnte.
Zur Veranschaulichung des Designprozesses erstellte ich erste Prototypen in WebXR mit A-Frame und teilte sie über glitch.com mit den Projektpartnern. So konnten sie interaktive Infotafeln, Buttons und Navigationsoptionen testen und Feedback geben. Das schnelle Bereitstelen war wichtig, um die benutzerzentrierte Gestaltung iterativ zu verbessern und die Funktionalität effektiv zu planen.
Für „Timetravel Fichtelgebirge“ übernahm ich die Umwandlung historischer Bilder und 3D-Scans in digitale Modelle, die in der XR-Umgebung interaktiv erlebbar wurden, um eine authentische Zeitreise zu ermöglichen.
Zu den rekonstruierten Orten gehörten eine historische Porzellanfabrik und die Glashütte Reichenau. Die Modelle basierten auf historischen Bildern und Zeichnungen, um Architektur und Produktionsstätten detailgetreu nachzubilden. Besonders herausfordernd war die Verbindung historischer Details mit modernen 3D-Modellierungstechniken, ohne die Authentizität zu verlieren.
.avif)
Die Museumsartefakte wurden sowohl durch 3D-Scannen oder 3D-Modellierung als auch durch digitale Rekonstruktion erstellt:
Steinkopf: Mit 3D-Scan-Technologie wurde eine präzise digitale Kopie dieses Artefakts erstellt, wobei die Oberflächenstruktur ideal für das Scannen war.
Golddukate: Aufgrund der kleinen Größe wurde der Golddukate mit Fotos und einer Heightmap rekonstruiert, um das reliefartige Oberflächenmuster als 3D-Modell zu extrudieren.
Luisenfahne: Die Fahne wurde anhand historischer Vorlagen als 3D-Modell nachgebildet, die Textur des Stoffes per Bild erfasst und die Fahne wehend animiert.
Ochsenkopfglas: Mit Photogrammetrie wurde ein detailliertes 3D-Modell aus einem Video des Objekts erstellt. Überhängende Polygone am Rand wurden optimiert.
Porzellangeschirr: Wegen der reflektierenden Oberfläche konnte kein 3D-Scan verwendet werden; das Geschirr wurde vollständig 3D-modelliert, mit handgefertigten Texturen versehen, um das Design zu replizieren.
Zinnkrug: Der Zinnkrug wurde 3D-modelliert, und eine Zinntextur wurde über das Modell gemappt, um das authentische Aussehen zu erzielen.
Die größten Herausforderungen bei der Modellierung und dem Scannen betrafen die reflektierenden Oberflächen von Glas und Porzellan. Für das Porzellangeschirr und die Fahne nutzte ich manuelle Modellierung und Texturierung. Die Transparenz des Glases wurde durch Photogrammetrie und hochauflösende Videoaufnahmen überwunden.
Zudem führte die hohe Polygonanzahl der Scans zu Performance-Problemen in der WebVR-Anwendung, die ich durch Optimierung der Polygone und Anpassung der Texturen beheben konnte, um eine flüssige Benutzererfahrung zu gewährleisten.
Für die Erstellung und Optimierung der 3D-Modelle kamen folgende Technologien und Tools zum Einsatz:
Die XR-Anwendung ermöglicht es Besuchern, durch die rekonstruierten Räume der Porzellanfabrik und Glashütte zu navigieren und Objekte wie den Steinkopf oder die Goethe-Büste aus nächster Nähe zu betrachten.
Jedes Artefakt kann detailliert inspiziert werden, mit eingeblendeten Informationen und historischen Hintergründen. Die Interaktivität lässt Nutzer die Objekte aus verschiedenen Perspektiven erleben und mit ihnen interagieren.
Für die virtuelle Zeitreise wurden KI-generierte Porträts von 6 historischen Figuren erstellt, die als sprechende Charaktere interaktive Erlebnisse ermöglichten. Die Porträts wurden mithilfe generativer KI auf vollständige Darstellungen erweitert, einschließlich Körperhaltung, Kleidung und Requisiten. Die sprechenden Porträtvideos wurden bei Szenenwechseln ausgelöst, sodass in jeder Szene ein Charakter die Geschichte erzählte.
Die sprechenden Porträtvideos wurden nach jedem Szenenwechsel ausgelöst, sodass in fast jeder Szene ein Charakter die Geschichte erzählte. Ergänzend wurden Untertitelvideos erzeugt, um die Inhalte barrierefrei zugänglich zu machen.
So konnten auch hörbeeinträchtigte Nutzer die Geschichten vollständig erleben, was die Inklusivität förderte. In der VR-Anwendung wurden die Untertitel an der Kamera platziert, während sie auf den Tablets über der a-scene angezeigt wurden, um die Performance zu optimieren.
Mit Runway ML erstellte ich realistische Porträts aus historischen Bildern und animierte sie mit KI-Technologie. Stimmen aus Eleven Labs, abgestimmt auf Alter, Tonlage und Akzent, gaben den Charakteren Authentizität. Die KI-Charaktere erzählen die Geschichte der Region und tragen so zur immersiven Nutzererfahrung bei.
Ich erstellte 360-Grad-Fotos mit einer GoPro Insta360 Kamera von historischen Orten, um eine immersive Nutzererfahrung zu bieten. Die Panoramafotos wurden aufgenommen, aufbereitet und in die XR-Umgebung integriert, sodass die Nutzer die Orte virtuell erkunden können.
Die XR-Szenen ermöglichen eine interaktive Navigation durch die virtuelle Tour. In der VR-Umgebung steuern Nutzer mit dem Gaze Fusor Buttons und 3D-Modelle durch Blicksteuerung.
Auf Tablets und der Model-Viewer-Station erfolgt die Interaktion per Touch, was eine benutzerfreundliche Steuerung ermöglicht. So können Nutzer historische Orte und Artefakte direkt und nahtlos erleben.
Die Entwicklung der Geschichten für die 6 Charaktere erfolgte in enger Zusammenarbeit mit Historikern und dem Fichtelgebirgsmuseum, um historische Ereignisse und Figuren spannend und lehrreich für das interaktive Format aufzubereiten.
Ich erstellte ein Storyboard und mehrere Erzählstränge für die Hauptcharaktere, die historische Orte und Artefakte verknüpfen und die Nutzer durch die Zeitreise führen. Die Stories wurden auf die WebXR-Umgebung abgestimmt, sodass die Nutzer direkt mit den Figuren und Ereignissen interagieren können.
Die Erzähltexte, basierend auf den Storyboards und dem Erzählstrang, wurden größtenteils vom Museum erstellt und in das User Interface integriert. KI-gesteuerte Stimmen erweckten die Texte zum Leben, wobei die Auswahl der Stimmen für die Authentizität der Charaktere entscheidend war.
Durch generative KI konnten historische Porträts in verschiedenen Posen und mit unterschiedlichen Gegenständen erweitert werden, was das Storytelling in den Szenen zusätzlich unterstützte.
Alle Assets wurden lokal implementiert und optimiert, um den Offline-Betrieb auf den Museumstablets zu gewährleisten. 3D-Modelle und Texturen wurden in Größe und Speicherbedarf reduziert, während Videos auf kleinere Dateigrößen optimiert wurden, um Leistungsprobleme zu vermeiden.
Durch Performance-Tests wurde die stabile Wiedergabe von Videos und interaktiven Elementen sichergestellt.
Für ein flüssiges Nutzererlebnis optimierte ich 3D-Modelle durch Polygonreduktion und skalierte Texturen, um eine Balance zwischen Qualität und Performance zu erzielen.
Bilder, Texte und Audiodateien wurden strukturiert und lokal in den Webservern gespeichert, um schnellen Zugriff und eine reaktionsschnelle Anwendung zu gewährleisten.
Die WebVR-Anwendungen wurden mit der A-Frame-Bibliothek entwickelt, die interaktive 3D- und VR-Erlebnisse im Web ermöglicht. Grundlage war das tour.js-JavaScript, das die Integration und das Wechseln zwischen 360-Grad-Panoramen ermöglichte und so eine virtuelle Tour schuf.
Im Projektverlauf wurden verschiedene Fortbewegungsarten getestet, darunter Teleportieren per Joystick, freie Bewegung und Touch-Navigation. Animiertes „Laufen“ durch den Stollen wurde aufgrund von Motion Sickness bei Testpersonen verworfen.
Da zu viele Bewegungsoptionen die Orientierung erschwerten, wurde schließlich die Navigation über Sprungpunkte gewählt, die gezielte Szenenwechsel ermöglichen.
.avif)
Die Sprungpunkte wurden getestet und optimiert, sodass Nutzer nahtlos zwischen Panoramen und 3D-Modellen wechseln können, entweder durch Gaze-basierte Aktionen oder Klicks. In der VR-Umgebung ermöglichte Handtracking natürliche Interaktionen mit Artefakten, während Tablets eine intuitive Touch-Steuerung boten, die für mobile Geräte optimiert war.
Spezifische Shader, wie ein Transparent Video Shader für die KI-Porträts und Untertitel, wurden angepasst, um die transparente Darstellung auf Apple- und Android-Geräten zu gewährleisten und die Performance zu optimieren. Diese Erweiterungen verbesserten die Immersion und Benutzerfreundlichkeit der Anwendung.
Das Projekt wurde 2023 beim Tag der bayerischen Regionen im Heimatministerium vorgestellt. Die virtuelle Zeitreise, die historische Geschichten mit XR-Technologien und KI verband, stieß auf großes Interesse und erhielt wertvolles Feedback zu Interaktivität und immersiver Erfahrung.
Zusätzlich wurden im Rahmen der Forschungsgruppe mehrere wissenschaftliche Arbeiten zum Projekt veröffentlicht, darunter:
User-Tests mit Museumsmitarbeitern und einer Schulklasse lieferten wertvolle Einblicke in die Benutzerfreundlichkeit. Besonders gelobt wurde die Interaktivität mit den Artefakten in der VR-Brille. Die Tests zeigten eine hohe Nutzerinteraktion, wobei kleinere Anpassungen an Navigation und Inhaltserklärungen vorgenommen wurden.
Mein Fokus lag auf der Softwareentwicklung, doch ich trug aktiv zur User Experience und Umsetzung der Ausstellung bei. In Abstimmungen zum Raumkonzept brachte ich Ideen zur Integration der iPads ein und stellte sicher, dass die Kopfhörer funktional eingebunden wurden.
Ein Adapter im Acrylrahmen ermöglichte es, die iPads gleichzeitig zu laden und mit den Kopfhörern zu verbinden, um den Lärm im Raum auszugleichen.
Um eine langfristige Nutzung der Tablets zu gewährleisten, richtete ich einen lokalen Webserver ein und implementierte einen Kiosk-Modus. Die iPads wurden verschlüsselt und mit einem Display-Timer ausgestattet, um die Lebensdauer zu verlängern.
Beim Ausstellungsaufbau unterstützte ich aktiv, um die technischen Elemente zu integrieren und die Funktionalität der Displays sicherzustellen.
Die interaktive Model-Viewer-Station ermöglicht es Besuchern, 3D-Modelle der 6 Museumsartefakte zu betrachten und in Echtzeit zu skalieren. So können die Artefakte detailliert inspiziert werden, wie sie auch in den XR-Anwendungen sichtbar sind.
Die Nutzer können die Objekte aus verschiedenen Blickwinkeln betrachten und Details wie Texturen und Feinheiten genau untersuchen. Die Station fördert die Immersion und lässt Besucher tiefer in die Geschichte und Kultur des Fichtelgebirges eintauchen.
Die Zusammenarbeit mit dem Fichtelgebirgsmuseum und den Partnern war lehrreich, besonders in Koordination und Zeitmanagement. Regelmäßige Meetings, klare Verantwortlichkeiten und festgelegte Termine halfen, den Überblick zu behalten und die verschiedenen Disziplinen miteinander zu verbinden.
Eine Herausforderung war die technische Kommunikation mit den Museumsmitarbeitern. Frühzeitige Rückfragen und ein besseres gegenseitiges Verständnis halfen, Missverständnisse zu vermeiden. Effizienter wäre es gewesen, optimierte Assets wie Bilder und 3D-Modelle früh anzulegen und direkt auf den Museums-iPads zu testen, um Kompatibilitäts- und Performance-Probleme frühzeitig zu erkennen.
Ein entscheidender Vorteil war die eingeplante Pufferzeit, die es ermöglichte, technische Probleme, vor allem bei der Netzwerk- und Bibliotheksintegration, rechtzeitig zu identifizieren und zu optimieren.
Durch das Teilen von Projektständen über Live-Server und die schnelle Erstellung von Prototypen konnten Anpassungen effizient vorgenommen und früh getestet werden. Diese Flexibilität trug wesentlich zum Erfolg des Projekts bei.
Hast du eine Idee oder ein Projekt für ein barrierefreies Webdesign, das umgesetzt werden soll? Ich freue mich darauf, von dir zu hören.
Für Anliegen und Fragen stehe ich gerne unter design@jangemeinhardt.de zur Verfügung.
Dein Ansprechpartner:
Jan Gemeinhardt
