Маски в приложениях: от идеи до магического воплощения

Виртуальные маски в приложениях — это актуально и забавно. Но задумывались ли вы, как компьютерная маска оказывается на вашем селфи? В честь дня рождения проекта Hi-Tech Mail.ru мы разработали собственную маску, интегрировали ее в приложения ICQ и Artisto (для iOS), и готовы раскрыть секреты магической технологии.

Технология наложения масок базируется на платформе распознавания лиц LUNA. Специальный алгоритм накладывает на лицо пользователя в реальном времени 2D- и 3D-маски, которые подстраиваются к мимике и движениям головы. Движения и мимика определяются по ключевым точкам на глазах, щеках, бровях, лбу и носу.

Рождение новой маски – все начинается с идеи

Все начинается с идеи. В первую очередь нужно ответить на вопрос, что мы хотим увидеть в итоге? Например, Снегурочку или робота. Для создания конкретной маски Hi-Tech дизайнеры вдохновлялись популярными ныне трендами: сериалами «Мир дикого Запада», «Призрак в доспехах», а также последними достижениями мира нейросетей и биомеханическими татуировками. В итоге появилась идея маски киборга — человекоподобного робота.

Набросок

Один из первых эскизов маски Hi-Tech.
Один из первых эскизов маски Hi-Tech.

Отталкиваясь от идеи, дизайнер рисует от руки эскизы, из которых выбирается один. Он берется за основу для всей дальнейшей работы.

Компьютерная модель

От ручной работы дизайнер переходит к компьютерному воплощению своего наброска. Скетч накладывается на 3D-модель лица. На данном этапе происходит корректировка исходного изображения, добавляются нюансы и детали, меняется цветовая гамма. Промежуточные варианты «примеряются» на фотографии и по необходимости вновь вносятся правки в концепцию будущей маски.

После окончательного утверждения цветовых решений, происходит «раскраска» эскиза, после чего тот вновь накладывается на модель лица.

Технически рисовать маски не сложно. Но поскольку направление новое, нет точных рецептов, что сработает, а как делать не стоит. Приходится думать, что повеселило бы тебя самого, чем бы захотелось поделиться. Спасибо Hi-Tech Mail.Ru за открытость экспериментам и команде ICQ за молниеносную техническую реализацию. Получилось круто!
Богдана Серебриян
Дизайнер отдела маркетинга Mail.ru Group

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

Выбор технологий для создания элементов

После того как эскиз принят, его разбирают на «кусочки», чтобы понять, какие технологии следует использовать для создания элементов маски.

«Гримм» — программа определяет контрольные точки на лице, к которым привязывается эталонная, алгоритмически полученная учеными модель «усредненного» лица, на которую наложена нарисованная художниками текстура. Эта модель адаптируется под черты лица и копирует мимику и движения лица пользователя

2D- или 3D-изображения, которые накладываются на контрольные точки на лице. Они могут быть статичными или анимированными

Фоновые детали (мерцание, бабочки, снежинки и т.д.)

Тесты в «лайве»

Дальше начинаются рабочие тесты, которые позволяют в «лайве» посмотреть первый прототип нашей маски в работе.

Когда первая версия всех графических файлов готова , помочь ей «ожить» в приложении – задача технических специалистов.

Дизайнер отдает все файлы в формате PNG техническому художнику, который должен «собрать» маску в единое целое.

Согласно выбранным технологиям в специальном файле .json прописываются правила (режим, порядок наложения и т.п.), по которым маска накладывается на лицо.

«JSON (JavaScript Object Notation File) — определяет небольшой набор правил форматирования для портативного представления структурированных данных».

Дальше наша маска попадает в тестовое приложение, где ее можно «примерить» на себя. По результатам опять происходят корректировки.

Например, на нашей маске по результатам тестирования уменьшили размеры проводов, которые «подключены» к пользователю.

Подобных изменений могут быть десятки, пока результат не станет идеальным.

Финальный этап – интеграция в приложение

Далее папка с .json файлом и изображениями в PNG заливается программистами на сервер.

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

Я киборг! будущее наступило!) здорово видеть, когда коллеги экспериментируют с хорошо знакомыми технологиями и получают такие крутые результаты.
Полина Гладилина
Менеджер проекта

Используя камеру, пользователь сможет примерить любую маску, сделать фото или записать видео, сохранить его в фотогалерее или поделиться с друзьями в чатах или снапах. Также, на готовое изображение можно наложить различные фильтры, доступные нам благодаря нейросетям (Artisto для iOS).

В ICQ маска используется в видео-звонках и в фото-видео редакторе. Эта же библиотека используется в Artisto (для iOS).