»Way to Go«: So entstand das WebGL-Game von Vincent Morisset

Projekt: Konzeption und Entwicklung des interaktiven WebGL-Games »Way to Go«
Konzept, Game Design, Programmierung, Publishing und Marketing: AATOAA studio, Montreal, Kanada
Technik: Google Chrome, After Effects, GoPano, GoPro Hero3+, JavaScript, HTML5, WebGL, Three.js, Web Audio API
Zeitraum: Oktober 2012 bis Mai 2015

»Geh deinen Weg. Sieh dir die kleinsten Dinge an. Niemand wartet, hier läuft kein Highscore«, liest man zu Beginn des Hybrid-3D-Spiels »Way to Go«. Oder ist es eher ein experimenteller interaktiver Film zum Spielen? Wenn es ein Game ist, dann eines zum Innehalten und Entschleunigen – auch wenn die Hauptfigur, der weiße Cartoon-Quadratkopf, dessen Mimik man unwillkürlich zu lesen versucht, um die Spielmechanik zu ergründen, auch hüpft, fliegt, Loopings schlägt und wegrennt. Und doch scheint er an die weiße Linie gebunden, die sich über den Waldboden schlängelt. Ein geführter Waldlauf mit Unter­brechungen, begleitet von einem geheimnisvollen, schwarz gekleideten Stabträger …

Frage nach dem Weg des Menschen

Für diesen schmalen Grat zwischen Film und Game ist der kanadische Künstler und Web-Regisseur Vincent Morisset bereits bekannt. Schon 2011 nahm der Gründer des Studios AATOAA in »Bla Bla – A Film for Computer« mit einer animierten handgemachten Puppe die Grundprinzipien der menschlichen Kommunikation auf die Schippe und feierte damit aus dem Stand Erfolge. 2012 gab es dafür einen SXSW Interactive Award.

Nun hat er sich mit geradezu kindlicher Arglosigkeit dem Thema 3D und Virtual Reality genähert. Das National Film Board Kanada subventionierte das Projekt, sodass Morisset und seine Mitstreiter Caroline Robert (Visual Design), Philippe Lambert (Sound Design) und Édouard Lanctôt-Benoit (Programmierung) genügend Experimentierzeit hatten, um das kunstvolle, rund zehnminütige Videogame zu konzipieren und umzusetzen.

Ein bisschen läuft das weiße Männle wie ein Hund neben, hinter oder vor dem unter schwarzer Kutte und schwarzem Karton steckenden Kameramann – Morisset himself –, der beim Navigieren in steileren 3D-Perspektiven mit seiner zum weißen Zauberstab verfremdeten Kameravorrichtung im Bild ist. Caroline Robert versah Morissets schwarzen Kartonkopf mit Tracking-Punkten, um Augen, Nase, Mund später ins laufende Video mappen zu können. Anders beim weißen Männlein: Es gelangte mittels After Effects durch schlichte Montage von 3D-Videofilm und animiertem Cartoon ins bewegte Bild.

Bastelarbeit schlägt digital animierte Perfektion

Die Gestalt der weißen Hauptfigur entstand eher zufällig. »Dass die an einem Stab befestigte 360-Grad-Kamera bei ersten Probeläufen mein Gesicht mit aufnahm, irritierte mich«, erinnert sich Vincent Morisset – et voilà: Die Idee für den quadratischen Kopf war geboren! Bei der eigentlichen Konzeption des Männleins prüfte Visual-Designerin Caroline Robert zunächst viele Materialien. »Es wäre unendlich viel Arbeit gewesen, jeden Gesichtsausdruck und jede Bewegung aus allen 360-Grad-Blickwinkeln in Lehm zu formen«, so Morisset. »Caroline ist mit ihrem Mix aus Handzeichnungen, Wasserfarben, Tinte und dynamischen Shadern ein ganz eigener Stil gelungen«, lautet das Lob aus der Regie.

Andere Digital Artists hätten die Figur vielleicht eher in Nvidias Programmiersprache C for Graphics modelliert, um sie in der 3D-Ansicht des Editors zu drehen. Doch Moris­set mag es weniger perfekt: »Mich inspirieren Projekte, die sich ästhetisch frei anfühlen. Sie sollen handgemacht, unvollkommen und zerbrechlich wirken, denn so vergessen wir die Technologie dahinter.«

Mut zur VR-Brille

Zum Konzeptionsstart 2012 hatte das Team das Thema Virtual Reality noch nicht so richtig auf dem Radar. »Erst während der Entwicklung realisierten wir, dass ›Way to Go‹ sich auch prima als VR-Game eignen würde«, so Vincent Morisset. Also machte sich Developer Édouard Lanctôt-Benoit an die Oculus-Rift-Adaption, baute eine dynamische Stabilisierung ein, die Eigenbewegungen des Trägers umsetzt, und verlangsamte das Tempo, damit die Erfahrung hinter der VR-Brille nicht zu immersiv wird. Wir wollen nicht zu viel verraten, aber nachts allein im Wald ist ja auch so schon ganz schön unheimlich.

Making-of des WebGL-Games »Way to Go«

Vincent Morisset erklärt, warum das Videospiel »Way to Go« trotz seines 3D-Konzepts und fulminanter Farbanimationen so natürlich wirkt und warum sich auch das Finishing der Bild- und Audioinhalte so anfühlte

Schon 2012 in der Ideenfindungsphase trieb mich die Sehnsucht an, die grundlegenden Mechanismen von Videospielen zu untersuchen: Sich frei im Raum bewegen, dabei die Blickrichtung des Characters kontrollieren und mit der Umgebung interagieren – das Genre faszinierte mich. Doch die 3D-Effekte wollte ich unbedingt mithilfe von Videomaterial erreichen. Also mussten wir zunächst herausfinden, wie man ein Video dreht, bei dem der Zuschauer eine 360-Grad-Sicht auf das Geschehen hat. Dabei war uns wichtig, dass der Spieler eine tiefe Verbindung mit der Umwelt eingeht – ganz ohne an Technologie zu denken.

1. Geeignete 360-Grad-Kamera finden

Die ersten Tests nahmen wir mit der GoPano for iPhone vor. Ich lief geradeaus mit Smartphone in der Hand, und der erste Prototyp vermittelte tatsächlich die Illusion, dass man sich vorwärts bewegte. Weil die Bildqualität der GoPano aber nicht ausreichte, nutzten wir schließlich einen sphärischen Freedom360-Mount mit sechs GoPro-Hero3+-Actionkameras und montierten das Ganze auf eine Kamerastange. An deren unterem Ende installierten wir ein Gyroskop, das meine wackelnden Bewegungen in Echtzeit kompensierte.

2. Mit Video tricksen

Erst beim Sichten des Filmmaterials kam uns die Idee, die Zeitleiste des 360-Grad-Videos zu manipulieren. Wenn ich rannte, erhöhten wir die Framerate, hielt ich an, stoppte auch das Video. Um beim Stopp das Gefühl zu vermeiden, dass das Bild stockt, fügten wir den weißen Waldläufer als animierte Figur hinzu. Bei sphärischen Panoramaaufnahmen kann sich der Kameramann nicht verstecken, er ist immer im Bild. Also entschied ich kurzerhand, ebenfalls als Figur im Game anwesend zu sein – ganz so, als wäre ich der Schatten meiner Hauptfigur.

3. Animierte Figur ins Video mappen

Um den animierten Waldläufer ins Video zu integrieren, erstellten wir eine unsichtbare WebGL-3D-Welt und mappten die Figur hinein. Dafür ließen wir zunächst After Effects unsere 360-Grad-Spaziergänge analysieren und transferierten dann die Topologie der realen Welt in die 3D-Umgebung. Die weißen Tracking-Punkte auf meinem schwarzen Kostüm dienten als Orientierungskoordinaten, um das gezeichnete Gesicht in Echtzeit ins Video zu mappen. Der weiße Waldläufer sowie die anderen schwarzen Figuren mit ähnlichen schwarzen Kartons auf den Köpfen orientieren sich am Pfad, den ich als Kameramann vorgebe.

4. Webstandards nutzen

»Way to Go« sollte im Browser laufen, ohne dass der User Plug-ins herunterladen muss, deshalb wählte unser Entwickler Édouard Lanctôt-Benoit HTML5, den 3D-Webstandard WebGL sowie JavaScript und die JavaScript-3D-Library Three.js. Deren Möglichkeiten kitzelte er schon wegen der starken Videokomprimierung bis ans Limit. In puncto Sounddesign entschieden wir uns für den Audio-Webstandard Web Audio API. Für das Stitching der sechs simultan aufgenommenen Kameraperspektiven zu einem Gesamtbild wie auch für die Videokompression schrieb Édouard eigene Software, um für optimale Online-Performance zu sorgen.

Zudem entwickelte er in HTML5 einen WYSIWYG-Editor mit beweglichen Schiebern, mit denen sich Farbe, Größe und weiteren Eigenschaften frei einstellen lassen. In ihm konnten Caroline Robert und Philippe Lambert sehr intuitiv visuelle Contents – zum Beispiel gezeichnete Büsche und Bäume sowie Audioinhalte – kreieren und den Fortschritt ihrer Arbeit direkt im Browser betrachten. Eine vorzügliche Weise, um jeden Aspekt unserer Welt zu verfeinern und die Interaktionen zu optimieren. Gehen Sie doch auch einmal auf Entdeckungstour in »unseren« Wald …

Hier geht’s zum PAGE eDossier »WebGL: Making-ofs und Workshops«. Dort lesen Sie mehr über den 3D-Webstandard WebGL.