Вам понадобится обновленная версия Spark AR (студия дополненной реальности, созданная Facebook), изображение вопроса, в котором задается вариант «Какой ____ вы?», и список изображений для результата.

Моя версия проекта находится на Github здесь. Берите у него как хотите.

Часть первая: настройка в Spark AR

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

После открытия пустого проекта в Spark AR первое, что нам нужно сделать, это добавить изображения. Вам понадобится одна фотография с надписью «Какой ты ____?» вопрос, а затем сколько результатов вы хотите включить.

В левом нижнем углу вы увидите раздел Активы. В этом разделе выберите Импорт: с компьютера, а затем выберите файлы изображений.

Эти изображения будут добавлены в ваш проект в папку под названием Текстуры. В Spark AR вы можете думать о текстурах как о верхнем слое краски. Позже мы будем использовать их для освещения материала AR в студии Spark AR.

Добавление трекера лица

Над Assets находится еще одно меню под названием Scene. В правом нижнем углу этого меню выберите Добавить объекты и выберите Face Tracker во всплывающем меню. Теперь наш проект может отслеживать движения лица пользователя.

Однако Face Tracker не является «физическим» объектом, поэтому нам нужно щелкнуть правой кнопкой мыши faceTracker0 в нашей иерархии сцен, выбрать Добавить, а затем выбрать Добавить плоскость. . Это добавит квадрат с рисунком в виде шахматной доски перед человеком в симуляторе и plane0 под Face Tracker в нашей иерархии сцен.

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

Сначала переименуйте material0 в display. Мы будем ссылаться на это позже в нашем скрипте, поэтому важно, чтобы имена совпадали. Затем в разделе Тип шейдера выберите Плоский, а в разделе Текстура выберите «Какой вы _____?» файл изображения, который вы добавили ранее.

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

Подключение к скрипту

Вернувшись в меню Активы, выберите Добавить актив и выберите Сценарий. Это создаст каталог сценариев, включающий пустой сценарий в иерархии под названием script.js. Нам нужно создать два патча; прослушиватель событий и ссылка на наш скрипт.

В разделе Просмотр в самом верху страницы выберите Показать / скрыть редактор исправлений. Пока он будет пустым, но таким образом мы сможем увидеть вещи, которые добавим через секунду.

Затем щелкните правой кнопкой мыши в любом месте редактора патчей и выберите Нажатие на экран во всплывающем меню. Это создаст патч, который будет прислушиваться к прикосновениям пользователя.

Наконец, выберите script.js и выберите параметр В сценарий в меню справа. В раскрывающемся списке выберите Пульс и измените его название на нажать. Когда вы нажмете желтую стрелку, она появится в нашем редакторе патчей в виде желтого прямоугольника. Проведите линию между касанием экрана и касанием, чтобы соединить два патча.

Теперь наш скрипт может взаимодействовать со Spark AR, и мы можем приступить к написанию программы.

Часть вторая: сценарии

Дважды щелкните файл script.js, и откроется ваш редактор кода по умолчанию (я использовал VS Code для этого проекта). Во-первых, вам нужно сослаться на различные API Spark AR, которые нам понадобятся позже, и вы можете сделать это в виде огромного фрагмента, подобного этому:

const Time = require('Time');
const Patches = require('Patches');
const Instruction = require('Instruction');
const Diagnostics = require('Diagnostics');
const Materials = require('Materials');
const Textures = require('Textures')

Затем нам нужно сослаться на наш отображаемый материал (который мы пометили ранее) и создать массив для хранения всех наших изображений результатов, например:

const display = Materials.get('display');
const pics = ['pic1', 'pic2', 'pic3', 'pic4'];

Затем нам просто нужно установить еще несколько вещей, прежде чем мы действительно сможем начать.

let randInterval = null;
let status = 'ready';

Позже мы будем использовать randInterval, чтобы перемещать различные изображения в нашем объектеpics, и мы будем использовать status, чтобы отслеживать ход выполнения программы.

Наконец, нам нужно настроить начальную инструкцию, чтобы пользователь мог видеть, когда он запускает фильтр.

Instruction.bind(true, 'tap_to_start');

Инструкции отображаются в виде белого текста внизу экрана. Их можно включать и выключать с помощью логических значенийtrue иfalse, а отображаемый текст задается с помощью того, что Spark AR называет токеном, который имеет строковое значение. Первый токен, который мы будем использовать, - 'tap_to_start'.

Существует несколько различных токенов инструкций, и вы можете найти их в основной студии Spark AR, выбрав Проект → Возможности → Инструкции → Пользовательские инструкции. Вам также необходимо объявить каждую инструкцию, которую вы будете использовать в Spark AR, выбрав Добавить инструкцию и выбрав дополнительный токен в раскрывающемся меню.

Теперь мы можем перейти к сути нашей программы, которая выглядит так:

Patches.getPulseValue('tap').subscribe(function (e) {
    Instruction.bind(false, 'tap_to_start')
    if (status === 'ready') {
        start();
    }
    else if (status === 'running'){
        return;
    }
    else if (status === 'finished'){
        reset();
    }
});

Первая строка ожидает касания экрана с помощью патча tap, который мы сделали ранее. Когда он «слышит» нажатие, он выключает инструкцию 'tap_to_start' и начинает цикл if для перетасовки наших изображений.

Поскольку мы уже установили статус ready, первым шагом этого цикла является вызов функцииstart().. Мы сами пишем эту функцию, и это выглядит так:

function start(){
    status == 'running';
    
    randInterval = Time.setInterval(function(){
        randomImage();
    }, 100);
    beginCountDown();
};

Во-первых, наш статус меняется на 'running'. Если вы вернетесь к основному циклу if, вы увидите единственное ключевое слово return под оператором else if для этого статуса. По сути, это игнорирует любые дополнительные нажатия во время перетасовки изображений.

Затем randInterval изменяется с null на интервал, который вызывает функцию каждые заданное количество миллисекунд. В этом случае функция, которую мы используем, называется randomImage(), которую нам также нужно записать, и она будет случайным образом выбирать изображение из нашего объекта pics каждые 100 миллисекунд.

Эта функция выглядит так:

function randomImage(){
    let randomNumber = randomlyChoose(0, pics.length);
    let pickedImage = pics[randomNumber]
    display.diffuse = Textures.get(pickedImage);
};

В первой строке случайным образом выбирается число от 0 до длины вашего массива pics. Написание функции javascript для случайного выбора числа из диапазона можно найти с помощью простого поиска в Google. (Я назвал свой randomlyChoose, но вы можете называть свое как угодно).

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

Затем, продолжая withstart(), таймер устанавливается на первый интервал, используя beginCountDown(). Вот эта функция:

function beginCountDown(){
    Time.setTimeout(function(){
        stop();
    }, 3000);
};

Работает аналогично установке интервала. Вышеупомянутая функция вызывает stop() один раз через 3 секунды (3000 миллисекунд), давая пользователю результат.

function stop(){
    Time.clearInterval(randInterval);
    Instruction.bind(true, 'tap_to_reply')
    status = 'finished';
}

При этом также добавляется инструкция для пользователя о перезапуске (с использованием маркера 'tap_to_reply') и изменяется статус программы на 'finished'. Это вызывает последнюю функцию в нашей программе, restart().

function reset(){
    Instruction.bind(false, 'tap_to_reply')
    Instruction.bind(true, 'tap_to_start')
    display.diffuse = Textures.get('which');
    status = 'ready';
};

Инструкции сбрасываются (tap_to_reply выключен, а tap_to_start включен), и материал дисплея возвращается к исходному "Кто ____ вы?" изображение вопроса. Пользователь может нажимать, чтобы использовать фильтр снова и снова.

Следующие шаги

Прежде чем отправить свой фильтр на рассмотрение в Instagram и Facebook, вы можете поиграть с ним множеством дополнительных способов.

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

Вы можете многое сделать! Удачи :)