Date | Update |
---|---|
2021-07-21 | New: This project is the same as https://github.com/sanyuered/WeChat-MiniProgram-AR-TFJS, but it is a pure front-end website. |
https://sanyuered.github.io/AR-TFJS/
TensorFlow.js is a library for machine learning in JavaScript.
We can create AR effects with TensorFlow.js. A "face-landmarks-detection" library is based on TensorFlow.js.
The "face-landmarks-detection" library offers a face detection in the browser environment.
This demo demonstrates a face AR.
Index Page of the WeChat Mini-program
Use the demo to scan a face. Expect a effect below.
A effect of translating and scaling.
A effect of rotating.
Use the demo to scan a face. Expect a effect below.
A effect of translating and scaling.
A effect of rotating.
You can search keywords that are "/tfjs/blazeface_v1" and "/tfjs/facemesh_v1" in the "facemesh.js" file.
File: /third_party/facemesh.js
n.loadGraphModel("/tfjs/blazeface_v1",
n.loadGraphModel("/tfjs/facemesh_v1",
You may replace the default url of a gltf model for 3D mask.
File: /package_face_3d_mask/photo/photo.js and /package_face_3d_mask/camera/camera.js
// a url of a gltf model
const modelUrl = '../../assets/sunglass.glb';
You may replace the default url of a image for 2D mask.
File: /package_face_2d_mask/photo/photo.js and /package_face_2d_mask/camera/camera.js
// a url of a image
const modelUrl = '../../assets/cat_beard.png';
This is a map of the 486 keypoints of a face.
For example, a number 168, number 122 and number 351 are the middle of the eyes.
File: /package_face_3d_mask/utils/modelBusiness.js
// index of the track points of the face
const trackPointA = 168;
const trackPointB = 122;
const trackPointC = 351;
For example, a number 0, number 61 and number 291 are the mouth.
File: /package_face_2d_mask/utils/modelBusiness.js
// index of the track points of the face
const trackPointA = 0;
const trackPointB = 61;
const trackPointC = 291;