Перейти к материалам
разбор

Как сделать свою маску для инстаграма? Подробная инструкция

Источник: Meduza
разбор

Как сделать свою маску для инстаграма? Подробная инструкция

Источник: Meduza

С августа любой пользователь инстаграма может сделать свою маску для сториз — и выпустить ее в официальный каталог, чтобы все желающие могли ее попробовать. Чтобы это сделать, придется разобраться в специальной программе Spark AR Studio, но сделать это не очень сложно. И «Медуза» вам в этом поможет прямо сейчас.

0. Что надо знать перед тем, как начать пользоваться этой инструкцией

Первое: Spark AR и платформа для масок в инстаграме все еще активно развиваются. Обновления программы выходят раз в пару недель, и порой они могут изменить интерфейс, набор функций или еще что-то. Поэтому если вы не видите кнопку, которую мы упоминаем, в нужном месте, посмотрите по сторонам — возможно, ее куда-то перенесли. Для истории: эта инструкция основана на Spark AR 73.1.0 для macOS.

Второе: мы не можем в рамках одной инструкции рассказать вообще про все функции Spark AR, их слишком много. Зато мы расскажем, как собрать свою первую маску, и куда смотреть дальше.

Третье: не забывайте время от времени сохранять ваш проект. Spark AR иногда работает нестабильно, и если программа вдруг закроется с ошибкой, ваша работа может потеряться.

1. Скачайте Spark AR

Зайдите на эту страницу и скачайте программу — она доступна как для Windows, так и для macOS. Кроме того, вы можете поставить на телефон приложение Spark AR Player, которое позволяет быстро просматривать собранные вами маски. Оно есть на Android и iOS.

При первом запуске вас попросят войти в свой аккаунт в фейсбуке — без этого никак. Введите свой логин и пароль от соцсети, чтобы продолжить (Spark AR Studio принадлежит Facebook, так что это должно быть безопасно).

2. Начните новый проект

Когда вы откроете Spark AR на компьютере, он предложит изучить один из базовых проектов-примеров. К этому вы сможете вернуться позже, а пока просто создайте новый проект с помощью кнопки Create Project.

3. Осмотритесь

Перед вами интерфейс Spark AR. Он состоит из трех смысловых областей.

В левой части — там, где блоки с названиями Scene, Layers и Assets — собираются объекты и расставляется «сцена» маски.

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

В правой части будут появляться разные свойства объектов, которые вы будете выделять.

4. Добавьте в проект трекинг лица

Одна из самых важных функций для масок — поиск лиц в кадре и определение их точных координат. К счастью, с этим Spark AR справляется сам. Вот что надо сделать:

  1. В левой панели в блоке Scene нажать на кнопку Add Object
  2. Найти в списке пункт Face Tracker
  3. Выбрать его и нажать Insert

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

Теперь в блоке Scene кликните правой кнопкой на объект faceTracker0 и выберите пункт Add, а затем — Face Mesh. Теперь вы видите, как программа выделила лицо в кадре и покрасила его в черно-белую текстуру.

5. Ого, это уже маска?! (Спойлер: да, но не останавливайтесь)

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

  • С помощью Spark AR Player. Подключите телефон к компьютеру по проводу, откройте на телефоне приложение Spark AR Player, а затем в Spark AR на компьютере нажмите на кнопку с изображением телефона в левой части экрана (она называется Test on Device).
  • С помощью приложения фейсбука или инстаграма. Нажмите на ту же кнопку Test on Device в Spark AR, а затем на кнопку Send напротив Facebook Camera или Instagram Camera. Когда процесс загрузки на сервер закончится, вам придет уведомление в фейсбуке или инстаграме — кликните на него, и откроется камера с вашей маской.

Порадуйтесь своим успехам, но не останавливайтесь на достигнутом — впереди еще море возможностей сделать свою уникальную маску.

6. Создайте материал для лица

Вернитесь в Spark AR и нажмите на пункт faceMesh0 в том же блоке Scene. В панели у правого края программы появятся свойства этого объекта — видимый он или нет (галочка Visible), оставляет ли он отверстия на месте глаз и рта человека (галочки Eyes и Mouth соответственно — в нашем случае обе галочки должны быть включены), его координаты, размеры и сдвиг.

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

Пока же у вас только стандартный материал без текстуры, поэтому маска вместо шахматной стала просто серой. Это нормально!

7. Поиграйте с материалом

В блоке Assets в левой панели интерфейса появилась папка Materials, внутри которой лежит ваш первый материал — material0. В Assets будут попадать и другие типы объектов, которые вы добавите в свою «сцену»: текстуры (то есть изображения, которыми покрывают объекты), 3D-модели и скрипты.

Если кликнуть на material0, в левой панели откроется большое количество параметров. Попробуйте попереключать некоторые и последить за результатами. Например, если во вкладке Shader Properties — Diffuse нажать на прямоугольник возле строки Color и выбрать какой-нибудь цвет (скажем, красный), маска покрасится в красный. А если после этого включить галочку в строке Specular, она начнет еще и блестеть.

В самой верхней части этой панели есть переключатель Shader Type. Он влияет на то, как будет выглядеть маска: по умолчанию установлен параметр Standard, который подходит для реалистичной симуляции 3D-объектов. Кроме того, можно выбрать Flat (тогда объект не будет реагировать на освещение), Physically-Based (еще более реалистичные поверхности, чем по умолчанию), Retouching (для ретуширования лица), Blended (для смешивания текстур и цветов) и Face Paint (для рисования на коже лица).

В рамках этой инструкции мы будем пробовать нарисовать маску Джокера (самое банальное, что только может быть), поэтому переключайтесь на Face Paint. Маска «прилипнет» к лицу, но сделает его бесцветным. Скоро мы это исправим.

8. Отложите Spark AR. Пора нарисовать текстуру!

Spark AR позволяет собирать в «сцене» двухмерные и трехмерные объекты, а также текстуры и другие элементы — но это не универсальный редактор всего на свете. Если вы захотите создать свою 3D-модель, придется перейти в 3D-редактор. Если нужно нарисовать текстуру, придется открывать соответствующее приложение.

В нашем случае подойдет графический редактор, поддерживающий слои. Это может быть и Adobe Photoshop, и бесплатный Gimp.

Кроме того, надо скачать с сайта Facebook архив, в котором лежат файлы для работы с масками. Зайдите на эту страницу и кликните на ссылку в строчке «Download the Face Reference Assets».

В архиве окажутся две папки. В папке Mesh лежат трехмерные модели лица, они нужны, чтобы создавать 3D-модели правильного масштаба. А в папке Texture — несколько текстур, которые правильно накладываются на модель лица.

Нам понадобится файл faceMasculine.jpg или faceFeminine.jpg. Откройте его в графическом редакторе, создайте прозрачный слой поверх существующего и нарисуйте там «грим Джокера». «Намажьте» на лицо белую основу и добавьте красные и синие детали вокруг рта, носа и глаз.

У нас получилось вот так:

Теперь скройте или удалите нижний слой с изображением лица и сохраните изображение как PNG-файл с прозрачностью.

Если у вас что-то не получается, можете скачать наш файл.

9. Вернитесь в Spark AR и примерьте текстуру

Снова откройте Spark AR, выберите материал material0 и найдите в списке его параметров строчку Texture. Кликнув Choose File…, вы сможете добавить в проект текстуру с диска компьютера. В нашем случае надо выбрать PNG с макияжем из предыдущего шага.

10. Поздравляем, у вас получился Джокер!

По крайней мере, что-то, отдаленно на него похожее.

На этом шаге вы снова можете просмотреть свою маску на телефоне.

Напоминаем, как это сделать

  • С помощью Spark AR Player. Подключите телефон к компьютеру по проводу, откройте на телефоне приложение Spark AR Player, а затем в Spark AR на компьютере нажмите на кнопку с изображением телефона в левой части экрана (она называется Test on Device).
  • С помощью приложения фейсбука или инстаграма. Нажмите на ту же кнопку Test on Device в Spark AR, а затем на кнопку Send напротив Facebook Camera или Instagram Camera. Когда процесс загрузки на сервер закончится, вам придет уведомление в фейсбуке или инстаграме — кликните на него, и откроется камера с вашей маской.

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

11. Добавьте слезы

Следующее, что мы будем делать с Джокером — заставим его плакать. Для этого вернитесь в панель Scene в левой части интерфейса и нажмите Add Object. Найдите в списке пункт Particle System и добавьте его в «сцену».

Particle System — это генератор однотипных объектов, которые рождаются в какой-то точке, куда-то улетают и затем исчезают. Скорее всего, на этом этапе вы увидите генератор черно-белых прямоугольников, вылетающих из центра «сцены». В блоке Scene перетяните объект emitter0, чтобы он оказался внутри объекта faceTracker0. Теперь прямоугольники должны начать вылетать из носа человека.

Но нам нужны слезы из глаз, а не прямоугольники из носа! Сначала разберемся с внешним видом потока: кликните на только что перетянутый emitter0 и взгляните на массу настроек в правой части интерфейса.

Найдите там вкладку Shape, раскройте ее и в выпадающем меню Shape переключитесь на пункт Sphere. В пункте Radius, который появится ниже, выставьте значение 0,3 — чтобы слезы не были слишком большими.

Еще ниже есть строка Materials. Нажмите там на плюсик и выберите Create New Material — так вы создадите отдельный материал для слез. В блоке Assets в левой части интерфейса кликните по новому material1 и измените его настройки. Для простоты на этот раз используем не текстуру, а простую заливку цветом — оставьте Shader Type в положении Standard, а ниже во вкладке Diffuse выставьте значение Color на тот цвет, который вам больше нравится (наверняка логично будет использовать оттенок голубого).

Ниже есть блок Render Options — здесь можно выставить шарам полупрозрачность, чтобы они больше походили на капли: сдвиньте ползунок Opacity на положение в районе 60-70%.

В итоге вы должны получить Джокера, у которого из носа вертикально вверх вылетают голубые капли.

12. Познакомьтесь с программированием — это несложно!

В Spark AR можно программировать логику с помощью Javascript-кода, но это путь для подготовленных людей. Мы пойдем проще. Нажмите в главном меню программы в верхней части интерфейса на кнопку View и выберите пункт Show/Hide Patch Editor. В центре экрана появится пустое поле Patch Editor — это место, в котором можно соединять разнообразные блоки и тем самым задавать логику маске.

Для начала нажмите на кнопку Add Patch в углу Patch Editor и добавьте два объекта — Face Finder и Face Select. Первый находит и считает лица в кадре, а второй — выбирает одно из этих лиц для дальнейших манипуляций.

Теперь блоки надо соединить между собой. Кликните мышкой на выход Faces в блоке Face Finder и проведите линию до входа Faces в Face Select.

Мы хотим, чтобы слезы текли из глаз человека, открывшего маску — поэтому теперь в Patch Editor надо добавить еще один объект, Eyelid («веко»). Соедините единственный выход из Face Select с единственным входом в Eyelid, чтобы маска знала, веко на каком из лиц ей нужно найти.

У блока Eyelid масса выходов, отвечающих за координаты разных частей глаза. Не пугайтесь — нам понадобится только пара из них. Но сначала нам нужно добавить в Patch Editor объект, отвечающий за координаты точки, из которой вылетают наши слезы.

Вот как это сделать: выберите в блоке Scene в левой части интерфейса приложения объект emitter0, а затем в списке параметров справа найдите блок Transformations. В начале строки Position есть небольшая стрелочка — кликните на нее, и в Patch Editor добавится соответствующий объект. Вы заметите, что строчка Position стала желтой, а изменить вручную координаты нельзя — потому что теперь это делается программно.

Последний шаг — в Patch Editor соедините выход Left Outside Corner Position со входом 3D Position нашего emitter0.

13. Поменяйте направление слез

Итогом предыдущего шага должна стать маска с гримом Джокера, у которой из угла одного из глаз вертикально вверх вылетает поток слез.

Чтобы поменять направление слез, в блоке Scene кликните по emitter0 и просмотрите настройки в правой части интерфейса. Нас интересует блок Spray Angle. Первый столбец, в котором ячейки подписаны как X, Y и Z, отвечает за угол в соответствующей плоскости. Второй столбец — это погрешность в градусах, в пределах которой будет меняться направление полета частиц. В нашем случае нужно изменить только ячейку Z — впишите туда число —100 (с минусом). Теперь слезы будут вылетать из глаза вбок.

Чуть ниже есть строка Speed, которая отвечает за скорость полета частиц. Измените в первой ячейке значение с 0,2 до 0,1 — чтобы слезы двигались не так резво. А еще ниже раскройте блок Particle и в строчке Lifespan выставьте новое значение — 1 вместо 0,4. Теперь слезы будут лететь медленно — но достаточно быстро, чтобы можно были успеть насладиться их движением.

14. Добавьте слезы для второго глаза

Это проще, чем было с первым. Кликните правой кнопкой мыши на объект emitter0 в колонке Scene и выберите пункт Duplicate в выпавшем меню. Так в «сцене» появится второй поток слез — но он начинается в носу.

Чтобы исправить это, выберите новый emitter1, в колонке с параметрами нажмите на стрелочку у строки Position. В Patch Editor появится новый объект, отвечающий за положение этого потока — протяните к нему мышкой линию от выхода Right Outside Corner Position того же объекта Eyelid, который использовался для первого глаза.

Наконец, в списке параметров emitter1 в блоке Spray Angle поменяйте в ячейке Z значение с —100 на просто 100. Теперь поток из каждого глаза будет направлен в нужную сторону.

15. Еще немного, и вы у цели!

В принципе, на этом можно остановиться. Но ведь наша маска совсем не интерактивная. А что если слезы будут вылетать из глаз не постоянно, а только когда человек перед камерой улыбается? Ведь, как говорил Джокер, «я думал, моя жизнь это трагедия, но сейчас я понял, что это комедия».

Снова перейдите в Patch Editor и нажмите кнопку Add Patch. Найдите в меню объект Smile и добавьте его. Это — детектор улыбки. Spark AR также позволяет привязать действия к морганию и открыванию рта, но на этот раз мы остановимся именно на улыбке.

Подключите выход из Face Select, который уже есть в поле для программирования, ко входу в Smile. Осталось связать это все со слезами. По очереди выберите в блоке Scene в левой части окна объекты emitter0 и emitter1 и нажмите на стрелочки возле строки Visible. Так в Patch Editor появятся свойства потоков, отвечающие за их видимость.

Осталось соединить выход из Smile со входами в оба новых объекта. У вас должна получиться такая цепочка:

16. Ура! Проверьте, что у вас получилось

Маска — такая, какой мы ее задумали в этой инструкции — готова. Теперь можете отправить ее из Spark AR на телефон и протестировать.

Напоминаем, как это сделать

  • С помощью Spark AR Player. Подключите телефон к компьютеру по проводу, откройте на телефоне приложение Spark AR Player, а затем в Spark AR на компьютере нажмите на кнопку с изображением телефона в левой части экрана (она называется Test on Device).
  • С помощью приложения фейсбука или инстаграма. Нажмите на ту же кнопку Test on Device в Spark AR, а затем на кнопку Send напротив Facebook Camera или Instagram Camera. Когда процесс загрузки на сервер закончится, вам придет уведомление в фейсбуке или инстаграме — кликните на него, и откроется камера с вашей маской.

17. Отправьте маску в каталог

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

Для этого в главном меню Spark AR нажмите File — Export и в появившемся окне снова Export. Сохраните проект на компьютере и откройте страницу facebook.com/sparkarhub. Нажмите синюю кнопку Upload Effect (или «Загрузка эффекта») и пройдите все шаги. В процессе от вас понадобится несколько вещей:

  • Экспортированный файл проекта
  • Имя маски
  • Иконка (как их рисовать, читайте здесь)
  • Короткое видео с демонстрацией эффекта
  • Описание для модератора на английском языке

Все! Теперь придется дождаться, пока вашу маску одобрят — либо отклонят с объяснением причин. Этот процесс может занять неделю, а может и месяц — как повезет. Но рано или поздно в вашем профиле в инстаграме появится маска, сделанная вашими руками. И любой желающий сможет снять фото или видео с ней.

18. Что дальше?

Во-первых, попробуйте тренировочные проекты, которые открываются в Spark AR при запуске программы.

Во-вторых, изучите документацию на сайте Facebook: ее очень много, порой она запутанная, но при желании можно найти описание нужной функции. Или даже пошаговый урок.

В-третьих, загляните в фейсбук-сообщество Spark AR Community. Там можно вдохновиться чужими примерами и спросить совета.

Султан Сулейманов