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

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

本文将简单讲述图像追踪的原理和如何用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();

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

图片特征点提取：

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

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