Онлайн урок. Сделай быструю маску в Spark AR, с эффектом отслеживания лица

Маски в инстаграм. Маска повторяющая мимику лица
Мы уже импортировали текстуру, которая понадобится вам для этого эффекта. Он называется Moustace и вы видите ее на панели Assets:
Маски в инстаграм. Панель Assets в Spark AR
Маски в инстаграм. Face Tracker в Spark AR
Вы можете определить, является ли объект дочерним по отношению к другому, щелкнув стрелку слева от родительского объекта на панели «Сцена». Это покажет или спрячет любого из его "детей".


Создание материала

Чтобы создать материал для сетки лица, убедитесь, что сетка выбрана на панели «Scene».

Справа от интерфейса находится панель Inspector. Здесь вы можете вносить изменения в объект или актив, выбранный на панели «Сцена», включая создание материалов.

В Инспекторе нажмите + рядом с Material. Это создаст материал для сетки лица.

Вы увидите материал, покрывающий сетку лица в окне просмотра и симуляторе:


Маски в инстаграм. Добавление Face Mesh
Когда трекер лица выбран на панели «Сцена», вы увидите оси, движущиеся с гранью в окне просмотра.


Добавление сетки лица (Face Mesh)

Вы уже добавили трекер лица, так что теперь вы можете вставить сетку лица. Face Mesh - это трехмерная модель, которая реагирует на мимику лица и отслеживаемые средством трекера движения. Сейчас мы применим материалы к сетке лица, чтобы изменить ее внешний вид, создав эффект маски.

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

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

Чтобы добавить сетку лица как дочерний элемент отслеживания лица:
  1. Щелкните правой кнопкой мыши на трекере лица на панели «Сцена».
  2. Выберите Добавить.
  3. Выберите Face Mesh из списка.
Вы увидите объект с сеткой лица в окне просмотра и симуляторе:


Давайте объединим эту текстуру с материалом, чтобы создать эффект усов, нарисованных на лице человека :)

Spark AR Studio поддерживает файлы текстур PNG и JPG.
Размер файла может быть не более 1024x1024 (я рекомендую делать 512х512 пикс).


Трекер лица (Face Tracker)

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

Чтобы добавить любой объект в вашу сцену, просто нажмите кнопку «Add Object» в нижней части панели «Scene». Вы увидите список всех объектов, доступных в Spark AR Studio.

Для этой маски:
  1. Выберите Face Tracker из списка
  2. Нажмите Вставить

Маски в инстаграм. Отображение материала в Spark AR
Материал будет отображаться на панели «Assets» как material0:
Маски в инстаграм. Создание материала для маски
Материалы также можно создавать на панели «Assets». Для этого нажмите +Add Asset и выберите Создать новый материал. Чтобы добавить материал к объекту в сцене, перейдите в инспектор и щелкните раскрывающийся список рядом с «Materials» .


Вы можете переименовывать объекты и активы в Spark AR Studio. Это хорошая идея, чтобы не забывать что есть что и быстро ориентироваться в проекте по названиям ресурсов, когда вы собираете большой проект - это крайне важно. Все, что вам нужно сделать, это щелкнуть правой кнопкой мыши по объекту и выбрать переименовать.

Для этого:
  1. Щелкните правой кнопкой мыши material0 .
  2. Выберите Переименовать.
  3. Переименовать материал mask_material .

Установка типа шейдера материала (shader type)

Теперь вернитесь к Инспектору, чтобы редактировать материал.

Сначала давайте взглянем на эту опцию в верхней части списка - Shader Type:

Маски в инстаграм. Типы шейдеров в Spark AR
Вы можете использовать эту опцию, чтобы выбрать один из нескольких встроенных шейдеров в Spark AR Studio, чтобы определить внешний вид материалов в ваших масках.

Маска, которую мы собираемся сделать будет показывать лицо пользователя за ней, поэтому мы будем выбирать шейдер Paint Face. Это лучший вариант для эффектов маски, когда текстура нарисована поверх лица, потому что она сохраняет яркость лица, но удаляет цвет. Это означает, что ваша собственная текстура может быть умножена на нее.

Чтобы изменить шейдер:
  1. Нажмите раскрывающееся меню рядом с типом шейдера.
  2. Выберите Face Paint .
Теперь вы можете увидеть лицо сквозь материал:

Маски в инстаграм. Замена шейдера материала
Применение текстуры

Далее давайте применим текстуру. Рядом с Texture:
  1. Выберите Выбрать File ...
  2. Выберите усы.
Маски в инстаграм. Применение текстуры в Spark AR
Хорошо, мы закончили маску!

Создание собственных текстур для эффектов лица

Справочные материалы по лицам (face reference assets) - это набор ассетов, которые помогут вам создавать разные эффекты, когда вы рисуете на лице. Импортируйте faceFeminine.jpg или faceMasculine.jpg в тот же фотошоп, создайте сверху новый слой и теперь вы рисуете вашу маску поверх макета настоящего лица - она ляжет на лицо в спарк ар гораздо лучше, чем если бы вы рисовали без макета. Используйте эти ресурсы в качестве руководства для расположения черт лица и создайте текстуру на новом слое.

Теперь давайте посмотрим, как добавить возможность использовать маску для инстаграм с другом - добавив второй трекер лица.


Добавление второго face tracker

Чтобы сделать это, вы можете скопировать только что созданный трекер лица. Это скопирует и всех объекты созданные под его родительством. Просто:
  1. Выберите трекер лица на панели «Сцена».
  2. Удерживая нажатой клавишу «Control» и «c» на клавиатуре, нажмите «Control

Еще один трекер лица и сетка лица будут перечислены на панели «Сцена».

Вам нужно будет сделать одно редактирование в Инспекторе. Убедитесь, что на панели «Сцена» выбран второй трекер лица faceTracker1. В инспекторе вы увидите свойство с именем Tracked Face. Используйте его, чтобы назначить второе лицо второму трекеру.

По умолчанию он установлен на Face 1. Измените это на Face 2:


Это заставит новый трекер реагировать на второе лицо, которое появляется в эффекте.

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

Таким образом вы можете добавлять до 5 лиц в одну маску.

Поздравляем! Вы закончили эффект с отслеживанием лица!

В этом уроке вы научились создавать простой эффект маски для инстаграм.




Читайте также:
    Маски в инстаграм. Добавление нескольких Face Tracker
    Здравствуйте! В этом уроке вы узнаете, как создать маски в инстаграм, повторяющие мимику чьего-либо лица. Вы будете использовать трекер лица, сетку лица, материал и текстуру.

    В этом уроке мы рассмотрим:
    1. Трекер лица
    2. Добавление сетки лица
    3. Создание материалов
    4. Применение текстур
    5. Добавление второго трекера лица к вашей маске (чтобы она работала на двоих людей)

    Настройка


    Для начала откройте незаконченную маску в папке с образцом контента.

    Пространство в середине экрана называется окном просмотра. Это где вы можете увидеть свою маску, как вы ее "собираете".

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


    Made on
    Tilda