XR-проект с анимированным 3D-маскотом для телеканала «Пятница!»

Агентство JetStyle реализовало интерактивный предновогодний розыгрыш на телеканале «Пятница!» с анимированным маскотом пандой Фрайди и первым в России использованием AR-опыта во время эфира.



«Пятница!» — российский федеральный развлекательный телеканал с потенциальной аудиторией около 89 млн человек.

Перед агентством JetStyle была поставлена задача создать дополненную реальность для предновогоднего розыгрыша среди зрителей телеканала «Пятница!», чтобы они сканировали маркер (QR-код) прямо с экрана во время эфира. Одно из главных условий — оживить маскота панду Фрайди и сделать её максимально привлекательной и пушистой.

Для реализации этого команде JetStyle вместе с партнёрами предстояло:

• Выбрать оптимальное расположение AR-сцены
  
• Создать художественную анимацию
  
• Оптимизировать ее для iOS и Android
  и, наконец, создать настоящий мех — эта задача оказалась
с подвохом.

Команда проекта:

• Заказчик — креативная студия SMIT.
  
• Разработчики дополненной реальности — Letary.
  
• XR-команда — JetStyle.

JetStyle подготовили сценарий и визуал по пожеланиям заказчика: создали 3D-модели и художественную анимацию, а также участвовали в оптимизации. Команда Letary отвечала за техническую часть реализации, чтобы AR-маркер хорошо считывался с экрана и сюжет корректно воспроизводился на любых устройствах и платформах.

Позиция сцены

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

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

Как при этом разместить объекты в дополненной реальности, чтобы они вписались в интерьер и создали wow-эффект, а не комичную ситуацию? Если ошибиться, то придуманная сцена может наложиться на какой-то физический объект, например шкаф, и разрушить всю идею и ощущение магии.



С самого начала команда JetStyle с коллегами по проекту понимали это, а потому уделяли сценам повышенное внимание.

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



Моделирование меха

Обычно в rela-time мобильной графике, чтобы анимация корректно отображалась на любом устройстве, мех рисуется в виде текстуры поверх твёрдой оболочки. Но в таком случае он получается неестественным.

А для заказчика было важно передать "пушистость" — как референс агентству дали картинку панды, которая сделана в 3D-программе, предназначенной для рендеринга видео. Там каждый волосок может быть отдельной 3D-моделью, двигаться и отбрасывать тень.



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

В JetStyle придумали способ оживить мех и при этом не утяжелить анимацию — чтобы медведь рисовался 60 или хотя бы 30 кадров в секунду.

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



Если простыми словами, это такая оптическая иллюзия: зритель видит одну панду с мехом, но на самом деле каждый волосок — не отдельный объект, а множество слоев той же панды, на которой отображаются примерно по 30-40 точек. Такой принцип матрёшки или луковицы.



В результате рендерился не миллион волосков со своей геометрией, а 40 слоев панды. И это не только ускоряет процесс, но и позволяет управлять тем, как мех растёт: панда причёсанная, на разных местах волоски направлены в нужные стороны.

Художественная анимация

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



Оптимизация для iOS и Android

Чтобы AR работал в браузере мгновенно без установки приложения и без дополнительных действий от пользователя, специалисты использовали Instant App для iOS и Android.

Техническая часть была на стороне партнёров из Letary, а JetStyle пришли на помощь, когда дело коснулось графических API на этих платформах.

Специалисты изучили логику GPU-шейдеров (программ для создания эффектов, которые отвечают за корректное отображение анимации) и разобрались с тем, как настроить нужный способ рендера.



Результат

За четыре дня розыгрыша зрители отсканировали QR-код более 20 тысяч раз, а охват спецпроекта в диджитале составил больше 400 тысяч человек.

Отметим, что команде удалось реализовать проект в очень сжатые сроки — всего за месяц.