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

От компании YDigital

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

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

​В инструкции ниже — как оживить стаканчик кофе!

Чем вообще маски полезны для бизнеса и обычного пользователя

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

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

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

Что такое Target Tracker и как его применять

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

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

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

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

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

Инструкция: создаем маску с Target Tracker

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

Для начала нам потребуется скачать среду разработки 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:

  • Spray Angle по Z — 360, чтобы снежинки летели во все стороны;
  • Spray Angle по X — 30, чтобы добавить объема (вперед и назад по оси взгляда)

В блоке Particle:

  • Lifespan — 2 (срок жизни — 2 секунды)

В блоке Materials:

  • Подключите материал снега (material1).

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

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

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

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

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

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

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

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

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

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

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

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

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

0
25 комментариев
Написать комментарий...
Олег

Это очень интересно и очень сложно, мать его) 

Ответить
Развернуть ветку
Artem Menshikov

Годнота , такого рода интеграции всегда вызывают неподдельный интерес "потыкать-посмотреть"

Ответить
Развернуть ветку
Денис Россиев
Автор

Спасибо!)

Ответить
Развернуть ветку
Виталий Крюков

топ!

Ответить
Развернуть ветку
Максим Дулин

А вот это интересно

Ответить
Развернуть ветку
Andrey S.

Спасибо за статью! Как вы считаете конверсии изнутри масок?

Ответить
Развернуть ветку
Денис Россиев
Автор

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

Ответить
Развернуть ветку
Lolita Vadimovna

Очень интересно, уже бегу пробовать, спасибо за инструкцию💫

Ответить
Развернуть ветку
Pasha Rumkin

Мануал хороший, а идея – так себе. Люди используют маски, чтобы разнообразить свой образ, без дополнительных усилий. Что разнообразить тут? Какое пространство вариантов? Снять видео и покрутиться вокруг. Снять видео с предметом в руке. Снять сценку/экшн, но это уже требует усилий. И все. Скорее всего эффект новизны быстро пройдет и начнется обратный эффект, когда пользователи снимающие идентичные рекламные видосы для своей ленты начнут вызывать негативные эмоции.
Попытка засчитана, но это не превратит AR из игрушки в индустрию.

Ответить
Развернуть ветку
Mikhail Malyshev

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

Очень крутая и недорогая фишка для большинства BtC бизнесов, от кофеен и интернет-магазинов до инфоцыган и ночных клубов .

Ответить
Развернуть ветку
Pasha Rumkin

Про индустрию написал, чтобы подчеркнуть, что это не AR-агностицизм. Основной смысл в первом абзаце. И он в том, что очень быстро технология перестанет давать отдачу. То, что смотрелось в кино 80-х как технологическое чудо, сегодня – цифровая рекламная листовка.

Ответить
Развернуть ветку
Денис Россиев
Автор

Сегодня это даже не цифровая рекламная листовка, а пока лишь ее концепция. Листовки будут позже. И долгое будут не менее эффективны, чем «обычные» листовки :)

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

Следующий шаг — «глобальный» трекер. Предвижу внедрение в течение 5-10 лет. Чтобы запустить интерактив не нужно будет запускать отдельный эффект, достаточно просто навести камеру. 

Ну и дальше — те самые AR-очки, о которых все давно мечтают. правда, однозначно придется взламывать и ставить AdBlock :)

Ответить
Развернуть ветку
Pasha Rumkin

AR-очки от Facebook? Думаю, там AdBlock не поможет, там нужно что-то более надежное, что-то вроде гидравлического пресса.

Ответить
Развернуть ветку
Владислав Сидоров

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

Ответить
Развернуть ветку
Денис Россиев
Автор

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

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

Ответить
Развернуть ветку
Владислав Сидоров

К сожалению все продукты FB имеют ужасно корявый мануал. Поэтому и возник вопрос, есть идеи, а как их по факту реализовать остается непонятным, даже не смотря на то, что есть знания в области motion, но видимо тут надо больше понимание нод и систем типо Unity. 

Ответить
Развернуть ветку
Денис Россиев
Автор

Знания моушна в целом полезны, но да, здесь все ближе к геймдеву с юнити/анреалом и тому подобному :) И с мануалами у ФБ действительно вечная проблема... Если с нодами там еще можно более-менее разобраться методом тыка, то с чистым скриптингом все намного тяжелее.

Ответить
Развернуть ветку
WEB DIESEL Laboratory

Спасибо за мануал. Идём двигать снежинки и трубы шатать

Ответить
Развернуть ветку
Эмин Бахшалиев

В инсте по умолчанию можно использовать какие-либо предметные маски ? Не на лицо чтоб ...

Ответить
Развернуть ветку
Денис Россиев
Автор

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

Ответить
Развернуть ветку
Дмитрий Нуянзин

А че, норм тема

Ответить
Развернуть ветку
Артём Малышев

Разрабатываю маски. Больше 1.5млн просмотров масок - подписок штук 10🤷🏼‍♂️ Так откуда подписчики? Какая выгода, если нет подписчиков?

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

Ответить
Развернуть ветку
Денис Россиев
Автор

Очень странно, с такого охвата подписчиков точно должно быть больше. Возможно, что-то не так с оформлением профиля?

Ответить
Развернуть ветку
Артём Малышев

Там подписки есть, но количество маленькое. Такое чувство, что масок на рынке стало куча просто и найти именно мою маску становится все сложнее. А градации масок, как AppStore, у них пока нет(

Ответить
Развернуть ветку
Prontogroup Magadan

.

Ответить
Развернуть ветку

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

Развернуть ветку
22 комментария
Раскрывать всегда