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 решили эту проблему, разработав специальный трекер статистики масок, который отслеживает использования по дням, считает тренды, конверсии и другие полезные показатели.

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Денис Россиев", "author_type": "self", "tags": [], "comments": 25, "likes": 62, "favorites": 435, "is_advertisement": false, "subsite_label": "marketing", "id": 94448, "is_wide": false, "is_ugc": true, "date": "Fri, 06 Dec 2019 15:42:05 +0300", "is_special": false }
0
{ "id": 94448, "author_id": 364007, "diff_limit": 1000, "urls": {"diff":"\/comments\/94448\/get","add":"\/comments\/94448\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/94448"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199113, "last_count_and_date": null }
25 комментариев
Популярные
По порядку
Написать комментарий...
9

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

Ответить
6

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

Ответить
0

Спасибо!)

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

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

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

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

Ответить

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

{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }