blog/
Виртуальная реальность и Facebook Spark AR
AR (augmented reality) — одна из основных разновидностей XR — стремительно шагает по планете. Самым заметным применением этой технологии, конечно, стали маски в Instagram. Их популярность связана с тем, что Facebook поставил (и совершенно верно) на максимальное упрощение процесса создания развлекательного контента для своей платформы.
Для того, чтобы сделать создание эффектов и масок как можно более доступным как можно более широкому кругу людей, Facebook выпустил среду разработки Spark AR. Она развивается с 2017 года (тогда она называлась Camera Effects Platform), и благодаря своей простоте и доступности приобрела огромную популярность. Есть и другие среды для AR (например, Adobe Aero), но, пожалуй, по простоте и распространенности эта — основная.
- Расширенная реальность (XR) — относится ко всем реальным и виртуальным средам, созданным с помощью компьютерных технологий и носимых устройств. «X» в XR — это переменная, которая может обозначать любую букву.
- Виртуальная реальность (VR) — включает в себя все захватывающие впечатления. Они могут быть созданы с использованием исключительно реального контента (видео 360), чисто синтетического контента (сгенерированного компьютером) или их комбинации.
- Дополненная реальность (AR) — это наложение компьютерного контента на реальный мир, который может поверхностно взаимодействовать с окружающей средой в режиме реального времени. С AR нет преграды между контентом CG и реальным миром.
- Смешанная реальность (MR) — это наложение синтетического контента, который привязан к объектам в реальном мире и взаимодействует с ними в реальном времени. Методы смешанной реальности используют окклюзию: сгенерированные компьютером объекты скрываются объектами в физической среде.
Очевидно, основной предпосылкой к развитию подобных приложений (а именно в направлении развития своих приложений идёт 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
Следующая задача, которую можно решить с помощью Spark AR — трекинг пространства: плоскостей и конкретных изображений.
Разберем простой пример: есть модель, и надо её поместить на плоскость перед камерой. Возьмём модель X-Wing Fighter’а из Звездных Войн и загрузим в Spark AR. Чтобы было похоже, будто он летит, добавим ему «огонь» за соплами двигателей. Для этого можно использовать эмиттеры частиц, частицы для примера используем просто сферические, и зададим в настройках эмиттера число
3д модель в Spark AR
Помимо помещения модели просто на некую плоскость, можно привязаться к конкретной плоскости, к конкретному изображению, использовать его в роли маркера. Таким образом можно, например, анимировать плакат:
Plane tracking в Spark AR
Тут в качестве основы использован плакат с нашего прошлогоднего портфолио ревью, и тот же плакат, разбитый на слои в соответствии с их положением друг относительно друга на исходном плакате. Дальнейшим развитием этой идеи может быть анимация и добавление интерактивных областей.
Кстати, текущую версию этого проекта вы можете протестировать, пройдя по ссылке со страницы портфолио на вашем телефоне (для этого вам нужно установленное приложение Instagram).
Вывод
Технология развивается стремительно, и основным сдерживающим фактором сейчас является скорость связи: это одна из основных причин того ограничения на объём сцены, о котором говорилось выше.
Кроме того, технология трекинга и само построение 3д объектов наиболее эффективно работает в приложениях — при этом не все пользователи станут добровольно устанавливать приложение на свой телефон ради нашего проекта. Поэтому тут возникает вопрос нахождения технологии, позволяющей производить это «бесшовно», используя лишь браузер телефона. Об этом — в следующей статье.
Не забудьте подписаться на нас в социальных сетях!
Так вы узнаете о выходе новый статей первыми. ?
Может быть интересно:
- Архитектурный Instagram
- Архитектурный Instagram по-русски
- Интервью: KooZA/rch
- Студии архитектурной школы Бартлетт в Instagram
- Программы для вёрстки, кроме InDesign
