История создания дракона для чемпионата по League of Legends

Если в твоём мире нет огромных рептилий — создай свою.

В закладки

В 2017 году студия Riot Games провела турнир Worlds Championship по League of Legends в Пекине. Одним из главных событий на церемонии открытия стало появление дракона, который облетел стадион и приземлился на сцену благодаря технологии дополненной реальности. В своём блоге разработчики из Riot Games рассказали историю создания рептилии.

Когда мы планируем международное событие, одной из задач для нас всегда является выражение признательности стране-хозяину. Так как турнир Worlds в этот раз проходил в Китае, мы хотели включить в него элементы китайской культуры.

С февраля 2017 года мы разрабатывали план церемонии открытия: в нём было выступление музыканта с китайским народным инструментом эрху, маски пекинской оперы с лицами чемпионов LoL, появление суперзвезды Джей Чоу и исполнение песни Legends Never Die группой Against the Current. Но мы чувствовали, что не хватает чего-то особенного, что отражало бы размер и масштаб знаменитого стадиона «Птичье гнездо».

«Птичье гнездо»

Мы устроили мозговой штурм и остановились на использовании дополненной реальности. Эта технология нередко используется в трансляциях традиционного спорта и киберспорта, но мы хотели выйти на новый уровень и сделать то, чего ещё не делали.

Сначала мы придумали, чтобы Райз стрелял магией по стадиону, а Эш пускала стрелы из экрана на сцене. Но у нас также была старая шутка: «Давайте на сцену опустится дракон». У нас нет портала в Рунтерру, чтоб призвать настоящего дракона, и когда эта шутка появилась, технология, благодаря которой можно было бы создать видимость дракона, влетающего на стадион, ещё не появилась (или была слишком дорогой).

Но к 2017 году технологии дополненной реальности развились достаточно, чтобы справиться с задачей. Мы собрали команду из наших технологических новаторов и спросили: «Можем ли мы создать дракона?»

Самыми главными проблемами были:

  • Как сделать, чтоб дракон влетел на стадион и приземлился на край стадиона?
  • Как сделать, чтоб дракон отбрасывал тень не только на пол, но и на стены?
  • Сможем ли мы настроить освещение в день церемонии так, чтобы оно соответствовало погоде снаружи? Как?
  • Как синхронизировать появление дракона с выступлением танцоров?

Мечты о драконах

В League of Legends нет более мощного, опасного и страшного монстра, чем старший дракон. Мы объединились с партнёрами, чтобы создать новый концепт-арт дракона, который служил бы отправной точкой для работы над моделью существа.

Мы рассмотрели много вариантов, но больше всего нам понравились те, которые подчёркивали масштаб и эпичность дракона. Было важно сохранить его узнаваемость, чтобы игроки сразу поняли, что прилетел именно старший дракон.

{ "items": [{"title":"","image":{"type":"image","data":{"uuid":"39fc533e-7cfc-b127-bb0b-060aee34115b","width":1918,"height":915,"size":144623,"type":"jpg","color":"","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"670d304b-78d0-b392-4d6c-5e3e54f5f468","width":1917,"height":913,"size":146162,"type":"jpg","color":"","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"315b2539-c840-d04b-8e42-d2e79592b8e4","width":1430,"height":681,"size":115264,"type":"jpg","color":"","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"4e1dfbef-a795-192f-47fc-fd1483e54373","width":1431,"height":682,"size":87415,"type":"jpg","color":"","external_service":[]}}}] }

Спустя множество переосмыслений каждого аспекта существа был готов финальный концепт-арт.

После этого начался процесс моделирования. В отличие от традиционного моделирования, нам нужно было тщательно следить за детализацией дракона, так как он должен был рендериться в реальном времени.

Рендеринг в реальном времени

Рендеринг в реальном времени — это такое быстрое производство анимации, что кажется, будто она генерируется в этот же момент. В нашей ситуации необходимо было, чтобы дракон, влетающий на стадион, воплощался в реальном времени, чтобы мы могли свободно перемещать камеры, а трансляция церемонии не прерывалась.

Так что нам приходилось следить за количеством полигонов, иначе изображение начало бы тормозить в прямом эфире. Так же мы заботимся о количестве полигонов игровых моделей во время разработки: это хрупкое равновесие между качеством и производительностью.

Вот как проходил процесс моделирования.

{ "items": [{"title":"","image":{"type":"image","data":{"uuid":"b18891d3-0793-c25a-1af2-073400b2ccd8","width":1919,"height":978,"size":143060,"type":"jpg","color":"","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"6ea07662-70b5-e4ee-8b85-6bf087b5eb11","width":1918,"height":977,"size":202206,"type":"jpg","color":"","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"2b22e670-499a-cdb7-0d8d-fa40e0a37185","width":1920,"height":937,"size":126653,"type":"jpg","color":"","external_service":[]}}}] }

Пока всё это происходило, другая команда работала над анимацией дракона, влетающего на стадион. Мы изучали поведение драконов в «Игре престолов», DragonHeart и других источниках, чтобы понять, как дракон мог бы взаимодействовать с окружением в «Птичьем гнезде». Как он будет летать? Как он приземлится? Как он отнесётся к людям снизу?

В самом первом варианте анимации дракон приносил с собой Кубок призывателей и ставил его на сцену. Но мы отказались от этой идеи, потому что у нас появился надувной шестнадцатиметровый кубок. К тому же, Кубок призывателей не под силу поднять даже дракону.

Мы попробовали несколько маршрутов для дракона и вариантов его взаимодействия с танцорами. В конце концов мы решили, что если бы настоящий дракон влетел на стадион и увидел там тысячи людей, он дал бы понять, что это он главный, и сел бы в центре.

Когда анимация только начала получаться, мы столкнулись с другой проблемой: дракон был слишком большим. Его крылья пронзали стадион, разрушая иллюзию. Также куда-то исчезла его тень, которая должна была ложиться на аудиторию стадиона.

Мы думали уменьшить дракона, но потом сделали, как сделал бы настоящий дракон: изменили траекторию полёта. Мы настроили его приземление так, чтобы тени выглядели правильно, и чешуйчатый парень не проходил через стены стадиона.

Настоящий хекстек

Дальше мы перечислили, что мы сделали для правильного отображения анимации и обеспечения надлежащего качества.

  • Убедились, что анимация рендерится с той же частотой, что и у трансляции — 59.94 кадра в секунду.
  • Убедились, что дракон отбрасывает мягкие тени на геометрические модели размером с «Птичье гнездо».
  • Создали 3D-маску, чтобы дракон находился за стадионом, когда появляется и улетает, а также за будками команд, когда приземляется.
  • Сделали так, чтобы освещение можно было настроить в реальном времени.
  • Включили возможность цветокоррекции дракона, чтобы он выглядел реалистично в объективах камер.
  • Использовали две камеры с возможностью отслеживания положения, подключенные к двум разным графическим движкам.
  • Добавили возможность включить анимацию одновременно на обоих движках, чтобы переключаться между двумя камерами.
  • Сделали так, чтобы анимация включалась в определённый момент, чтобы она была синхронизирована с музыкой.
  • Планировали и репетировали достаточно, чтобы операторы брали идеальные кадры, несмотря на всё происходящее.

Чтобы проверить, как всё это работает, мы собрали оборудование и призвали дракона на свою парковку. Вот результат теста. Мы были им очень довольны.

Когда мы прибыли на «Птичье гнездо», у нас была всего одна неделя, чтобы всё установить, настроить соединения, проверить направление звуков дракона, время триггера и положение существа относительно стадиона. Также мы шесть или семь раз репетировали появление дракона с танцорами, во время чего обнаружили, что движение камеры и хореография не были синхронизированы, и дракон «давил» танцоров.

К этому моменту труппа репетировала своё выступление в течение нескольких недель, так что любые изменения от нас могли нарушить их ритм. Мы решили спрятать «раздавливание» с помощью зума камеры.

Все эти кадры снял настоящий оператор. Мы много раз отрепетировали появление дракона с операторами, чтобы они хорошо запомнили, что именно и когда снимать. Мы хотели, чтобы кадры были не идеальными, как будто дракон застал их врасплох.

Здесь можно увидеть, как оператор снимает полёт дракона над трибуной.

За десять минут до начала трансляции мы заметили, что положение маски сбилось: дракон будто садился внутрь стены, а не на её краю. Причиной этому могло послужить что угодно — даже смещение основания камеры на несколько сантиметров из-за вибраций.

За считанные минуты до трансляции мы открыли редактор и немного приподняли дракона. Также мы настроили его цвет, чтобы он больше подходил времени суток. Затем пришло время отправить нашего старшего дракона на турнир.

Когда дракон опустился на сцену, и зрители ахнули, по нашим спинам пробежали мурашки. Читать и слышать реакцию аудитории — именно то, для чего мы всё это делаем. Мы продолжим повышать планку на турнирах и создавать проекты, достойные вашей преданности игре.

#leagueoflegends

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Дмитрий Мучкин", "author_type": "editor", "tags": ["leagueoflegends"], "comments": 12, "likes": 29, "favorites": 1, "is_advertisement": false, "subsite_label": "gamedev", "id": 13831, "is_wide": true }
{ "id": 13831, "author_id": 6322, "diff_limit": 1000, "urls": {"diff":"\/comments\/13831\/get","add":"\/comments\/13831\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/13831"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954 }

12 комментариев 12 комм.

Популярные

По порядку

Написать комментарий...
2

Глобальные Riot Games умеют делать крутейшие вещи

Ответить
1

Такс, дракон был только для камер, или оффлайн тоже можно было его увидеть?

Ответить
0

А как ты думаешь?

Ответить
0

Дополненная реальность. Значит, можно было увидеть или у себя на телефоне (Приложение если бы было), какие-то очки (гололенс) или только на экранах?

Ответить
0

офк только на экранах.

Ответить
0

Очень круто, а ведь когда-то начинали свои турниры с призового фонда в 100.000$ в скромных местах.

Ответить
0

Вот тут многобуковье про технологии, которые они юзают.
http://www.vizrt.com/casestudies/53103/Live_League_of_Legends_Esports_Tournament_with_Vizrt_AR_graphics

Ответить

Комментарий удален

0

Если я правильно понял, они каждый год спрашивали у аниматоров - а можно на сцену сядет дракон? Пока однажды не услышали - "А че нет-то?".

Ответить
0

Как я понял, они годами на планёрках шутили «А давайте ещё на сцену опустится дракон!», но все понимали, что это было невозможно. А потом вдруг стало возможно.

Ответить
0

Просто из любопытства. А в чем разница между нашими вариантами?

Ответить
0

Где-то в области бессмысленных обсуждений :)

Ответить

Комментарий удален

–1

Осталось подождать лет пять и какой-то очередной гуглгласс таки протиснется в массы)

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Игру с лучшим стелсом никто не заметил
Подписаться на push-уведомления