Frag Riot

Stelle eine Frage zu Riot oder League, und wir werden versuchen, sie zu beantworten. Antworten werden jeden zweiten Donnerstag um 22:30 Uhr (MEZ) veröffentlicht.

Was möchtest du wissen?

Etwas ist schiefgegangen. Versuch es nochmal.

Danke, dass du uns eine Frage geschickt hast!

Nächster Artikel

/dev: Der WM-Drache

Wie das Vogelnest in Peking zu einem Drachenhort wurde.

Wir versuchen immer, während der WM eine denkwürdige und spannende Veranstaltung zu schaffen, doch 2017 wollten wir uns wirklich selbst übertreffen. Als wir also die Grundlagen für die Eröffnungszeremonie des diesjährigen Finales festlegten, stellten wir auch ein Team zusammen, das unsere kühnsten Träume umsetzen sollten: Sie sollten einen Drachen beschwören.

League zum Leben erwecken

Eine unserer höchsten Prioritäten bei der Planung von globalen Veranstaltungen ist, dem Gastgeberland besondere Ehre zukommen zu lassen. Da die WM dieses Jahr in China stattfand, war es wichtig, auf die chinesische Kultur einzugehen. Ab Februar 2017 stellten wir langsam die diesjährige Eröffnungszeremonie zusammen, in der ein authentischer chinesischer Erhu-Spieler, Masken der Peking-Oper, die nach League-Champions gestaltet worden waren, der Superstar Jay Chou und ein Live-Auftritt der Band Against the Current mit „Legends Never Die“ vorkommen sollten. Und doch hatten wir das Gefühl, dass noch etwas Besonderes fehlte – etwas Unerwartetes, das die Größe und Ausmaße von Pekings ikonischem Vogelneststadion widerspiegeln sollte.

Wir warfen ein paar Ideen in den Raum und einigten uns schließlich darauf, erweiterte Realität zu verwenden. Darunter versteht man das Einfügen von 3D-Grafiken in eine reale Umgebung in Echtzeit. Erweiterte Realität greift auf eine echte Kamera zurück, die eine virtuelle Kamera in einer Grafik-Engine kontrolliert, wobei beide Bildebenen zusammengefügt werden und so der Eindruck entsteht, dass die 3D-Grafik real ist.  Erweiterte Realität ist bei Sportübertragungen nichts Neues – traditionelle Sportausstrahlungen und andere E-Sport-Veranstaltungen wie Dotas International (und sogar unsere eigene NA LCS, das MSI und die WM) haben sie bereits in der einen oder anderen Form eingesetzt. Doch wir wollten etwas erschaffen, das es in diesem Ausmaß bisher noch nicht gegeben hatte.

Die ursprünglichen Ideen, die wir für die diesjährige Eröffnungszeremonie hatten, umfassten Ryze, der das Stadion mit seiner Magie bombardiert, und Ashe, die Pfeile aus der Projektionsfläche schießt. Aber da gab es auch diesen Running Gag, der sich über die Jahre gehalten hatte: „Holen wir uns doch einfach einen Drachen auf die Bühne.“ Wir hatten (noch) kein Portal nach Runeterra, um einen echten Drachen zu importieren, und als der Witz entstand, war die Technologie, die nötig gewesen wäre, einen Drachen in angemessener Qualität in ein echtes Stadion fliegen zu lassen, noch nicht weit genug entwickelt (oder nicht wirklich erschwinglich). Doch im Jahr 2017 war die Technologie für erweiterte Realität so weit fortgeschritten, dass wir glaubten, uns einen Drachen holen zu können. Wir stellten mit einigen unserer verrücktesten Technikinnovatoren ein Team zusammen, um die Frage zu beantworten, ob wir einen Drachen kreieren konnten.

Erweiterte Realität für Fernsehübertragungen hatte sich in den letzten Jahren sehr weit entwickelt, doch wir hatten immer noch die Sorge, dass ein „realitätsgetreuer“ Drache den Rahmen sprengen würde. Die Hauptprobleme, die wir vorhersahen, waren die folgenden:

  • Wie lassen wir einen Drachen ins Stadium fliegen und sich auf den Rand des Vogelnests setzen?
  • Wie sollte der Drache nicht nur auf den Boden, sondern auch auf die Wände des Stadions realistische Schatten werfen?
  • Würden wir es schaffen, am Tag der Zeremonie die Lichtverhältnisse so anzupassen, dass sie mit dem Wetter draußen übereinstimmten? Und wenn ja, wie?
  • Wie sollten wir den Auftritt des Drachen mit den Live-Auftritten abstimmen?

Der Traum vom Drachen

Wir wollten eine mächtige und ehrfurchtgebietende Kreatur am Himmel über Peking zum Leben erwecken, und es gibt in League kein stärkeres, einschüchternderes und härteres Monster als den Ahnendrachen.

Wir taten uns mit einigen unserer Partner zusammen, um brandneue Konzeptkunst zu erstellen, die als Grundlage für das angepasste Modell und die Animationen dieser neuen Inkarnation des Ahnendrachen dienen sollten. Wir zogen viele verschiedene Ansätze in Betracht, doch uns begeisterte die Konzeptkunst am meisten, die herausarbeitete, was an dem Biest am epischsten war. Es war uns am wichtigsten, dass unsere Spieler sofort den netten Ahnendrachen von nebenan erkennen würden, wenn er auf sie herabschnellte, ganz gleich, was wir sonst noch anstellen würden.

Um unseren Qualitätsansprüchen in Sachen Aussehen gerecht zu werden, nahmen wir jeden Aspekt des Drachen unter die Lupe, vom Kopf bis zu den Extremitäten und den Flügeln.

Jeder einzelne Aspekt ging durch einen Entscheidungsprozess, bis wir schlussendlich die finale Konzeptkunst hatten.

Nachdem das Konzept stand, war es Zeit, mit dem Modellierprozess zu beginnen. Anders als beim traditionellen Modellieren von Charakteren für vorgerenderte Animationen, mussten wir immer überprüfen, wie detailliert wir den Drachen gestalten konnten, ohne seine Darstellung in Echtzeit negativ zu beeinflussen.

Was versteht man unter „Rendern in Echtzeit“?

Rendern in Echtzeit bedeutet, dass man Animationen erstellen kann, die so schnell gerendert werden, dass es aussieht, also würden sie live generiert. Dieser Prozess unterscheidet sich von vorgerenderten Animationen, bei denen es Stunden dauern kann, bis eine 10-sekündige Szene gerendert ist (Toy Story 3 ist z. B. berüchtigt dafür, dass pro Einzelbild 7 Stunden Renderzeit nötig waren). Selbst wenn du noch nie etwas vom Rendern in Echtzeit gehört hast, läuft es höchstwahrscheinlich täglich vor deiner Nase ab – so arbeitet nämlich auch die Grafikkarte in deinem Computer, wenn du Videospiele spielst.

In unserer Situation mussten wir den Drachen in Echtzeit ins Stadion fliegen lassen können, um unsere Kameras frei bewegen und unsere gesamte Eröffnungszeremonie in die Einstellung bekommen zu können. Also mussten wir die Polygonzahl und die Eckpunkte im Auge behalten, aus denen der Drache geformt war, damit es während der Übertragung nicht zu Grafikfehlern oder Einbrüchen bei der Bildrate kam. Das war kein großer Unterschied zu den Polygonbeschränkungen bei grafischen Modellen im Spieldesignprozess; man muss einfach den goldenen Mittelweg zwischen Qualität und Leistung finden.

Hier sind ein paar Ausschnitte aus dem Modellierungsprozess:

Während das auf der einen Seite voranging, arbeitete auf der anderen Seite ein Team an der eigentlichen Animation des Drachen, der ins Stadion fliegt. Wir sahen uns einige unserer Lieblingsdrachen aus Game of Thrones, Dragonheart und anderen Filmen an, um einen Eindruck davon zu bekommen, wie ein Drache mit einer Umgebung wie dem Vogelnest interagieren würde. Wie würde er herumfliegen? Wie würde er landen? Wie würde er auf die Leute zu seinen Füßen reagieren?

Nach dem ersten Animationskonzept sollte der Ahnendrache den Beschwörerpokal hereintragen und auf die Bühne stellen. Letzten Endes ließen wir diese Idee wieder fallen, da wir uns für die 16 Meter hohe, aufblasbare Trophäe entschieden, die emporstieg, während der Drache über dem Veranstaltungsort kreiste. Außerdem ist der echte Beschwörerpokal zu schwer, selbst für einen Drachen.

 Wir wollten den Ahnendrachen auf verschiedenen Elementen der Bühne landen lassen und er sollte mit den Künstlern interagieren, so dass die Tänzer eventuell vor Angst davonlaufen oder sich ducken. Schlussendlich dachten wir uns aber, dass ein echter Drache, der in sein Nest kommt und dort Tausende Leute vorfindet, alle wissen lassen möchte, dass er der Boss ist. Immerhin haben wir es hier mit dem Ahnendrachen zu tun, also sollte er der Mittelpunkt der Aufmerksamkeit sein.

Während die Animation langsam Form annahm, stießen wir auf ein weiteres Problem: Der Drache war ein bisschen zu groß. Bei seinen Flügeln kam es beim Sturzflug aufgrund der Stadionwände zu Grafikfehlern, was die Illusion zerstörte. Außerdem konnten wir seinen Schatten nicht sehen, den wir korrekt auf die Zuschauer legen mussten, um das Bild realer wirken zu lassen (dann sieht es nämlich so aus, als würde der Drache einen Schatten auf die echten Zuschauer im Stadion werfen). Wir dachten zuerst daran, den Drachen kleiner zu machen, doch dann taten wir, was auch ein richtig harter Drache getan hätte: Wir änderten die Flugroute. Wir passten den Sturzflug dahingehend an, dass die Schatten richtig aussahen und das Schuppentier nicht mehr durch die Wände des Stadions geisterte.

Hextech im echten Leben

Als Nächstes erstellten wir eine Liste mit Dingen, die wir brauchten, damit die Animation rund lief und alles so echt wie möglich aussah:

  • Die Animation musste in Echtzeit und mit derselben Bildwiederholrate wie unsere Übertragung ablaufen, nämlich 59,94 Bilder pro Sekunde.
  • Der Drache musste auf geometrische Objekte vom Ausmaß und der Größe des Vogelnests weiche Schatten werfen können.
  • Wir mussten eine 3D-Maske erstellen, so dass der Drache hinter dem Stadion erscheinen konnte, während er herein- oder herausfliegt, sowie hinter dem Spielerbereich, wenn er landet.
  • Wir mussten die Beleuchtung der Szene zu jeder Zeit in Echtzeit anpassen können, um uns an jedwede Wetterverhältnisse anzugleichen.
  • Wir mussten außerdem den Drachen in Echtzeit farblich korrigieren können, um die Belichtung und den Kontrast der echten Kameras nachzuahmen.
  • Wir mussten zwei Kameras mit Verfolgungskapazitäten verwenden, deren Bilder an zwei verschiedene Grafik-Engines geschickt wurden, die in Echtzeit renderten.
  • Wir mussten die Animationen gleichzeitig in beiden Engines auslösen können, um nahtlos zwischen den Kameras hin- und herschalten zu können.
  • Wir mussten die Animation zu einem bestimmten Zeitpunkt auslösen können, um sie genau mit der Musik der Eröffnungszeremonie abzustimmen.
  • Wir mussten gut genug planen und proben, so dass die Kameramänner in einer Umgebung, in der so viel geschieht, perfekte Einstellungen hinbekamen.

Um testen zu können, ob wir all diesen Anforderungen entsprechen konnten, trugen wir unsere Ausrüstung zusammen und holten den Ahnendrachen auf unseren Parkplatz. Hier ist der Test (sorry für die dreckige Linse), der uns richtig begeistert hat:

Als wir dann vor Ort im Vogelnest waren, hatten wir genau eine Woche Zeit, um alles aufzubauen und sicherzustellen, dass die Netzwerkverbindungen sicher und stabil genug waren, um eine nahtlose Verfolgung zu gewährleisten, und dass der Ton für den Drachen an die richtigen Stellen geschickt wurde. Außerdem mussten wir überprüfen, ob die Animation richtig ausgelöst wurde, und natürlich sehen, ob sich der Drache perfekt in das Stadion einfügte. Und all das zusätzlich zur normalen Hektik einer League-Veranstaltung.

Wir übten auch bis zu sechs oder sieben Mal mit den Tänzern und dem Drachen, und fanden heraus, dass der Drache die Tänzer zerquetschte, wenn die Bewegung der Kamera und die Choreographie nicht perfekt abgestimmt waren (keine große Sache für den Drachen, aber es sah nicht so toll aus). Die Tänzer hatten zu diesem Zeitpunkt bereits ein paar Wochen lang geübt, so dass eine Änderung unserseits potenziell alles über den Haufen werfen konnte.

Wir beschlossen, mit koordinierten Kamera-Zooms die „zerquetschten“ Tänzer zu verdecken.

Alle Einstellungen, die der Zuschauer sieht, sind live von einem echten Kameramann aufgenommen. Wir spielten die Drachensequenz mit unseren Kameramännern unzählige Male durch, damit sie genau wussten, wo die Einstellungen beginnen, welche Bewegungen folgen und an welchen Stellen sie zoomen mussten. Die Einstellungen sollten wackelig sein, als wäre der Kameramann vom Drachen überrascht worden.

Hier ist die Perspektive von einem der Kameramänner, der den Drachen filmt, wie er über die Zuschauer fliegt:

Zehn Minuten vor der Übertragung fiel uns auf, dass das digitale Stadionteil, auf dem der Drache landen sollte, nicht genau positioniert war (er landete auf der Innenseite der Wand und nicht auf dem Rand). Das könnte an vielen Dingen gelegen haben – vielleicht hatte sich die Basis der Kamera aufgrund von Vibrationen um ein paar Zentimeter verschoben. Minuten vor Show-Beginn mussten wir in unserer Anwendung für die Bearbeitung von Echtzeit-Grafiken den Drachen ein Stückchen nach oben bewegen. Gleichzeitig passten wir auch seine Farbe an, damit sie besser zur Tageszeit passte und weder zu dunkel noch zu hell war. Dann wurde es Zeit, unseren Ahnendrachen ins Finale sausen zu lassen.

Das hörbare Einatmen der Zuschauer, als der Drache vom Dach sprang, ließ uns einen Schauer über den Rücken laufen. Wenn wir die Reaktionen unserer Spieler lesen oder hören, wissen wir genau, warum es den ganzen Aufwand wert ist. Wir wollen immer denkwürdige Erlebnisse für unsere Fans und Spieler schaffen, die sie mit nach Hause nehmen und mit ihren Freunden teilen können. So lange das unsere Mission ist, entwickeln und arbeiten wir weiter an der nächsten großen Sache. Bis unsere Experimente an unseren Östlichen Indigonattern erfolgreich sind und einen Baby-Baron hervorbringen, wollen wir mit jeder WM weiter die Messlatte höher legen und Erlebnisse bieten, die die Leidenschaft wert sind, die du tagtäglich in diese Community steckst.

Nächster Artikel

Stahlkriegerin Illaoi: Vorproduktion