Суперпушистость в 3D и на ТВ. Первый в России AR-опыт на Пятнице!

1. Вводная задача от заказчика, проблематика, цели

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

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Результаты сотрудничества

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