spark ar studio обучение
Spark ar studio обучение
Специально для создателей масок недавно был создан официальный форум, который называется Spark AR Forum. Здесь все зарегистрированные пользователи могут задать вопросы, поделиться проблемами, и найти решение своих сложностей….
Как вы, наверное, знаете, примерно с октября 2019 года руководством Facebook было принято ограничение относительно использования эффектов, изменяющих лицо. Многие новые маски Фейсбук и Инстаграм, в которых имелись…
Если вы научились делать собственные маски для странички в Инстаграм, то еще не факт, что готовый эффект промодерируют, и он украсит ваш аккаунт. И тогда весь ваш труд…
Мы публиковали в наших подборках очаровательные маски Инстаграм с надписями, а также маски с надписью Moments. Сейчас такие фильтры в тренде и пользуются большой популярностью среди блогеров. Хотите…
Многие новички, которые только собираются овладеть искусством создания масок, ищут, где можно скачать так называемое лицо для маски в Инстаграм. Ведь именно на таких лицах-шаблонах и осуществляется вся…
Последние месяцы одним из самых часто встречающихся и популярных эффектов в масках Инстаграм является фильтр «Искры из глаз». При этом данный эффект может комбинироваться и с другими эффектами,…
13 августа 2019 года Facebook опубликовал информацию о том, что теперь абсолютно все пользователи смогут пользоваться программой Spark AR Studio, самостоятельно создавать маски для Instagram, публиковать эффекты. Теперь…
Spark ar studio обучение
Публикация эффектов
Содержание
Содержание
Чтобы опубликовать эффект, его нужно загрузить в Spark AR Hub и выполнить некоторые действия.
Процесс публикации состоит из следующих этапов:
Выбор названия для эффекта
Название показывается рядом с эффектом в месте его размещения. Названия эффектов, опубликованных одним владельцем, не должны дублироваться.
Выбор платформы, владельца и издателя
Эти параметры определяют, где публикуется эффект, а также какой аккаунт им владеет и управляет.
Опубликовав эффект одновременно на Facebook и в Instagram, вы сможете просматривать статистику по его результативности сразу на двух платформах. При этом процесс проверки придется пройти всего один раз.
Выбор категорий и ключевых слов
Для эффекта также нужно выбрать категории. С их помощью люди могут быстрее находить нужные эффекты.
Чтобы ваш эффект охватил нужную аудиторию, в процессе отправки вы можете добавить к нему ключевые слова.
Добавление демонстрационного видео и значка
Чтобы опубликовать эффект, вам понадобятся следующие объекты:
Демонстрационное видео показывает людям, чего ожидать от вашего эффекта. Также его можно использовать в процессе проверки. В Instagram демонстрационные видео показываются в галерее эффектов.
На снимке экрана ниже вы видите, как значок и демонстрационное видео выглядят в Instagram.
Дата публикации
Вы можете выбрать дату, в которую эффект будет опубликован (после того, как успешно пройдет проверку). Это не повлияет на срок его рассмотрения.
Если вы опубликовали эффект с таргетингом по местоположению до 29 октября 2020 года, заданное вами местоположение будет по-прежнему ограничивать его обнаружение. Если вы обновите эффект после 29 октября, таргетинг по местоположению больше не будет поддерживаться.
Отправка и проверка (до 5 дней)
Когда ваш эффект будет принят, вы получите уведомление на Facebook и в Spark AR Hub. После этого эффект появится на всех указанных вами платформах.
Прежде, чем люди смогут использовать ваш эффект, мы проверим его на соответствие следующим нормам:
Чтобы повысить вероятность того, что ваш эффект примут, следуйте нашим рекомендациям.
Экспресс-курс создания масок для Instagram
Не так давно на одном из наших проектов накануне релиза появилось несколько свободных дней (потому что Apple review team не могла понять, что для тестирования приложения с функцией чата недостаточно одного телефона/аккаунта. Хинт: не ленитесь снимать поясняющие видео — проверено, помогает!).
Как раз в это же время я готовил корпоративные поздравительные маски для Instagram по случаю гендерных праздников (23 февраля и 8 марта) и решил, что дополнительная маска будет не лишней и для проекта нашего заказчика.
Сейчас уже, наверное, никто не будет отрицать важность активного использования соцсетей в качестве канала продвижения своего продукта или услуг. Поэтому большинство крупных и не очень компаний на Западе, да и в России, давно уже используют площадки Facebook/VK и Instagram в этих целях.
Маски для Instagram/Facebook, как правило, служат просто для развлечения пользователей, но нередко используются и в маркетинговых целях. Особенно важно это может быть в моменты первоначального выхода на рынок или представления новых версий продукта/услуги. И однозначно заслуживает внимания, когда успешность проекта зависит от активности обычных пользователей.
Поэтому при наличии свободных ресурсов и, что ещё более важно, идей — создание маски для проекта заказчика кажется мне хорошей возможностью продемонстрировать заказчику степень вовлечённости и заинтересованности команды в успехе всего проекта.
В интернете достаточно много обучающих видео, описывающих процесс создания масок (точнее, эффектов в терминологии Facebook), но на мой взгляд недостаточно материалов описывающих все аспекты как создания, так и распространения масок/эффектов. Поэтому я и решил подготовить эту обзорную статью. Её целевая аудитория достаточно широка: менеджеры проектов, дизайнеры, разработчики. По этой причине я постарался изложить материал на базовом уровне, не вдаваясь особо в детали.
Возможно, в дальнейшем публикация по данной теме будет продолжена с более подробным освещением вопросов программирования или моделирования — всё будет зависеть от проявленного интереса и отклика читателей.
Spark AR Studio (IDE)
Для создания масок/эффектов (далее я буду использовать термин «эффект») Facebook предоставляет специализированную IDE Spark AR Studio.
1. Управление превью
Выбор персоны/лица для превью. Здесь же при наличии подключённой веб-камеры появляется опция для неё — студия не поддерживает «горячее» подключение для USB-устройств, поэтому если камера не была подключена изначально, нужно перезапустить студию.
Пуск/Пауза — очень важная кнопка. Все манипуляции с размещением объектов в пространстве нужно производить в режиме Паузы.
Перезапуск — тоже полезная кнопка, если эффект содержит много интерактивных элементов и меняет своё состояние в зависимости от действий пользователя.
2. Перемещение объектов в пространстве
Перемещение объекта или группы объектов по осям X/Y/Z.
Вращение объекта вокруг осей X/Y/Z.
Изменение размера объекта по осям X/Y/Z.
3. Свойства объекта
4. Дополнительные элементы управления превью
Переключение между фронтальной и задней камерой.
Вертикальная/горизонтальная ориентация видео.
5. Тестирование и дистрибуция
Запуск эффекта на подключённом устройстве (требуется установка приложения-клиента).
Подготовка и загрузка дистрибутива эффекта в Spark AR Hub.
Начинать новый проект рекомендую с одного из предлагаемых студией шаблонов:
Рассмотрим шаблонную структуру сцены на примере классической лицевой маски:
*До этого уровня включительно все объекты — «синглтоны»
С уровня “faceTracker” располагаются объекты, привязанные к изображению человека (или людей), попадающих в кадр. Максимум можно отслеживать пять лиц (задаётся в настройках проекта).
Объекты дополненной реальности можно привязывать к следующим точкам на голове/лице:
Также возможно увязать логику отображения объектов с мимикой лица:
В основном все шаблоны и официальные обучающие статьи используют этот подход.
Однако практически все задачи могут быть решены в коде. Язык программирования — наверное, не будет большим сюрпризом — JavaScript. Встроенного редактора нет, используется любой внешний (VS Code, Webstorm и прочие). Есть модуль поддержки локализации, возможность добавлять в интерфейс нативные элементы управления (picker и slider).
Тестирование и дистрибуция
Отладку эффектов можно осуществлять в самой студии — в её состав входит 7 «моделей» (записанных видео с движениями головы/мимикой мужчин и женщин), плюс можно использовать подключённую камеру и проверять действие эффекта на себе.
Также есть клиент для мобильных устройств (Spark AR Player для Android, для iOS), в который можно выгрузить эффект и проверить его работу на реальном устройстве.
Все эффекты перед публикацией должны пройти ревью в Facebook. Загрузка осуществляется на специальном портале разработчиков эффектов. Её можно инициировать прямо из студии либо сделать экспорт дистрибутива и загружать его вручную.
После заполнения профиля эффекта (с указанием метаданных, загрузкой иконки и видео с примером использования эффекта) дистрибутив проходит через «сито» автоматического контроля, и тут иногда случаются курьёзы:
Судя по всему, AI решил, что это изображение взрыва, а не букет, и отклонил эффект по формальному признаку.
В подобных случаях есть возможность написать апелляцию, и дальше эффект попадёт на рассмотрение человеком.
В начале пандемии коронавируса компания Facebook сообщила, что сроки рассмотрения новых эффектов и обновлений будут увеличены. Недавно было выпущено новое обращение, в котором сообщалось, что «вес» автоматического контроля повышается, поэтому случаи ложноположительных срабатываний могут участиться. Поэтому полезно вступить в группу Facebook, чтобы быть в курсе всех изменений и обращаться за помощью через личные сообщения администраторам группы.
Также есть ограничение на общий размер дистрибутива:
К счастью, с распространением 3D-принтеров специализированное программное обеспечение стало более доступным. Например, упростить модель, найденную в интернете или созданную самостоятельно, можно при помощи приложения Autodesk Meshmixer:
После замены модели на упрощённую эффект соответствует лимитам:
В отношении прохождения ревью из своего опыта могу сказать, что первоначальное ревью проходит достаточно быстро — несколько дней, а вот ревью обновления для уже опубликованного эффекта длилось более недели, причём потребовалось обращение в саппорт, но даже после этого прошло ещё дня два (эти сроки относились к периоду до начала пандемии).
Важный момент: после отправки нового эффекта на ревью есть возможность разослать тестовые ссылки (не более чем 50 пользователям), что позволяет проверить эффект даже без его публикации. Но в случае с обновлением эффекта придётся ждать окончания ревью, так как тестовая ссылка будет вести на первоначальный дистрибутив, а не обновление.
Дополнительно о требованиях к эффектам можно узнать здесь.
В дальнейшем эффекты будут доступны и в приложении Messenger от Facebook (сейчас проводится закрытое бета-тестирование).
Ну и напоследок хотелось бы упомянуть пару общих моментов:
Спасибо за внимание, всем здоровья, и чтобы слово «маски» в большей мере ассоциировалось с чем-то интересным и забавным, а не вот это вот всё…
Как создать маску в Instagram
После того как Instagram открыл доступ к созданию масок всем пользователям, сделать их может любой — и даже специальных технических знаний не потребуется. Совместно с дизайнером GeekBrains Германом Шаловым мы дадим базовую инструкцию, как сделать маску в инстаграме самому.
Скачайте программу Spark AR Studio
Spark AR Studio — это AR-среда Facebook. В ней создают маски на основе нужной текстуры, подготовленной в Photoshop или любом графическом редакторе, который работает с альфа-каналами (прозрачностью). Чтобы создать маску в инстаграме самому, необходима программа Spark AR Studio, которая есть в версиях для компьютера (macOS, Windows) и смартфона (iOS, Android). Рекомендуем скачать обе версии — на смартфоне удобно сразу же тестировать результат
.
Соедините Spark AR на десктопе и смартфоне
Запустите Spark AR Studio. Вас встретит набор предустановленных эффектов и масок — на их примере можно посмотреть некоторые принципы работы. Но изменять пресеты нужно аккуратно: обычно это рушит установленные зависимости объектов, и маска может заработать неверно.
Программа похожа на Photoshop и другие проекты Adobe, поэтому ориентироваться в ней несложно. По центру — окно Viewport, рабочая область, где будет отображаться маска и все манипуляции с ней.
В правом верхнем углу расположено окно Simulator — здесь вы увидите, как маска будет выглядеть на смартфоне. По умолчанию установлена одна модель девайса, но ее можно менять, чтобы посмотреть на маску в разных вариантах.
Чтобы протестировать маску перед загрузкой в Instagram, нужно подключиться к Spark AR Hub — это творческая среда от Facebook для авторов масок. Для этого создайте публичную ссылку для тестирования или соедините Spark AR с подключенным к компьютеру смартфоном:
Создайте трекер лица в Photoshop или загрузите готовый
Маска состоит из трех компонентов: FaceTracker, текстура и материал (эффект, который вы хотите увидеть в маске). Текстуру можно подготовить самому или скачать заранее. Если у вас нет Photoshop или не хочется возиться с этим — скачайте готовую текстуру и пропустите этот шаг.
Если готовы подготовить ее сами, переместитесь в Photoshop или Figma. Дальше порядок действий такой:
Как создать свою маску в Инстаграме
Снова переместитесь в Spark AR и создайте проект: нажмите Create project. Затем загрузите в программу текстуру — перетащите ее в Assets в нижний правый угол, и текстура автоматически отобразится в разделе Texture.
Далее перейдите в рабочее пространство для создания маски — Insert → Scene. Вы будете работать с функциями FaceTracker и FaceMesh. Первая отслеживает движение лица и мимику, вторая — 3D-объект, который синхронизируется с трекером и содержит ваши текстуры с эффектами.
Нажмите Scene → FaceTracker → Insert, затем Scene → FaceMesh → Insert. Эта связка, именно в такой последовательности, поможет привязать маску к мимике и движениям лица. Следите, чтобы трекер был вложен в последовательность папок: device / camera / focal distance. FaceMesh должен быть внутри device / camera / focal distance / facetracker.
Дальше создаем материал для маски. В окне Assets кликните +add asset в правом нижнем углу, затем нажмите Material. Выберите тип нанесения (Shader Type) — например, Retouching сглаживает кожу, а Flat не отражает свет и удобен для рисунков на лице. В большинстве случаев подходит Face paint: он учитывает рельеф и форму лица и органично наносит на него рисунок.
Свяжите FaceTracker с материалом: в правом меню кликните Material, затем Texture и выберите текстуру. Рисунок появится на модели в рабочей области. Маска почти готова.
К маске можно добавить анимацию. Перейдите во вкладку View → Patch editor. Протестируем такой сценарий: маска появляется вместе с улыбкой человека. Что нужно для этого сделать:
В итоге создается созависимая цепочка эффектов, благодаря которой отобразятся три эффекта, когда человек улыбнется.
Для начала вам хватит дефолтных материалов, которые предлагают в программе. А когда наловчитесь работать со Spark AR, сможете создать авторскую маску.
Протестируйте маску
Нажмите кнопку Test on device, о которой мы говорили в первом пункте инструкции, и подождите, пока программа передаст данные на смартфон. Когда появится маска, протестируйте ее в разных положениях лица: улыбнитесь, покрутите головой влево-вправо, вверх-вниз. Проверьте маску при разном освещении и фонах: если вы делали ретуширование лица, оцените, как эффект работает при недостаточном свете.
Если маска слетает при движении, внесите изменения и протестируйте еще раз. Затем переходите к экспорту.
Экспортируйте маску
Здесь все просто: в левом нижнем углу экрана найдите кнопку Export и выберите папку, в которую нужно сохранить маску. Если маска весит больше, чем нужно (допускается 10 Мб, но желательно 2 Мб и меньше), программа предупредит об этом перед экспортом. Обратите внимание, что в Instagram нужно выгрузить именно этот файл, а не файл проекта.
Как добавить маску в Инстаграм
Заключительный шаг: перейдите в Spark AR Hub и загрузите маску, следуя инструкции. Кроме самой маски, нужна еще иконка для нее — требования к иконке есть на сайте Spark AR.
Если хотите официально выложить маску в Facebook или Instagram, нужно записать демо-видео. В ролике расскажите или покажите, как работает эффект, и уложитесь в 15 секунд. Видео должно быть качественным — оно будет отображаться чем-то вроде обложки раздела с масками в вашем аккаунте.
Дождитесь, пока модераторы проверят маску. После этого она появится во вкладке «Галерея эффектов» в окне записи stories в Instagram.
Пока ждете проверку, маской легко делиться с кем угодно через ссылку. Ее можно открыть 200 раз, после чего придется создать новую ссылку. Там же, в AR Hub, можно на 60 минут закрепить маску в вашем инстаграм-аккаунте.
Как сделать маску в Инстаграме? Совсем несложно! — успех во многом зависит от того, какую текстуру для маски вы предварительно подготовили. На факультете графического дизайна GeekUniversity вы научитесь создавать не только качественные текстуры для масок, но и множество других вещей — от простейших иллюстраций до масштабных фирменных стилей. Присоединяйтесь!
AR-маски, популярные сейчас в Instagram, на самом деле появились намного раньше. В 2015 году их увидели пользователи приложения MSQRD, позже они пришли в Snapchat. За пару лет маски стали использоваться гораздо шире, чем просто для развлечения: маски активно используются в рекламе, блогеры с их помощью продвигают аккаунты. Также маски могут привлечь внимание к интересным проектам и социальным проблемам.
После того как Instagram открыл доступ к созданию масок всем пользователям, сделать их может любой — и даже специальных технических знаний не потребуется. Совместно с дизайнером GeekBrains Германом Шаловым мы дадим базовую инструкцию, как сделать маску в инстаграме самому.
Скачайте программу Spark AR Studio
Spark AR Studio — это AR-среда Facebook. В ней создают маски на основе нужной текстуры, подготовленной в Photoshop или любом графическом редакторе, который работает с альфа-каналами (прозрачностью). Чтобы создать маску в инстаграме самому, необходима программа Spark AR Studio, которая есть в версиях для компьютера (macOS, Windows) и смартфона (iOS, Android). Рекомендуем скачать обе версии — на смартфоне удобно сразу же тестировать результат
.
Соедините Spark AR на десктопе и смартфоне
Запустите Spark AR Studio. Вас встретит набор предустановленных эффектов и масок — на их примере можно посмотреть некоторые принципы работы. Но изменять пресеты нужно аккуратно: обычно это рушит установленные зависимости объектов, и маска может заработать неверно.
Программа похожа на Photoshop и другие проекты Adobe, поэтому ориентироваться в ней несложно. По центру — окно Viewport, рабочая область, где будет отображаться маска и все манипуляции с ней.
В правом верхнем углу расположено окно Simulator — здесь вы увидите, как маска будет выглядеть на смартфоне. По умолчанию установлена одна модель девайса, но ее можно менять, чтобы посмотреть на маску в разных вариантах.
Чтобы протестировать маску перед загрузкой в Instagram, нужно подключиться к Spark AR Hub — это творческая среда от Facebook для авторов масок. Для этого создайте публичную ссылку для тестирования или соедините Spark AR с подключенным к компьютеру смартфоном:
Создайте трекер лица в Photoshop или загрузите готовый
Маска состоит из трех компонентов: FaceTracker, текстура и материал (эффект, который вы хотите увидеть в маске). Текстуру можно подготовить самому или скачать заранее. Если у вас нет Photoshop или не хочется возиться с этим — скачайте готовую текстуру и пропустите этот шаг.
Если готовы подготовить ее сами, переместитесь в Photoshop или Figma. Дальше порядок действий такой:
Как создать свою маску в Инстаграме
Снова переместитесь в Spark AR и создайте проект: нажмите Create project. Затем загрузите в программу текстуру — перетащите ее в Assets в нижний правый угол, и текстура автоматически отобразится в разделе Texture.
Далее перейдите в рабочее пространство для создания маски — Insert → Scene. Вы будете работать с функциями FaceTracker и FaceMesh. Первая отслеживает движение лица и мимику, вторая — 3D-объект, который синхронизируется с трекером и содержит ваши текстуры с эффектами.
Нажмите Scene → FaceTracker → Insert, затем Scene → FaceMesh → Insert. Эта связка, именно в такой последовательности, поможет привязать маску к мимике и движениям лица. Следите, чтобы трекер был вложен в последовательность папок: device / camera / focal distance. FaceMesh должен быть внутри device / camera / focal distance / facetracker.
Дальше создаем материал для маски. В окне Assets кликните +add asset в правом нижнем углу, затем нажмите Material. Выберите тип нанесения (Shader Type) — например, Retouching сглаживает кожу, а Flat не отражает свет и удобен для рисунков на лице. В большинстве случаев подходит Face paint: он учитывает рельеф и форму лица и органично наносит на него рисунок.
Свяжите FaceTracker с материалом: в правом меню кликните Material, затем Texture и выберите текстуру. Рисунок появится на модели в рабочей области. Маска почти готова.
К маске можно добавить анимацию. Перейдите во вкладку View → Patch editor. Протестируем такой сценарий: маска появляется вместе с улыбкой человека. Что нужно для этого сделать:
В итоге создается созависимая цепочка эффектов, благодаря которой отобразятся три эффекта, когда человек улыбнется.
Для начала вам хватит дефолтных материалов, которые предлагают в программе. А когда наловчитесь работать со Spark AR, сможете создать авторскую маску.
Протестируйте маску
Нажмите кнопку Test on device, о которой мы говорили в первом пункте инструкции, и подождите, пока программа передаст данные на смартфон. Когда появится маска, протестируйте ее в разных положениях лица: улыбнитесь, покрутите головой влево-вправо, вверх-вниз. Проверьте маску при разном освещении и фонах: если вы делали ретуширование лица, оцените, как эффект работает при недостаточном свете.
Если маска слетает при движении, внесите изменения и протестируйте еще раз. Затем переходите к экспорту.
Экспортируйте маску
Здесь все просто: в левом нижнем углу экрана найдите кнопку Export и выберите папку, в которую нужно сохранить маску. Если маска весит больше, чем нужно (допускается 10 Мб, но желательно 2 Мб и меньше), программа предупредит об этом перед экспортом. Обратите внимание, что в Instagram нужно выгрузить именно этот файл, а не файл проекта.
Как добавить маску в Инстаграм
Заключительный шаг: перейдите в Spark AR Hub и загрузите маску, следуя инструкции. Кроме самой маски, нужна еще иконка для нее — требования к иконке есть на сайте Spark AR.
Если хотите официально выложить маску в Facebook или Instagram, нужно записать демо-видео. В ролике расскажите или покажите, как работает эффект, и уложитесь в 15 секунд. Видео должно быть качественным — оно будет отображаться чем-то вроде обложки раздела с масками в вашем аккаунте.
Дождитесь, пока модераторы проверят маску. После этого она появится во вкладке «Галерея эффектов» в окне записи stories в Instagram.
Пока ждете проверку, маской легко делиться с кем угодно через ссылку. Ее можно открыть 200 раз, после чего придется создать новую ссылку. Там же, в AR Hub, можно на 60 минут закрепить маску в вашем инстаграм-аккаунте.
Как сделать маску в Инстаграме? Совсем несложно! — успех во многом зависит от того, какую текстуру для маски вы предварительно подготовили. На факультете графического дизайна GeekUniversity вы научитесь создавать не только качественные текстуры для масок, но и множество других вещей — от простейших иллюстраций до масштабных фирменных стилей. Присоединяйтесь!