Онлайн урок. Создание инстаграм маски в Spark AR с эффектом zoom

Маски в инстаграм. Создание эффекта Zoom
Создание текстуры камеры

Начните с открытия Spark AR Studio и создайте новый проект.

Этот эффект использует видео, снятое камерой, в качестве текстуры в сцене. Эта текстура называется текстурой камеры. Чтобы добавить ее в свой проект:
  1. Выберите камеру на панели «Scene».
  2. В инспекторе нажмите « +» рядом с «Texture Extraction» .
Маски в инстаграм. Текстура камеры в Spark AR

Она будет указана как cameraTexture0 на панели « Ресурсы».
Маски в инстаграм. Создание текстуры каммеры
Маски в инстаграм. Создание объектов для маски
Материал будет указан на панели «Активы» как material0.

Вам нужно будет внести пару изменений в свойства материала в Инспекторе:
  1. Измените тип шейдера на Flat. Это эффективный шейдер, который можно использовать для материалов, которые не должны отражать или пропускать светоподобные 2D-поверхности.
  2. Вместо применения текстуры в разделе « Diffuse» нажмите стрелку рядом с «Texture», чтобы создать патч и открыть редактор патчей.
Мы будем использовать Редактор патчей, чтобы применить текстуру камеры к материалу.

Ваша маска должна выглядеть так:

Маски в инстаграм. Создание материалов для маски
Измените размер прямоугольника, чтобы он занимал весь экран. Вы можете сделать это в Инспекторе:

  1. Нажмите на каждое поле рядом с Size .
  2. Выберите «Fill Wight» и «Fill Height» .
Чтобы создать материал для прямоугольника, нажмите «+» рядом с «Материалами в Инспекторе»:

Добавление текстуры камеры

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

Создать прямоугольник и материал

Чтобы добавить прямоугольник:
  1. Нажмите Добавить объект.
  2. Выберите Rectangle.
Он будет автоматически добавлен как дочерний элемент Canvas, поэтому он масштабируется вместе с экраном устройства.

Маски в инстаграм. Создание патчей маски
Применение текстуры камеры

Начните с создания патча для представления текстуры камеры. Нажмите на cameraTexture0 на панели активов и перетащите ее в редактор патчей - вы увидите оранжевый патч.

Маски в инстаграм. Изменение свойств материалов в Spark AR
Затем щелкните правой кнопкой мыши в редакторе патчей и выберите патч преобразования текстур из меню.
Маски в инстаграм. Создание патчей маски 2
Texture Transform патч-визуальный шейдер. Его можно использовать для применения множества различных преобразований к текстурам в вашей сцене.

Чтобы подключить эти патчи:
  1. Подключите RGBA выход в текстурах камеры патча к Texture вводу в Texture Transform патча.
  2. Подключите Texture выход в Texture Transform патча к порту диффузной текстуры патча материала.
Маски в инстаграм. Соединение патчей маски
Добавление Mouth Open patch

В готовой маске rectangle увеличивается в ответ на открытый рот, создавая эффект zoom.

Создаем патчи

Построение этой логики начинается с трекера лица, чтобы обнаружить чьи-то движения лица:
  1. Нажмите « Добавить объект» и добавьте трекер лица на сцену - он будет указан как facetracker0 на панели «Сцена».
  2. Перетащите трекер лица в Patch Editor.
Серия патчей будет создана, нам нужен последний - FaceTracker0 .

Маски в инстаграм. Добавление интерактивности к маске
Затем создайте патч, который позволит нам определить, насколько открыт рот - патч Mouth Open:
  1. Щелкните правой кнопкой мыши в редакторе патчей.
  2. Выберите патч Mouth Open из меню.
Mouth Open патч имеет два выходных порта:

В этом уроке вы узнаете, как создать маску в инстаграм, создающую эффект масштабирования (zoom) в ответ на различные движения лица. Мы будем использовать интерактивные и логические патчи в редакторе патчей.

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

Загрузите образец содержимого, чтобы следовать этому руководству или примените его используя свои ассеты. Образец включает в себя готовый проект - вы можете использовать его как образец или для импорта ассетов.

В этом уроке мы рассмотрим:
  1. Создание текстуры камеры.
  2. Добавление текстуры камеры в прямоугольник.
  3. Создание маски с эффектом увеличения в ответ на открытый рот или поднятые брови.
  4. Использование экранного патча для переключения между двумя эффектами.
  5. Добавление аудио к маске.
    Маски в инстаграм. Смена типа данных патча
    Для этого эффекта вы будете использовать порт Mouth Openness. Это выводит сигнал, который указывает, насколько открыт рот.

    Чтобы увеличить размер текстуры в ответ на то, насколько открыт рот, вы можете использовать патч Add. Выберите этот патч из меню в редакторе патчей.

    Тип данных патча по умолчанию установлен на Numeral - вы можете проверить это, выбрав патч. Вы увидите число, написанное в синей коробке под патчем.

    Щелкните это синее поле, чтобы изменить тип данных. Выберите Vector 2 из выпадающего меню, потому что мы меняем масштаб 2D-объекта, а не 3D-объекта:

    Маски в инстаграм. Патч Mouth Open
    Мы будем использовать вход Scale в этом патче, чтобы указать текстуре увеличивать или уменьшать масштаб.

    Подключите патчи

    Начните с подключения порта Face в трекере лица к порту Face в патче Mouth Open.

    Маски в инстаграм. Патч 2D Transform Pack
    Наконец, выберите 2D Transform Pack из меню. Этот патч можно использовать для трансформации 2D объектов.
    Затем подключите:
    1. Открытость Mouth порт либо из X входов в Add пластыря.
    2. Добавить патч к Масштаб порта в 2D преобразования пакета .
    Маски в инстаграм. Подключение всех патчей
    Чтобы применить преобразование к текстуре, подключите патчи вот так:
    Маски в инстаграм. Подключение всех патчей 2
    Текстура теперь масштабируется, но выглядит не совсем правильно.
    Маски в инстаграм. Подключение всех патчей к текстуре
    Чтобы это исправить, нам нужно настроить некоторые значения в патчах:

    Начните с патча Add. Измените значения X и Y в патче Add на 1. По умолчанию для масштаба установлено значение 0, поэтому размер текстуры увеличивается в два раза в зависимости от того, насколько открыт рот.

    Затем отрегулируйте значения Pivot в 2D Transform Pack до 0,5.
    0.5 - это центр кадра, поэтому текстура масштабируется от центра.

    Вот как ваш эффект должен выглядеть сейчас:

    Маски в инстаграм. Масштабирование текстуры в Spark AR
    Реагирование маски на поднятые брови

    Логика в этой части эффекта немного отличается от логики, которую мы использовали с патчем Mouth Open. Это связано с тем, что текстура изменяется каждый раз, когда брови подняты, а не в зависимости от того, насколько они подняты.

    Счетчик для бровей :)

    Начните с создания патчей, которые будут считать сколько раз подняты брови. В редакторе патчей выберите:
    1. Eyebrows патч.
    2. Pulse , Switch, Counter и Option Picker патчи.
    Маски в инстаграм. Создание маски Zoom онлайн
    Измените тип этого варианта Picker на Vector 2 - еще раз , потому что мы масштабируем 2D объекты. Затем подключите:
    1. Face порт в трекере лица к Face порту Eyebrows Raised.
    2. В Brows выход на Pulse патч.
    3. Подключите порт Pulse патч к Increase порту в Counter патче.
    Маски в инстаграм. Ответ маски на поднятые брови Spark AR 2
    Маски в инстаграм. Ответ маски на поднятые брови Spark AR
    В результате соединения этих патчей, когда трекер лица обнаруживает, что брови подняты, патч Pulse передаст это сообщение патчу Counter.

    Следующие действия:
    1. В патче Counter установите Maximum Count на 3, чтобы обнаруживать поднятые брови 3 раза, а затем начинать считать заново.
    2. Подключите счетчик к Option в Option Picker.
      Переключение между эффектами

      Чтобы настроить логику для переключения между эффектами, выберите патчи «Screen Tap», «Switch» и «If then Else» в меню «Patch Editor».

      Screen Tap обнаружит, когда кто-то коснулся экрана своего устройства. Соединение патчей:
      1. Screen Tap на Flip патча Swith - это нужно чтобы создать триггер для переключения между эффектами.
      2. Подключить Swith к Condition патча If then Else
      Маски в инстаграм. Переключение между эффектами Spark AR
      Маски в инстаграм. Ответ маски на поднятые брови Spark AR 3
      Маски в инстаграм. Переключение между эффектами Spark AR 2
      Добавление музыки к маске Spark AR

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

      Все проекты Spark AR Studio включают в себя объект, называемый микрофоном. Он захватывает голос пользователя и воспроизводит его в эффект. Вы собираетесь взять звук, захваченный микрофоном, и использовать патч Audio Delay, чтобы добавить эхо. Это будет передано патчу, представляющему динамик, который будет воспроизводить звук в сцене.

      Начните с добавления спикера:
      1. Нажмите Добавить объект .
      2. Выберите Speaker в меню

      Чтобы создать патч для динамика:
      1. Выберите speaker0 на панели «Сцена».
      2. Перейдите к инспектору.
      3. Нажмите на стрелку слева от Аудио в Инспекторе

      Желтый патч будет добавлен в редактор патчей:


      Затем добавьте патч для микрофона:
      1. Выберите « Микрофон» на панели «Сцена».
      2. Перетащите его в редактор патчей.

      Будет добавлено фиолетовое пятно:


      Маски в инстаграм. Микрофон и спикер в Spark AR
      Маски в инстаграм. Добавление аудио в Spark AR
      Финалочка:
      1. Отсоедините патч Add от патча 2D Transform.
      2. Подключите выход Option от Picker к Condition от If then Else патч.
      3. Подключите Add в Else порт от If then Else патч.
      4. Подключите порт If Then Else к входу Scale патча 2D Transform.
      Этот раздел графика должен выглядеть так:

      Создаем Эхо маску в Spark AR

      В меню редактора патчей выберите патч задержки аудио - Audio Delay.

      Соединение пачтей:
      1. Выход Microphone патча к аудио входу в Audio Delay.
      2. Выход патча Audio Delay на аудио вход патча Speaker.

      Вот как будет выглядеть график:

      Затем внесите некоторые коррективы в значения в патче Audio Delay. Начните со значений Active 1 и Active 2. Их редактирование сделает эффект задержки более интенсивным:
      • Установите флажок рядом с Active 1 и установите время 1 на 200 .
      • Установите флажок рядом с Active 2 и установите время 2 на 400 .
      Редактирование значения обратной связи приведет к многократному повторению ввода. Для этого эффекта установите его на 20.


      Собственно эхо


      Используйте порт Mouth Openness в патче Mouth Open, чтобы послать сигнал в этот раздел графика. При подключении порта Mouth Openness к патчу Audio Delay через патч To Range эхо становится более заметным, когда пользователь открывает рот шире.

      Вы подключите патч To Range ко входу патча Audio Delay , который контролирует интенсивность эффекта.

      Экспоненциальное сглаживание поможет сделать так чтобы звук не менялся слишком резко.

      Создайте патчи To Range и Exponential Smoothing, используя меню в редакторе патчей.

      Маски в инстаграм. Изменение голоса в Spark AR
      Маски в инстаграм. Настройка микрофона в Spark AR
      Теперь подключите:
      1. Mouth Opene порт в Mouth Openess патч к верхнему входу в To Range патча.
      2. Выход патча To Range на вход Input в патче Exponential Smoothing.
      3. Выход патча Exponential Smoothing на вход Wet патча Audio Delay.


      Чтобы закончить эффект, установите:
      1. Максимальное значение в To Range patch на 100. Это определит диапазон громкости.
      2. Значение демпфирования в патче Exponential Smoothing до 500.
      Вот как будет выглядеть готовый раздел графика:

      Есть много способов сделать маску в инстаграм с эффектом эхо. Например, измените значения в патче Audio Delay или поменяйте его на

      еще один патч аудиоэффекта, типа Pitch Shifter.



      Читайте также:
      Маски в инстаграм. Изменение голоса в Spark AR 2
      Made on
      Tilda