Instagram разрешил создавать AR-маски всем пользователям, а не только разработчикам. На сайте Spark AR компания выложила обучающие материалы, а также ссылку для загрузки специальной программы — Spark AR Studio. Журналист AIN.UA приводит базовую инструкцию, как сделать маску в Instagram.
Spark AR Studio
Для создания маски понадобится специальная программа Spark AR Studio — ее можно скачать бесплатно здесь. Она доступна для macOS и Windows. Вместе с программой стоит также загрузить приложения Spark AR Player для iOS и Android — с их помощью можно тестировать результаты сразу на смартфоне.
Spark AR Studio визуально похожа на сервисы от Adobe. В центре — область, которая называется Viewport. Это трехмерное пространство, где можно детально посмотреть на объект и передвинуть его. Тут же отображаются все вносимые изменения.

В правом верхнем углу расположено окно Simulator. Здесь объекты отображаются так, как будут выглядеть на смартфоне. Окно привязано к конкретной модели смартфона — их можно менять, чтобы увидеть особенности отображения на разных девайсах.
Слева находится вкладка Scene, а ниже — панель Assets с активами проекта. Раздел с активами — такая себе библиотека файлов: при добавлении документов в этот раздел они не будут отображаться в основном окне. Чтобы увидеть объект, его нужно перенести на вкладку Scene, которая находится выше.

Именно в разделе Scene устанавливаются необходимые связи разных файлов. Здесь же можно создавать слои, которые будут располагаться один за одним.
Создать объект для Instagram Stories
С самого начала команда Instagram рекомендует скачать существующий файл, чтобы разобраться как работает программа. Это можно сделать здесь.
Первый шаг — загрузите трехмерный объект в Spark AR Studio. Программа поддерживает форматы FBX 2014/2015, gITF 2, COLLADA / DAE, OBJ и DAE. Объект — вместе с его свойствами — появится во вкладке с активами.
Дальше перенесите его на панель Scene. В этот момент уже можно создать связь объекта с эффектами масок. Именно эти эффекты позволяют объектам следовать за лицом, поверхностями и так далее. Вот основные:
- Face Tracker — отслеживает лицо пользователя. Эффект запускается при появлении лица в камере.
- Plane Tracker — отслеживает поверхность. Благодаря нему объекты появляются или меняют свойство при появлении в камере какой-либо поверхности.
- Target Tracker — отслеживает заданную точку.
- Hand Tracker — отслеживает руки, чтобы добавлять объекты при их появлении.
- Face mesh — 3D-модель лица. В связке с Face Tracker реагирует на движения и выражения на лице.
Чтобы создать связь между объектом и эффектом, поместите первый под вторым на вкладке Scene. После этого можно вносить редактирования в объект. Изменить его масштабы и расположение можно сверху в основной области. Отредактировать внешний вид — изменить тип тени, цвет и так далее — во вкладке справа.
Подробную инструкцию можно найти здесь.
Создать эффект для лица в Instagram Stories
Изначально стоит скачать и загрузить уже предложенное изображение, чтобы разобраться в работе программы. Сделать это можно здесь.
Маска состоит из двух компонентов — текстуры (Texture) и материала (Material). Текстуру — уже заранее созданный объект — нужно загрузить в Spark AR Studio в формате PNG, JPEG или SVG. Она появится во вкладке с активами, ее никуда не нужно перемещать.
Во вкладке Scene нужно добавить эффект Face Tracker, а к нему привязать другой, Face Mash, кликнув правой кнопкой мыши и нажав Add. Именно эта связка эффектов позволяет создать маску, которая реагирует на выражения лица пользователя.

Следующий шаг — создать материал для маски. Для этого выберите на правой панели соответствующий раздел и нажмите на «+». После этого материал появится во вкладке с активами, а маска в основном окне поменяет цвет. Материал можно редактировать во вкладке справа — она появится при выборе объекта.

Именно здесь нужно сделать несколько следующих действий. Во-первых, выберите необходимый тип тени — это важно для масок. К каждой подойдет свой тип из предложенных — Flat, Standart, Face Paint, Physically Based, Blended, Retouching. Если вы тестируете уже предложенную командой Instagram маску, стоит выбрать Face Paint — она будет отображать лишь нарисованные фрагменты, а все остальное будет прозрачным.
Ниже этом разделе устанавливается текстура — непосредственно само изображение. Найдите пункт Texture и нажмите Choose File — в выпадающем окне появится список из добавленных в проект текстур. Вам нужно выбрать необходимый.
Подробную инструкцию можно найти здесь.
Патчи
В Spark AR Player можно создавать различные анимации и зависимости. Для этого используйте Patch Editor. Его можно открыть во вкладке View, он отобразится снизу основной области.

Например, вам нужно добиться эффекта, чтобы при улыбке человека на экране появлялся объект. Для этого в поле Patch Editor нужно перенести эффект Face Tracker, после чего здесь отобразятся его свойства. Дальше используйте так называемые «промежуточные патчи»: кликните правой кнопкой мыши по области Patch Editor, выберите патч Smile и свяжите с эффектом. В команде Instagram отмечают, что в списке есть большое количество «промежуточных» патчей для разных сценариев.
Дальше нужно выбрать объект на вкладке Scene (он должен располагаться под эффектом Face Tracker для зависимости) и кликнуть на стрелку рядом на поле справа с пунктом Visible. Объект появится в Patch Editor, дальше его нужно связать с патчем Smile. В итоге получается следующая зависимость:

Теперь, когда человек улыбнется в камеру, на ней отобразится три объекта. В этом случае — сердца. Подробную инструкцию о патчах можно прочитать здесь.
Экспорт проекта
Чтобы просмотреть результаты на смартфоне, в левом нижнем углу экрана нажмите на пиктограмму девайса и выберите «Отправить в приложение». Результат будет виден в приложении Spark AR Player.

После всех внесенных изменений нужно экспортировать проект. Для этого нажмите на соответствующую кнопку в левом нижнем углу экрана, она чуть ниже кнопки с функцией «Отправить в приложение». Spark AR Studio предупредит, если файл превышает требования по размерам. Непосредственный файл для загрузки в Facebook и Instagram должен быть соответственно не больше 10 МБ (компания рекомендует 2 МБ и меньше ) и 4 МБ.

Финальный шаг — загрузить маску на Spark AR Hub и дождаться проверки модераторами. После этого она появится во вкладке «Галерея эффектов», которая находится в конце перечня эффектов в окне записи Stories.