WeChat MiniProgram AR TFJS
1.0.0
中文自述文件
| 日期 | 更新 |
|---|---|
| 2022-01-05 | 新增内容：添加了使用 tfjs 进行图像分类的演示。 |
| 2021-09-08 | 新增内容：添加了使用 tfjs 的手势演示。它很慢，每次检测大约需要 500 毫秒。 |
| 2021-03-13 | 修复Bug： 1. 安卓微信不显示二维面具图片。 2. 第二次进入demo UI时，不显示3D模型。 |
| 2021-03-11 | 新功能：使用“face-landmarks-detection”和“TensorFlow.js”的人脸 AR。更新：将“face-api.js”替换为“face-landmarks-detection”，删除“face-api.js”的代码。 |
| 2019-09-07 | 新内容：使用“face-api.js”进行人脸检测和识别。 |
TensorFlow.js 是一个用于机器学习的 JavaScript 库。 TensorFlow.js 有一个微信小程序插件。
tfjs-微信
我们可以使用 TensorFlow.js 创建 AR 效果。 “face-landmarks-detection”库基于 TensorFlow.js。
“face-landmarks-detection”库提供浏览器环境中的人脸检测。
人脸特征点检测
为什么选择“人脸特征点检测”？
因为我没有找到用于人脸检测的 TensorFlow.js 微型模型，直到我找到了“face-landmarks-detection”库。
该演示演示了人脸 AR。
微信小程序索引页
使用演示扫描脸部。期待下面的效果。
平移和缩放的效果。
旋转的效果。
使用演示扫描脸部。期待下面的效果。
平移和缩放的效果。
旋转的效果。
使用演示扫描手。期待下面的效果。
使用演示扫描杯子。期待下面的效果。
微信小程序包含一些npm包。我们安装并编译 npm 包。
第 1 步：运行“npm install”
第二步：运行“微信开发者工具--工具菜单--build npm”，会创建一个文件夹“miniprogram_npm”。
该项目已包含预编译的“miniprogram_npm”文件夹。
文件：/package.json
"dependencies" : {
"@tensorflow-models/face-landmarks-detection" : "0.0.3" ,
"@tensorflow-models/handpose" : "0.0.6" ,
"@tensorflow/tfjs-backend-webgl" : "2.1.0" ,
"@tensorflow/tfjs-converter" : "2.1.0" ,
"@tensorflow/tfjs-core" : "2.1.0" ,
"abab" : "2.0.0" ,
"base64-js" : "1.3.1" ,
"fetch-wechat" : "0.0.3" ,
"text-encoder" : "0.0.4" ,
"threejs-miniprogram" : "0.0.2"
} 您可以在“blazeface”文件夹中搜索关键字“BLAZEFACE_MODEL_URL”。搜索结果已修改。
文件：/miniprogram_npm/@tensorflow-models/blazeface
// modified
var BLAZEFACE_MODEL_URL = 'https://m.sanyue.red/demo/tfjs/blazeface_v1' ;您可以在“face-landmarks-detection”文件夹中搜索关键字“FACEMESH_GRAPHMODEL_PATH”。
文件：/miniprogram_npm/@tensorflow-models/face-landmarks-detection
// modified
var FACEMESH_GRAPHMODEL_PATH = 'https://m.sanyue.red/demo/tfjs/facemesh_v1' ;您可以在“handpose”文件夹中搜索关键字“HANDDETECT_MODEL_PATH”和“HANDPOSE_MODEL_PATH”。
文件：/miniprogram_npm/@tensorflow-models/handpose
// modified
HANDDETECT_MODEL_PATH = 'https://m.sanyue.red/demo/tfjs/handdetector_v1' ;
// modified
HANDPOSE_MODEL_PATH = 'https://m.sanyue.red/demo/tfjs/handskeleton_v1' ;您可以在“mobilenet.js”文件中搜索“mobilenet_model_path”关键字。
文件：/package_mobilenet/utils/mobilenet.js
// mobilenet_model_path
'2.00' : {
'0.50' : {
url : 'https://m.sanyue.red/demo/tfjs/mobilenet_v2_050_224' ,
inputRange : [ 0 , 1 ]
} , 您可以替换 3D 蒙版的 gltf 模型的默认 URL。
文件：/package_face_3d_mask/pages/photo/photo.js 和 /package_face_3d_mask/pagescamera/camera.js
// a url of gltf model
const modelUrl = 'https://m.sanyue.red/demo/gltf/sunglass.glb' ; ; 您可以替换 2D 蒙版图像的默认 url。
文件：/package_face_2d_mask/pages/photo/photo.js 和 /package_face_2d_mask/pages/camera/camera.js
// a url of sprite image
const modelUrl = '../../utils/cat_beard.png' ; 这是一张人脸 486 个关键点的图。
486个关键点地图
例如，数字168、数字122和数字351是眼睛的中间。
文件：/package_face_3d_mask/utils/modelBusiness.js
// index of the track points of the face
const trackPointA = 168 ;
const trackPointB = 122 ;
const trackPointC = 351 ;例如，数字0、数字61和数字291都是嘴。
文件：/package_face_2d_mask/utils/modelBusiness.js
// index of the track points of the face
const trackPointA = 0 ;
const trackPointB = 61 ;
const trackPointC = 291 ; 手姿势的地标。
// the "predictions" is an array of objects describing each detected hand.
[
{
handInViewConfidence : 1 ,
boundingBox : {
topLeft : [ 162.91 , - 17.42 ] ,
bottomRight : [ 548.56 , 368.23 ] ,
} ,
landmarks : [
[ 472.52 , 298.59 , 0.00 ] ,
[ 412.80 , 315.64 , - 6.18 ] ,
// etc.
] ,
annotations : {
thumb : [
[ 412.80 , 315.64 , - 6.18 ]
[ 350.02 , 298.38 , - 7.14 ] ,
// etc.
] ,
// etc.
}
}
]
