/dev : Invocation du dragon au mondial

 

Avant le début des matchs de la finale des championnats du monde, Riot a sorti le grand jeu, avec notamment un orchestre. Mais aussi avec un dragon. Le dragon ancestral, qui, sur l'écran des spectateurs, a survolé le stade, pour se poser en plein milieu de ce dernier, avant de repartir. Une belle prouesse, qu'explique aujourd'hui Riot !

 

 

Chaque année à l’occasion du Mondial, nous créons un événement qui restera gravé dans la mémoire des joueurs. En 2017, nous avons voulu voir jusqu’où nous pouvions aller. Lorsque nous avons commencé à organiser la cérémonie d’ouverture de la finale de cette année, nous avons chargé une équipe de créer quelque chose qui fasse rêver le nerd qui sommeille en chacun de nous : invoquer un véritable dragon !

 

 

Lorsque nous organisons des événements internationaux, l’une de nos préoccupations est de mettre à l’honneur le pays qui nous accueille. Cette année, le Mondial avait lieu en Chine, et c’est pourquoi de nombreux éléments étaient issus de la culture chinoise. En février dernier, nous avons doucement commencé à préparer la cérémonie d’ouverture de cette année, avec un joueur d’erhu traditionnel, des masques d’opéra chinois à l’effigie des champions du jeu, la superstar Jay Chou ou encore une performance en direct de « Legends Never Die » par Against The Current. Nous trouvions toutefois qu’il manquait un feu d’artifice pour que le spectacle soit complet, quelque chose à la hauteur de l’emblématique stade de Pékin, aussi appelé le Nid d’oiseau.

 

Nous avons passé en revue plusieurs propositions avant de jeter notre dévolu sur la réalité augmentée, ou l’art d’intégrer des éléments graphiques dans un environnement réel. Pour créer la réalité augmentée (ou RA), vous avez besoin d’une caméra réelle et d’une autre caméra virtuelle qui intègre un moteur de rendu, afin que les deux images superposées puissent donner vie à une animation dans notre monde.  La RA n’est pas nouvelle dans le milieu des événements sportifs, aussi bien pour les sports traditionnels que pour l’e-sport. Nous en avons vu pendant The International de Dota ou chez nous, aux LCS NA, au MSI et pendant les différents Championnats du monde. Nous voulions donc créer quelque chose à une échelle bien plus grande que tout ce que nous avions fait avant.

 

 

 

Nous avons d’abord pensé à utiliser la RA pour faire venir des champions dans le stade. Ryze aurait pu lancer ses sorts pendant la cérémonie d’ouverture, et Ashe tirer des flèches depuis les écrans de projection. Mais nous avions aussi cette idée loufoque qui nous faisait rire depuis plusieurs années : « On pourrait juste faire monter un dragon sur la scène ! » Nous n’avions pas (encore) de portail vers Runeterra qui nous permettait de faire venir un vrai dragon, et quand nous avons commencé à avoir cette idée, la technologie nécessaire pour avoir un dragon suffisamment réaliste qui donnerait l’impression de survoler le stade n’avait pas encore été pleinement développée, ni même rendue suffisamment abordable. Mais en 2017, la réalité augmentée avait assez évolué pour que nous puissions relever ce défi. Nous avons formé une équipe avec nos ingénieurs les plus expérimentés et avons tenté de répondre à cette question : « Pouvons-nous créer un dragon ? ».

 

Si à la télévision, la RA a bien évolué au cours de ces dernières années, nous n’étions pas certains que cette technologie soit au point pour créer un dragon réaliste à une échelle aussi grande. Nous savions que nous devrions relever de nombreux défis :

 

• Comment créer un dragon qui survole le stade et se pose sur le toit du Nid d’oiseau ?
• Comment créer une ombre réaliste pour ce dragon, pas seulement au sol, mais aussi sur les façades du stade ?
• La luminosité pourrait-elle être ajustée en temps réel le jour de la cérémonie pour correspondre aux conditions météorologiques ? Comment ?
• Comment minuter correctement son arrivée pendant la performance en direct ?

 

 

Nous voulions qu’une présence majestueuse vienne envahir le ciel de Pékin, et qui de plus puissant et de plus intimidant dans League of Legends que le légendaire dragon ancestral ?

 

 

Avec l’aide de nos associés, nous avons élaboré une série de nouvelles illustrations qui serviraient de base au modèle et aux animations nécessaires pour créer cette nouvelle incarnation du dragon ancestral. Nous avons pensé à plusieurs directions, mais plus nous regardions les illustrations, plus nous trouvions qu’elles rendaient encore plus épique cette créature qui est déjà impressionnante dans la Faille. Plus important encore, il fallait être sûrs que quoi que nous fassions, les joueurs puissent reconnaître au premier coup d’œil cette créature imposante comme étant leur bon vieil ami, le dragon ancestral.

 

 

Pour éviter que le dragon ne finisse à côté de la plaque une fois transposé dans le monde réel, nous avons examiné en détail chacun de ses aspects, de sa tête à ses pattes, en passant par ses ailes.

 

 

Chaque partie a été source de débats entre nous, mais c’est ce qui nous a permis d’avancer vers une illustration conceptuelle finale.

 

 

Une fois ce travail terminé, nous avons enfin pu passer à la modélisation. Mais contrairement à la modélisation de personnages pour des animations pré-rendues, nous devions faire attention au moindre détail du dragon tout en étant sûrs que le rendu en temps réel serait à la hauteur.

 

 

Le rendu en temps réel, c’est la capacité à créer une animation rendue si rapidement qu’elle donne l’impression d’être générée en direct. Les animations pré-rendues, à titre de comparaison, peuvent prendre plusieurs heures pour donner une scène de 10 secondes de rendu (Toy Story 3 est notamment célèbre pour avoir atteint une moyenne de sept heures de temps de rendu par image !). Même si vous n’avez jamais entendu parler du rendu en temps réel, vous vous en servez pourtant très souvent : les cartes graphiques des ordinateurs utilisent ce même procédé lorsque vous jouez à des jeux !

 

Dans notre cas, nous devions obtenir un rendu en temps réel du dragon survolant le stade, tout en pouvant déplacer nos caméras librement et enregistrer toute la cérémonie d’ouverture en une seule et même prise. Cela veut dire que nous devions suivre le modèle animé utilisé pour projeter le dragon de telle manière à ce qu’il ne subisse aucun « glitch » en plein vol. Dans les jeux vidéo, nous avons le même problème : il faut toujours suivre le modèle animé et faire attention à ce que la balance entre qualité et performance soit bien équilibrée.

 

Voici comment le modèle du dragon a évolué au fil du temps :

 

 

Pendant que la création du dragon battait son plein, une autre équipe travaillait déjà sur son animation lorsqu’il survolerait le stade. Nous nous sommes inspirés de nos dragons préférés dans Game of Thrones, DragonHeart et d’un tas d’autres pour savoir comme un dragon réagirait dans un environnement tel que le Nid d’oiseau. Comment survolerait-il le stade ? Comme se poserait-il ? Comment réagirait-il face à la foule devant lui ?

 

Au départ, nous voulions que le dragon ancestral en personne vienne apporter la coupe de l’invocateur pour la placer sur la scène. Nous avons fini par abandonner cette idée et par opter pour une coupe gonflable de 16 mètres de haut qui se dresserait d’elle-même pendant que le dragon survolerait le public. Il faut dire que la coupe de l’invocateur aurait été beaucoup trop lourde, même pour un dragon ancestral !

 

 

Nous avons pensé à différents endroits pour que le dragon se pose, nous voulions même qu’il interagisse avec les personnes sur la scène. Par exemple, les danseurs auraient pu prendre leurs jambes à leur cou en le voyant arriver ou se baisser pour l’éviter. Au final, nous avons estimé que si un vrai dragon revenait dans son antre et y découvrait des milliers de personnes, il aurait forcément envie de montrer qui commande. C’est le dragon ancestral, après tout, alors quel meilleur endroit que le milieu de la scène pour faire son entrée fracassante ?

 

 

 

L’animation commençait à prendre forme lorsque nous avons remarqué quelque chose : le dragon était un peu trop grand. En fait, pendant sa descente, ses ailes se fondaient dans le stade et l’illusion était complètement perdue. Nous ne pouvions pas non plus voir leur ombre, alors que nous voulions qu’elle recouvre le public pour rendre la scène encore plus réaliste (c’est justement ce qui donne l’impression que l’ombre du dragon recouvre vraiment les personnes présentes dans le stade). Nous avons pensé à réduire la taille du dragon, mais nous avons finalement essayé de faire ce qu’un dragon digne de ce nom aurait fait : modifier la trajectoire de son vol. Nous avons ajusté sa descente vers le stade pour que son ombre apparaisse correctement et que le modèle ne rentre pas dans les murs.

 

 

 

 

Nous avons ensuite dressé la liste de tout ce dont nous avions besoin pour que l’animation se lance comme il faut et conserve le réalisme que nous avons voulu lui donner pendant tout le processus de création. Il fallait notamment :

 

• Garantir une animation en temps réel, à la même vitesse de défilement que notre diffusion en direct, à 59,94 FPS.
• S’assurer que les ombres du dragon correspondent à la géométrie et à l’échelle du Nid d’oiseau.
• Créer un modèle 3D du stade pour que le dragon puisse apparaître derrière en entrant et en sortant, et derrière les fauteuils des joueurs quand il atterrit.
• Pouvoir ajuster l’éclairage à tout moment, en temps réel, pour coller avec tous les scénarios météorologiques possibles.
• Ajouter la possibilité de corriger les couleurs du dragon en temps réel pour coller avec l’exposition et le contraste des véritables caméras.
• Utiliser deux caméras avec une capacité de suivi pouvant envoyer les images vers deux moteurs de rendu en temps réel.
• Lancer l’animation en même temps sur les deux moteurs pour pouvoir changer de caméra sans transition.
• Lancer l’animation au bon moment pour coller parfaitement avec la musique de la cérémonie d’ouverture.
• Prévoir et répéter suffisamment pour que les cadreurs puissent avoir des plans parfaits dans un environnement où beaucoup de choses se passent.

 

Pour être sûrs que nous pouvions atteindre nos objectifs, nous avons monté tout notre équipement et invoqué le dragon ancestral sur notre parking. Voici le résultat de ce test (nos excuses pour l’image un peu floue), et franchement, nous étions plutôt satisfaits du résultat :

 

 

Une fois arrivés au Nid d’oiseau, nous n’avions qu’une semaine pour tout mettre en place et nous assurer que les connexions au réseau étaient sûres et suffisamment stables pour pouvoir suivre le dragon, que le son du dragon était envoyé au bon endroit et que le lancement de l’animation fonctionnait correctement. Plus important encore, il fallait que le dragon soit parfaitement aligné avec le stade dans le retour caméra final. Sans oublier toute l’organisation classique que demande un événement de League of Legends en direct !

 

Nous avons également répété avec les danseurs et le dragon environ six ou sept fois. À ce moment, nous avons découvert que si les mouvements de la caméra et la chorégraphie des danseurs n’étaient pas parfaitement synchronisés, le dragon écrasait les danseurs sur la scène (ça ne l’aurait sûrement pas dérangé, mais l’effet n’aurait pas été très glorieux). Les danseurs avaient déjà commencé les répétitions depuis plusieurs semaines, alors les changements de dernière minute que nous voulions imposer auraient potentiellement pu ruiner tout le reste de la chorégraphie.

 

Pour que personne ne finisse écrasé par un dragon, nous avons décidé de jouer avec les zooms de la caméra.

 

 

Tous les plans que vous voyez pendant la scène du dragon ont été pris par un vrai caméraman, en direct. Nous avons répété la séquence du dragon un nombre incalculable de fois avec nos cadreurs pour être sûrs qu’ils sachent exactement quand commencer à enregistrer, quel mouvement de caméra et quels zooms ils devaient faire. Nous voulions des plans parfaits qui donnent l’impression que les cadreurs étaient pris de court.

 

Voici une vue d’un cadreur en train de filmer le dragon survolant le public :

 

 

Dix minutes avant la diffusion, nous avons remarqué que la position du modèle 3D n’était pas correcte (on avait l’impression qu’il se posait à l’intérieur du mur et pas sur le bord du stade). Un tas de choses peuvent être à l’origine de ce problème. Peut-être que la caméra a été déplacée de quelques centimètres simplement avec les vibrations du stade ! Quelques minutes avant le début du direct, nous avons dû rouvrir l’application d’édition graphique en temps réel pour déplacer le dragon légèrement. Nous avons aussi modifié les couleurs pour qu’elles correspondent mieux au moment de la journée, pour éviter que le dragon ne soit trop sombre ou trop clair. Le dragon ancestral était prêt à prendre la finale d’assaut.

 

 

Lorsque nous avons entendu la réaction du public dans le stade lorsque le dragon saute du toit pour se diriger vers les gradins, nous sommes restés sans voix. En lisant et en écoutant les réactions des joueurs du monde entier quand le dragon est arrivé dans le stade, nous avons compris que tout ce que nous avions fait en valait vraiment la peine. Notre objectif est de créer des expériences mémorables pour tous les fans et joueurs qui nous suivent, afin qu’ils en gardent un excellent souvenir et qu’ils les partagent avec leurs amis. Avec cette mission en tête, nous continuerons à travailler sur le prochain grand événement. Jusqu’à ce que nos serpents indigo de laboratoire puissent donner naissance à un bébé Baron, nous continuerons à relever des défis pour placer la barre du Mondial toujours plus haut et offrir des expériences inoubliables aux joueurs qui mettent autant de passion à faire vivre notre communauté au quotidien.

 

Biomajor - Producteur exécutif général

Oniatserj - Spécialiste des animations en temps réel