Летом 2019 года Instagram дал возможность публиковать AR-маски всем желающим. На сайте "Spark AR" доступна для скачивания программа для создания масок и материалы для обучения. Сейчас следуя простым инструкциям попробуем вместе с вами самостоятельно создать маску.
Шаг 1. Spark AR Studio
Для создания маски необходимо скачать Spark AR Studio. Она работает в связке с мобильным приложением Spark AR Player. Оно дает возможность проверять результат на телефоне не публикуя маску в сервисе.
Принципы работы в Spark AR Studio похожи на принципы работы в любом 3D редакторе типа Cinema 4D или 3D Max. Центральную область занимает Viewport. Это 3D пространство, где можно рассматривать объекты сцены, изменять их положение. Здесь отображаются все вносимые изменения.
В правом верхнем углу имеется окно Simulator. Здесь маска отображается так, как она будет выглядеть на смартфоне. В настройках Sumulator'a можно выбрать конкретную модель смартфона и посмотреть как маска будет отображаться на ней. В левой части экрана находится панель Scene, а под ней — вкладка Assets c ассетами проекта. Вкладка с ассетами — импровизированное хранилище файлов: при импорте документов они будут появляться в этом разделе. Чтобы увидеть отображение объекта, его нужно перетащить на вкладку Scene или перетащить во Viewport.
Во вкладке Scene задается иерархия объектов на сцене. Так же можно создать слои, которые работают про принципу слоев в Photoshop.
Шаг 2. Создание маски.
Советую открывать готовые примеры, существующие в Spark AR, чтобы понять построение проекта и логику создания. Мы пройдем путь создания маски с нуля на примере знаменитого эффекта с переливающимися цветами.
1. Создаем Face Tracker — инструмент отслеживающий овал лица. Трекер работает при наличии лица в кадре.
2. Добавляем Face Mash на вкладку Scene. Face mesh — 3D-модель лица. Вместе с Face Tracker отвечает за движения и выражения лица. Для того чтобы связать Face Tracker и Face Mash необходимо вложить один объект в другой. Теперь наша маска следит за положением лица в кадре.
3. Добавляем и настраиваем материал маски. Для этого выделяем Face Mash и справа в разделе Materials нажимаем иконку +. Пришло время креатива. Настраиваем материал на свой вкус. Для достижения эффекта блеска лица выставляем режим материала: Physically-Based и выставляем настройки на примере из скриншота.
4. Для смягчения краев маски необходимо добавить стандартную текстуру из папки Asset предлагаемую Facebook. Вкладка Help → Download Face Assets. Нас интересует файл faceMeshMaskB.jpg. Перетаскиваем его в проект на вкладку Assets и добавляем в наш Material0.
5. Отлично, теперь мы имеем легкий эффект блеска на лице. Добавим освещение и его анимацию для переливания света на лице. Для этого создадим 2 объекта Directional Light и расставим их слева и справа. Назначим им разные цвета на свой вкус. Для этого выделим наш объект и во вкладках справа выберем нужный цвет. Также выставим случайное положение поворота.
6.Создаем анимацию для света. Для этого нажимаем на пиктограмму стрелочки около параметра Rotation для каждого источника света. Откроется окно Patch Editor — это некое подобие программирование поведения маски с помощью готовых блоков. Нажимаем правую кнопку мыши и добавляем следующий компоненты: Loop Animation, Transition 2 раза. Соединяем их в одну конструкцию как на картинке ниже и экспериментируем с параметрами.
В итоге получаем футуристичную маску для инстаграм готовую к публикации.
Шаг 3. Публикация маски в ARhub
Чтобы посмотреть нашу маску на телефоне откройте Spark AR Player. В программе на компьютере найдите иконку смартфоне и нажмите "Sent to device". После загрузки маска готовая к использованию появится на экране смартфона.Если результат вас устраивает — экспортируем проект.
Существуют ограничения объему проекта экспорта. Программа предупредит вас, если эти ограничения будут превышены. Вес проекта не должен превышать 10 или 4МБ для того, чтобы он прошел проверку модерации. Рекомендуемый объем файла 2МБ.Последний шаг — загрузка в Spark Ar Hub. Для публикации необходимо, чтобы маска соответствовала всем правилам комьюнити Facebook, и не нарушала авторские права. После модерации маска появится в конце списка "Галереи эффектов", которую можно найти во вкладке Stories.
