FaceFilter API позволяет легко создавать фильтры, похожие на Snapchat, в вашем веб-приложении. Построенный на основе нашей нейронной сети распознавания лиц, он сочетает в себе мощь глубокого обучения с универсальностью WebGL / Three.js.
Предварительные требования: для этого урока вам потребуется только хорошее знание Javascript и хорошее понимание основ Three.js.
Хорошо, давайте создадим наш первый фильтр!
Создание папки нашего проекта
Первый шаг: клонируйте или загрузите репозиторий faceFilterAPI (https://github.com/jeeliz/jeelizFaceFilter). Демоверсии находятся по адресу ./demos/threejs. Для этого урока мы создадим очень простой фильтр, в который добавим шляпу Луффи из One Piece!
Демонстрация «куба» - очень хорошее место для начала нашего проекта: этот фильтр добавляет трехмерный куб к обнаруженному лицу, что довольно близко к тому, что мы хотим сделать.
Давайте продублируем папку cube и переименуем ее в luffys_hat.
Примечание: для запуска FaceFilter API наши ресурсы должны обслуживаться через локальный сервер. В командной строке из корня папки нашего проекта запустите сценарий httpServer.py и посетите localhost: 8455, чтобы просмотреть демонстрации.
Структура проекта
Давайте начнем с того, что посмотрим, как устроена наша недавно созданная папка:
Довольно просто, да? Код, который добавляет наш фильтр, находится в demo.js. Если вы посмотрите на него, вы увидите, что код разделен на две функции:
- main (): обрабатывает инициализацию FaceFilter API.
- init_threeScene (): обрабатывает создание сцены three.js вместе с тем, что мы помещаем в эту сцену. Здесь будет добавлена наша шапка.
На данный момент куб расположен в центре лица пользователя. Заменим ее на нашу классную шапку!
Мы сделаем это, выполнив два шага:
- Используйте Blender, чтобы экспортировать нашу модель шляпы в JSON. ПРЕДУПРЕЖДЕНИЕ ОБ СПОЙЛЕРЕ: это будет более сложная часть
- Импортируйте файл JSON в наш проект и добавьте его в нашу сцену.
Экспорт нашей 3D-модели JSON из Blender
Придется использовать Blender, программу для трехмерной компьютерной графики с открытым исходным кодом. Это позволит нам преобразовать нашу 3D-модель в JSON, который является суперэффективным и малоразмерным форматом.
В Blender откройте вкладку File, щелкните файл импорта, а затем выберите соответствующий формат. Теперь вы должны увидеть шляпу в центре окна просмотра.
Теперь нам понадобится специальный экспортер Three.js, чтобы получить нашу шляпу в JSON. Для этого нам нужно загрузить или клонировать репозиторий Three.js на Github (https://github.com/mrdoob/three.js/) и изменить каталоги на three.js / utils / exporters / blender. / addons /. Оказавшись там, вы должны найти папку с именем io_three. Затем мы сжимаем эту папку в zip-файл, который будем использовать для установки экспортера.
Вернемся к Blender. Сначала щелкните вкладку «Файл», затем «Настройки». Щелкните вкладку «Надстройки», а затем внизу выберите «Установить надстройку из файла…».
Выберите вашу недавно заархивированную папку.
Последний шаг - использовать панель поиска в верхнем левом углу вкладки пользовательских настроек, чтобы найти надстройку «Три» в вашем списке, а затем активировать ее, установив флажок.
Примечание. Чтобы не повторять этот процесс каждый раз, когда вы хотите экспортировать модель в JSON, нажмите «Сохранить настройки пользователя».
Почти сделано!
Теперь мы экспортируем нашу модель, используя средство экспорта Three.js (Файл ›Экспорт› Three.js (JSON)). Убедитесь, что вы экспортируете все текстуры и материалы на соответствующих вкладках.
Все настроено! Выберите каталог нашего проекта, создайте папку «модели» и экспортируйте шляпу Луффи.
Хорошо, а теперь вернемся к кодированию!
Кодируем наш фильтр
Во-первых, нам нужно удалить куб из нашей сцены Three.js. Прокомментируйте строку, в которую добавлен куб:
// THREEFACEOBJ3DPIVOTED.add(threeCube);
Затем мы создадим BufferGeometryLoader и вызовем его метод .load (), передав источник и обратный вызов в качестве аргументов.
// Create the BufferGeometryLoader for our hat
var loader = new THREE.BufferGeometryLoader()
// Load our cool hat
loader.load(
‘models/luffys_hat.json’,
function (geometry, materials) {
}
)
Затем мы создаем материал и передаем его сетке вместе с геометрическим объектом:
loader.load(
‘models/luffys_hat.json’,
function (geometry, materials) {
// we create our Hat material
var mat=new THREE.MeshBasicMaterial({
// load the texture using a TextureLoader
map: new THREE.TextureLoader().load( “models/Texture.jpg” )
});
// and finally create our mesh
const hatMesh = new THREE.Mesh(geometry, mat)
}
)
Вы можете изменить масштаб, поворот и положение нашей шляпы, используя:
loader.load(
‘models/luffys_hat.json’,
function (geometry, materials) {
// we create our Hat mesh
var mat=new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load( “models/Texture.jpg” )
});
const hatMesh = new THREE.Mesh(geometry, mat)
// USE THESE METHODS TO MODIFY
// THE SCALE, ROTATION and POSITION
hatMesh.scale.multiplyScalar(1.2);
hatMesh.rotation.set(0, -40, 0);
hatMesh.position.set(0.0, 0.6, 0.0);
}
)
Наконец, мы можем добавить нашу модель шляпы к нашей сцене:
THREEFACEOBJ3DPIVOTED.add(hatMesh)
И тадаа! Теперь вы носите свою шляпу Луффи! Как это круто?? Хотя этот пример является базовым, теперь вы можете использовать полученные знания для отображения других типов объектов.
Упражнения:
- Попробуйте добавить в сцену еще один объект: серьги, очки (посетите: https://www.turbosquid.com/, чтобы найти бесплатные 3D-модели).
- Поиграйте с позицией и параметрами масштаба и придайте себе тупой стиль!
Подвести итог
Поздравляем с созданием вашего первого фильтра с API FaceFilter от Jeeliz!
В этом уроке мы увидели, как обрабатывать 3D-модель с помощью Blender. Мы также узнали, как добавить 3D-модель в нашу сцену Three.js. Довольно круто, да !? Тем не менее, наш фильтр не на 100% реалистичен: тени отключены, и когда пользователь поднимает голову, шляпа закрывает его лицо. Не беспокоиться! Мы будем улучшать фильтр шляпы нашего Луффи в следующем уроке.
В следующей части: мы создадим немного более сложный фильтр, включающий взаимодействие с пользователем и анимацию! Будьте на связи!
