Первый в России AR-опыт на Пятнице!

Суперпушистость в 3D и на ТВ

Что такое тифлофлешплеер?

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

Задача

Что такое тифлофлешплеер?

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

Что такое тифлофлешплеер?

Для этого нам вместе с партнерами предстояло:

–

выбрать оптимальное расположение AR-сцены;

–

создать художественную анимацию;

–

оптимизировать ее для iOS и Android;

–

и, наконец, создать настоящий мех — эта задача оказалась с подвохом.

Роли в проекте

Креативная студия

Выступали в роли заказчика услуги.

Разработчики AR

Отвечали за техническую часть — чтобы AR-маркер хорошо считывался с экрана и сюжет корректно воспроизводился на любых устройствах и платформах.

XR-команда

Готовили сценарий и визуал по пожеланиям заказчика — 3D‑модели и художественную анимацию, а также участвовали в оптимизации.

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

Что такое тифлофлешплеер?

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

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

Что такое тифлофлешплеер?

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

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

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

Что такое тифлофлешплеер?

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

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

Легкая текстура меха

Тяжелый 3D-рендер с детальным мехом

Наш оптимизированный 3D-рендер

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

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

Что такое тифлофлешплеер?

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

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

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

Что такое тифлофлешплеер?

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

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

Что такое тифлофлешплеер?

Чтобы AR работал в браузере мгновенно без установки приложения и без дополнительных действий от пользователя, мы использовали Instant App для iOS и Android. Техническая часть была на стороне наших партнеров из Letary, а мы пришли на помощь, когда дело коснулось графических API на этих платформах. Мы изучили логику GPU-шейдеров (программ для создания эффектов, которые отвечают за корректное отображение анимации) и разобрались, как настроить нужный способ рендера.

Результат

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

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

AR-герои JetStyle

Никита Решетников

Технический лид

Анастасия Власова

3D-моделлер

Анна Тютякина

3D-моделлер

Иван Ильин

Аниматор

Константин Остроухов

UI/UX-дизайнер

Алексей Перминов

AI-дизайнер

Елизавета Антипинская

Менеджер

Алексей Маркин

Арт-директор

8 (800) 555-81-86
или

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

ENG

Суперпушистость в 3D и на ТВ

Задача