Создайте индивидуальные маски для лица с помощью SPARK AR менее чем за 10 минут

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

Одним из таких способов использования Face Tracking в дополненной реальности является создание Face Filters, что стало возможным благодаря выпуску таких инструментов разработки программного обеспечения, как Spark AR, Lens Studio и Unity. Face Filters использовались как способ самовыражения и развлечения людей за последние 4–5 лет в таких приложениях, как Facebook / Messenger, Snapchat и Instagram.

Во времена эпидемии COVID-19 позвольте нам использовать это время, чтобы узнать, как создать маску для лица Corona Prevention FaceMask с использованием Spark AR и GIMP менее чем за 10 минут. Вы также можете создать свои индивидуальные маски для лица, используя это руководство.

Давайте начнем

Откройте Spark AR Studio, нажмите + Новый проект на левой панели и выберите Пустой проект. Ваш проект будет инициализирован и загружен в окно примерно за полминуты.

Теперь нажмите кнопку + Добавить объект, расположенную в нижней части области сцены слева, выберите Face Tracker и нажмите «Вставить». Убедитесь, что объект Face Tracker является дочерним по отношению к объекту Camera.

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

Теперь добавьте Face Mesh в Face Tracker, щелкнув правой кнопкой мыши Face Tracker и выбрав «Добавить». Итак, настройка для нашего проекта FaceMask готова, теперь мы переходим к части Текстура нашего проекта.

Создание текстуры маски для лица

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

  • Откройте faceMasculine.jpg в папке «Текстуры» в Face Reference Assets.
  • Теперь откройте изображение FaceMask, которое вы хотите наложить на Face Tracking, в редакторе GIMP в другом окне.
  • Выберите «Слой» в строке меню и нажмите «Прозрачность», затем нажмите «Добавить альфа-канал». Снова в разделе «Прозрачность» нажмите «Цвет в альфа-канал», чтобы удалить белый фон с изображения.

Альфа-канал - это цветовой компонент, который представляет степень прозрачности цвета (т. Е. Красный, зеленый и синий каналы). Он используется для определения того, как пиксель отображается при смешивании с другим.

  • Скопируйте изображение на faceMasculine.jpg в предыдущем окне, измените размер и поместите его на текстуру сетки лица, как вы хотите, чтобы оно отображалось на отслеживаемом лице.

  • После этого перейдите в раздел в правом нижнем углу, где вы сможете увидеть слои на изображении. Щелкните значок «глаз» перед слоем изображения faceMasculine.jpg, чтобы сделать его невидимым.
  • Сохраните изображение в подходящую папку.

Текстура FaceMask готова к применению к сетке лица, которую вы создали на первом этапе.

Подведение итогов

На этом этапе мы закроем редактор GIMP и перейдем к приложению Spark AR. Нажмите на Face Mesh на панели Scene слева и перейдите на панель Attributes справа. Под ним выберите Добавить материал, чтобы добавить материал к созданной вами сетке лица.

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

Пришло время добавить текстуру FaceMask, которую мы создали на предыдущем шаге, для этого перейдите к опции «Добавить актив» в левом нижнем углу редактора Spark. Выберите изображение из пути, по которому вы его сохранили, таким образом вы создадите требуемую текстуру в проекте Spark AR, которую можно увидеть в папке текстур на панели активов слева.

Выберите material0 на панели Assets и в разделе атрибутов нажмите Add Material и выберите только что созданную FaceMask Texture. Это добавит текстуру к материалу сетки лица, и вы сможете увидеть маску лица, накладывающуюся на верхнюю часть лица, как вы настроили ее в редакторе GIMP.

Добавление аудио (необязательно)

На панели «Активы» нажмите «Добавить актив», затем введите и выберите «Контроллер воспроизведения звука». Теперь перейдите на панель «Атрибуты» и в разделе «Аудио» выберите аудиофайл, который вы хотите воспроизвести в своем эффекте.

Spark AR поддерживает аудиоформат Mono M4A с частотой дискретизации 44,1 кГц. Чтобы преобразовать аудиофайл MP3 в требуемый формат, вы можете использовать данный Онлайн-инструмент или автономное программное обеспечение, такое как Audacity.

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

В нашем эффекте мы воспроизводим звук в течение всего времени, пока отслеживается лицо, и наша маска FaceMask накладывается на лицо человека. Следовательно, нам не нужны ни скрипты, ни редактор патчей. Нажмите «Добавить объект» на панели «Сцена» слева и добавьте объект «Динамик». Сделайте объект Speaker дочерним по отношению к уже созданному вами объекту faceTracker0. В разделе Атрибуты в свойстве Audio выберите audioPlaybackController0.

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

Проверка эффекта

Проверьте свой эффект, подключив мобильное устройство к ПК и открыв Spark AR Player на своем мобильном устройстве. Затем нажмите кнопку Проверить на устройстве, расположенную в нижней части левой панели инструментов, как показано на рисунке. Затем вы можете выбрать вариант Отправить на подключенное устройство. Делитесь селфи и GIF-изображениями, созданными с помощью фильтра FaceMask.

Ура! Таким образом, мы смогли создать собственный эффект FaceMask с помощью звука за 10 минут. 😎 😉

Не стесняйтесь заглядывать в Репозиторий Github за любой помощью, которая вам потребуется с проектом или вы хотите клонировать исходный проект. Следите за мной, чтобы узнать о предстоящих уроках по Spark AR, желаю удачи!