[muzzik 分享]:使用 opencv 实现 WebAR 的可能性 | 征稿活动V5

# 前言

现在各种增强现实游戏层出不穷,各种MR设备也在持续更新,可以看出将来增强现实领域有很大的发展潜力…

# 效果图(半半成品)

本来是打算做一个AR示例的,不过时间不够了,最近状态也不好,就稍微讲下怎么用 opencv 实现 WebAR 的方向吧

# AR 怎么实现的?

AR,即为增强现实,既然我们要增强现实,那么就要识别并定位现实中的物体,获得相机的坐标,才能准确的展示虚拟画面

那么,计算机是怎么确定两张图片中对应的关系?其实就是通过特征检测,如果匹配成功,则会返回关键点数据

大家看完可以自行查看代码,这里基本不做代码上的讲解

1. 将输入图片转为灰度图

为什么要转为灰度图,当然是为了降维,减少计算量

2. 检查关键点

特征检测有很多种算法,这里我们使用的是 AKAZE
`7833)U$NJWN9EQ$842MG(Q

参考链接

3. 匹配关键点

这里使用的是 knnMatch(暴力匹配)
CI49NTFTF$_B{8Z%9KE1

现在我们拿到了关键点的数据,该怎么用呢?其实下一步就是通过关键点估计单应性,什么是单应性呢?有什么用?

4. 查找单应性

在 opencv 中我们是使用 findHomography 这个函数查找单应性的

# 单应性变换有什么用?

  • 估计相机姿势以增强现实
    homography_pose_estimation

  • 透视去除/校正
    homography_perspective_correction

  • 图片拼接
    homography_panorama_stitching

知道了它有什么用?那么想必会更加更多大家对它的兴趣

简单的说,单应性矩阵是一个 3x3 的矩阵(投影变换),可以从一个平面上的点转换到另一个平面上

如果我们这一步返回的单应性是无效的,那么就说明两张图像没有匹配成功

参考链接:

5. 估计相机姿态

这一步需要提前进行相机校准,什么是相机校准?让我们看看下面的图片

fileListImage

相机是存在边缘被拉伸(畸变)的情况的,相机校准就是确定相机畸变系数,以及相机矩阵(包含了像素值,相机焦距),下面是校准后的图像

fileListImageUnDist

获得了相机矩阵后,我们就可以通过 solvePnP 函数来估计相机姿态了

参考链接

# 扩展

1. 计算和匹配关键点是非常昂贵的操作,怎么优化?

答案是使用跟踪算法,我们不必每一次需要去检测关键点,这里推荐稀疏光流

1.1 光流算法是什么?

e93de32558e94c588d7b4356cd9ec325
简单的说就算检测两帧图片中明暗点的移动

1.2 光流有什么好处?

就算目标移出摄像机外,我们任然可以继续跟踪,包括放大缩小操作

参考链接

2. 怎么提高精度

使用手机的陀螺仪,加速度器来实现

参考链接

3. 如何在现阶段使用 WebAR 系统?

当前 cocos 的 AR 正在开发中,但是我们还有第三方选择

easyar(国内):https://www.easyar.cn/price.html
8thwall(国外):https://www.8thwall.com/
blippar(国外):https://www.blippar.com/

# 怎么使用 opencv 开发 Web 程序

  1. 使用 C++ 在 Visual Studio 上面进行调试,再通过 linux 系统进行发布 wasm 版本
  2. 直接使用 opencv.js 版本

建议各位不要在 opencv.js 身上浪费时间,因为这货 没有文档接口不完全一致属性缺失,我的时间都浪费在 opencvjs 上了

# 1. 怎么在 windows 上编译 opencv?

# 1.1 使用 docker 安装 opencv 的镜像(依赖 WSL 功能,win10 及以上)

# 1.2 创建一个容器

docker run --name 容器名 -p 80:80 -t -d 镜像名

共享文件夹:-v D:/test:/usr/databases

  • D:/test:宿主机目录
  • /usr/databases:容器机目录

# 1.3 启动容器后参照下面链接尝试编译一个示例项目

https://github.com/EdwardLu2018/wasm-ar

# 代码

文章代码:https://github.com/1226085293/mk_ar_demo
opencv 官方 C++ 示例:https://github.com/MasteringOpenCV/code.git

注意,除了只实现简单的功能外,尽量都不要使用 opencv.js,大坑

5赞

前排,关注

2楼 关注

大佬,opencv.js有近8m,编译的时候就溢出了,你是怎么编译出来的

下载的官方的,自己搜下就有

我想咨询一下你采用的是什么方案。我排除了cdn和裁剪包的方案,尝试修改creator 的大小限制,但是昨晚找了很久没找到怎么改,今早上特来发文请教

我没遇到你的情况,过太久不太记得了,有可能我当时编译的原生包

如果你知道自己想用什么方法,可以从 C++ 里单独提取出来然后编译为 WASM

好的,谢谢

image :smirk:我们AR项目的方案

1赞

可以啊,性能咋样,和 MindAR 对比过吗

好用,感谢

官方不是有 MindAR 吗?怎么不用?

没注意到这个,我搜索下

ar降级看过,demo跑起来没看到效果,发帖子没人回(可能是我帖子质量不好)。

好吧,cocos 的常规操作,毕竟龙骨和spine bug就没断过 :rofl: :rofl: