Я уже довольно давно занимаюсь Spark AR Studio - программой дополненной реальности для Instagram и Facebook. И хотя я сделал довольно крутые визуальные эффекты, я никогда не делал много интерактивного, используя надежные инструменты сценариев платформы. Кажется, что создание новой классной маски - идеальное время, чтобы это изменить, не так ли?

Как и любой хороший пост о проекте DIY, давайте сначала посмотрим на наш готовый результат ...

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

Фильтр медленно гаснет в огне вокруг головы пользователя, когда он открывает рот, и когда рот преодолевает порог открытия примерно на 20%, у пользователя вырастают дьявольские рога и он превращается в демоническую парящую голову.

Довольно жутковато, да? Вот как ты это делаешь ...

Во-первых, мне нужно было найти некоторые активы. Что касается пламени, я пошел в Detonation Films Unit K (прокрутите вниз мимо кровавых взрывов, смеется) и заплатил 7 долларов за съемку горящего черепа. (Спорим, вы не найдете лучшей цены на кадры с пылающим черепом! Love Detonation Films.) Затем я немного изменил цвет в After Effects, превратил его в простой цикл и экспортировал как последовательность PNG.

Что касается рожков, я обратился к TurboSquid и просмотрел бесплатные модели дьявола, а затем взял один из рожков, который мне понравился. После этого пришло время перейти к Spark AR.

Упорядочивать ресурсы в Spark AR довольно просто, если вы уже знакомы с наложением и смешиванием из таких приложений, как Photoshop и After Effects. Для моего эффекта у меня был черный фон на самом нижнем слое, анимированное пламя в качестве среднего слоя и «сетка лица» и рога на самом верхнем слое. Прежде чем пользователь полностью откроет рот, сетка лица и черный фон скрываются, поэтому пламя сначала горит поверх лица пользователя, когда оно исчезает, а затем позади лица пользователя, когда они становятся парящей головой демона. Я думаю, что таким образом получается довольно хороший эффект.

Теперь код. Spark AR Studio использует уникальный вариант JavaScript с модулями реактивного программирования. Большинство из вас, вероятно, немного лучше знакомы с императивным программированием, что может означать, что вам придется изменить мышление, когда вы работаете над созданием своих решений. Как пишет Facebook:

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

Переход от императивного к реактивному программированию требует от вас изменения образа мышления из-за того, как значения распространяются по всей программе.

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

Во-первых, нам нужно объявить модули, которые нам потребуются для нашего эффекта, как константы:

const Materials = require('Materials');
const Scene = require('Scene');
const FaceTracking = require('FaceTracking');
const Reactive = require('Reactive');

Это все, что нам нужно для того, чтобы наш эффект работал, но если вы только начинаете работу со Spark AR, вероятно, неплохо было бы также потребовать Диагностику, чтобы вы могли лучше понять, как разные методы и свойства Работа. Давайте быстро разберемся, зачем нам это нужно для этого эффекта:

  • Materials требуется нам для изменения непрозрачности объекта пламени в нашей сцене. Это связано с тем, что, хотя в Spark AR есть возможность переключать объекты как видимые / скрытые, если вы хотите более детально контролировать непрозрачность, как мы делаем для нашего пламени, вам нужно делать это на уровне материала, а не на уровне объекта (как если бы вы в такой программе, как After Effects).
  • Scene позволяет нам легко выбирать объекты в нашей сцене для манипуляций (чтобы мы могли захватывать наши рога, фон и сетку лица).
  • Facetracking позволяет нам получить подробную информацию о лице и о том, как оно меняется, что означает, что мы можем обновлять наш вид на основе рта пользователя.
  • Модуль Reactive позволяет нам использовать математические функции в наших методах. Это необходимо, потому что реактивное программирование плохо сочетается со стандартным модулем Math JS, и мы хотим иметь множитель для нашего эффекта.

Хорошо! Теперь возьмем то, что нам нужно из сцены и материалов:

//sets necessary scene and material constants
const face = Scene.root.find('faceMesh0');
const bg = Scene.root.find('background0');
const horns = Scene.root.find('horns');
const flameMat = Materials.get('SkullBurn_haloLayer');

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

//measures degree of mouth openness
const mouthOpeness = FaceTracking.face(0).mouth.openness;
//hides horns, background, and facemesh until mouth is at least ~30% open
face.hidden = mouthOpeness.lt(0.3);
bg.hidden = face.hidden;
horns.hidden = face.hidden;
//sets multiplier to make flames fade in a bit less subtle
const mouthMultiplier = Reactive.mul(mouthOpeness,3.05);
//uses multiplied value to tie flame opacity to our multiplied mouth openess
flameMat.opacity = mouthMultiplier;

Ура, волшебный рот контролирует пылающую голову демона!

Я думаю, что комментарии в приведенном выше коде должны достаточно хорошо объяснить код. При этом я понимаю, что большая часть этого сообщения в блоге была учебником довольно высокого уровня, и у вас могут возникнуть дополнительные вопросы. Прокомментируйте ниже или напишите мне в Twitter, если вы хотите узнать больше о работе After Effects, части Spark AR Studio или о чем-то еще! Я буду рад ответить на любые вопросы.