WeChat MiniProgram WebAR下载 - WeChat MiniProgram WebAR源码下载

WeChat MiniProgram WebAR

Ai源码

1.0.0

下载

中文自述文件
中文源代码分析

已更新

日期	更新
2022-07-23	新功能：在 iOS 上使用实验 Worker。请参阅“图像AR和3D蒙版”。修复问题：“Image AR”暂时无法在iOS上运行。
2021-12-11	新增内容：添加了使用 OpenCV WebAssembly 的图像跟踪器。请参阅“使用 OpenCV 的图像 AR”。
2021-09-07	新增内容：添加了颜色跟踪器模式。请参阅“彩色AR”。
2021-08-15	新增：为图像 AR 添加了视频遮罩模式。这是一个 CSS 3D 转换，不需要 Three.js。请参阅“图像AR和视频蒙版”。更新：用平面几何体替换精神几何体。
2021-04-03	更新：恢复Image AR的“访问相机”模式。
2021-03-15	新增内容：通过 Three.js 将 AR 面具的显示从 2D 更改为 3D。更新：由于“访问相机”模式速度较慢，因此被删除。
2019-08-16	更新：项目结构已修改。颜色跟踪器和对象跟踪器被删除。修复“访问相机”模式在 Android 上无法正常工作的问题。
2019-08-06	修复问题：Android微信频繁调用“wx.canvasToTempFilePath”函数时，微信会崩溃。
2019-08-01	更新：实现了透视变换。
2019-07-15	更新：实现了NFT（自然特征跟踪）。
2019-07-08	新：实现了仿射变换。

微信Web AR简介

这是微信Web AR。 2019年7月5日，微信小程序支持AR。添加了一个名为“CameraFrameListener”的新 API。

相机帧侦听器 API

我们可以使用新的 API 创建 AR 效果。该演示演示了使用“tracking.js”和“jsfeat”库的 AR 跟踪器效果。

“tracking.js”将计算机视觉算法和技术引入浏览器环境。 “jsfeat”也是一个 JavaScript 计算机视觉库。我们可以进行实时图像和人脸检测。

track.js 和 JSFeat

微信小程序索引页

图像 AR 和 3D 蒙版

iOS微信版本号8.0.24及以上：将使用Experimental Worker。

Android 和其他：它不会使用实验工作人员。

使用演示扫描下面的图案图像。

图案图像上有猫胡子。

平移和缩放的效果。

旋转的效果。

使用 OpenCV 进行图像 AR

这与上面相同。支持图像旋转。

图像旋转 30 度。

图像旋转 90 度。

图像 AR 和视频蒙版

使用演示扫描下面的旋转图像。

视频播放器已打开并与图像对齐。

彩色增强现实

使用演示扫描黄色。期待下面的效果。

起到隐藏的效果。

自定义突出显示区域的颜色。

人脸增强现实

使用演示扫描脸部。期待下面的效果。

平移和缩放的效果。

由于演示中的地标简单且基础，因此仅对旋转图像进行平移和缩放效果。

如何替换“猫胡子”图像

您可以替换 2D 蒙版图像的默认 url。

文件：/package_image_tracker/pages/photo/photo.js 和 package_face_tracker/pages/photo/photo.js

 // a url of sprite image
const modelUrl = '../../utils/cat_beard.png' ;

“modelurl”图像的宽度和高度应为 256 x 256、512 x 512 和 1024 x 1024 等。

如何更换Image AR的图案图像

文件：/package_face_tracker/utils/imageBusiness.js

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

图案图像

如何将图像放在其他位置以进行图像AR

在图案图像上选择一个轨迹点，该点用于设置“猫胡子”图像。

文件：/package_image_tracker/utils/modelBusiness.js

 // a index of a track point on a pattern image
const trackPoint = { 
    x : 185 , // the width of the pattern image is 375
    y : 224 , // the height of the pattern image is 375
} ;

Face AR如何将图像放在其他位置

这是一张脸部 31 个关键点的图。

地标

例如，数字27和数字29是嘴的两侧。

文件：/package_face_tracker/utils/modelBusiness.js

 // index of the track points of the face
const trackPointA = {
    // index of a landmark
    id : 27 ,
    // X coordinate
    x : 155.69898111309 , // the width of the face image is 375
} ;
const trackPointB = {
    // index of a landmark
    id : 29 ,
    // X coordinate
    x : 216.53075265284997 , // the width of the face image is 375
} ;