Instagram-маски выходят в реальный мир. Инструкция: что такое Target Tracker и как сделать с ним эффект

От компании YDigital

AR-маски — главный тренд Instagram в этом году, и сейчас ими уже сложно кого-то удивить.

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

Это прирост подписчиков и увеличение количества взаимодействий с вашим аккаунтом. Хорошие эффекты распространяются вирусно — пользователи видят маску у своих друзей, выкладывают истории с ней и так далее.

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

Сегодня маски позволяют вовлечь пользователей не только во взаимодействие с вашим аккаунтом, но с брендом или даже продуктом. Для этого и придуман Target Tracker.

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

Теперь мы можем оживить почти все! Буклеты, упаковки, визитки, картинки, QR-коды, вывески, билборды.

Механика кажется более сложной в использовании, ведь лицо есть у каждого (это и стало ключевым фактором успеха AR-масок), а объект еще нужно найти в реальном мире. Но именно это и создает новые возможности взаимодействия, в том числе и возможности прямых продаж.

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

Интересно? Попробуем сделать простейшую анимацию! В качестве примера я оживлю стаканчик одной из кофеен своего города (именно он был на заглавной иллюстрации)

Итак, поехали!

Для начала нам потребуется скачать среду разработки Spark AR — сделать это можно по ссылке. Программа доступна для Windows и Mac OS. При запуске нужно будет залогиниться через Фейсбук-аккаунт.

Также скачайте Spark AR Player из App Store или Google Play на свой смартфон — приложение потребуется для тестирования эффекта в реальном мире. Итак, запускайте Spark AR на компьютере и создавайте новый проект.

Интерфейс Spark AR

Если вы уже знакомы со средой разработки, этот абзац можно пропустить. Пробежимся по основным элементам интерфейса:

1. Дерево объектов. Слева располагается дерево содержимого сцены — все графические элементы, 3D-объекты, надписи, источники освещения и прочее.

2. Основная часть окна — сцена, в которой все дерево объектов видно в реальном времени. Ее можно удобно вращать, зажав клавишу cmd (ctrl) и масштабировать, зажав opt (alt).

3. Предпросмотр. Это виртуальный экран телефона — здесь эффект отображается практически также, как и будет на реальном устройстве.

4. Параметры. Панель изменяется при выборе объекта в Дереве — размер, расположение и многое другое.

5. Материалы и текстуры. Здесь находится список всех ресурсов, используемых в эффекте — картинки, звуки и прочее.

Шаг 1/5. Добавляем Target Tracker

Найдите в дереве объектов Focal Distance, нажмите правой кнопкой мыши, выберите Add → Fixed Target Tracker. Именно он находит в реальном мире, например, логотип и «привязывает» к нему все элементы дерева внутри себя.

Вы увидите как изменились сцена и предпросмотр:

Теперь нужно обучить трекер — загрузим в него логотип. Важный момент! Чем сложнее изображение, тем лучше.

Для этого просто перетащите его мышкой в панель ресурсов.

Затем выберите трекер в дереве объектов и подключите логотип в качестве текстуры на панели параметров:

Шаг 2/5. Привязываем объекты к трекеру

Найдите в дереве объектов fixedTargetTracker0, и добавьте в него плоскость — Plane. Затем вытяните ее мышкой по синей оси вперед, либо найдите в панели параметров справа блок Position и установите значение Z в 0,1. Далее сдвиньте по оси X на -0,15. Затем добавьте еще одну плоскость и сдвиньте ее по оси X на 0,15.

Шаг 3/5. Создаем материалы

Попробуем превратить плоскости в красивые новогодние елки. Для примера скачайте бесплатную иконку в формате PNG и перетащите на панель ресурсов, как это было сделано с логотипом.

Затем нажмите внизу панели ресурсов Add Asset → Material. В ресурсах появится папка Materials. Выберите наш material0 и установите Shader Type → Flat.

Теперь подключим изображение елки в Texture:

Осталось назначить плоскостям наш материал. Выбираем в дереве объектов plane0, идем в блок Materials и выбираем там свежесозданный материал. То же самое повторяем с plane1.

Если все сделано правильно, сцена примет следующий вид:

Шаг 4/5. Добавляем анимацию

Все-таки, это Новый год — Let it snow! Попробуем создать снег.

Скачайте снежинку, добавьте ее на панель ресурсов и создайте новый материал в режиме Flat, как это было с елкой. По-умолчанию он будет называтся material1.

Теперь найдите в дереве объектов fixedTargetTracker0, нажмите правой кнопкой мыши, выберите Add → Particle System. В дереве появится emitter0.

Это система частиц, которую мы превратим в снежинки. Настроим эмиттер в панели параметров справа:

В блоке Emitter:

В блоке Particle:

В блоке Materials:

Шаг 5/5. Тестируем эффект на телефоне!

Существует два способа тестирования:

1. В Instagram. Эффект отправляется сразу в ваш аккаунт, виден только вам и позволяет получить ссылку для тестирования, которую можно отправить кому-то еще. Обычно я использую этот способ, когда нужно показать эффект заказчику.

2. Локальный. Загрузка осуществляется намного быстрее, но требует подключения телефона по проводу и запущенного на нем приложения Spark AR Player.

Попробуем именно второй способ. Найдите иконку телефона снизу и выберите Send to Connected Device.

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

Сложно ли разрабатывать крутые эффекты?

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

Вот так выглядит визуальный код интересного интерактивного эффекта средней сложности:

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

К сожалению, на данный момент Facebook не позволяет получать детальную статистику использования.

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

Но об этом — в следующей статье!