WebAR
WebAR copied to clipboard
sanyuered
An Image AR using computer vision. No OpenCV, No Deep Learning. Only JavaScript Implementation.
Updated
| Date | Update |
|---|---|
| 2021-12-11 | New: Added a Image Tracker using OpenCV WebAssembly. Please see the "Image AR using OpenCV". |
| 2021-08-15 | New: Added a video mask mode for image AR. This is a CSS 3D transformation, which does not require three.js. |
| 2021-07-21 | New: This project is the same as https://github.com/sanyuered/WeChat-MiniProgram-WebAR, but it is a pure front-end website. |
Visit a live example
https://sanyuered.github.io/WebAR/
Introduction of Web AR
This is a Web AR Demo.
We can create AR effects by using "tracking.js" and "jsfeat" library.
The "tracking.js" brings computer vision algorithms and techniques into browser environment. The "jsfeat" is also a JavaScript computer vision library. We can do real-time image and face detection.
tracking.js and JSFeat
Index Page of the WeChat Mini-program
Image AR and 3D Mask
Use the demo to scan a pattern image below.
A cat beard is on the pattern image.
A effect of translating and scaling.
A effect of rotating.
Image AR using OpenCV
This is the same as above. Supports image rotation.
The image is rotated by 30 degrees.
The image is rotated by 90 degrees.
Image AR and Video Mask
Use the demo to scan a rotating image below.
A video player is on and aligned with the image.
How to replace the 2D mask "cat beard"
You may replace the default url of a image for 2D mask.
File: /package_image_tracker/photo/photo.js and /package_image_tracker/camera/camera.js
const modelUrl = '../../assets/cat_beard.png';
How to replace the pattern image
File: /package_face_tracker/utils/imageBusiness.js
const patternImageUrl = '../../assets/face_pattern.jpg';
A pattern image is below.
How to put a image on an other position
Select a track point on a pattern image, the point is used to set the "cat beard" image.
File: /package_image_tracker/utils/modelBusiness.js
// a index of a track point on a pattern image
const trackPoint = {
x: 186, // the width of the pattern image is 375
y: 140, // the height of the pattern image is 375
};
sanyuered