Как сделать инстаграм-маску

Первым делом надо скачать Spark AR Studio — инструмент Facebook для разработчиков, который помогает создать элементы дополненной реальности. Можно делать фильтры, эффекты и, в том числе, маски. Что удобно, в программе уже есть несколько готовых вариантов. Но мы не ищем легких путей и нажимаем Create Project.

Чтобы сделать свою первую маску не нужно знать программирование, но и совсем ничего не уметь тоже не получится (надо уметь хотя бы гуглить). Для нубов у программы есть Learning Center с уроками:

• навигация по интерфейсу;
• оптимизация эффектов;
• фоновая сегментация;
• патчи;
• анимация 3D-объектов;
• основы сценариев;
• использование распознавания лица;
• публикация проекта;
• использование библиотеки AR.

Ко всему этому еще есть полноценная документация. Этого набора достаточно, чтобы разобраться с работой системы. Единственный минус — все это на английском. Но «Google Переводчик» — наш верный друг в таких ситуациях. 

Мы не изучали все-все эти уроки, что было фатальной ошибкой. Потому что мануалы из интернета чаще всего не очень, а инструкции из серии «инстаграм-маска за 15 минут» — это что-то слишком простое, не очень глубокое и непонятно, что и зачем делается. Поэтому сначала пару раз облажались, но потом все пошло как по маслу. 

Как мы ошибались

Для примера решили сделать маску с надписью на лице aka Face, но только с текстом BAD GUY. Казалось, что это проще простого: выбираем трекер лица, добавляем текстовый блок прямо в приложении, плюс-минус выравниваем по оси и все супер работает. Маска за 15 минут готова. Но на деле все оказалось несколько сложнее.

Трекер лица работал отлично. Буквы двигались вместе с ним. Но была маленькая проблемка — они не прилегали к лицу, и наша задумка смотрелась немного странно. Получилось то, что получилось, но нам не понравилось.

Пошли искать в Google «как сделать татуху на лице в Spark AR Studio». И нашли, не поверите, ссылку на один из мануалов самого Facebook. Отсюда мы сделали вывод, с чего все-таки начать. 

1. Понять, что хотите получить на выходе. Оформить какое-никакое ТЗ даже для себя.
   Что у нас: буквы, которые будут прилегать к лицу.
2. Почитать документацию и мануалы; разобраться, что и как работает; изучить, какие у инструмента возможности. Осознать, какие технологии все-таки понадобятся.
   Что у нас: создание маски с помощью инструмента для рисования лица.
3. Смириться с тем, что не все задумки делаются за 15 минут, и, скорее всего, понадобится Photoshop. Если вы нашли инструкцию «Как сделать маску в Instagram без фотошопа», не доверяйте ей (разве что там совсем что-то простое). Даже нам ради шести букв он понадобился.
   Что у нас: скачать файл с разметкой лица и нарисовать на нем буквы в фотошопе.

Инструкция, которая сработала

Первым делом добавляем трекер лица, он все-таки нужен: Add → Scene Understanding → Face Tracker.

Теперь у нас появился разметка, которая двигается вместе с лицом и помогает объектам ориентироваться в пространстве.

Переходим непосредственно к созданию маски. Для начала добавляем сетку лица: Add → 3D Objects → Face Mesh.

Затем работаем с получившейся маской лица:

1. В правом меню нажимаем + рядом с Material, чтобы создать сетку лица.
2. Выбираем получившийся материал на левой панели.
3. В правой панели меняем Shader Type на значение Face Paint.

Чтобы нарисовать татуировки уже понадобится Photoshop или Illustrator. Его можно скачать, если хотите сделать что-то супер сложное, или потренироваться в онлайн-редакторе. Скачиваем с этой страницы the Face Reference Assets — модели лица, по которым работает Spark AR. 

Находим папку Textures и открываем через Photoshop файл faceFeminine.jpg или faceMasculine.jpg. Рисуем изображение или надпись и скачиваем jpg.

Добавляем полученную текстуру в наш проект: находим в правом меню Texture → Choose file.

Ура, маска готова! Думаем, для первого раза получилось неплохо:

На этом мы не остановились и добавили в маску музыку. Сразу оговоримся: добавлять можно только легальную музыку. Скачать и добавить новый трек Егора Крида не получится — Instagram вас быстренько заблокирует. Только если вы не Егор Крид, конечно.

Находим нужный трек. Так как это всего лишь эксперимент, мы взяли трек Bad Guy и вырезали нужную часть (но для реального использования так делать нельзя). Предварительно MP3 файл надо конвертировать в M4A. Сделать это можно, например, тут. 

Facebook поддерживает только моно файлы и рекомендует использовать частоту 44,1 кГц. Поэтому при конвертировании обязательно измените аудиоканал со стерео на моно. Иначе вылетит ошибка (мы пытались загрузить — не вышло). 

Добавляем выбранный трек в панель Assets в левом меню.

Затем в этом же меню подключаем контроллер: Add Asset → Audio Playback Controller и в правой стороне выбираем свое аудио.

И после добавляем эффект в маску: Add → Effects → Speaker. В правом меню меняем значение Audio на audioPlaybackController0 (название контроллера с нашим аудио). Чтобы отключить звук микрофона, нажимаем на Microfone и в правом меню ставим галочку рядом с Disable Mic.

Теперь настроим воспроизведение по нажатию:

1. Переключаемся на audioPlaybackController0 и в правом меню нажимаем на → рядом с Play. Откроется Patch Editor.
2. В этом поле двойным нажатием по пустому месту открываем меню патчей и через поиск находим Screen tap.
3. Перетаскиваем стрелочку к Play.
4. Чтобы звук повторялся по нажатию, нажмите на → рядом с Reset. Так вы добавите повтор в редактор патчей. Тянем к нему стрелочку от Switch и теперь звук включается и выключается по нажатию. Белиссимо!

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

Теперь маску можно тестировать на телефоне. Скачиваем Spark AR Player на смартфон, подключаем устройство к компьютеру, отправляем на него маску и тестируем.  

Затем экспортируем: File → Export и загружаем в Spark AR Hub. Далее ставим везде, где нужно галочки и следуем инструкции (она на русском). Здесь же вы сразу получите ссылку для теста маски в Instagram на 200 человек. И там же после тестирования можно отправить на модерацию. 

Но после загрузки что-то пошло не так 😭 Решив, что проблема вряд ли кроется в поле и цвете кожи, пошли гуглить способы решения. 

Не нагуглили. И за все время создания маски впервые попросили совет у дизайнера. Оказалось, что надо просто поставить в меню текстуры галочку рядом с No compression.

Мир сразу преобразился: маска работает нормально. Осталось продать нашу маску Билли Айлиш 😈

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

На странице Facebook for developers есть все, что надо начинающему: 20 примеров создания маски, трекинг лиц и предметов, советы по тестированию и еще куча всего полезного. Так что перед тем, как начать что-то делать, можно поискать похожие примеры и узнать, как они создавались. Это поможет сориентироваться, какие нужны инструменты, куда нажимать и какие файлы подготовить. 

По факту сделать маску не так уж трудно. Гораздо сложнее отрисовать все элементы и настроить сценарии. Но пару вечеров в обнимку с ноутбуком и классные маски не заставят себя ждать.