mrdysbv / arwebb Goto Github PK

1. Chinese README

2. Chinese Source Code Analysis

https://sanyuered.github.io/WebAR/

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

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.

This is the same as above. Supports image rotation.

The image is rotated by 30 degrees.

The image is rotated by 90 degrees.

Use the demo to scan a rotating image below.

A video player is on and aligned with the image.

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';

File: /package_face_tracker/utils/imageBusiness.js

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

A pattern image is below.

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
};