AR.js框架调研报告
一．简介
AR.js:https://github.com/jeromeetienne/AR.js它是一个web端的增强现实框架，它运行在任何支持webgl和webrtc（Real-Time Communications）技术规范的浏览器中（android chrome已支持，ios需要升级到ios11及以上）。该框架建立在three.js、aframe.js、artoolkit5、emscripten and asm.js、chromium之上。
Demo:
aframe : https://jeromeetienne.github.io/AR.js/aframe/examples/basic.html
three.js: https://render-pre.alipay.com/p/h5/zm-ar/www/dogg.html
aframe: https://render-pre.alipay.com/p/h5/zm-ar/www/index.html
二．AR.JS框架
AR.js框架分为应用层和基础框架层。
1.AR应用层
AR应用分为aframe-ar、babylon-ar以及three-ar三种模式的web ar应用，aframe-ar.js/babylon-ar.js/ar.js均是基于基础框架层threex开发而来。
1.1Aframe AR
它基于threex编译生成，aframe-ar应用主要由aframe.js、aframe-ar.js aframe-component以及html组成。其中的自定义component处理aframe组件传入的参数，并传入threex封装提供的API中进行处理。
1.2 BabylonJS AR
Babylon-ar.js是基于three.js和babylon.js的3D游戏引擎。
1.3ThreeJS AR
该模式的AR应用主要利用threejs作为渲染引擎，并利用封装的threex进行完成AR应用的输入输出。
- AR基础框架层
AR基础框架分为threex、marker-area、ar api以及3rd lib，该框架的核心部分ar.js就是由这几部分编译生成。
2.1第三方库
三种追踪方式：arcuo, tango, artoolkit
这里的第三方ar库是分为三种，google的tango、aruco和jsartoolkit5。
three.webar.js: google tango基于three.js封装的ar库，用于跟踪后端。
aruco.js:一种基于OpenCV(Open Computer Vision Library)的AR应用库，跟artoolkit作用类似。
Artoolkit：目前使用最广泛的AR追踪库。追踪视频中的特殊影像（AR marker）,能够识别marker的位置及方向。三个要素：AR marker, camera, 3D模型
artoolkit.js:一个开源的AR应用库，目前使用最为广泛。
artoolkit.three.js:用设备相机作为输入帮助three.js建立ar场景。
artoolkit.api.js：AR控制器，主要用于标记的探测。
artoolkit工作原理：
2.2 threex
该模块的主要功能是利用第三方库进行图片的获取、分析以及标记的控制等操作。
threex.artoolkitsource：图片（摄像头/视频/图像）分析，摄像头位置追踪
threex.artoolkitcontext：主要引擎，在图像源中查找标记位置。
threex.armarkercontrols：控制标记的位置
2.3 markers-area
它的主要功能是多标记的区域控制
2.4 ar api
该部分主要是ar api的输出部分，目前主要给予aframe-ar提供api接口。
三．其他
- webvr-polyfill
webvr-polyfill主要用于把浏览器webvr新增api中的部分ES6的写法转成成ES5。
2.ARToolKit
它作为目前使用最为广泛的一个AR SD，主要是一方面通过它可以创建marker标记，并进行训练生成pattern文件。另一方面，需要通过它来识别pattern文件的marker标记。
2.1 Camera_para文件
artoolkit工具生成摄像机参数文件camera_para.dat，在AR应用的摄像头追踪过程中，通过camera_para.dat文件artoolkit可以在运行时自动校正对摄像机的畸变进行（需要依赖自身硬件的支持）。
camera_para具体参数：
https://archive.artoolkit.org/documentation/doku.php?id=2_Configuration:config_camera_calibration。
2.2 Marker标记
Marker必须是正方形的，必须有一个连续的边界（一般是全黑色或纯白色），标记图像pattern不得旋转对称（避免偶数阶旋转对称）。
2.3生成marker pattern的几种方式
A. artoolkit的mk_patt命令方式，图片必须是jpg格式
文档：https://www.artoolkit.org/documentation/doku.php?id=3_Marker_Training:marker_training。
B. artoolkit的genTexData xxx.jpg方式（生成自然特征的文件）
C.网络生成（图片必须是黑白色）：http://flash.tarotaro.org/blog/2009/07/12/mgo2/。
D.生成二维码的方式：
http://www.artoolworks.com/support/applications/marker/
- AR模型
目前为止该框架支持所有Three.JS库所支持的3D模型，例如：.gltf /. ply /.obj等等。但需注意3D动画由于自己的动画库在升级，如果ThreeJS不支持，需要自己写loader。目前Three.JS支持的loader有：GLTFLoader(不支持GLTF2Loader)、MTLLoader、OBJLoader、OBJLoader2等，详情见Three.JS Loaders：https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene。
4.实现WebAR应用的两种方法及步骤
4.1 ThreeJS模式
A.引入第三方three.js库及ar.js库，设置context.baseURL。
B.新建并初始化WebGL渲染引擎和AR场景。
C.新建并初始化摄像头
D.初始化ARToolkit相关参数（设置图片被训练成marker时的摄像头参数以及检测模式等参数），用于识别marker。
E.新建ARMarker的控制器（摄像头读取marker并与图片训练成marker的pattern文件进行比较识别）
F.新建需要被显示的AR实体模型，并添加到AR场景中（该步骤业务方可以发挥地方）
G.页面AR动画循环渲染
4.2 AFrame模式
A.引入第三方aframe.js库及aframe-ar.js库，设置context.baseURL。
B.编写aframe场景a-sene
C.编写aframe-ar配置组件（配置摄像头和pattern文件）,例如：a-anchor/a-camera/a-camera-static。
D.编写aframe摄像头组件
E.编写或加载aframe 3d模型（业务方发挥的地方）
F.其他aframe组件（配合动画模型编写）
注意：aframe模式时，需要自己参考aframe框架的语法来写或改component以实现自己的component接口。
四．遇到的问题（坑）
1.利用artoolkit生成marker pattern时一直不成功，原因：图片格式（宽高、JPG）不对，图片特征不够明显，图片不够清晰，图片分界边缘不够鲜明。
2.WebAR应用的浏览器必须支持webrtc的技术规范(ios11以下不支持)，并且基于安全策略的问题navigator.mediaDevices.getUserMedia接口只能在https（安全源）中被调用，否则会报证书错误的问题。
3.部分手机设备上只能调用前置摄像头（哪怕强制调用后置摄像头的时候），目前暂未找到有效解决办法。
4.开源的原AR.js项目源码JS库跟Demo没有实现代码完全分离，导致在编写个性化Demo时会遇到一些参数及资源配置是默认demo的资源等等方面的问题。
5.蜻蜓/basement不支持上传部署.dat/.pat/.patt/.dt等参数配置文件及AR模型文件，（目前已经联系集团相关同学迭代开发支持），如果把资源文件上传到其他CDN又会有跨域的问题。
6.该条注意点是针对使用aframe框架开发的AR应用：如果通过basement编译部署，项目中所有用到的参数配置文件（.dat/.pat等）url必须通过第三方框架react/vue在js中处理后传递到template，要不然basement在通过线上部署时会在文件后面加上hash后template就查找不到资源文件（离线包无该问题，但AR资源文件足够大时，不推荐离线包的方法部署）。