Как сделать несколько масок в одной spark ar

Добавил пользователь Валентин П.
Обновлено: 21.08.2024

AR (augmented reality) — одна из основ­ных раз­но­вид­но­стей XR — стре­ми­тель­но шага­ет по пла­не­те. Самым замет­ным при­ме­не­ни­ем этой тех­но­ло­гии, конеч­но, ста­ли мас­ки в Instagram. Их попу­ляр­ность свя­за­на с тем, что Facebook поста­вил (и совер­шен­но вер­но) на мак­си­маль­ное упро­ще­ние про­цес­са созда­ния раз­вле­ка­тель­но­го кон­тен­та для сво­ей платформы.

Для того, что­бы сде­лать созда­ние эффек­тов и масок как мож­но более доступ­ным как мож­но более широ­ко­му кру­гу людей, Facebook выпу­стил сре­ду раз­ра­бот­ки Spark AR. Она раз­ви­ва­ет­ся с 2017 года (тогда она назы­ва­лась Camera Effects Platform), и бла­го­да­ря сво­ей про­сто­те и доступ­но­сти при­об­ре­ла огром­ную попу­ляр­ность. Есть и дру­гие сре­ды для AR (напри­мер, Adobe Aero), но, пожа­луй, по про­сто­те и рас­про­стра­нен­но­сти эта — основная.

Оче­вид­но, основ­ной пред­по­сыл­кой к раз­ви­тию подоб­ных при­ло­же­ний (а имен­но в направ­ле­нии раз­ви­тия сво­их при­ло­же­ний идёт Facebook) явля­ет­ся раз­ви­тие мобиль­ных устройств. При доста­точ­ной опти­ми­за­ции про­из­во­ди­тель­но­сти и исполь­зо­ва­нии аппа­рат­но­го уско­ре­ния эти 3д движ­ки выда­ют очень при­лич­ные резуль­та­ты на совре­мен­ных смарт­фо­нах. Одним из огра­ни­че­ний до сих пор оста­ёт­ся про­пуск­ная спо­соб­ность кана­лов свя­зи — это при­чи­на того, поче­му есть такое жёст­кое огра­ни­че­ние на объ­ем сце­ны (Instagram — 4 мб, Facebook — до 10 мб на дан­ный момент). Основ­ной оче­вид­ный недо­ста­ток всех сред и стан­да­лон плат­форм для VR — то, что они тре­бу­ют кли­ент­ско­го при­ло­же­ния для запус­ка. Но с рас­про­стра­нен­но­стью Instagram и Facebook это почти нивелируется.

Итак, давай­те раз­бе­рем­ся, что мож­но делать в Spark AR.

  1. Мас­ки и проч. Во-пер­вых, мож­но делать эти вез­де­су­щие мас­ки (тек­сту­ры, объ­ек­ты, при­вя­зан­ные к тре­ке­ру глаз, рта, проч.). И, как бы не каза­лось, что это доволь­но глу­пая исто­рия, и вооб­ще — сколь­ко уже мож­но?! — одна­ко, воз­мож­но­стей там мас­са, и вы огра­ни­че­ны толь­ко вооб­ра­же­ни­ем. Ну и спи­сок воз­мож­ных эффек­тов всё вре­мя растёт!
    То есть, прин­ци­пи­аль­но, это рабо­та с лицом и туло­ви­щем чело­ве­ка: добав­ле­ние ста­ти­че­ских, дина­ми­че­ских объ­ек­тов и тек­стур (эффек­ты маки­я­жа и проч.) к лицу, голо­ве, туло­ви­щу и рукам человека.
  2. Цве­то­вые филь­тры. Это про­сто цве­то­вые филь­тры, раз­ные по слож­но­сти, тут все более-менее понятно.
  3. Рабо­та с фоном. Посколь­ку Spark успеш­но научил­ся делать тре­кинг лица, голо­вы и фигу­ры, теперь мож­но исполь­зо­вать эту воз­мож­ность для того, что­бы мас­ки­ро­вать фон и менять его.
  4. Трех­мер­ные объ­ек­ты. И это самое инте­рес­ное! Spark уме­ет отсле­жи­вать плос­кость и ста­вить на неё трёх­мер­ные объекты.
    На дан­ный момент, прин­ци­пи­аль­но выде­ля­ет­ся два типа: Plane Tracker и Target Tracker. Plane tracker отсле­жи­ва­ет плос­ко­сти, а target tracker — кон­крет­ное изоб­ра­же­ние (с его помо­щью мож­но ани­ми­ро­вать пла­ка­ты, например).

Ну и еще оно уме­ет части­цы и немно­го скрип­ты, так что мож­но делать вся­кие про­стые и не очень интер­ак­тив­ные шту­ки (с помо­щью нодо­во­го кон­струк­то­ра или JS). Оно стре­ми­тель­но раз­ви­ва­ет­ся, поэто­му есть смысл про­сто поста­вить себе Spark AR и попро­бо­вать сде­лать пару при­ме­ров из бес­плат­ной справ­ки — она рас­счи­та­на на чело­ве­ка без какой бы то ни было под­го­тов­ки вообще ?.

Маски в Instagram

Подроб­ный урок про то, как делать мас­ки, есть на VC. Там нет ниче­го слож­но­го, все мак­си­маль­но интуитивно.

Олдфа­ги пом­нят эту мас­ку. У авто­ра в дет­стве от неё обыч­но слу­ча­лась бес­сон­ни­ца и кош­ма­ры ???

Для этой зада­чи в Спарк есть спе­ци­аль­ный инструмент.

Созда­ние мас­ки для Instagram

Посколь­ку в Spark AR уже есть тре­кер лица, подоб­ные вещи выпол­ня­ют­ся очень легко.

После настрой­ки вы може­те загру­зить мас­ку в при­ло­же­ние Spark AR Player и про­те­сти­ро­вать ее на вашем устрой­стве. Когда вы убе­ди­тесь, что все рабо­та­ет нор­маль­но, мож­но отпра­вить ее на одоб­ре­ние в FB. Надо отме­тить, что по пра­ви­лам плат­фор­мы (Facebook или Instagram) объ­ём фай­ла мас­ки не дол­жен пре­вы­шать опре­де­лен­ной отмет­ки: об этом и неко­то­рых дру­гих нюан­сах луч­ше про­чи­тать в спра­воч­ни­ке (там все это назы­ва­ет­ся эффек­та­ми, и их раз­мер для Facebook и Instagram отли­ча­ет­ся — кста­ти, огра­ни­че­ние по раз­ме­ру как раз свя­за­но с тем, что плат­фор­мы стре­мят­ся сде­лать их исполь­зо­ва­ние как мож­но более удоб­ным при теку­щем уровне раз­ви­тия связи).

Так, ещё оно уме­ет делать интер­ак­тив­ные мас­ки, для это­го в нем есть встро­ен­ный нодо­вый редак­тор. Вы ско­рее все­го уже мил­ли­он раз это виде­ли, но вот урок на эту тему.

Работа с пространством в Spark AR

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

3д модель в Spark AR

Поми­мо поме­ще­ния моде­ли про­сто на некую плос­кость, мож­но при­вя­зать­ся к кон­крет­ной плос­ко­сти, к кон­крет­но­му изоб­ра­же­нию, исполь­зо­вать его в роли мар­ке­ра. Таким обра­зом мож­но, напри­мер, ани­ми­ро­вать плакат:

Plane tracking в Spark AR

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

Кста­ти, теку­щую вер­сию это­го про­ек­та вы може­те про­те­сти­ро­вать, прой­дя по ссыл­ке со стра­ни­цы порт­фо­лио на вашем теле­фоне (для это­го вам нуж­но уста­нов­лен­ное при­ло­же­ние Instagram).

Вывод

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

Не забудь­те под­пи­сать­ся на нас в соци­аль­ных сетях!
Так вы узна­е­те о выхо­де новый ста­тей первыми. ?

Это совсем молодая профессия, хотя сама технология существует как минимум три года. В 2015 году разработчики Snapchat купили украинский стартап Looksery, занимавшийся отслеживанием лица на видео, и в том же году запустили маски в своем приложении. Через год Facebook, социальная сеть, которая последние шесть лет борется со Snapchat и копирует его, приобрела аналогичный стартап — белорусское приложение MSQRD. В нем тоже накладывали маски и, самое главное, создавали новые эффекты.

Из чего состоит ваша индустрия

Всех авторов можно условно поделить на три категории.

Маски — их основные ниша и продукт. Создают проекты в своем стиле и строят авторский бренд на дополненной реальности. Таких очень много — например, Аарон Яблонски, Кристиан Венейблс, Матье Эрнст.

Маски — их дополнительное направление. С их помощью транслируют стиль для более широкой аудитории. Например, так делали художники Покрас Лампас, Billelis, Филип Кастик и Ines Alpha.

Из каких этапов состоит ваша работа

@alexmubert, один из создателей приложения Mubert

Сколько это стоит

Из-за отсутствия сформированного рынка цена одной и той же маски у разных дизайнеров может серьезно отличаться. При определении цены важно, кто играет главную роль: дизайнер или заказчик. Если от исполнителя требуется только выполнить техническое задание, маска будет стоить недорого. Если же бренд хочет коллаборацию с дизайнером, намеренно идет за авторским стилем и аудиторией, то, как считает Кочетков, стоимость маски сильно вырастет.

Что нужно, чтобы начать

Adobe Photoshop, Adobe After Effects, ZBrush, Cinema 4D дизайнеры используют для 3D-графики, Substance Painter — для рисования по 3D-моделям и окрашивания и Spark AR — для публикации в инстаграме.

У разных дизайнеров на одну маску уходит от нескольких часов до нескольких недель.

С какими сложностями вы сталкиваетесь

Что в индустрии популярно прямо сейчас

Создание масок в Инстаграм доступно всем пользователям. Единственное, что от вас потребуется - это знание программы Spark AR Studio и умение работать с графикой. В этом посте я покажу, как создать простую маску для сторис в Инстаграм.

У Фейсбука есть собственная программа, с помощью которой и создаются любые объекты дополненной реальности, в том числе и маски для сторис в Инстаграм. Программа эта бесплатная и доступна для скачивания на официальном сайте Spark Ar Studio. И первое, что вам следует сделать - это скачать и установить программу на свой ПК.


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


Если вы заметили, в Инстаграм есть самые разные маски и эффекты. Одни наносят какие-то графические элементы на лицо (надписи под глазами, значки на щеках, раскрашенное лицо), другие, добавляют на голову или тело человека различные 3д объекты (очки, головные уборы, венки над головой, крылья ангела и чертика), третьи, пропускают наш экран через фильтры, которые иногда реагируют на действия (черно белый экран, эффекты падающего снега или знойной погоды), четвертые создают в пространстве вокруг нас объекты дополненной реальности (пушка, стреляющая лайками, значок лайка, смайлик, летающий над головой), ну и другие. Для создания каждого типа маски и эффекта в Инстаграм, нужно использовать разные объекты и возможности программы Spark AR Studio. В этом посте я покажу, как создать маску в Инстаграм, которая будет ложиться на лицо.

Находясь в рабочей среде программы Spark AR Studio, нажмите кнопку “Add Object”, в блоке “Scene”. В появившемся окне, выберите “Face Tracker” и нажмите кнопку “Insert”.


После этой процедуры, в блоке “Scene” появится пункт “faceTracker0”, который говорит о том, что новый объект для лица успешно создан (напомню, мы создаем маску, которая будет связана с лицом).


Нажмите правой кнопкой мыши на объект “faceTracker0”, в появившемся меню выберите “Add”, а в раскрывшемся списке, нажмите на пункт “Face Mesh”. На лице появится клетчатая маска, а в блоке “Scene” - объект “faceMesh0”.



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

Чтобы вам легче было нарисовать свою маску, воспользуйтесь шаблоном маски для лица, которую можно скачать прямо в программе Spark AR Studio. Для этого, наведите стрелку мыши на пункт “Help”, в верхнем горизонтальном меню, а в выпавшем списке, выберите пункт “Download Face Assets”. На открывшейся странице, нажмите на ссылку “the Face Reference Assets”.



На ваш компьютер будет скачан архив “Face-reference-assets-classic.zip”, который содержит различные шаблоны. В папке “FaceAssets/Textures”, вы найдете шаблоны для рисования лиц. Выберите шаблон, на котором вам будет удобнее рисовать свою маску. Я выбрал этот!


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

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


Теперь нам нужно добавить рисунок маски в созданный нами ранее объект “faceMesh0”. Для этого перейдите в программу Spark AR Studio, кликните по пункту “faceMesh0”, чтобы перевести его в активное положение. В правой колонке, с настройками объекта “faceMesh0”, вы увидите пункт “Materials”, против которого есть знак “+”. При нажатии на него, будет создан новый объект “material0”, в который вы будете загружать ваш рисунок маски. Появится этот объект в левой колонке, в блоке “Assets”, в папке “Materials”.



Переведите объект “material0” в активное положение, и найдите в правой колонке пункт “Texture”. Напротив этого пункта есть кнопка для загрузки файла. Загрузите в программу ваш рисунок маски.



Играя другими настройками объекта “material0”, вы можете подкорректировать свою маску, чтобы сделать её отображение более приятным. Так, например, подкорректировав параметры “Specular”, вы можете добавить к своей маске немного глянца.


В некоторых масках, нужно, чтобы были видны глаза и рот, а в некоторых напротив, их нужно скрыть. В моем случае, нужно показывать глаза, но не показывать рта, так как рот нарисован на маске отдельно. Чтобы включить отображение глаз и рта, активируйте объект маски “faceMesh0”, и найдите в правой колонке пункты “Eyes” и “Mouth”. При активации первого, на вашей маске появятся глаза, второго - рот. Я активирую только “Eyes”.


Наша маска готова, и теперь нам остается добавить её в Инстаграм сторис. Прежде всего, маску нужно сохранить. Для этого в верхнем горизонтальном меню нажмите “File”, а в выпавшем списке выберите пункт “Export”. Завершите сохранение маски, повторным нажатием кнопки “Export” в появившемся окне, и введя название для файла маски.


После сохранения файла маски на вашем ПК, программа Spark AR Studio, предложит вам перейти в Spark AR Hub, для добавления вашей маски в Инстаграм. Если такого предложения не было, просто перейдите по ссылке - Spark AR Hub.


Spark AR Hub - это менеджер управления вашими масками. С помощью него вы можете добавить вашу маску в Инстаграм. Процедура добавления маски достаточно просто и интуитивно понятна: вам нужно указать название вашей маски, добавить обложку маски, далее, загрузить в менеджер файл с вашей маской и указать, где ваша она должна появиться - на Фейсбук или в Инстаграм. Очевидно, если вы делаете маску для Инстаграма, то нужно указать - Инстаграм.


После добавления маски, в течении часа она пройдет модерацию, и, если все в порядке, маска станет доступной в сторис, в Инстаграм.


Вот и все! Как я уже писал, в посте я рассмотрел процесс создания одного типа масок - маски лица. Но, возможности программы Spark AR Studio намного шире, и создавать с её помощью можно самые удивительные эффекты и маски для Инстаграма. Если вам интересна эта тема и вы хотите глубже изучить вопрос создания масок для Инстаграм и Фейсбук, то вы можете посмотреть видео уроки, которые можно найти по ссылке - Learning Center.


Развлечения и праздники

AR-маски уже давно пользуются популярностью. В 2015 году они впервые появились в сети MSQRD, а позже стали доступны пользователям Snapchat. С того времени, подход к маскам кардинально изменился. Если раньше они использовались исключительно ради забавы, то сейчас с их помощью создаются рекламные компании, а блогеры расширяют свою аудиторию.

Большой прорыв в области создания данной online технологии случился после того, как Instagram дал эту возможность всем своим пользователям. Однако, никакой инструкции к самому процессу социальная сеть не предоставила. Поэтому мы расскажем вам, как создать online маску в Инстаграм, не имея знаний в области программирования.

Создание Инстаграм-маски в Spark AR Studio

Для начала, необходимо скачать приложение Spark AR Studio. Оно является специальной AR средой социальной сети Facebook, на которой в свою очередь стоит Инстаграм. Программа позволяет создавать новые проекты на основе уже готовой текстуры, которые необходимо заранее подготовить в любом photoshop редакторе, способном работать с прозрачными альфа-каналами.


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

По своей сути, AR Studio схожа с Photoshop, однако значительно сложнее в эксплуатации. В центре окна, расположена главная рабочая зона — Viewport. На ней будет показан весь процесс работы с вашим проектом.

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


Дабы протестировать маску, до выгрузки в Инстаграм, нужно произвести подключение к Spark AR Hub. Это определенная среда Фейсбука, куда попадают новые авторские маски, для тестирования. Для этого необходимо создать тестовую ссылку.

Из чего состоит Инстаграм маска

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


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

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

Создание Инстаграм маски

В Spark AR нажмите на кнопку Create project и начните создавать свой проект. Загрузите в программу созданную ранее текстуру и она автоматически появится в области Texture.

В рабочей зоне вам предстоят манипуляции с двумя функциями FaceMesh и FaceTracker. Первая предназначена для синхронизации вашей текстуры с 3D объектами, вторая для отслеживания движений лица.


Дабы синхронизировать работу эффектов с движением мышц лица, нажмите комбинацию: Scene>FaceTracker>Insert, после чего повторите тоже самое с функцией FaceMesh. В разделе Assents создаем материал для работы. Там же выбираются различные типы нанесения на кожу. Связав FaceTracker, совместите рисунок и текстуру.

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

Тестирование

Для стабильной работы маски, ее нужно протестировать. Нажав на Test on device, работа передается на ваш телефон. Получив проект, начните его проверять при различном освещении и положении лица. Частой проблемой является некорректная работа во время движения. Вернувшись в программу доработайте недостатки перед публикацией.

Как добавить маску в Facebook и Instagram

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

После проверки модерацией, маска появится в разделе “Галерея эффектов”. Ожидая проверки, вы можете создавать ссылки и делиться ею с друзьями. Если ваш проект понравится администрации, он будет одобрена и появится в общем доступе, с упоминанием о создателе.

Читайте также: