WeChat MiniProgram AR TFJS
1.0.0
중국어 읽어보기
| 날짜 | 업데이트 |
|---|---|
| 2022-01-05 | 신규: tfjs를 사용하여 이미지 분류 데모를 추가했습니다. |
| 2021-09-08 | 신규: tfjs를 사용하여 손 포즈 데모를 추가했습니다. 느리고 감지 당 약 500ms입니다. |
| 2021-03-13 | 버그 수정: 1. 안면 2D 마스크 이미지가 Android WeChat에 표시되지 않습니다. 2. 두 번째로 데모 UI에 진입하면 3D 모델이 표시되지 않습니다. |
| 2021-03-11 | 새로운 기능: "face-landmarks-Detection" 및 "TensorFlow.js"를 사용하는 Face AR. 업데이트: "face-api.js"를 "face-landmarks-Detection"으로 바꾸면 "face-api.js" 코드가 제거됩니다. |
| 2019-09-07 | 새로운 기능: "face-api.js"를 사용한 얼굴 감지 및 인식. |
TensorFlow.js는 머신러닝을 위한 JavaScript 라이브러리입니다. TensorFlow.js용 WeChat Mini 프로그램 플러그인이 있습니다.
tfjs-wechat
TensorFlow.js를 사용하여 AR 효과를 만들 수 있습니다. "얼굴-랜드마크-감지" 라이브러리는 TensorFlow.js를 기반으로 합니다.
"face-landmarks-Detection" 라이브러리는 브라우저 환경에서 얼굴 감지 기능을 제공합니다.
얼굴 랜드마크 감지
"얼굴-랜드마크-탐지"를 선택하는 이유는 무엇입니까?
왜냐하면 "face-landmarks-Detection" 라이브러리를 찾을 때까지 얼굴 감지를 위한 TensorFlow.js의 작은 모델을 찾지 못했기 때문입니다.
이 데모는 얼굴 AR을 보여줍니다.
WeChat 미니 프로그램의 색인 페이지
데모를 사용하여 얼굴을 스캔하세요. 아래와 같은 효과를 기대해 보세요.
번역 및 크기 조정의 효과.
회전의 효과.
데모를 사용하여 얼굴을 스캔하세요. 아래와 같은 효과를 기대해 보세요.
번역 및 크기 조정의 효과.
회전의 효과.
데모를 사용하여 손을 스캔하세요. 아래와 같은 효과를 기대해 보세요.
데모를 사용하여 컵을 스캔하세요. 아래와 같은 효과를 기대해 보세요.
WeChat Mini 프로그램에는 일부 npm 패키지가 포함되어 있습니다. npm 패키지를 설치하고 컴파일합니다.
1단계: "npm install" 실행
2단계: "WeChat 개발자 도구 - 도구 메뉴 - 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.
}
}
]
