sanyuered / wechat-miniprogram-ar-ai

微信小程序AI人脸检测和AR平面跟踪。项目特色是使用的微信官方API。包含AR试戴眼镜、AR测量尺子、AR玩具机器人等。

更新日志

日期	内容
2022-12-12	新增：AI人体检测、AI手部检测、AR图像跟踪等、AR地铁示意图。删除：AI目标分类的package_image_classify目录。旧版AI人脸检测的package_face_detect目录。
2022-10-27	新增：AI人脸检测（新版）、AI文本检测等。
2022-09-20	新增：单样本检测功能。更新：webglBusiness.js升级到官方最新版，也保留了Android深度冲突现象的修复代码。修复：1、在开发者工具预览时，提示超过2MB大小的问题。2、Three.PlaneGeometry、Three.BoxGeometry等的纹理贴图变为黑色，同时画面镜像和闪烁。
2022-01-05	新增：1、AR空间化音频 2、AR+AI图像分类 3、AR玩具机器人增加录制视频功能。
2022-01-01	修复：Android手机画面深度冲突的第3种修改方法。
2021-12-24	修复：使用顶部导航条，遮挡Android手机画面的深度冲突现象。
2021-12-23夜晚	更新：1、平面跟踪的3D模型的默认大小可以自定义 2、3D模型从矩阵更新(matrixAutoUpdate=false)变为属性更新(matrixAutoUpdate=true)，这样可以不用矩阵调整3D模型的姿态。
2021-12-23下午	修复：Android手机画面左上角显示雪花的问题
2021-11-30	新增：1、AR试戴眼镜 2、AR测量尺子 3、AR玩具机器人固定在平面上

介绍

本项目包含以下AR和AI示例。

1、AR+内容：用AR平面跟踪显示玩具机器人。目录package_world_track。

2、AR+效率：用AR测量平面上物体的长度。目录package_measure。

3、AR+游戏：用AR跟随用户位置变化的空间化音频。目录package_spatial_audio。

4、AI人脸检测（新版）：根据AI检测的人脸姿态，将虚拟眼镜佩戴在人脸上。目录package_face_detect_v2。

5、AI文本检测：检测图片和摄像头画面中的文字。目录package_text_detect。

6、AR图像跟踪：用一张图像，检测平面图像的姿态。目录package_image_tracker。

7、AI单样本检测：只用一张图片，检测现实环境中目标物体的位置。目录package_oneshot_tracker。

8、AI人体关键点检测: 检测人体关键点和姿势。目录package_body_detect。

9、AI手部关键点检测：检测手部关键点和手势。目录package_hand_gesture。

10、上海地铁示意图：自然交互地方式查看地图。目录package_plane_track。

删除的示例

AI人脸检测（旧版）：根据AI检测的人脸姿态，将虚拟眼镜佩戴在人脸上。目录package_face_detect。（因为官方不再维护旧版API，所以删除。）

AR+AI：用AI检测图像中的物体，将名称显示在物体上。目录package_image_classify。（因为小程序内存不足而经常退出，所以删除。）

参考文档

平面跟踪

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/plane.html

人脸关键点检测（新版）

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/face.html

文本检测

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/ocr.html

图像跟踪

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/marker.html

单样本检测

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/osd.html

人体关键点检测

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/body.html

手部关键点和手势检测

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/hand.html

获取RGBA相机图像

https://developers.weixin.qq.com/miniprogram/dev/api/ai/visionkit/VKFrame.getCameraBuffer.html

首页

1、AR+内容

玩具机器人站在房间地板上。

2、AR+效率

点击屏幕，开始测量。请将光标的位置，对准被测量物体的两端。

再次点击屏幕，结束测量。

V1版测量结果不准确。若要准确测量，请用V2版。

3、AR+游戏

用户拿着手机走动时，播放器的音量会随着用户的距离变化。在红色平面的后面，播放器的声音消失。

4、AI人脸检测

106个特征点的位置。本项目使用了索引值78（左眼）和79（右眼）两个特征点。

检测旋转的人脸

5、AI文本检测

实时地检测摄像头画面中的中文、英文、数字等。

6、AR图像跟踪

识别图

显示玩具机器人

7、AI单样本检测

显示方框

8、AI人体关键点检测

19个关键点

使用余弦距离，判断第八套广播体操的动作。

伸展运动

扩胸运动

体侧运动

9、AI手部关键点检测

21个关键点

使用欧式距离，判断石头剪刀布手势。

布手势

剪刀手势

石头手势

10、地铁示意图

将地铁示意图固定在桌面上，像看报纸一样查看地图。

如何使用

1、使用微信开发者工具，打开项目源代码，在手机上预览。

2、如果遇到模型不加载、图片不显示等状况，请打开小程序的调试模式。

如果更换3D模型

在源代码中修改常量robotUrl。

  // 机器人模型
  const robotUrl = 'https://m.sanyue.red/demo/gltf/robot.glb';

wechat-miniprogram-ar-ai's Issues

加载模型有一个bug

加载模型，提示TypeError: global.Blob is not a constructor

对glb文件存在什么限制吗

对glb文件存在什么限制吗
比如使用 http://ecological.oss-cn-beijing.aliyuncs.com/ecological/2023-02-20/1627683948001755136.glb
小程序提示3d model not loaded
使用 http://ecological.oss-cn-beijing.aliyuncs.com/ecological/2023-02-15/1625698771801210880.glb 则可以呢

开发工具提示 分包大小超过限制

message：Error: 分包大小超过限制,main package source size 2379KB exceed max limit 2MB [20220624 11:53:20]
开发工具显示以上提示，代码无法通过编译进行调试

小程序真机调试的时候报错

麻烦帮忙看看是咋回事儿吧？
多谢

AR测距不准

使用AR测距时，是否只支持在一个平面上？（而类似iOS自带的测距仪会主动判断在哪个平面上，从而更加精准）

在测试过程中，通过在不同角度和高度来测量同一个物体时，得到的结果是很不一样的。

开发者工具和真机预览一直显示Loaidng 3D

怎么做到把gltf压缩到6kb而且质量这么清晰呢？

怎么做到把gltf压缩到6kb而且质量这么清晰呢？图片转gltf太大了，至少几百kb

版本冲突

在npm install的时候提示
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @tensorflow/[email protected]
npm ERR! node_modules/@tensorflow/tfjs-converter
npm ERR! @tensorflow/tfjs-converter@"2.1.0" from the root project
npm ERR!

请问如何处理呢？

画面镜像和闪烁

ar环境下修改模型的贴图就会画面镜像
plan的贴图修改后也是黑色的一片

fetch-wechat.js" is not defined

fetch-wechat.js" is not defined

您好，请问更换眼镜模型为面具模型后，缩放和位置应该怎么调整呢

您好，请问更换眼镜模型为面具模型后，缩放和位置应该怎么调整呢

切换小程序视图再次进入的时候，相机背景会变成红色，无法渲染相机背后的视图，请问如何解决

请问模型一直加载不出来是哪里没设置好呢

加载的glb模型如果自带贴图，模型无法显示

if (source.bufferView !== undefined) { sourceURI = parser.getDependency('bufferView', source.bufferView).then(function(bufferView) { isObjectURL = true; var blob = new global.Blob([bufferView], { type: source.mimeType }); sourceURI = URL.createObjectURL(blob); return sourceURI }) }

这个blob 微信小程序暂时无法使用， 请问这里可以怎么修改？

加载模型报错global.blob is not a constructor 是什么原因

cannot read property "'create'"

开发工具 报这个错误 是啥问题呐？

AR平面跟踪修改glb模型frame.camera发生异常

[修改glb模型中某个mesh的map，或者对某个mesh添加map，frame.camera均会发生水平镜像，导致加载的模型定位不稳定。

如下图 ，风扇正常在右边，却显示在左边。
https://m.silkroadcg.com/smart_ranch/model/test.jpg

模型格式支持

请问模型除了glb和gltf还能支持其他格式吗，gltf-loader.js 是怎么获取的，能不能拓展支持其他格式呢

安卓模型黑色问题

作者你好！我这边遇到一个问题，问题出现在安卓平台，当我加载自己的gltf模型（gltf+bin+纹理）时贴图不被渲染，导致模型黑色显示，初步估计问题出现在webglBusiness.js中，劳烦作者解决一下此问题