- 文献综述（或调研报告）：
实现Web AR 需要数据采集、识别追踪和渲染交互三步，图1为Web AR应用程序的流程图。
图1. Web AR应用程序的流程图[1]
- 数据采集
AR 首先要识别，那就要用到 WebRTC 技术。WebRTC（Web 实时通信，Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的API。它其中有个很重要的 API：getUserMedia()，可以实时获取摄像头的视频流[2]，摄像头获取到的数据流会以lt;videogt;标签作为载体呈现在页面上，这是Web AR 实现的前提。有了视频流,对其中的特征点进行分析，运用计算机视觉的算法，就可以实现Web AR识别和追踪的部分。
- 识别与追踪
- 前端直接处理视频流
Tracking.js 和 JSFeat是两个可以在前端直接处理图像的计算机视觉库。第一步数据采集得到的视频流传给他们，并调用相应的API，就可以用于人脸识别、提取特征点等操作。对于一些成熟的算法，如人脸识别，可以直接使用这两个库得到识别结果，如果要识别的物体比较复杂，就需要进行特征点的计算，由于前端的计算力限制，可能需要其他方法提高性能。
计算机视觉和深度学习密切相关，表1比较了几个深度学习前端库。
表1. 几个深度学习前端库的比较
|
深度学习前端库名 |
特点 |
|
ConvNetJS |
斯坦福大学开源的一个前端深度学习框架，可以在前端完成深度神经网络的训练，但已经不再维护 |
|
deeplearn.js |
由Google Brain 团队开发，还在频繁更新 |
|
keras.js |
支持 WebGL2，在浏览器中运行已经训练好的 Keras 模型 |
- 运用Web应用程序前后端的思想处理视频流
另一种处理视频流的方法就是前端将获取到的视频流传给后端，由后端处理视频流，再返回处理结果，这种方法可以突破前端计算能力的限制，可以使用其他平台上广泛使用的算法对视频流进行处理。现在实现 AR 大多数用的都是 SLAM 算法，后端处理完将数据返回给前端，再由前端进行渲染。Canvas提供了两个API用于前端数据传输前的转换：
表2. 前端用于转换图像数据的API
|
API名 |
介绍 |
|
toDataURL |
生成图片的 base64 字符串 |
|
toBlob |
将图片转换成 Blob 文件对象，由于是二进制的，所以更方便传给后端，效率更高 |
传像素信息给后端后，WebGL 的 readPixels 方法，可以获取 framebuffer 中的像素值[2]。
- 渲染与交互
在渲染方面前端有足够的能力，相关的库也很丰富。
表3. 用于渲染的库/框架的比较
|
库/框架名 |
介绍 |
|
A-Frame |
由Mozilla 团队在2015年开源的Web VR框架，由A-Frame 团队发布的 aframe-xr中包含一些WebAR组件。 |
|
WebGL |
WebGL是一项在浏览器中展示基于硬件加速的3D图像的web技术，它是在浏览器端实现OpenGL ES。主流的移动和桌面浏览器，如Chrome、Firefox、IE、Opera和Safari浏览器，都很好的支持了WebGL。许多电脑和智能手机拥有先进的图像渲染单元（GPU），但大多数网页和移动网站不能使用GPU。这将导致设备加载缓慢、图像质量低、对3D内容的支持率低。WebGL可以调用 GPU，通过HTML5 元素连接一个设备的图像硬件，并在浏览器中直接应用3D技术 |
|
Three.js |
Three.js是一个开源语法库，它将繁琐的 WebGL API 进行了封装和优化，简化了WebGL工具和环境的创建工作。它支持大部分基于GPU加速的低代码量3D动画 |
|
Pixi.js |
只支持 2D 渲染，简单易用，适合不涉及3D的开发场景 |
|
Babylon.js |
Web游戏引擎，对光线，阴影等高精度渲染要求的实现很好。 |
这些基于 WebGL 的渲染方法，在实现交互时，要依赖于光线投射算法 Ray casting 方法[2]。Ray casting算法的原理是将渲染时的 Camera视作视点，与在屏幕上触碰的点坐标连城一条射线，看这条射线与视图中哪些物体相交，Three.js 提供了 Raycaster 实现 ray casting 算法。这些交互在AR应用中实现起来，识别追踪和渲染交互是同时进行的，如何给用户更好、更流畅的体验是 Web AR 的又一大难点。
现存的Web AR库调研：
- 谷歌的AR 团队提供了 WebARonARKit 和 WebARonARCore 两个库，分别对应IOS平台和Android平台的ARKit 和 ARCore, 其实现原理都是结合特定系统（iOS 和 Android）扩展了WebVR API。以便开发者能用 Web 技术来基于 ARKit 和 ARCore 开发，从而实现 WebAR。
- AR.js 是 Jerome Etienne 开发的一款 Web AR 库，可以实现60 FPS帧率的Web AR应用程序。
[1]高翔,安辉,陈为,潘志庚.移动增强现实可视化综述[J].计算机辅助设计与图形学学报,2018,30(01):1-8.
[2] 王政. Web前端开发技术以及优化研究[J]. 电脑知识与技术, 2013(8):5037-5038.
[3] Azuma R T. A survey of augmented reality[J]. Presence Teleoperators amp; Virtual Environments, 1997, 6(4): 355-385
[4] Billinghurst M, Clark A, Lee G. A survey of augmented reality[J]. Foundations and Trends in Human-Computer Interaction, 2015, 8(2-3): 73-272
[5] Zhou F, Duh B L, Billinghurst M. Trends in augmented reality tracking, interaction and display: a review of ten years of ISMAR[C] //Proceedings of the 7th IEEE/ACM International Symposium on Mixed and Augmented Reality. Washington: IEEE Computer Society Press, 2008: 193-202
[6] Rolland J P, Fuchs H. Optical versus video see-through head-mounted displays in medical visualization[M]. Cambridge: MIT Press, 2000, 9: 287-309
[7] GREGORY D. ABOWD and ELIZABETH D. MYNATT: Charting Past, Present, and Future Research in Ubiquitous Computing, ACM Transactions on Computer-Human Interaction (TOCHI), Volume 7 Issue 1, March 2000, Pages 29-58, ACM.
[8] Nakamura T, Takahashi S, Tanaka J. Object information visualization and comparison technique using augmented reality[J].
[9] Azuma R T. A survey of augmented reality[J]. Presence: Teleoperators and virtual environments, 1997, 6(4): 355-385.
[10] Azuma R, Baillot Y, Behringer R, et al. Recent advances in augmented reality[J]. IEEE computer graphics and applications, 2001, 21(6): 34-47.
[11] Wang J, Shyi C N, Hou T W, et al. Design and implementation of augmented reality system collaborating with QR code[C]//Computer Symposium (ICS), 2010 International. IEEE, 2010: 414-418.
- 文献综述（或调研报告）：
实现Web AR 需要数据采集、识别追踪和渲染交互三步，图1为Web AR应用程序的流程图。
图1. Web AR应用程序的流程图[1]
- 数据采集
AR 首先要识别，那就要用到 WebRTC 技术。WebRTC（Web 实时通信，Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的API。它其中有个很重要的 API：getUserMedia()，可以实时获取摄像头的视频流[2]，摄像头获取到的数据流会以lt;videogt;标签作为载体呈现在页面上，这是Web AR 实现的前提。有了视频流,对其中的特征点进行分析，运用计算机视觉的算法，就可以实现Web AR识别和追踪的部分。
- 识别与追踪
- 前端直接处理视频流
Tracking.js 和 JSFeat是两个可以在前端直接处理图像的计算机视觉库。第一步数据采集得到的视频流传给他们，并调用相应的API，就可以用于人脸识别、提取特征点等操作。对于一些成熟的算法，如人脸识别，可以直接使用这两个库得到识别结果，如果要识别的物体比较复杂，就需要进行特征点的计算，由于前端的计算力限制，可能需要其他方法提高性能。
计算机视觉和深度学习密切相关，表1比较了几个深度学习前端库。
表1. 几个深度学习前端库的比较
以上是毕业论文文献综述，课题毕业论文、任务书、外文翻译、程序设计、图纸设计等资料可联系客服协助查找。
