从前端工程师到高级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();要实现定位主要有以下步骤：特征点提取 ->特征点匹配 -> 计算变化矩阵图片特 ………………………………