Онлайн урок. Скелетная анимация для придания движения 3D объектам в Spark AR

Маски в инстаграм. Скелетная анимация в Spark AR
В незаконченном проекте

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

Мы добавили простой градиент к фону сцены, используя шейдерные патчи. Вы можете изменить цвет фона, изменив значения Previous Step и New Color в патче Gradient Step.

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

Тедди содержит скелет с несколькими суставами. Вы можете увидеть скелет внутри объекта в окне просмотра, он выглядит как серые линии.

Наконец, мы применили текстуру и материал к Тедди. Проект выглядит так:

Маски в инстаграм. Скелетная анимация в Spark AR 2
3D объект

Прежде чем приступить к созданию эффекта, стоит взглянуть на 3D-объект. На панели «Сцена» он указан как «teddy»:

Маски в инстаграм. Скелет 3D объекта в Spark AR
Маски в инстаграм. Анимация 3D объекта в Spark AR
Перемещение из стороны в сторону

Вы будете использовать свойства вращения в sping_mid и jack_neck, чтобы заставить куклу двигаться из стороны в сторону.
  1. Выберите spring_mid и jack_neck на панели «Сцена».
  2. В Инспекторе щелкните круг рядом с Вращением .
Снова создайте 2 патча Transition и патч Loop Animation. Вы должны видеть эти 5 патчей:

Маски в инстаграм. Анимация 3D объекта в Spark AR 2
Вы увидите, что Тедди слегка двигается. Чтобы объект двигался правильно, вам нужно настроить свойства в патчах Transition и Loop Animation.

В патче Loop Animation:
  • Установите флажок рядом с Mirrored - он будет отражать движение игрушки, поэтому она будет двигаться вверх, а затем вниз, и снова.
  • Измените Duration на 0,25 - чтобы ускорить анимацию.
В патче перехода, подключенном к jack_base:
  1. Рядом со Start измените Y на 0,08
  2. Рядом с End измените X на 0,01 , Y на 0,1 и Z на 0,01
  3. Измените Curve на Sinusoidal In-Out - чтобы установить темп движения.
Теперь он будет двигаться вверх и вниз от базы. Вы можете поэкспериментировать с настройкой этих значений, чтобы сделать движение более или менее естественными.

В другом патче перехода:
  1. Рядом со Стартом измените Y на 0.1
  2. Рядом с End измените x на 0,01 , Y на 0,114 и Z на 0,01
  3. Измените Curve на Sinusoidal In-Out
Вот как будет выглядеть движение:

Скелет, который он содержит, состоит из:

  1. model_grp - под этим нулевым объектом находятся несколько 3д сеток. Они создают форму Тедди. Мы уже применили текстуру и материал к некоторым из них. Вы добавите последовательность текстур к оставшимся сеткам, чтобы создать внешний вид одежды.
  2. skel_root - это суставы. Вы будете использовать патчи, чтобы контролировать движение этих суставов, чтобы оживить тело и лицо Тедди.

Анимация трехмерного объекта

Выполните следующие шаги, чтобы добавить процедурную анимацию к Тедди с помощью редактора патчей.

Движения вверх и вниз

Вы будете использовать свойства Position в двух соединениях костей - jack_base и spring_mid - для того, чтобы тедди двигался вверх и вниз:
  1. Выберите jack_base и spring_mid на панели «Scene». Вы можете выбрать их обоих одновременно, удерживая нажатой кнопку Ctrl на клавиатуре.
  2. В Инспекторе щелкните стрелку рядом с Position.
Для свойства Position обоих суставов будет создан желтый патч. Мы выбрали свойство position, потому что мы будем использовать патч Transition для установки значений, между которыми перемещается положение суставов, и патч Loop Animation для анимации этого движения.

Щелкните правой кнопкой мыши в редакторе патчей, чтобы открыть меню. Выберите 2 патча Transition и патч Loop Animation. Затем подключите патчи, чтобы ваш график выглядел так:


Маски в инстаграм. Патчи Face Tracker в Spark AR
Вам надо подключить патч, представляющий трекер лица, к этой части графика. Это сделает движение плюшевого мишки зеркалом движений человека и создаст эффект, подобный марионетке. Чтобы создать этот патч:
  1. Нажмите « Добавить объект» в нижней части панели «Сцена».
  2. Выберите Face Tracker
  3. Перетащите трекер лица с панели «Scene» в редактор патчей.
Будут добавлены три патча:

Маски в инстаграм. Пачти анимации в Spark AR 3
Для этой части графика вам нужно добавить еще 4 патча из меню в Patch Editor: патчи Delay, Multiply и 2 патча Add .

Вы будете использовать патч Delay, чтобы добавить небольшую задержку к движению одного из суставов - чтобы создать более естественный эффект. А Add патчи добавят данные лица трекера к движению плюшевого медведя, в то время как Multiply патч будет контролировать, как движется Тедди.

Начните с подключения:
  1. Progress выход в Loop Animation патч ко входу Delay патча.
  2. Delay патч к Progress входу в один из Transition патчей.
  3. Выход патча Transition на второй вход в патче Add. Вам нужно будет установить тип данных патча Add на Vector 3, используя меню внизу патча.
  4. Выход патча Add на вход 3D Rotation в jack_neck.
Вот как будет выглядеть график:

Маски в инстаграм. Подключение патчей анимации в Spark AR
Теперь отредактируйте значения в патчах:
  1. В Loop Animation установите флажок рядом с Mirrored.
  2. В патче Transition рядом со Start установите X на -15, а рядом с End установите Z на 15.
  3. Измените Curve на Sinusiodal In-Out.

Голова Тедди будет двигаться из стороны в сторону:


    Маски в инстаграм. Анимация 3D объектов в Spark AR
    Затем соедините оставшиеся патчи Transition и Add с патчем Loop Animation и патчем, представляющим соединение spring_mid.
    Маски в инстаграм. Анимационные патчи в Spark AR
    В патче Transition установите:
    1. Значение Z рядом с Start до -10.
    2. Значение Z рядом с End до 10.
    3. Curve к Sinusoidal in-out.
    Наконец, подключите трекер лица. Подключите выход 3D Rotation в патче трекера лица к первому входу в патче Add, подключенном к jack_neck.

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

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

    Мы также добавили дополнительный уровень интерактивности, чтобы одежда, на которой одет Тедди, меняла цвет и стиль при касании экрана.

    Загрузите образец содержимого, чтобы
    сделать эту маску в инстаграм. Вы можете адаптировать любой из активов этого эффекта в ваших собственных проектах. В незаконченном эффекте мы уже добавили 3D-объект и фон.

    В этом уроке мы:
    1. Сделаем анимацию трехмерных объектов с помощью скелетов и суставов.
    2. Заставим лицо Тедди двигаться синхронно с движением лица пользователя.
    3. Используем взаимодействия, чтобы изменить одежду Тедди.
    4. Добавим аудио к нашей маске
      Маски в инстаграм. Анимационные патчи в Spark AR 3
      Затем подключите выход 3D Rotation в патче трекера лица к первому входу в патче Multiply. Как и в случае с патчами Add, убедитесь, что патч Multiply установлен на Vector 3. Чтобы закончить эту часть графика:
      1. Измените все 3 значения внизу патча Multiply на 0.5.
      2. Подключите патч Multiply к верхнему входу оставшегося патча Add.

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


      Маски в инстаграм. Анимационные патчи в Spark AR 2
      Опять же, внесите несколько изменений в патчи Transition:

      1. В каждом переходном патче, установите кривой на Sinsusoidal In-Out.
      2. Для переходных патчей в верхней части графика, End позиции до -20 рядом с Z.
      3. Для переходного пластыря в нижней части графика, End позиции до -30 рядом с Z.
      В патче Loop Animation:
      1. Установите флажок рядом с Mirrored.
      2. Установите Duration на 0,25.
      В следующей части этого урока мы подключим эту часть графика к патчу, который обнаружит открытый рот. В результате анимация маски станет более интересной, когда пользователь маски откроет рот. Вот почему нам нужен патч Multiply - чтобы умножить сигнал из патча Mouth Open, создавая более драматический эффект.

      На данный момент в патче Multiply измените нижнее значение входа на 30.

      Повторение маской движений лица

      Теперь давайте сделаем так, чтобы движение лица Тедди соответствовало движению лица пользователя.

      Повторения маской движений рта

      Эта часть графика сделает рот Тедди открытым одновременно с ртом человека, использующего эффект. Он использует свойство Rotation в соединении под названием mouth_lower, которое является потомком jack_neck на панели Scene:

      1. Выберите mouth_lower на панели Scene.
      2. В инспекторе щелкните круг рядом с «Rotation», чтобы создать патч.
      В меню редактора патчей выберите:
      1. Mouth Open
      2. Multiply - вам необходимо изменить тип на Vector 3.
      Соедините патчи, чтобы отрезок графика выглядел так:


      Маски в инстаграм. Анимационные патчи в Spark AR 4
      Голова Тедди теперь будет повторять движения человека, использующего эффект. Вы сами можете проверить это в симуляторе, меряя свою маску

      Поднятие рук Тедди

      Этот раздел графика будет анимировать движение рук Тедди.

      Он использует свойство Rotation в соединениях, называемых wrist_r, wrist_l, arm_l и arm_r. Эти соединения являются дочерними для нулевых объектов, перечисленных в списке jack_base на панели «Scene».

      Итак, как мы делали раньше, начнем с создания патчей, представляющих свойство поворота wrist_r, wrist_l, arm_l и arm_r.


      В меню редактора пачтей выберите:

      1. Loop Animation
      2. Multiply
      3. Pack
      4. 2 Transition
      Соедините их, чтобы ваш график выглядел так:

      Последний шаг - добавить значения в патч Multiply, чтобы указать, сколько рот должен открываться. Установите X в нижнем ряду патча Multiply на 20.

      Рот Тедди должен открыться одновременно с пользователем:

      Маски в инстаграм. Реакция маски на движения лица в Spark AR
      Теперь мы подключим патч Mouth Open к той части графика, которая оживляет руки Тедди. Подключите порт Mouth Openness к верхнему входу в патче Multiply, созданном ранее. Мы выделили патчи, которые вам нужно подключить на изображении ниже:
      Маски в инстаграм. Создать маску марионетки онлайн
      Заставим Тедди моргнуть

      Начните с выбора патча для век - Eyelid в меню редактора патчей. Этот патч собирает данные о положении чьих-то век - поэтому его всегда нужно подключать к порту Face в патче трекера лица.

      Следующий шаг:
      1. Создайте патчи для представления свойств Scale суставов eye_l и eye_r. Глаза Тедди исчезнут - потому что их масштаб теперь контролируется патчами.
      2. Выберите патчи Substract и Pack из меню редактора исправлений.
      Соедините патчи, чтобы отрезок графика выглядел так:

      Маски в инстаграм. Эффект марионетки в Spark AR
      Вы заметите, что мы использовали только порт Left Openness в патче Eyelid. Затем мы использовали Subtract и Pack, чтобы заставить этот сигнал управлять масштабом обоих глаз. Это связано с тем, что глаза, вероятно моргают немного отличающиеся моменты времени, синхронно с человеком, использующим эффект. Мы чувствовали, что для этого эффекта движение обоих глаз в одно и то же время будет выглядеть лучше.

      Вам нужно будет внести некоторые изменения в значения патчей:
      1. Установите для Substract входное значение 0,1. Это сделает глаза Тедди полностью закрытыми, когда человек, использующий вашу маску в инстаграм, моргает. Если вы этого не сделаете, глаза останутся чуть-чуть открытыми.
      2. Установите для обоих входов Pack значение 1. Это обеспечит равномерный масштаб по осям X и Z.
      Глаза Тедди должны мигать одновременно с вашими.


      Движения бровей


      Этот график заставит брови Тедди двигаться одновременно с бровями человека, использующего маску.

      Выберите патч Eyebrows в меню редактора патчей. Этот патч фиксирует данные о положении чьих-то бровей.

      Следующий шаг:
      1. Создайте патчи, чтобы представить свойства Position суставов brow_r и brow_l.
      2. Выберите два Add патча из меню в редакторе патчей.
      3. Изменение типа в Add патче на Vector 3D - потому что мы работаем с 3D объектом.
      Соедините патчи так, чтобы часть графика выглядела таким образом:

      Маски в инстаграм. Эффект марионетки в Spark AR 2
      Для каждого патча Add установите значение Y на 0,07 и значение Z на 0,012. Это устанавливает координаты, между которыми перемещается каждая бровь. Вы можете поэкспериментировать с изменением этих значений для более или менее интересного эффекта.

      Брови Тедди должны двигаться одновременно с вашими!

      Чтобы добавить некоторый дополнительный интерес, давайте также используем порт 3D Rotation в патче Facetracker для управления движением тела Тедди. Подключите выход 3D Rotation в трекере лица ко входу в патче Multiply, который вы добавили ранее. На изображении ниже мы выбрали 4 патча, которые должны быть подключены:

      Маски в инстаграм. Эффект марионетки в Spark AR 3
      Теперь мы можем перейти к одежде Тедди!


      Изменение цвета текстуры в маске для инстаграм. На примере одежды Тедди

      Эта маска использует группу патчей для изменения номера жилета и шапки Тедди, а также цвета одежды, когда пользователь касается экрана. Вы можете проверить это в готовом эффекте, выбрав Simulate Touch в Simulator:


      Маски в инстаграм. Эффект марионетки в Spark AR 4
      Различные числа, которые появляются на жилете Тедди, являются текстурами, импортированными в виде последовательности картинок (sequence texture). Они перечислены на панели «Assets» в разделе «Animation» в качестве inventory_tex.-animation.

      Группа патчей указана на панели ресурсов в разделе Patch, она называется Teddy_outfit.

      Перетащите группу патчей в редактор, чтобы создать корректировку:

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

      Если вы хотите, вы можете изменить цвета в Option Picker, чтобы выбрать другие цвета для эффекта:

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

      Нажмите Back to Main в левом верхнем углу редактора патчей, чтобы вернуться к остальной части графика:

      Маски в инстаграм. Изменение текстур нажатием на экран 3
      Группа патчей имеет 2 входных порта:
      • Tex Input - это то место, где вы будете соединять текстуру.
      • Decal - это то место, где вы подключите последовательность анимации. Логика в группе исправлений приведет к изменению цветов при нажатии на экран.

      и имеет 2 выхода:
      • Output - вы подключите его к патчу, представляющему свойство Diffuse Texture в материале.
      • Decal Frame Output - вы подключите его к патчу, представляющему текущий кадр в анимации.
      На панели «Assets» перетащите teddy_tex и inventory_tex в редактор исправлений. Будут созданы два оранжевых патча, представляющих текстуру и последовательность анимации:

      Маски в инстаграм. Изменение текстур нажатием на экран 4
      Если вы нажмете на маску игрушечного медведя в симуляторе, вы увидите изменения в цвете его одежды и в цифрах.

      Добавление аудио

      Чтобы завершить эффект, добавьте немного дополнительной интерактивности и интереса, используя аудио. Вы установите его для зацикленного воспроизведения на фоне эффекта. Мы уже добавили нужный вам клип, он указан на панели «Assets» в разделе «Audio» как Skeleton_Animation_Groove.m4a:


      Маски в инстаграм. Изменение текстур нажатием на экран 5
      Чтобы создать патч, представляющий материал, к которому мы хотим применить текстуру, выберите teddy_outfit_mat на панели «Assets». В инспекторе:
      1. Перейдите в Diffuse под Shader Properties.
      2. Нажмите на стрелку рядом с текстурой.
      Далее нам нужен патч, представляющий свойство Current Frame - последовательности анимации. Выберите inventory_tex.-animation на панели «Assets». В инспекторе:
      1. Перейдите к Advanced
      2. Нажмите на стрелку рядом с Current Frame
      Соедините патчи, чтобы ваш график выглядел так:

      Используйте объект, называемый Speaker, и ресурс, Audio Playback Controller (assets), чтобы отобразить звук в сцене. Сначала добавьте спикера:
      1. Нажмите +Add Object.
      2. Выберите Speaker в меню.
      3. В инспекторе установите громкость динамика на 50%, чтобы эффект не был слишком заметным

      Затем добавьте контроллер воспроизведения аудио:

      1. Нажмите +Add Asset.
      2. Выберите Audio Playback Controller из меню.

      Теперь присвойте аудиофайл, контроллер воспроизведения звука и динамик. Это сделает аудио клип в сцене. Чтобы сделать это:

      1. Выберите speaker0 на панели «Scene».
      2. В Инспекторе щелкните раскрывающийся список рядом с «Audio» и выберите audioPlaybackController0 из меню.
      3. Выберите audioPlaybackController0 на панели «Assets».
      4. В Инспекторе щелкните раскрывающийся список рядом с «Audio» и выберите в меню Skeleton_Animation_Groove.m4a.
      Маски в инстаграм. Изменение текстур нажатием на экран 6
      Маски в инстаграм. Добавление аудиофайла в маску Spark AR
      Маски в инстаграм. Работа с аудио в Spark AR
      Контроллер воспроизведения аудио - это то место, где вы будете устанавливать, как аудио файл будет воспроизводится в маске. Чтобы сделать воспроизведение непрерывным:
      1. Выберите audioPlaybackController0 на панели «Assets».
      2. В Инспекторе установите флажок рядом с Cycle.

      Теерь аудио будет проигрываться! Возможно, вам придется нажать кнопку "Обновить" на панели инструментов, чтобы услышать это.

      Поздравляю, вы сделали большую работу и создали в Spark AR маску для инстаграм с использованием скелетной анимации!




      Читайте также:

      Made on
      Tilda