von Seline Freiburghaus und Juliette Niedermaier
Im Modul Interaktive Medien wurde uns die Aufgabe gestellt, eine VR-Ausstellung rund um den Studiengang MMP zu gestalten. Wir haben uns entschieden, diese Website in einem grösseren Umfang zu realisieren und ein Digezz Projekt daraus zu machen.
Ideenfindung
Wir sind beide interessiert an Fotografie. Daraus ergab sich schnell, dass wir eine Fotoausstellung programmieren wollen. Zusätzlich kam uns im Modul Make it Sound die Idee, Bilder mit Sound zum Leben zu erwecken. Mit diesen Grundideen erstellten wir einen genauen Plan, wie die virtuelle Galerie später aussehen sollte.
Planung und Aufbereitung der nötigen Ressourcen
Wir haben also angefangen zu skizzieren und zu planen und haben uns schliesslich für einzelne abgetrennte Räume entschieden, welche nur betreten werden können durch das richtige Beantworten von Fragen.
In jedem Raum werden zwei Bilder platziert. Zusätzlich hängen Schilder mit entsprechenden Fakten von der Decke. So kann der User Informationen sammeln, welche für das Quiz später hilfreich sein können. Humor soll auf jeden Fall in das Projekt einfliessen.
Wir suchten nach geeigneten Themen. Schliesslich stiessen wir auf Bilder von China. Diese mit Schweizer Traditionen zu verknüpfen, erschien uns ausgefallen und faszinierend. Auf den ersten Blick wirken die Länder so unterschiedlich, wir fanden jedoch den Aspekt der Diskrepanz spannend - unsere winziges Alpenland im Gegensatz zum riesigen kommunistischen China.
Wir planten insgesamt acht Räume. Im Eingangsbereich entscheidet man sich für den Weg durch das eine oder andere Land. Beantwortet man alle Fragen richtig, erreicht man das Ziel im Schlussraum.
Dazwischen liegen pro Land jeweils drei Räume, darin befinden sich immer zwei Bilder mit einer Frage. Die richtige Antwort kann mittels Buttons ausgewählt werden, drei Möglichkeiten stehen zur Auswahl. Antwortet man richtig, färbt sich die Türe grün und öffnet sich. Färbt sie sich rot, liegst du falsch und die Türe bleibt verschlossen.
Zusammen haben wir unser Fotoarchiv durchforstet, sortiert und zu Themen gebündelt. Anschliessend haben wir die Bilder in Photoshop bearbeitet und zugeschnitten. Um das Erlebnis in unserem VR-Raum imposanter zu gestalten und die Bilder zum Leben zu erwecken, haben wir zu jedem Foto passenden Sound gesucht und eigene Sprachaufnahmen produziert und eingefügt.
Das Suchen nach spannenden, aber auch unterhaltsamen Fakten nahm einige Zeit in Anspruch. Hier war uns wichtig, die Angaben auf ihre Richtigkeit zu überprüfen.
Programmierung mit A-Frame
Wir haben beide noch nie eine VR-Website mit A-Frame erstellt. Seline hat schon sehr gute Vorkenntnisse im Programmieren von 2D Webseiten und hat sich hauptsächlich mit dem Programmieren beschäftigt.
Als erstes programmierten wir einen Raum (eine Entity), welchen wir später duplizieren konnten und in welchem wir dann nur noch die Platzierung, die Inhalte (Bilder, Texte, Sounds, etc.) und die IDs ändern mussten. Der Raum hat dunkle Wände, damit die Fotos gut zur Geltung kommen. Zudem wollten wir eine geheimnisvolle Atmosphäre schaffen und so eine Abenteuerwelt inszenieren.
Beim Einfüllen der Inhalte machte sich der erste Stolperstein bemerkbar. Ä, ö oder ü wurden im <a-text>-Tag nicht richtig dargestellt. Wir haben verschiedene Schriftfamilien getestet, vergebens. Also mussten wir eine andere Lösung finden, vorerst beliessen wir den fehlerhaften Text so.
Als nächstes ging es darum, den Start- und Endraum mit den nötigen Funktionen auszustatten. Wir benötigten die Funktion addEventListener von JavaScript, um die Animationen auszulösen. Die Bilder reagieren auf einen mouseenter und mouseleave, während die Antwortmöglichkeiten erst auf click funktionieren (Animation wird erst ausgelöst, wenn der Cursor zwei Sekunden auf das jeweilige Objekt gehalten wird).
Jetzt musste die gesamte Galerie bzw. die einzelnen Räumen zusammengebaut werden. Das Grundgerüst stand nun. Bis anhin wurden für die Inhalte nur Platzhalter verwendet. Diese mussten nun alle durch die definitiven Inhalte ersetzt werden.
Um die Galerie noch etwas mystischer erscheinen zu lassen, generierten wir ein Spotlight. Dadurch entsteht eine Art Taschenlampeneffekt, der Blickwinkel wird eingeschränkt. So wird der User automatisch aufgefordert, sich zu bewegen und den Raum zu entdecken, weil nicht alles auf den ersten Blick ersichtlich ist.
Leider reagierte der <a-image>- und <a-text>-Tag nicht auf das Spotlight, die weissen Textelemente wurden immer in 100% Helligkeit dargestellt und nicht abgedunkelt. Beim <a-image>-Tag wurde die Transparenz bei PNGs nicht richtig berechnet. Folglich mussten wir alle Text- und Image-Objekte durch den <a-plane>-Tag ersetzen und die Inhalte (Texte und Fotos) als Bilder einfügen. Erfreulicherweise löste sich damit gleichzeitig auch unser Problem der Darstellung von ä, ö und ü.
Zu Beginn war angedacht, dass der Spieler nach dem Öffnen der Tür mittels Kamerafahrt in den nächsten Raum geführt wird. Beim Testen hat sich jedoch herausgestellt, dass sich durch die Navigation des Users mit den Pfeiltasten die programmierten Endpunkte der Kamerafahrt ungewollt verschieben. Eine Möglichkeit wäre gewesen, die Navigationsmöglichkeit durch den Spieler zu deaktivieren. Dies wollten wir jedoch nicht. Also entschieden wir uns, dass der User selber von Raum zu Raum navigieren muss.
Beim Testen tauchte eine weitere Schwierigkeit auf. Der Cursor ist ein unendlich langer Strahl in Z-Richtung. Trifft dieser Strahl nun auf ein Objekt, welches eine Animation auslöst, wird diese gestartet. Liegen aber mehrere Objekte hintereinander, die eine Animation auslösen, erkennt der Cursor nicht, welches das nächst gelegene oder am weitesten entfernte ist. Folglich werden alle Animationen gleichzeitig ausgelöst, was wir so nicht wollten. Seline hat viele Stunden in die Recherche zur Lösung des Problems investiert. Schliesslich ist sie darauf gekommen, mittels JavaScript die Position der Kamera abzufragen und je nach Raum die gewünschten Animationen zu aktivieren und die nicht benötigten zu deaktivieren.
Ein Problem, welches wir nicht lösen konnten, ist das Bewegen durch Wände.
Fazit
Mit diesem Projekt sind wir das erste Mal in die Umsetzung einer 3D/4D Welt eingetaucht. Die User Experience und die Usability müssen im Vergleich zu üblichen Webseiten aus einer anderen Perspektive betrachtet werden. Es gibt noch nicht sehr viele 3D Webseiten, dadurch bestehen auch noch nicht klare Regeln, welche befolgt werden müssen. Je nach Projekt kann die Bedienung sehr unterschiedlich sein.
Während der Planung und Realisierung der Webseite hatten wir uns mit einigen Problemen auseinanderzusetzen. Nach dem Studium der Theorie auf der A-Frame Webseite blieb uns oft nicht viel anderes übrig, als auszuprobieren und eigene Lösungsmöglichkeiten zu testen. Dabei haben wir viel gelernt.
Wir sind sehr zufrieden mit dem Endergebnis. Und die Arbeit hat Spass gemacht!
