Web 前端中的增强现实（AR）开发技术

本文作者 GeekPlux，首发外刊君也可以去GeekPlux 博客阅读本文。注明作者和地址即可转载。

增强现实(以下简称 AR）浪潮滚滚而来，Web 浏览器作为容易获得的人机交互终端，浏览器正在大力发展 AR 技术。很多 Web 前端工程师也在寻求职业转型，所以我在这里汇总了我近半年的相关研究成果。本文努力将目前的前端方向推向 AR 技术再次列出，细节不重复（确保文章长度不长），只做总结和科普（所以文章中有很多链接），分散写一个多月（拖延），欢迎从事该领域或研究的道教朋友纠正和补充。

Web AR 初音未来

AR 它可以简单地理解为将虚拟图像实时叠加到现实场景中的技术，并且可以交互[1]。我个人认为 AR 比 VR 主要原因是：

AR 其优点是将现实场景转化为背景，将现实世界与数字世界无缝连接。

当然，这种无缝目前还没有提及，但一直在进步。 Web 前端如何做 AR 前，有必要先了解一下 AR 实现的 2 主要方法及其关键技术：

AR 实现方法和关键技术

AR 实现的主要方法有 2 种[2][3]：光学透视 (Optical see-through) 视频透视 (Video see-through)。目前，市场上通常使用头戴设备 2 种方式中的 1 种或 2 所有种类都使用，而手持设备(手机、平板电脑等)通常使用视频透视。光学透视是在眼前的半透明镜片上显示计算机生成的数字图像，使现实场景和虚拟信息同时出现在视网膜上。视频透视技术是通过相机将现实场景输入电脑，与虚拟对象集成压缩，然后统一呈现给用户。两者各有优缺点[4]：光学透视中的现实场景显示更自然、更直接，因为它没有由计算机处理；虽然简单，但也存在定位精度低、匹配不准确、显示延迟等问题。由于视频透视集成，匹配准确，最终显示效果同步度高，生成的显示结果可根据用户需要进一步处理；但难以实现，失去了部分真实感。目前（2017 年底） Web 要实现前端 AR，都靠视频透视技术。

此外，计算机视觉技术还在 AR 它起着至关重要的作用。因为实现 AR 核心是识别和跟踪。首先，相机应首先识别基准标志、关键点、光学图，然后根据特征检测、边缘检测或其他图像处理方法实时跟踪；最后将虚拟图像叠加到真实场景中。根据 2008 根据年度统计结果，近十年来著名 AR 会议 I ** AR 追踪技术论文占了 20%以上[3].

Web AR

根据上一节的阐述，我们可以得出结论：实现 AR 在浏览器中，需要识别、跟踪和渲染三个步骤。此外，还可以结合传感器提供更多的交互或让步 AR 渲染更准确，通过网络连接云加速计算或交换更多数据。如下图所示，这是我自己整理的 Web AR 流程图。Web AR 或者说移动 AR 在便携性、传感器丰富、自带网络等方面还是有很大优势的，这里就不多说了。

Web AR 流程图WebVR 规范

首先，Web AR 它仍然是一项前沿技术，没有标准或成熟的库供使用，但一些大公司和一些开发商正在积极推广。2017 年 10 月 2 日 W3C 的 WebVR 组 发布了 WebVR 规范 www.xilukeji.com 版的初稿，www.xilukeji.com 版本仍在热火朝天地修订中。

WebVR 在浏览器中体验是一个开放的标准 VR。我们的目标是让每个人都更容易体验 VR，不管你有什么设备。 -  www.xilukeji.com

为什么这篇文章的题目是 Web AR，这里却提到 WebVR 呢？因为 WebVR 规范的部分 API 对 Web AR 也适用。比如 VRDevicePose 摄像头位置可以获得。这是目前唯一的接近 Web AR 有了标准，我们只能开发标准接口，以适应绝大多数设备。扩展阅读：WebVR 为了增强现实，智能手机 AR 的 WebVR API 扩展。

WebARonARKit, WebARonARCore

ARKit 和 ARCore 苹果和谷歌制作的移动 AR SDK，我相信很多功能都是相似的:运动跟踪、环境感知和光感应 AR 对这两个开发者感兴趣 SDK 都不陌生。但两者都在移动 AR 的 SDK，于是谷歌的 AR 团队提供了 WebARonARKit 和 WebARonARCore 开发者可以使用两个库 Web 技术来基于 ARKit 和 ARCore 从而实现开发 WebAR。这两个库目前还处于试验阶段，想吃螃蟹的人赶紧试试。实际上，实现原则与特定系统相结合（iOS 和 Android）扩展了 WebVR API。Google AR 团队包装了一个 www.xilukeji.com 提供了一些实用的库 AR API，包括 ARView, ARReticle, ARPerspectiveCamera, ARDebug 和 ARUtils 等。

www.xilukeji.com

2017 年 SIGGRAPH(顶级图形会议) www.xilukeji.com 可谓大放异彩，有人做到了 Web AR 相关的 session就是用了 www.xilukeji.com 来讲解。www.xilukeji.com 是 Jerome Etienne 开发的一款 Web AR 库，可用十行 HTML 就实现 AR，并有 60 FPS 的帧率。但其实 www.xilukeji.com 它主要包装以下库：

WebRTC。下面将详细解释，主要是获取视频流。JSARToolKit。ARToolKit 可以说是第一个开源 AR 框架，在 1999 年发布，至今已更新。虽然历史悠久，但仍被广泛使用（官方网站的风格根本没有历史感）。它主要提供识别和跟踪 ** rker 本文附录还补充了功能。www.xilukeji.com, www.xilukeji.com, A-Frame。这些都是基于的 WebGL 渲染库用于渲染 AR 下文将扩展环境中显示的内容。

由此观之，www.xilukeji.com 就像一把瑞士军刀，把所有的轮子拼在一起，简单易用。 GitHub 和 Twitter 都很活跃，有什么问题可以直接问他。

WebRTC 获取视频流

我们在前三节提到了一个正在形成的标准和两个框架 Web AR 最新进展。期待标准的发布肯定是黄花菜凉了，但我们可以自己丰衣足食。

我们刚才说的 AR 首先要识别，就要用了 WebRTC 技术。WebRTC（Web 实时通信，Web Real-Time Communication），顾名思义，它是一种支持网页浏览器实时语音对话或视频对话的技术。其中一个很重要 API：getUserMedia() 摄像头的视频流可以实时获取，这是视频透视 AR 实现的前提(目前 iOS 11 刚才支持这个 API，Android 很早就可以用了)。通过视频流，我们可以分析特征点，用计算机视觉算法识别和跟踪视频流中的事物。这里有 2 还个要点也要提一下:一是 getUserMedia 前置摄像头是默认获取的。如果你想获得后置摄像头的视频流，你需要使用它 www.xilukeji.com() 通过设备的音频和视频设备，具体参考 demo；二是要用 https 打开网页访问摄像头。

www.xilukeji.com, JSFeat, ConvNetJS, www.xilukeji.com, www.xilukeji.com 识别与追踪

获取视频流后的工作是识别和跟踪。您可以将视频流视为一帧一帧的图像，因此处理视频流的过程可以理解为图像处理的过程。但这也涉及到如何传输视频流的问题，通常有两种方式：

1. 视频流直接在前端处理

可直接在前端进行图像处理 www.xilukeji.com 和 JSFeat。这两个库类似于前端的计算机视觉，包括提取特征点、人脸识别等。把 WebRTC 视频流直接传输并调用 API 你可以得到你想要的结果。对于一些成熟的算法，如人脸识别，你可以直接得到识别结果。如果你想识别更复杂的对象，你也可以计算自己的特征点，但这可能在前端缺乏计算能力，下面将讨论性能问题。

说到计算机视觉，我们必须提到深度学习。毕竟，许多图像处理算法现在都被深度学习打败了。ConvNetJS，是斯坦福大学开源的前端深度学习框架，可以让你在前端完成深度神经网络的训练。www.xilukeji.com则是 Google Brain 团队，功能和 ConvNetJS 类似。现在 ConvNetJS 好像不怎么维护，www.xilukeji.com 还在频繁更新中，感兴趣的同学可以试试。另一个深度学习库密集开发 www.xilukeji.com 它允许你在浏览器中操作训练好的 Keras 模型（Kears 是著名的深度学习开发框架)，支持 WebGL 2。

这些框架在主页上提供了丰富的 Demo，很有意思，玩一下也许会激发你的灵感。

2. 前端将视频传输到后端，后端处理后返回到前端

另一种处理视频流的方法是将其传输到后端进行处理。后端处理的选择数不胜数，现在实现了 AR 大部分都是用的 SLAM 算法，后端处理后返回前端结果。所以如何传输成为我们前端学生的难题，通常有两种方法:

将图片信息传输到后端。Canvas 提供了两个 API，一个是 toDataURL，它可以生成图片 base ** 字符串；另一个是 toBlob，这种方法是异步的，可以将图片转换成 Blob 因为文件对象是二进制的，传输到后端更方便。具体来说，后者比前者高一点。传像素信息到后端。WebGL 的 readPixels 可以获得方法 framebuffer 中像素值。

此外，还应该有其他方法。简而言之，目标是将前端图像信息传输到后端，可以使用传输方式 AJAX，也可以用 WebSocket，根据场景确定。

本节主要讨论识别和跟踪。事实上，除了简单地处理图像和视频流外，我们还可以通过移动设备的各种传感器数据获得更多的距离、深度、光等信息，使识别跟踪更加准确。

A-Frame, www.xilukeji.com, www.xilukeji.com, www.xilukeji.com, WebGL 渲染与交互

谈完识别和跟踪，终于该谈渲染了。A-Frame 是 Mozilla 团队在 2015 一年开源的做 WebVR 但是前几天 A-Frame 团队发布的 aframe-xr 包括一些 Web AR 组件。一开始我们也说过 VR 和 AR 有些是重叠的，所以使用 A-Frame 各种组件很少的代码构建各种组件 AR 所需要的 3D 立体世界。提到 3D，不得不提 WebGL。WebGL 是 OpenGL ES 你可以理解浏览器端的实现 OpenGL 的子集。用 WebGL 你可以在前端操作每个像素点。懂一点图形学的同学一定知道它的力量，可以调用 GPU，因此，涉及到前端 GPU 它也缺不可。WebGL 虽然强大，但写作极其复杂，学习成本也很高，前端最著名 3D 库 www.xilukeji.com 将繁琐的 WebGL API 包装和优化，这样你就可以用可读性更好的代码在前端书写 WebGL。www.xilukeji.com 和 www.xilukeji.com 做类似的事情，但它只支持 2D 渲染，但它仍然很容易使用，如果你只是想使用它 WebGL 做复杂的渲染，但不涉及 3D 场景，不妨试试。www.xilukeji.com 更牛，是游戏引擎，也是封装的 WebGL 高性能渲染在前端，但它和 www.xilukeji.com 的关注点不一样，如果你对渲染的精细程度非常有要求，比如光线、阴影等，那么你可以考虑下 www.xilukeji.com，毕竟这是款由微软前员工开发的游戏引擎啊……

这些基于 WebGL 的渲染方法，有一个共性的难题是如何交互，比如 hover, click 效果如何实现。其实在 Web AR 中交互非常局限：如果是桌面设备即电脑，和浏览网页的交互差不多，有 hover, click, drag 拖拽等；如果用的是移动设备，即手机、平板，则可能有 zoom 的交互（这里多嘴一句，其实移动 AR 中，应该尽量避免手指去 zoom 的交互，而应该引导用户用移近或移远设备来进行放大缩小）。这些实现起来要依赖于 光线投射算法 Ray casting 方法。www.xilukeji.com 直接提供了 Raycaster 类供实现 ray casting 算法。其实原理很简单，就是摄像头（这里的摄像头不是指手机的摄像头，而是你渲染时的 Camera，可以参考 www.xilukeji.com 中的 Camera）视作视点，与你在屏幕上触碰的点坐标连城一条射线，看这条射线与你视图中哪些物体相交。

Ray casting 算法

这一节主要讲了渲染与交互，事实上在实现 AR 的时候，识别追踪和渲染交互是同时进行的，如何给用户更好、更流畅的体验是现在 Web AR 的又一大难题。

性能

性能是很多人关心的问题。目前浏览器的算力确实还不足以与客户端去媲美，但较之前也有了巨大的提升。识别和追踪本质上是像素级的计算，对算力的要求都很高，因此 ** ker-based 的 AR 定位效率通常比 ** kerless 的要高很多。此外，计算机视觉算法的效率对性能影响也很大，比如人脸识别目前较其他识别要成熟很多，所以人脸识别的算法在 Web 前端运行还算流畅。

提升性能的方法有很多种，大家一般会先想到用 WebGL 调用 GPU 加速，其次会想到用 Web Worker，WebAssembly。前两者我都试过，把纯计算的代码移到 WebGL 的 shader 或 Web Worker 里，这两者虽然都是加速计算，但适用场景不同。shader 可以用于加速只和渲染（重绘）有关的代码，无关渲染的代码放入 shader 中反而会造成重复计算。Web Worker 适用于事先计算或实时性要求不高的代码，如布局算法。WebAssembly 我还没在做 AR 的时候用过，还有一个库 www.xilukeji.com也没试过，希望有大神试过之后告诉我有什么效果。

还有一种变相“提升”性能的方法是用滤波算法（比如卡尔曼滤波）将卡顿降到更小，让用户从视觉感受上似乎更流畅。

结尾

现在 Web AR 大潮刚刚开始，有很多高地需要人去攻克，比如光照估计、性能优化等，希望有兴趣的同学可以积极参与进来。而且 Web 前端无论是技术还是人口都发展迅速，充满了无限可能，有限的只是你的想象力。我很久之前做了个人脸识别 + AR 的小 demo，在 GitHub 上 www.xilukeji.com，大家可以玩玩，其实就几行代码。下一篇可能会写写 Web 前端做人脸识别相关的文章，感觉又给自己挖了个大坑，希望我的拖延症早日治好。

附录：AR 开发技术

参考文献 [2] 中曾总结了当时所有的 AR 开发技术，如下表:

AR 开发技术

这张表将 AR 开发工具分成了四类，分别罗列出来。其实目前大多的 AR 开发都是用 Unity 去做的，很多第三方 SDK 也都是先集成到 Unity 上，再由 Unity 输出到对应设备所需的格式。表中的 Vuforia据我观察是目前用的最多的第三方 SDK。ARToolKit 则在 Web 前端和移动端用的很多，它的开源版是基于标记的 (Marker-based)，也提供机器学习的训练方法，让你可以将任意图片训练成 Marker。另外由于这张表是 2015 年的，当时苹果公司的 ARKit 和谷歌的 ARCore 这 2 个 SDK 还没有横空出世，可以将其归到表中的第三行。

参考文献[1] Azu ** R T. A survey of augmented reality[J]. Presence Teleoperators & Virtual Environments, 1997, 6(4): 微信[2] Billinghurst M, Clark A, Lee G. A survey of augmented reality[J]. Foundations and Trends in Hu ** n-Computer Interaction, 2015, 8(2-3): 73-272[3] Zhou F, Duh B L, Billinghurst M. Trends in augmented reality tracking, interaction and display: a review of ten years of I ** AR[C] //Proceedings of the 7th IEEE/ACM International Symposium on Mixed and Augmented Reality. Washington: IEEE Computer Society Press, 2008: 微信[4] Rolland J P, Fuchs H. Optical versus video see-through head-mounted displays in medical visualization[M]. Cambridge: MIT Press, 2000, 9: 微信

上海西陆信息科技有限公司 承接各类微信小程序开发制作、小程序定制、APP 网站 开发制作，联系电话 18221533805、15900430334