让你的手机浏览器来一场AR风暴

伴随虚拟现实技术的爆发，AR和VR也被应用到各个领域中，而视频直播行业与其融合可谓是“天作之合”，阿里巴巴移动事业群视频播放技术负责人劳永超在LiveVideoStack Meet分享了UC浏览器在WebAR平台研发过程中遇到的问题，以及解决方案。本文为现场分享的整理。

大家好，我是来自阿里巴巴广州UC团队的劳永超，这些年基本是在直播、点播、播放器一线上耕耘的，技术会更加侧重于客户端，今天跟大家分享的内容是关于WebAR的。

在分享开始前，我们需要知道AR是什么？和AR比较贴近、经常一起出现的VR有什么区别？我们用两部电影来说明，相信大家都看过阿凡达和钢铁侠，钢铁侠通过面罩看到的东西是跟现实世界叠加在一起的，这就是增强现实（AR），而阿凡达中的场景则将大脑连接到一个纯粹渲染出来的环境总，也就是虚拟现实（VR）。

AR的现状

我们主要来分享AR部分的技术，那为什么要做这个事情？技术的浪潮总是一波接着一波，从PC的黄金时代、到互联网、再到移动互联网，相信大家对抢船票还是记忆犹新，而下一个崛起的领域并不太好确认，但AI人工智能一定是超级巨大的方向，也是由此我从中选择了一个子命题AR。

在面对这种大的技术潮流，巨头自然不甘寂寞。Google就推出了名为Tango的技术，它可以在摄像头捕捉的画面中添加一些元素效果； Facebook在4月大会上也发布Camera Effects平台，让所有开发者可以通过简单的方式制作出AR的效果；而苹果在WWDC上发布的ARKit让iPhone6S以上的设备具备了实用性非常高的AR能力。这些巨头的行动我相信也能从侧面证明AR未来发展的前景。

UC浏览器 - WebAR平台开发

我们在UC浏览器的平台上面搭建了一个基于HTML5和JS的框架，再通过前端代码完成整个AR相关产品或者营销活动的开发，而所有的支持都是通过底层的识别、追踪、定位等模块来完成的。

那为什么要把AR平台建在Web上？对于Web应用而言，上线过程是开发、灰度循环直到可以发布，所有的事情都是部署刷新就可以，而对于APP则是开发，送审、修改循环，最后发布，这个过程如果比较糟糕是要耗费一个月时间的。但是建立在Web开发也会自身的问题， H5平台本身是有一些缺点的：首先是和JS在一个虚拟机里运行，它的性能可能是不及Native，这个问题对于自身浏览器，我们采用把嵌入一个Native模块用于加速；而对于一些第三方没有接入特定浏览器的，那么它也可以借助未来浏览器内部支持的密集运算，或者是一些Native具有的功能来实现，比如Workers是可以开线程运行，Web VR/AR也正在形成标准， WebASM可以凭借LVN编译器把C的代码生成到一种自解码的形式，因此它也能够达到接近Native的运行效果。

了解了为什么基于Web平台，那AR都需要解决什么问题？我认为主要是三部分：第一是目标的识别，第二是定位，这个定位是指对手机自身的定位，或者说对使用用户的定位，最后是渲染，因为我们是用Web来开发，它在渲染时会不可避免的会涉及到一些3D的性能问题。

目标识别

目标识别通常有两种方式，一种是把一段目标拍下来，直接进行二进制对比，而另一种则是用一些特征描述的方式来把图里具体的一些特征点描述出来，再去跟实际的图进行对比，当两边关联度比较高的点达到达到一定比例时，我们就认为找到这个物体了。

• 特征和匹配

而在实际过程中，因为不同的特征是有不同的性能要求和准确度的，因此我们最终选择一个比较平衡的方式——FREAK，它的特征表示方式来源于人瞳孔的物理构造，从这张图上可以看到，它是从外圈到内圈，不同直径大小的圆作为一个采样的区域，每一层都有6个圆组成一个环，总共有7层，这样每一层就有6个特征，及6个二进制的值去表示这个地方是否大于某一个值，这样总共就会有45个二进制位来表示这个特征。用二进制表示的好处就是在做二进制距离时可以直接通过异或一个指令马上算出来，再用SIMD指令把多个数据拼接成16位，这样通过比较前16位就可以过滤掉很多不相似的特征。

• 多目标匹配

假如在一个场景中有多个物体需要识别，其实在移动端会有一个取巧的方式——分时匹配这些特征，也就是这一帧把所有的资源都投入到一个物体识别，而下一帧会投入到下一个物体，这样在很短的时间就可以识别到多个不同特征。

• 大量目标匹配

但是假如特征非常多的情况又该如何解决？这就需要支持大量的特征——云方案，首先把图片通过裁减、缩放减小它的信息量后上传到云，云根据算法快速定位当前特征，并把特征下发到本地，之后就可以回到前面的处理方式。

• 跟踪

对于跟踪来说，并不是每一帧都要对整个画面进行识别，因为消耗是比较大的，因此我们会在第一帧进行特征匹配，直到完成匹配，因为不需要管跟踪到的物体很远地方的其他特征，因此我们只需要对原特征的相邻区域进行特征匹配，匹配到之后继续跟踪，如果跟丢则需要回到一个整个画面重新匹配跟踪。

• 变种目标匹配

前面介绍方法中，特征都是基于某几个拍摄画面的采样，假设我们要识别的特征的变化是非常大的，而我们又没有太多的精力去编写算法，或是校对每个目标，那我们可能就需要尝试其他方式。

我们设想一个场景，在某个钢笔品牌的活动上需要对每一只笔做识别，而每个人的手和拍照时背景的环境都是不一样的，从而会影响特征的匹配。针对这类问题，我们尝试的方法一个是通过卷积神经网络，inceptionv3——Google开放的分类器，它在大量数据上训练了数月从而得到数千种分类的物体，我们通过它来识别常用的物体；此外Facebook基于Caffe机器学习发布了移动端版本，它能够利用神经网络去做数字的量化和剪枝等优化使得模型非常小，而运行效率不会受到影响；除了国外巨头，腾讯也发布了一个比较小的神经网络库NCNN，它的好处是没有外部依赖、自身大小比较小、跨平台，同时对于ARM指令是有优化的，因为在手机上是没有PC上运行的显卡环境，因此需要用CPU来做运行，而NCNN则是针对CPU做了优化。

定位

• IMU

第二个需要解决的问题就是定位，我们是采用手机的IMU来做定位，但同样也会带来一些难题：首先就是校准，IMU中是有很多的噪声需要处理，而伴随时间推移、或不同型号的IMU可能会产生各种偏差，也都需要重新校正，同时每个IMU在制造时内部的参数就已经确定，但这些参数在API上并不会体现，因此需要人工去收集信息；此外还会有精度问题，不同IMU会存在三轴、六轴、九轴不同的精度，同时除了最原始的陀螺仪，有些手机还会有加速器、甚至磁力。因此根据不同场景需要做不同的优化。

• vSLAM（视觉定位建图）

vSLAM——视觉定位和建图的技术，通过这个技术可以让手机识别出我在室内走一圈重新回到原点，这个技术对于AR是非常基础的。但是因为手机在运动过程中，IMU会由于外部干扰、重力因素、自身累计误差等一些物理特性，导致我们不能完全依赖这种定位技术，因此我们做了视觉的定位。

上图是视觉定位的基本框架，首先我们通过两幅画面的位移和三角关系去预估位移的距离，同时后端也会做优化，因为移动过程会出现偏差，因此需要通过数学的方法做过滤，比如刚才提到的场景——拿着手机走一圈再回到原点，但由于硬件的偏差定位也会出现一些偏差，所以我们需要通过视觉算法去做校正。我们现在使用的算法是视觉词包，就是把当前画面中所有不同特征都放到一个词典里，再通过词典的方式来匹配它是否回到原点，从而来校正偏差。最后一步通过建图来表示现实世界中的状态。

当然这个框架也会遇到一些问题，首先它对性能的要求很高，因此在计算相邻运动时我们使用特征法或者直接用光流的方式来匹配；第二点是尺度问题，虽然我们可以知道画面内部的相对距离（手机的相对移动）是怎样的，但却不知道空间上绝对的尺度，这个问题可以通过用参照系或者传感器（三轴IMU无法做到）来解决；第三点是运动过快，在运动过快时传感器可能会失灵，因为我们是依赖同一个画面中大量相同特征去做的，如果快速切到另一个画面的话就会丢失信息。

• 特定场景定位的优化

对于某些特定场景定位还可以再做一些优化，比如对于一个活动的线路导航，就可以预先做画面采集并通过手机下发信息从而获取当前位置；也可以在一些点（墙面）上贴不同的二维码或数字来表示当前位置；或者可以通过NFC或WiFi的方式来辅助校正；最后还可以基于语义SLAM来识别物体，也就是通过某些技术——分类的方式或者切割的方式，得知画面中有哪些物体以及推算它的尺寸是怎样的，从而帮助我们建立更加准确的尺寸。

除了前面提到的，SLAM技术应该还会有一些突破。Google提出的框架Tango规定硬件必须要有一些能力：要求具有深度摄像头，可以通过某种物理机制来定位看到物体的距离，其中一种方式是通过发射声波，根据返回的时间点来计算距离；具有高精度的IMU；以及通过系统中Tango进程来更加精确的计算，或维持传感器的自由状态。MagicLeap发表了最新论文——端到端的Deep SLAM，它是通过深度学习的方式来感应空间的位置。此外SLAM基本框架采用的传统算法是否可以应用机器学习，比如回环检测部分，用机器学习分类器来替代原本的视觉词袋模型。

渲染

下面介绍渲染部分，我们在一个网页上去做AR的效果，首先相机的内容是要显示出来的，同时AR上叠加的效果也要显示，那我们通常有两种方式来实现。

• web direct render

第一种方法是direct render，首先整个网页有一个3D框架的显示——我们是用THREE.js etc.来显示，而摄像头的数据也会通过底层传输到JavaScript引擎（底层数据和引擎中数据的表示方式不一样——底层是Java的byte数组或C的Char数组），虚拟机因为存在垃圾回收的机制，使得它的对象在生命周期外还会需要做一些事情，那么就可以通过省略引擎中的一些机制加快过程；而在iOS中存在JSC接口来完成这个功能。

• Hybrid render

第二种方法是Hybrid render，也就是通过为网页扩展两个逻辑层从而在网页上实现完整的AR效果。摄像头的实际内容置于底层展示，中间AR层使用Native实现，上层为网页层。我们将网页的背景设置为透明，对于3D物体的渲染，如果有WebGL的情况下，我们就可以在网页层实现；如果没有WebGL则需要在Native层来完成渲染。

• 场景融合

另一个很难的问题就是场景融合，比如我们要对某一场景去做文字翻译，并将得到的译文放回到场景中。这就涉及到如何去检测位置以及由于3D变化而带来的位置变化，同时还要考虑怎样合理与底色融合的问题。

Web架构

这张图是我们Web的架构，首先我们是用Web来开发AR应用；其次在架构中我们把算法层暴露出来，这样第三方就可以把自己的核心算法注册到UC浏览器中供底层使用；最后是使用Native解决了性能问题。而对于没有Native组件加成的情况，也可以用WebAssembly编译的代码进行运算。

展望

我们的平台是基于H5和AR的，未来我们会尝试将更多的东西融入到平台中，包括声音、文字、人脸以及神经网络的运行。以上是我的全部分享，再次感谢大家。

LiveVideoStack招募全职技术编辑和社区编辑

LiveVideoStack是专注在音视频、多媒体开发的技术社区，通过传播最新技术探索与应用实践，帮助技术人员成长，解决企业应用场景中的技术难题。如果你有意为音视频、多媒体开发领域发展做出贡献，欢迎成为LiveVideoStack社区编辑的一员。你可以翻译、投稿、采访、提供内容线索等。