AR

从前端工程师到高级AR工程师

1 个月前

感谢阿里巴巴资深前端工程师柏子的投稿。

本文将简单讲述图像追踪的原理和如何用JS+WebRTC实现带追踪的AR。

GitHub地址

上一篇文章讲了如何在Web端实现图像识别,但我们认知中的AR通常还包括追踪技术,也就是把虚拟的模型定位到现实场景中。在演示视频中,绘制全部采用2D Canvas API ,先绘制WebRCT得到的背景,然后计算出Marker的变化矩阵,接下来把动画绘制到Canvas上。伪代码如下

// 绘制相机视频
ctx.drawImage(bg, 0, 0);
ctx.save();
let [ a, c, e, b, d, f ] = posMatrix;
ctx.transform(a, b, c, d, e, f);
// 绘制动画视频
ctx.drawImage(mv, 0, 0, mv.videoWidth, mv.videoHeight, 0, 0, markerWidth, markerHeight);
ctx.restore();

要实现定位主要有以下步骤:特征点提取 ->特征点匹配 -> 计算变化矩阵

图片特征点提取:

有些长得好看的人,无论穿什么马甲,总能在人群中一眼被认出来(长得难看的人也会被一眼扔出去)

图片也是这样的,有些点特别明显,无论怎么变化(旋转,缩放),总是能被稳定地找出来

以上gif是计算图片的特征点,每次旋转图片,计算新的特征点(红色),有些特征点不受旋转影响,总是能被找到。越复杂的算法,找出的特征点越稳定。

找出一张图片的特征点之后,算法会给每个特征点计算一个类似“ID”的值,ID和特征点是一一对应的,可以通过ID来判断特征点,在两张图片中,我们把ID最相近的两个点匹配在一起,当成同一个特征点。

v2-73624ee02412e7a31dd5733d3016626f_b.d295af741cd6.jpg

当然如果两个ID相差很远,那么也不能把这两个点当成同一个特征点,而是抛弃这两个特征点。

如果图片只发生移动而没有缩放旋转,特征点A,在图一的位置是(x1,y1)而在图二的位置变成了(x2,y2),我们就可以计算出图一到图二的图像变化(x2-x1,y2-y1)。上图中明显还发生了旋转,和缩放。所以需要多个特征点进行计算,计算出来的结果可以是三维矩阵或者四维矩阵。

在AR追踪时,预先计算好Marker的特征点和特征点ID,对于摄像机每一帧的照片,计算出每张照片的所有特征点,通过特征点ID匹配,找到Marker在照片的位置,并且在这个位置上绘制图形或者模型。

这些图片匹配的算法都很经典,从opencv里面信手拈来,有人把opencv里面一部分算法写成了js版本(最简单的那一部分-.-),使用JS也能进行图像追踪,JSFeat这个库好几年前就写了,不过可能那几年AR还没有进入大众视野。使用这个库可以完成以上说的寻找特征点,特征点匹配和计算变化矩阵,具体可以参考Demo的代码

一般来说,越稳定的识别算法,对性能要求越高。

  1. 首先每张图要从几百万的像素里反复计算,找出几百个特征点
  2. 这几百个特征点又要计算ID并且和另一张图的几百个特征点进行距离计算
  3. 当匹配了两张图的特征点之后,这些特征点还要拟合出误差最小的变化矩阵

在这几步下,JS的计算能力捉襟见肘,轻轻松松跌破30帧。纯JS无法完成的情况下,要么借助Native计算,要么使用WebAssembly,这两个都不是很容易...

视频中展示的demo是在iOS11下用iPhone7运行480*640分辨率的效果,明显看出有丢帧的情况,主要原因还是特征点识别不稳定,需要更稳定的算法和更强的计算力支撑。

再提供一个SIFT的算法介绍,供大家深度学习。也欢迎大家留言讨论图像算法,如何在Web环境运行复杂的图像算法。更欢迎各位耐心看到这里的工程师们点个赞!

2
推荐阅读