away3d场景下如何加载ui

关注我，私信“AR干货”，即可获得AR开发资料包和AR行业书籍报告！

提到WebAR，你脑海中会立刻想到什么？可能会有三种不同的关注点或答案：

• 关注点在Web上。“Web上也能实现AR效果吗？那以后做营销会不会更简单、传播更广更快了。”
• 关注点在AR上。“就是那个Pokemon Go啊，我知道的，它不是原生应用吗，使用Android开发的吗，难道以后Web端也可以体验到吗？“
• 关注点在WebAR上。“WebAR现在确实是个流行趋势，尤其是对广告营销电商行业，但是好像行业没有爆款应用啊，它的应用前景到底有多大呢？”。

不管你是三种情况的哪一种，无法否认的是WebAR正在快速的与各行各业结合产生新的应用场景，并给我们的生活带来不一样的体验与感受。对于商家企业普通用户来说：其实在今年7月份，微信小程序正式宣布支持实现AR效果，并向品牌商户、AR引擎服务商开放接入。微信团队也表示，微信小程序在AR科技领域的全新探索，体现其在新技术应用落地上的强大能力，将为各行各业带来更广阔的发展空间。同时首个支持AR动态试妆的美妆品牌小程序“阿玛尼美妆官方精品商城”也正式更新上线。小程序AR在彩妆行业、美发行业、广告行业、时尚行业、电商行业、零售行业等多领域进行场景尝试，不仅能为用户带来更具科技感、更便捷、更趣味、更新奇的体验，也能为商家构建更为极致的营销场景，助力行业提升品牌效能和生意增长。对于开发者而言：在前端开发中，工程师常常这样调侃“一入前端深似海”。确实，前端的应用面十分广，知识点比较零碎，学习范围也比较大，当然，实现的功能也更加全面。所以对于当下十分火热的AR，运用前端技术也可以轻松的实现。Web平台在AR，SLAM或跟踪的技术应用上将会越来越普及。本篇文章希望从以下这些角度去为大家介绍WebAR！

• WebAR概念
• 优点
• 发展史
• WebAR常用框架
• WebAR关键技术
• WebAR市面上常用的开发工具
• WebAR和浏览器的兼容性

---

WebAR概念

通俗的按照字面意思来讲，WebAR就是在Web端集成AR的功能。WebAR使用WebRTC，WebGL和现代传感器API的组合技术，通过Web浏览器提供对基于Web的增强现实的访问与实现。

WebAR发展史

WebAR的发展史一定是与Web的迭代息息相关的。

• WebAR的诞生：2009年FLARToolKit的诞生标志着AR技术进入了Web时代。FLARToolKit在当年是一个明星项目，被用于当时很多极富创意的AR营销，比如通用电气的Plug Into the Smart Grid AR营销在当时获得了极大的关注，纽约时报、华尔街日报等上百家的媒体与博客报道了这次营销活动。这一营销只需你通过电脑访问一个网站，然后网站会调用你的摄像头，当你在摄像头前举起一张打印着特定标识的白纸时，网站会识别纸上的标识并显示出对应的动画内容。尽管运用了Flash技术而不是纯粹的Web技术来完成这次WebAR营销，这是大多数人首次仅仅打开一个网站就可以体验到AR功能给人们带来的新鲜感。那时的Web只能做一些很简单的显示工作，显示三维模型与动画全部需要依赖于Flash插件，但这也掀起了一波WebAR的浪潮，相当多的公司投入到了相关技术的研发当中。
• FLASH没落淘汰时期：2010年iPhone4智能手机的发布标志着Web进入下一个阶段，原本人们访问网页上的视频、动画或者游戏，都需要通过Flash插件来实现。但是无奈Flash自身漏洞实在是太多，存在严重的安全问题，iPhone在最初上市时就不支持这一插件，安卓在2011年的4.0版本也取消了对Flash的支持。虽FLARToolKit有JavaScript版本的替代品JSARToolKit，可以不通过Flash插件来实现WebAR功能，但手机AR应用相比那时的WebAR有着相当多的优势——能够完全发挥设备性能、深度优化的针对手机设备的AR体验、随时随地打开即可使用而无需等待从网络中加载庞大的数据。这些使得手机AR应用的数量大大超过了WebAR，许多WebAR项目被无限期冷藏，开发人员纷纷投入到了体验更好的移动AR平台中。
• HTML5时期：2012年，由W3C组织制定的HTML5的规范正式定稿，增强了对手机设备上浏览多媒体的支持，其中最重要的莫过于Canvas标签的引入，网页终于拥有了方便使用的实时图形渲染接口，目前的WebVR与WebAR画面都是渲染在这一标签中的。这一变化带来了WebGL以及WebRTC技术。WebGL技术允许网页在渲染图形时可以使用硬件加速来提高渲染效率。WebRTC的出现让网页可以实时处理手机摄像头的数据，可以实现实时视频通话的功能。在WebRTC（Web Real-Time Communication）出现之前，人们使用手机时只能通过网页拍摄照片或者是录制视频文件然后上传。WebRTC提供的实时视频流处理技术对AR技术意义重大，因为AR中的许多识别功能需要实时的摄像头数据以及传感器数据才能保证识别结果的精确。Chrome浏览器与Firefox浏览器均在2013年的更新中增加了对WebRTC的支持。

以上关于WebAR的历史发展参考：

WebAR优缺点

• WebAR可以轻松地运行在Android、iOS、Windows、Mac系统的Web浏览器上，无需APP，轻松实现跨平台。
• WebAR 可以实现扫描识别图呈现3D动画模型、视频、图片、文字、UI按钮等效果，并且支持3D模型交互。
• WebAR主要是以URL的格式传播，符合微信等社交媒体信息流动的基本技术要求，配合创意策划方案，可以形成爆炸式的病毒营销效果。

当然WebAR目前也存在一些问题：

• 各浏览器标准不统一
• 3D内容加载慢，无法实现复杂的内容
• 渲染质量低
• 存在隐私问题
• 无法实现复杂交互

WebAR开发框架

上面提到2009年FLARToolKit的诞生标志着AR技术进入了Web时代（当然这么说有点夸张，但其实想表达的是WebAR其实很早就发展起来了）。FLARToolKit是使用最广泛的基于Flash的AR库，得到了大型开发人员社区和许多带有示例应用程序的网站的支持。FLARToolKit是ARToolKit的Flash Actionscript（v3）版本，可用于快速开发基于Web的AR体验。FLARToolKit从输入图像中识别出视觉标记，然后计算摄像机在3D世界中的方向和位置，并将虚拟图形覆盖在实时视频图像上。FLARToolKit支持所有主要的Flash 3D图形引擎（Papervision3D，Away3D，Sandy，Alternativa3D）。但随着Flash的没落，FLARToolKit框架也慢慢淡出历史舞台。如今WebAR越来越主流，市面上也有许多优质的高效的第三方框架可供开发者使用，好的框架或工具往往会事半功倍，下面是作者总结的比较成熟的一些框架：

AR.js

AR.js是一个轻量级的增强现实类JavaScript库，支持基于标记和位置的增强现实。开发人员可以使用几行HTML将AR特性和功能引入任何网站。该项目是开源的，在GitHub上拥有近14,000个stars，各种平台的开发人员正在使用它来创建更多新的数字体验。AR.js框架包括跨浏览器兼容性，并且支持WebGL和WebRTC，这意味着它可以在iOS 11以上的Android和iPhone设备上正常工作。通过包装许多不同的AR框架，包括，a-frame和ARToolKit，AR.js使得将AR引入Web应用程序变得更加简单高效。它具有以下优点：

• 跨浏览器兼容性
• 即使在较旧的设备上也可以达到60fps的高性能
• 基于Web，无需安装
• 开源，可免费访问
• 使用WebGL和WebRTC在所有移动设备上均可使用
• 无需额外或不常见的硬件
• 可以用不到10行HTML来完成

AR.js 2.0版本首次引入了另一种类型的增强现实:基于位置的。所以基于标记的与基于位置到底本质上有什么区别呢？实际上基于标记的就是我们现在市面上常见的扫描识别图出现AR模型效果，不管对于识别图也是有要求限制的，AR.js使用artoolkit，它支持多种类型的标记模式或者条形码，也就是我们做CV开发常用的Maker。如下图所示：

基于位置的就是通俗理解就是通过使用手机传感器的方向和位置，AR.js可以在相机上显示其“物理”位置上每个位置的内容（因此，如果将相机指向现实生活中的位置，你将看到附近的内容）。如果移动相机，它将再次计算方向和位置。如果位置较远，则显示的内容较小；反之更大，在视觉上面会有明显偏差，增强沉浸感与代入感。就像下面的示例演示那样：

AR.js主要封装了以下这几个库：

• WebRTC
• JSARToolKit
• 基于 WebGL 的渲染库：T, Babylon.js, A-Frame

后面会详细介绍这几个库的功能与使用。AR.js的作者在这几个手机浏览器进行了一些测试，测试结果如下供参考：

• 带有网络摄像头和2个标签的台式机Chrome（一个用于Hero，一个用于结果）（有效，成功运行）
• Android 4.4.2（无效，出现不允许使用相机的提示。会看到白色背景和提示文本）
• Android native 5.0（出现不允许使用相机的提示。会看到白色背景和提示文本）
• Android 4.4.2上的Chrome（可以运行）
• Android 5.0上的Chrome（无法正常工作，需要获得许可认证，会看到黑色背景，文本）
• iOS 低于11版本上的Safari和Chrome（无效，出现不允许使用相机的提示。会看到白色背景和提示文本）
• Windows 10上的Microsoft Edge（Google Pixel手机上的Chrome浏览器查看全息图）

AR.js 示例下载资源：

GeoAR.j

ARToolKit

ARToolKit是用于构建增强现实（AR）应用程序的软件库。为了创建强大的增强现实体验，它使用视频跟踪功能来实时计算相对于方形物理标记或自然特征标记的真实摄像机位置和方向。一旦知道了真实相机的位置，便可以将虚拟相机放置在同一点，并将绘制的3D计算机图形模型精确覆盖在真实标记上。因此，ARToolKit解决了增强现实中的两个关键问题。视点跟踪和虚拟对象交互。这样可以轻松开发各种增强现实应用程序。

2001年ARToolWorks成立,并发布ARToolKit 1.0版本，是第一个基于“增大化现实”技术的sdk,最早于2005年在Symbian上运行，然后是2008年在iPhone 3G上运行的iOS，最后是在2010年在Android上运行的，并在2011年晚些时候由ARToolWorks推出专业版。ARToolKit被DAQRI收购，并于2015年5月13日从5.2版开始重新发布，[包括了所有以前只能在专业授权版本中使用的功能。其中包括移动支持和自然特征跟踪。

ARToolKit的一些功能包括：

• 单摄像头或立体摄像头(摄像头位置/方向跟踪)。
• 跟踪简单的黑色方块(任何方块标记模式)。
• 平面图像跟踪(自然特征标记)。
• 摄像机标定、光学立体标定、正方形标记产生、自然特征标记产生等功能。
• Unity和OpenSceneGraph的插件。
• 光学头戴式显示支持。
• 免费和开源软件。
• 足够快的实时AR应用。

当前版本的ARToolKit支持Microsoft Windows，Mac OS X，Linux，iOS和Android平台。其他版本的ARToolKit也已移植到Symbian和Windows Phone以支持移动AR应用程序。ARToolKit还可以作为Unity 游戏引擎的插件使用，例如，相对于跟踪的标记目标，将Unity中的虚拟摄像机与真实摄像机对准，并负责与摄像机通信。该插件支持OS X上的Unity，Windows上的Unity，Android上的Unity和iOS上的Unity。

下载资源干货：

其实目前的许多WebAR 框架都是基于ARToolKit的，比如上面提到的AR.js,还有将要介绍的JSARToolKit。

JSARToolKit

ARToolkit 的 js 版本，支持 pat marker 和 nft marker 的识别与跟踪，基于开源的ARToolKit跟踪库，JSARToolKit使用WebGL & T在真实世界对象上呈现3D模型。JSARToolKit是JavaScript的增强现实库。它是在GPL下发布的开源库。它的整个运行机制是这样的：

（1）JSARToolKit在画布元素上运行。由于需要从画布上读取图像，因此图像需要与页面来自同一来源，或者需要使用CORS来解决同源政策。简而言之，将crossOrigin要用作纹理的图像或视频元素的-property 设置为''或'anonymous'。

（2）将画布传递给JSARToolKit进行分析时，JSARToolKit返回在图像中找到的AR标记列表以及相应的转换矩阵，要在标记上方绘制3D对象，需将转换矩阵传递到用户使用的任何3D渲染库中，以便使用该矩阵对对象进行转换。

（3）然后，在WebGL场景中绘制视频帧并在其上方绘制对象。要使用JSARToolKit分析视频，需首先在画布上绘制视频，然后将画布传递给JSARToolKit。

（4）对每一帧都执行此操作，就可以进行视频AR跟踪。即使在640x480视频帧上，JSARToolKit在现代JavaScript引擎上也足够快实时地做到这一点。但是，视频帧越大，处理时间就越长。合适的视频帧大小为320x240，但是如果你希望使用较小的标记或多个标记，则最好使用640x480。

下面这个数据是开发者测试的关于JSARToolKit的性能：

下载资源干货：

（1）/

（2）

（3）

（4）

（6）

argonjs

无论用于创建新的AR应用程序，还是将AR视图添加到现有的web应用程序，argon.js框架都提供了一组抽象和实用程序，用于以独立于平台和技术的方式将AR视图添加到web应用程序中。

argon.js最初旨在利用iOS上支持Argon AR的网络浏览器的增强现实功能，从而简化了提供移动AR体验的过程，而无需创建，发布和支持本机应用程序。但是，argon.js也可以与其他Web浏览器一起使用，以利用它们的功能允许你的应用程序提供每种浏览器能够提供的各种AR体验。尽管目前大多数Web浏览器的AR功能很少，但是它们正在迅速改进。

资源干货链接：

（1）源码下载：

（2）示例samples：

awe.js

awe.js提供了一些其他类型的AR体验，如增强现实标记，基于位置，和leap motion传感器AR。它使用WebRTC, WebGL，和getUserMedia设备API在浏览器中实现AR功能。

Awe.js是一个JavaScript库，它使用T,可以在awe.js GitHub上下载该库和一些示例。它提供了四种不同的AR体验，每种都带有自己的示例：

• geo_ar –允许将对象放置在设定的点上。
• grift_ar –与Oculus Rift兼容。
• leap_ar –与Leap Motion控制器集成。
• marker_ar–允许创建基于增强现实标记上的体验。

资源干货链接：

（1）官网：

（2）代码下载：

T用于构建运行在WebARonARKit和WebARonARCore中的AR web体验。WebARonARKit和WebARonARCore是针对iOS和Android的实验性应用程序，允许开发者使用web技术创建增强现实(AR)体验。

资源干货链接：

（1）代码下载：

?files=1

（2）samples：

库将不同的计算机视觉算法和技术引入浏览器环境。通过使用现代HTML5规范，我们使您能够进行实时颜色跟踪，面部检测等。

资源干货链接：

（1）官网链接：

（2）下载链接：

https://github.com/eduardolundgren//archive/master.zip

WebAR关键技术

想要实现WebAR效果，其实说白了就三个步骤：识别、跟踪、3D物体的渲染。

用到我们上面提到的几个开源WebAR框架库实现原理如下图：

识别

无论是native AR还是WebAR的一个最基础要实现的功能就是识别。WebRTC（网页实时通信，Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的API。百度百科对WebRTC的解释是这样的：“它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。WebRTC实现了基于网页的视频会议，标准是WHATWG 协议，目的是通过浏览器提供简单的javascript就可以达到实时通讯（Real-Time Communications (RTC)）能力。WebRTC（Web Real-Time Communication）项目的最终目的主要是让Web开发者能够基于浏览器（Chrome\FireFox\...）轻易快捷开发出丰富的实时多媒体应用，而无需下载安装任何插件，Web开发者也无需关注多媒体的数字信号处理过程，只需编写简单的Javascript程序即可实现，W3C等组织正在制定Javascript 标准API，目前是WebRTC 1.0版本，Draft状态；另外WebRTC还希望能够建立一个多互联网浏览器间的实时通信的平台，形成开发者与浏览器厂商良好的生态环境。同时，Google也希望和致力于让WebRTC的技术成为HTML5标准之一，可见Google布局之深远。WebRTC提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。”

WebRTC的API有以下特性：

1. 实时视频或音频以流对象的形式表示。

2. 一定的安全控制,在web应用程序开始获取流数据之前,它通过询问用户是否授权。

3. 输入设备的选择由MediaStream 处理(例如,当本地计算机有两个或者两个以上的摄像头或麦克风连接时).

4. 每个MediaStream对象包括几个MediaStreamTrack对象。它们代表来自不同输入设备的视频和音频。

5. 每个MediaStreamTrack对象可能包括几个信道(右声道和左声道)。这些是MediaStream定义的最小部件。

其中WebRTC最关键的API方法是getUserMedia()：以实时获取摄像头的视频流（PS：iOS11才刚刚支持，Android很早版本就支持了）。为用户提供访问硬件设备媒体（摄像头、视频、音频、地理位置等）的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

默认获取的是前置摄像头，如果想获取后置摄像头的视频流，需要用 naviga() 遍历设备camera得到。且要用 https 打开网页才能访问摄像头。

跟踪

通过camera捕获这一帧一帧的video stream之后，接下来就是图像处理与跟踪。图像处理其实解决的就是特征点匹配的问题。其实有很多第三方Web库很轻松的实现，比如上面提到的。“这两个库类似（Tracking.js和JSFeat），都是在前端做计算机视觉的，包括提取特征点、人脸识别等。把 WebRTC 拿到的视频流直接传给它们并调用 API 就能得到自己想要的效果。对于一些成熟的算法，如人脸识别，可以直接拿到识别结果，如果自己要识别的物体比较复杂你也可以自己进行特征点的计算，但这可能在前端会算力不足，关于性能的问题下文再论述。提到计算机视觉，不得不提深度学习，毕竟现在很多图像处理算法被深度学习吊打。ConvNetJS，是斯坦福大学开源的一个前端深度学习框架，可以让你在前端完成深度神经网络的训练。dee是 Google Brain 团队搞的，功能和 ConvNetJS 类似。现在 ConvNetJS 好像不怎么维护了，dee 还在频繁更新中，感兴趣的同学可以试用一下。另外一个紧锣密鼓开发的深度学习库 keras.js 则是让你可以在浏览器中运行已经训练好的 Keras 模型（Kears 是著名的深度学习开发框架），并支持 WebGL 2。”（引用自）。识别其实很简单，不管是对于native AR还是WebAR，目前的识别算法与框架已经非常成熟，难就难在识别之后如何跟踪，如何更好更稳定更高质量的跟踪，这也是WebAR目前遇到的问题（其实也是整个AR行业技术上的一个难路虎），不管是上面提到的几个WebAR的框架还是目前市面上已经商业化的WebAR SDK、WebAR解决方案都没有很好的实现实时跟踪。

渲染

图像识别处理之后，接下来就是渲染3D内容。WebAR不同于native AR，可以实时高效处理大量的3D内容，相比于此，WebAR处理3D内容的能力还是欠缺的，这也是现在市面上缺少优质的AR内容的关键原因。

其实随着WebAR技术的发展，已经有许多成熟的Web 3D渲染框架了，比如：A-Frame、T、Pixi.js和Babylon.js。

关于A-Frame

A-Frame是用于构建虚拟现实（VR）体验的Web框架。A-Frame基于HTML之上，因此入门起来很简单。但是A-Frame不仅是3D场景图或标记语言，还包括能强大的实体组件框架，A-Frame最初是在Mozilla中构思的，现在由Supermedium中A-Frame的共同创建者维护。2015年12月16日Mozilla旗下的MozVR团队，在经过长时间的试验，并且从一些3D/VR工具（例如：JanusVR、GLAM、SceneVR）中汲取经验，公布了JavaScript开源框架A-Frame。作为一个独立的开源项目，A-Frame已成长为最大的VR社区之一。

A-Frame支持大多数VR眼镜，例如Vive，Rift，Windows Mixed Reality，Daydream，GearVR，Cardboard，Oculus Go，甚至可以用于增强现实。

A-Frame使用Web开发者熟悉的HTML标签来创建WebVR场景，使得非WebGL开发者无需学习强大而又复杂的WebGL API来创建VR场景，降低了初学者学习的门槛，并且A-Frame一个最大的优势在于跨平台性，目前版本已迭代到v0.3.0，支持VR头戴设备Oculus Rift和HTC Vive以及非VR设备的PC端和Mobile端（可开启VR模式，利用Google Cardboard、Gear VR等设备观看）。

A-Frame还为开发者提供了许多的功能模块，比如一些基础的几何形状（盒子、球面、圆柱、平面等）、可导入3D建模工具制作或从网上下载的Collada模型、定义背景的天空、定义用户从哪个角度观看场景的相机、动画、光影、全景视频等功能。

A-Frame 有着以下功能特性：

• VR／AR开发变得更简单：只需放入<script>标签和<a-scene>。A-Frame将处理3D scene，VR设置和默认控件。无需安装，无需构建步骤。
• 声明性HTML：HTML易于阅读，理解和复制粘贴。基于HTML的A-Frame可供所有人使用：Web开发人员，VR爱好者，艺术家，设计师，教育者等。
• 实体组件体系结构：A-Frame是一个功能强大的 框架，提供了声明性，可组合且可重用的实体组件结构。HTML只是冰山一角。开发人员可以无限制地访问JavaScript，DOM API，T，WebVR和WebGL。
• 跨平台VR：为Vive，Rift，Windows Mixed Reality，Daydream，GearVR和Cardboard构建VR应用程序，并支持所有相应的控制器。没有眼镜或控制器怎么办，没关系A-Frame仍可在标准台式机和智能手机上使用。
• 性能：A-Frame从头开始针对WebVR进行了优化。虽然A-Frame使用DOM，但其元素不会触及浏览器布局引擎。3D对象更新全部在内存中完成，几乎没有浪费和开销。大多数互动性和规模最大的WebVR应用程序都是在A-Frame中以90fps流畅运行的方式完成的。
• 视觉检查器：A-Frame提供了一个方便的内置视觉3D检查器。
• 组件：使用A-Frame的核心组件，例如大多数主要Unity里的几何形状，材质，灯光，动画，模型，光线投射器，阴影，定位音频，文本和控件，包括环境，状态，粒子系统，物理属性，多用户等。
• 可靠且可扩展：A-Frame已被Google，迪士尼，三星，丰田，福特，雪佛兰，大赦国际，CERN，NPR，半岛电视台，华盛顿邮报，美国国家航空航天局（NASA）等公司使用。诸如Google，Microsoft，Oculus和Samsung之类的公司已经为A-Frame做出了贡献。

资源干货：

（1）官方网站：

（2）A-Frame中文教程：

关于T

T是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。T使用WebGL。但又不同于WebGL和OpenGL，T更容易学习和掌握。T允许使用JavaScript创建网页中的GPU加速的3D动画元素，而不是使用特定的浏览器插件。高级的JavaScript函数库例如T或GLGE、SceneJS、PhiloGL或一定数量的其他函数库使作者在浏览器中显示复杂的三维计算机动画而不需要使用传统的独立应用程序或插件成为可能。

资源干货：

（1）官方网站：

（2）文档API：

（3）代码下载：https://github.com/mrdoob//

（4）示例：examples/#webgl_animation_cloth

WebAR开发工具

上面提到的比如AR.js、JSARToolKit等，其实已经可以很好的实现WebAR效果，但是距离真正的商业化应用、友好式开发还有一段距离。目前市面上流行的提供WebAR开发解决方案有视辰（EasyAR）、8th Wall、ARKit（AR Quick Look）、腾讯WebAR（TBS AR平台）、AWE Platform、XR+等。

EasyAR

视辰科技针对开发者、企业提供的WebAR服务是国内最早研发WebAR技术的公司，不仅支持传统的H5+AR，还支持小程序AR，并且与云端图库结合，可视化界面操作，大大提高开发者开发集成的效率。视辰WebAR具有以下特点：

• 自主AR引擎：EasyAR引擎针对微信小程序进行算法深度优化，只为打造卓越小程序AR体验
• Web3D引擎算法深度优化：网络三维引擎针对小程序进行算法深度优化，实现极致的3D 渲染效果，打造逼真的AR体验
• 大数据&精准营销：与腾讯深度合作，为品牌提供大数据和精准营销服务
• 极速开发，快速落地：凭借领先技术和丰富经验，视+ AR 可实现快速开发，高质量落地项目，抓住营销节点

不仅如此，视辰科技的WebAR使用场景也相当丰富：

• 印刷品AR植入：通过webAR线上线下结合，进行病毒式传播。例如：在传统线下传单或印刷品植入AR，由识别二维码，升级到识别图片，加载AR活动内容，让活动更具吸引力。
• 3D模型动画展示：通过web方式展示3D模型动画，比平面H5页面具有更强感染力。例如：电商活动中，通过web 3D方式展示产品模型，提供用户直观感受产品的视觉入口，增强活动传播效果。
• 姿态手势红包：通过扫描人体姿态或手势触发红包，让用户参与感更强。例如：展会活动中，用户摆对POSE或手势，才能通关触发更多红包或优惠，让用户通过行动参与活动，增强客户品牌。

相比于上述传统的WebAR框架，视辰的WebAR依赖于云端图库（CRS），对识别图的检测与处理速度更快更高效，CRS对开发者来说也相当友好，具有以下特点：

• 云识别本地化 ：云识别一次成功后，云识别图可以缓存到本地识别库，即使无网络也可对目标进行快速精准的重复识别。
• 超大容量云端图库：亿级云端图库。为提升性价比，当前识别图单库支持100000张识别图。可根据用户需求进行扩充。
• 快速精准识别：0.1秒的超快速识别，瞬间响应。识别准确率高达98%。
• 高效API接口：简洁高效的API接口，快速集成。让开发工作更便捷。
• 后端操作可视化：提供可视化操作后台，使图库管理操作便捷且直观。
• 识别图性能检测：对图片的可识别性及相似度进行检测，并给出检测详情。

5G时代的到来，云端图库的加载速度会大大提高，WebAR 3D内容的渲染质量也会大大加强。

干货资源链接：

（1）官方文档：

（2）示例代码：

8th Wall

8th Wall Web使用符合标准的JavaScript和WebGL构建，加入了同步定位和SLAM功能，并针对移动浏览器上的实时AR进行了优化。并且最近8th Wall最近推出了一个集创造、协作和发布增强现实项目于一体的平台，不需要第三方软件，服务器设置或外部工具，只需登录，编码，然后点击发布。

云编辑器可以在任何地方、任何时间、任何设备上创建WebAR项目，甚至是iPad!它具有一个全功能的文本编辑器，一个资产查看器，开发人员的键绑定，并支持流行的框架，如A-Frame, Babylon.js, T, React 和 Vue.js；全功能的文本编辑器，创建和编辑项目方式更加简单；支持实时无线调试代码，开发者可以即时预览最近的更改，从而轻松地测试和排除WebAR项目中的故障；云编辑器支持不限规模的团队成员同时在同一个项目中工作；支持检查来自团队项目的变更并解决合并冲突；8th Wall 云编辑器最大的好处之一是不需要设置专门服务器来测试和启动项目，立即发布到网络。

8th Wall创建了一个端到端云解决方案，用于创建、协作和即时发布基于浏览器的WebAR项目。通过对模板的访问，跨团队工作的能力，以及内置的托管，开发人员能够快速地将大规模的AR体验带到市场中。8th Wall首席执行官Erik Murphy-Chutorian在一份声明中表示:“8th Wall的创作和托管平台改变了浏览器内增强现实的游戏规则，是沉浸式网络的一个重要里程碑。自去年推出以来，我们基于SLAM和marker的AR引擎为合作伙伴和开发者提供了支持，但需要使用第三方软件，并需要一个托管环境才能推向市场。”这个版本满足了我们客户的需求，他们想要一个单一的端到端解决方案来创建和托管WebAR项目。”据AR Insider估计，WebAR能够覆盖的智能手机数量几乎是原生AR应用的两倍，全球兼容设备市场超过29.7亿部。根据8th Wall的数据，50%的用户在一个WebAR页面花费超过两分钟的交互时间。

干货资源链接：

（1）官方网站：

（2）教程：tutorials

（3）代码示例：

AR Quick Look

AR Quick Look是用于在AR场景中预览3D模型的技术，通过它开发者能快速在自己的App中展示高质量的3D内容。ARKit作为iOS 11的一部分首次亮相，使开发人员可以轻松地将AR体验添加到他们的应用程序中。现在使用iOS 12，可以从浏览器体验AR，无需其他应用程序。内置的iOS应用程序（例如Safari，消息，邮件，新闻）使用AR Quick Look以3D或AR形式显示虚拟对象的USDZ文件。你可以在应用程序和网站中嵌入AR Quick Look视图，以使用户看到令人难以置信的详细渲染。

AR Quick Look技术是基于usdz文件的，这是一种全新的用于描述3D模型的文件格式，它基于Pixar的开源USD文件格式，将模型和模型的纹理打包在一个文件当中，同时支持iOS和macOS系统。利用这一文件，我们可以很容易预览或者分享3D内容。Xcode10中提供了usdz_converter工具用以生成usdz文件。AR Quick Look给开发者提供了便捷的3D模型预览和分享的工具，在生成usdz文件后，可以很轻松的在App或者HTML中展示AR效果。创建任何类型网站的Web开发人员现在都可以在其网站上添加图片并将其链接到usdz文件。

每当将嵌入式图像链接到usdz文件时，该图像的右上角就会出现一个图标，让用户知道它将能够在AR中查看。这可以应用于任何对象，尽管购物网站将成为此功能的最主要目标之一。由于iOS 12以多种方式支持usdz文件，因此用户实际上也能够轻松共享这些图像。如果他们在网上找到类似的特定对象，则可以在消息或电子邮件中将usdz AR图像复制并共享给另一个iOS用户，以在自己的客厅中查看。

AR Quick Look还支持动画。可以将其视为放大后的Gif。苹果公司在之前提到了变换动画和骨骼动画，但目前似乎仅支持变换。诸如Shopify之类的公司 正在集成AR Quick Look，而Amazon也正在推出AR功能。笔者认为电子邮件并不适合与AR的结合与传播-至少不是以一种直接而实际的方式，因为许多零售商报告移动电子邮件的使用率为50-70％。尽管如果Safari集成被证明很流行，苹果可以在即将发布的版本中扩展对Mail的支持。

AR Quick Look的应用场景还是有很大想象力的，Apple通过改技术将AR的体验门槛降低了许多，以usdz作为数据承载方式，方便AR内容的分享与流通，同时Apple作为AR行业的“KOL”，发展AR Quick Look有利于定义统一AR数据标准，更进一步加快AR市场的发展。不管是APP形式，还是AR，web形式相比于native有着天然易传播的特性，所以还是十分看好AR Quick Look的发展前景。

开发资源干货：

浏览器兼容情况

ios 11 才开始支持浏览器 webRTC(getUserMedia)，且只能在 https 下使用

WebRTC支持情况

WebGL 2.0支持情况（下一个版本的WebGL。基于OpenGL ES 3.0）

WebGL - 3D Canvas graphics支持情况（使用JavaScript生成动态三维图形的方法，通过硬件加速）

以上数据来自：

WebAR、小程序AR一定是大趋势，尤其是对于广告营销行业有着天然的传播优势。大家关于WebAR有什么看法积极留言哦！