Виртуальная реальность и 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.

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

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

Маски в Instagram

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

Маска ВИД

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

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

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

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

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

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

Маска «ВИД» в Spark AR

Мас­ка «ВИД» в Spark AR

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

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

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

Раз­бе­рем про­стой при­мер: есть модель, и надо её поме­стить на плос­кость перед каме­рой. Возь­мём модель X‑Wing Fighter'а из Звезд­ных Войн и загру­зим в Spark AR. Что­бы было похо­же, буд­то он летит, доба­вим ему «огонь» за соп­ла­ми дви­га­те­лей. Для это­го мож­но исполь­зо­вать эмит­те­ры частиц, части­цы для при­ме­ра исполь­зу­ем про­сто сфе­ри­че­ские, и зада­дим в настрой­ках эмит­те­ра число

3д модель в Spark AR

3д модель в Spark AR

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

Plane tracking в Spark AR

Plane tracking в Spark AR

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

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

Вывод

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

Кро­ме того, тех­но­ло­гия тре­кин­га и само постро­е­ние 3д объ­ек­тов наи­бо­лее эффек­тив­но рабо­та­ет в при­ло­же­ни­ях — при этом не все поль­зо­ва­те­ли ста­нут доб­ро­воль­но уста­нав­ли­вать при­ло­же­ние на свой теле­фон ради наше­го про­ек­та. Поэто­му тут воз­ни­ка­ет вопрос нахож­де­ния тех­но­ло­гии, поз­во­ля­ю­щей про­из­во­дить это «бес­шов­но», исполь­зуя лишь бра­у­зер теле­фо­на. Об этом — в сле­ду­ю­щей статье.

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


Может быть интересно:


Подпишитесь на нас в социальных сетях!

Instagram
VK
Facebook
YouTube!
Telegram!

Подпишитесь на обновления



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