WeChat MiniProgram WebAR

1. Китайский README

2. Анализ китайского исходного кода

Обновлено

Дата	Обновлять
2022-07-23	Новое: используйте Experimental Worker на iOS. См. раздел «Изображение AR и 3D-маска». Исправлена ​​проблема: «Image AR» некоторое время не запускалась на iOS.
2021-12-11	Новое: добавлено средство отслеживания изображений с использованием OpenCV WebAssembly. См. «Изображение AR с использованием OpenCV».
07.09.2021	Новое: добавлен режим отслеживания цвета. Пожалуйста, смотрите «Цвет AR».
15.08.2021	Новое: добавлен режим маски видео для изображения AR. Это 3D-преобразование CSS, для которого не требуется Three.js. См. раздел «AR-изображение и маска видео». Обновление: Замените духовную геометрию плоской геометрией.
03.04.2021	Обновление: восстановлен режим «доступа к камере» в Image AR.
2021-03-15	Новое: с помощью Three.js отображение маски AR изменено с 2D на 3D. Обновление: поскольку режим «доступа к камере» работает медленно, он удален.
2019-08-16	Обновление: структура проекта была изменена. Трекер цвета и трекер объектов удалены. Исправлен режим «доступ к камере», который не работал должным образом на Android.
2019-08-06	Исправление проблемы: если функция «wx.canvasToTempFilePath» часто вызывается в Android Wechat, WeChat аварийно завершает работу.
2019-08-01	Обновление: перспективное преобразование достигнуто.
2019-07-15	Обновление: достигнуто NFT (естественное отслеживание функций).
2019-07-08	Новое: достигнуто аффинное преобразование.

Введение в WeChat Web AR

Это WeChat Web AR. 5 июля 2019 года минипрограмма WeChat поддержала AR. Был добавлен новый API под названием «CameraFrameListener».

API камерыFrameListener

Мы можем создавать эффекты AR с помощью нового API. В этой демонстрации демонстрируется эффект трекера AR с использованием библиотек «tracking.js» и «jsfeat».

«tracking.js» переносит алгоритмы и методы компьютерного зрения в среду браузера. «jsfeat» также является библиотекой компьютерного зрения JavaScript. Мы можем выполнять распознавание изображений и лиц в режиме реального времени.

tracking.js и JSFeat

Индексная страница мини-программы WeChat

Изображение AR и 3D-маска

iOS Wechat версии 8.0.24 или выше: будет использоваться экспериментальный работник.

Android и другие: он не будет использовать Experimental Worker.

Используйте демо-версию для сканирования изображения выкройки ниже.

На изображении выкройки изображена кошачья борода.

Эффект перевода и масштабирования.

Эффект вращения.

Изображение AR с использованием OpenCV

Это то же самое, что и выше. Поддерживает поворот изображения.

Изображение повернуто на 30 градусов.

Изображение повернуто на 90 градусов.

AR-изображение и маска видео

Используйте демо-версию для сканирования вращающегося изображения ниже.

Видеопроигрыватель включен и выровнен по изображению.

Цвет AR

Используйте демо-версию для сканирования желтого цвета. Ожидайте эффекта ниже.

Эффект сокрытия.

Настройте цвет выделенной области.

Лицо AR

Используйте демо-версию для сканирования лица. Ожидайте эффекта ниже.

Эффект перевода и масштабирования.

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

Как заменить изображение "кошачья борода"

Вы можете заменить URL-адрес изображения по умолчанию на 2D-маску.

Файл: /package_image_tracker/pages/photo/photo.js и package_face_tracker/pages/photo/photo.js

 // a url of sprite image
const modelUrl = '../../utils/cat_beard.png' ;

Ширина и высота изображения «modelurl» должны быть 256 x 256, 512 x 512, 1024 x 1024 и т. д.

Как заменить изображение шаблона на Image AR

Файл: /package_face_tracker/utils/imageBusiness.js

 const patternImageUrl = '../../../face_pattern.jpg' ;

изображение шаблона

Как разместить изображение на других позициях для Image AR

Выберите точку трека на изображении шаблона, эта точка используется для установки изображения «кошачьей бороды».

Файл: /package_image_tracker/utils/modelBusiness.js

 // a index of a track point on a pattern image
const trackPoint = { 
    x : 185 , // the width of the pattern image is 375
    y : 224 , // the height of the pattern image is 375
} ; 

Как разместить изображение на других позициях для Face AR

Это карта 31 ключевой точки лица.

достопримечательности

Например, цифра 27 и цифра 29 — это стороны рта.

Файл: /package_face_tracker/utils/modelBusiness.js

 // index of the track points of the face
const trackPointA = {
    // index of a landmark
    id : 27 ,
    // X coordinate
    x : 155.69898111309 , // the width of the face image is 375
} ;
const trackPointB = {
    // index of a landmark
    id : 29 ,
    // X coordinate
    x : 216.53075265284997 , // the width of the face image is 375
} ; 

Известные проблемы

Демо-версия AR на iOS WeChat работает очень медленно.