Я решил написать мою первую статью на Дзене о той теме, что лично для меня сейчас очень интересна...
В этом уроке Вы узнаете азы для работы с программой Spark AR Studio и научитесь создавать простенькие маски для Instagram или Facebook. Мы разберем как создать маску-тату. Так же поработаем немного в графическом редакторе.
Начало
Совсем недавно я открыл для себя маски в Instagram. А все началось с того, что мы с женой решили провести фотосессию. Во время фотосессии наш фотограф сказал "Ты же программист, а ты сможешь сделать маску для инстаграмма?" (цитата не подробная, но общий смысл фразы передан). Я как любой уважающий себя программист - считаю, что ничего невозможного нет, и сразу ответил "Да расплюнуть". Но в то время, я даже не знал что в Instagram есть маски, я думал это только в снепчате. Фотограф рассказала что бы хотела видеть на своей маске и продолжила фотосессию. В общем, вернувшись с фотосессии я загуглил эту тему, и оказалось, есть специализированная программа, Spark AR Studio, с помощью которой создаются маски и в Instagram и в фейсбук. Недолго думая, я сказал и установил ее, а через пол часа я отправил первую маску фотографу. Мы обсудили правки и в результате работы у нас получилась довольно отличная маска которую сейчас используют большое кол-во людей.
Что Вам понадобится
1. Программа Spark AR Studio (https://sparkar.facebook.com/ar-studio/download/)
2. Любой графический редактор, я использую Adobe Photoshop
3. Вспомогательные файлы от разработчиков Spark AR Studio https://origincache.facebook.com/developers/resources/?id=Face-reference-assets-classic.zip
Знакомство с Spark AR Studio
Открываем программу и создаем новый пустой проект.
Теперь познакомимся с интерфейсом программы.
1. Окошко предпросмотра маски, тут показывается то, что в итоге будет видеть пользователь
2. Сцена в 3D, так как с помощью программы можно создавать не только маски, но и дополненную реальность, игры и так далее. В начале освоение создания масок Вам с "Сцена в 3D" работать не придется. В дальнейшем для создания более сложных эффектов, Вам понадобится освоить и ее.
3. Список объектов на сцене. Свет, маска, микрофон, камера тоже считаются за объекты
4. Список файлов/ресурсов которые используются в проекте
5. Окошко свойств выбранного объекта или файла
6. Кнопка для смены человека в предпросмотре (1 пункт), можно включить свою камеру и тестировать маску на себе
7. Кнопка для отладки проекта на устройстве. Нужна для отправки ссылки для тестирования на телефон. Можно подключить телефон с помощью кабеля, либо отправить в Ваш Instagram/Facebook аккаунт уведомление, нажав на которое можно протестировать результат прямо на телефоне.
Творчество
Для начала нам нужно создать объект Face Tracker, который служит определителем лица на экране и слежения за ним.
Теперь добавим Face Mash, который является по сути 3D маской, на которую мы будем налаживать эффекты.
Теперь ваше лицо стало в клеточку, не волнуйтесь, это дефолтная текстура объекта Face Mash, а если быть более точнее, это показывает отсутствие текстуры. Если вы знакомы с фотошопом, то там так же, и во многих графических редакторах тоже так же.
Если вы приглядитесь, то заметите, что Face Mash повторяет движения за лицом. Это достигается путем размещения его именно под Face Tracker, если бы мы создали Face Mash из под объекта камеры, то оно бы не повторяло движения за лицом, а стояло бы посреди экрана.
Теперь создадим материал, для дальнейшего нанесения на текстуру.
Маска станет серой, пока отложим материал, и начнем рисовать нашу маску. Откройте ваш графический редактор и загрузите туда файл faceFeminine.jpg который находится в папке Textures в архиве который Вы скачали ранее или скачайте сейчас по ссылке. Это женское лицо, в папке есть и мужское, но маска работает у всех) так что это просто для вашего удобства. Наверное в более профессиональных масках которые нацелены на ту или иную аудиторию нужен выбор муж/жен определенно, но для нас пока не имеет значения.
Если вы работаете в как и я в Adobe Photoshop, нужно снять закрепление слоя с текстурой.
Я решил сделать маску-татуировку на щеках, прямо под глазами, такое сейчас модно. Выберете инструмент "текст" и напишите свой текст в нужных местах. Я написал "доброе утро".
Теперь скройте слой с лицом и сохраните картинку в формате png.
Перейдем снова в Spark AR Studio. Выберем ранее созданный нами материал и загрузим в него нашу текстуру с текстом.
Теперь ваша маска наложилась на лицо, теперь поменяем Shader Type с Standart на Flat.
Поздравляю! Ваша маска готова.
Для того, что бы проверить ее в Instagram/Facebook, сначала выполните вход на фейсбук в Spark AR Studio.
Теперь нажмите на "кнопку для отладки проекта на устройстве" (она была под номером 7 выше в ознакомлении). Выберите нужную социальную сеть и нажмите Send.
Вам на телефон придет уведомление.
Нажмите на него, откроется Instagram/Facebook с окошком о принятии условий использования (не отправленные на проверку в Facebook маски не должны использоваться как либо, кроме тестов и еще много правовой информации).
Примите условия и дождитесь загрузки маски. После загрузки наведите на лицо.
Друзья, на этом текущий урок окончен. Ожидайте следующих, в них подробно расскажу как опубликовать маску, а до этого мы немного модернизируем эту маску, добавив немного ретуши. Так же в последующих уроках я покажу вам как делать более сложные маски.
Не поскупитесь на лайки! Если есть вопросы, можете задавать их в комментариях. Так же можете следить за мной в социальных сетях.
Instagram - https://www.instagram.com/davtyan.d.g/
TikTok - https://www.tiktok.com/@davtyan.david
Кстати, в моем Instagram опубликовано пока 2 маски: Армянский орнамент (самая первая маска которую я опубликовал в результате знакомства с Spark AR Studio) и "Премьер Министр" - юморная маска с бородой и высказываниями премьер министра Армении - Николя Пашиняна. Все остальные мои маски я делаю на заказ и публикую от имени заказчика, а так же сейчас ожидаю публикации более сложных масок о создании которых я готовлю уроки-статьи.