Как сделать несколько масок в одной 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.
- Маски и проч. Во-первых, можно делать эти вездесущие маски (текстуры, объекты, привязанные к трекеру глаз, рта, проч.). И, как бы не казалось, что это довольно глупая история, и вообще — сколько уже можно?! — однако, возможностей там масса, и вы ограничены только воображением. Ну и список возможных эффектов всё время растёт!
То есть, принципиально, это работа с лицом и туловищем человека: добавление статических, динамических объектов и текстур (эффекты макияжа и проч.) к лицу, голове, туловищу и рукам человека. - Цветовые фильтры. Это просто цветовые фильтры, разные по сложности, тут все более-менее понятно.
- Работа с фоном. Поскольку Spark успешно научился делать трекинг лица, головы и фигуры, теперь можно использовать эту возможность для того, чтобы маскировать фон и менять его.
- Трехмерные объекты. И это самое интересное! 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 секунд показать все достоинства вашего продукта.
После проверки модерацией, маска появится в разделе “Галерея эффектов”. Ожидая проверки, вы можете создавать ссылки и делиться ею с друзьями. Если ваш проект понравится администрации, он будет одобрена и появится в общем доступе, с упоминанием о создателе.
Читайте также: