Тема создания масок для инстаграм набирает свои обороты. Каждый владелец инстаграм страницы хочет попробовать создать свою подходящую именно ему. Сегодня мы разберемся, как создавать маски в стиле "Cyberpunk" и добавим в нее немного интерактивности.
Шаг 1. Идея.
Всякая работа начинается с идеи. Мне лично симпатизирует стилистика киберпанк. Сейчас она является достаточно трендовой. Поэтому переходим на сайт по поиску референсов (Pinterest.com) и ищем подходящие картинки.
Выбираем из этих картинок конкретные элементы и комбинируем их. Китайские иероглифы, свечение неона, блики на лице и так далее. Также я наткнулся на картинку интересного макияжа, который мы сможем внедрить в маску.
Шаг 2. Подготовка ассетов.
Прежде чем, открывать Spark AR Studio необходимо подготовить текстуры, которые в последующем мы будем использовать для создания маски. Здесь можно пользоваться любым графическим редактором, но я предпочитаю делать это в After Effects.
Проанализировав референсы, заметим основные моменты стилистики: яркие цвета, светящиеся элементы, неон, эффект Glow, китайская типографика. Также добавим немного мейкапа в виде точек под глазами. Для создания идеи можно нарисовать эскиз, но в этот раз обойдемся без него.
Заходим в гугл переводчик и быстро накидываем пару фраз для нашей будущей маски. Подбираем цвета и стилизуем все элементы через Glow. Стоить заметить, что в Spark AR существуют ограничения по размеру файла маски (не более 4мб), поэтому текстура должна быть не больше 512px по длинной стороне, чтобы не занимать много места. Экспортируем наши заготовки в png формате с прозрачным фоном для последующего встраивания их в маску. Одну из надписей на лице предварительно помещаем на щеке используя файл FaceMesh.png из стандартных ассетов Facebook. Пример получившихся текстур.
Шаг 3. Создание маски.
Открываем Spark AR Studio и создаем пустой проект. Перетаскиваем в проект все получившиеся у нас текстуры. Для начала разберемся со светом и создадим блики на коже. Для этого добавим в проект Face Tracker и внутрь его вложим FaceMesh — посмотреть как это сделать можно здесь. Далее настраиваем материал лица. И перенесем сам объект на Layer 2.
Выставим освещение. Предлагаю такую схему света для этой маски. 2 Point Light белого цвета вложенные в Face Tracker по бокам, а также добавим 2 Point Light красного цвета, но отведем их дальше от камеры (в будущем создадим для них анимацию моргания).
Добавим еще один Face Mesh внутрь нашего трекера. Для нового объекта создаем материал который будет материалом с надписью на лице маски, поэтому забрасываем текстуру маски в этот материал и настраиваем на свой вкус.
Далее добавляем в проект объект Plane и вкладываем его в Face Tracker. Добавим деталей нашей маске и вставляем под глаза сердечки и точечки макияжа. Материалы настраиваем по аналогии с предыдущим. Важно, на всех этапах тестировать маску в приложении Spark AR Player, т.к вид текстуры маски на компьютере и на экране телефона может сильно отличаться. В итоге получаем такой состав проекта.
Остается заключительная часть создания маски — анимация. Есть два способа создания анимации через js-код и через patch editor. В данном случае мы будем использовать patch editor для анимации красных источников света. Выделяем источники света и нажимаем на пиктограмму стрелочки рядом с параметром Intensity. Откроется patch editor в котором нам необходимо будет выстроить такую схему.
Теперь наши источники света будут моргать, будто в фильме ужаса предавая нашей маске еще большую атмосферность. Как и обещал, добавляем интерактивности нашей маске. При моргании глазами, точки под глазами будут сменяться сердечками, которые обозначают любовь :) Для этого предварительно нужно убрать галочку напротив параметра Visible в объектах с точками. Далее переносим все в Patch Editor с помощью стрелочек напротив этих параметров и выстраиваем данную схему взаимодействия маски.
На данном этапе наша маска готова, после этого ее смело можно экспортировать и загружать через ARHub в Инстаграм.
