快速搭建一个Web AR应用
AR是增强现实的缩写，可以在真实世界的映像中叠加额外的信息来增强对现实的表达能力。最出名的一个AR应用就是精灵宝可梦了，玩家用手机在现实世界中捕捉宝可梦小精灵。
通常AR应用可以根据不同的方式来对现实世界的映像进行处理，然后生成AR信息。例如对于图像进行判断，或基于GPS位置信息判断，看是否要呈现AR的内容。要想获得好的AR的效果，对于手机的硬件也是有一定的要求的，因为手机需要进行校正，使得能准确的识别物体的表面，以更好的放置AR模型。例如谷歌的手机，只有获得了AR认证的手机型号，才能提供较好的AR能力。
制作AR的应用，也有很多的软件，例如Unity的AR foundation，其融合了谷歌的AR Core和苹果的AR kit，可以方便的制作跨平台的AR应用。我也尝试了用Unity来制作AR，但是发现需要有合适的支持AR的手机才能测试效果，我手头的两部小米的手机，虽然是在谷歌的认证型号中，但是做出的效果确差别很大，因此只能放弃用Unity。经过在网上搜索，我发现其实还有另外一种更方便的方式可以快速的搭建手机的AR应用，那就是Web AR的方式，这里有很多个开发框架支持这种方式，例如AR.js, webar-rocks等等，我选择了AR.js来进行开发。
AR.js融合了ARToolkit，A-Frame, Three.js等几个框架，其中ARToolkit是提供AR引擎的相关功能，例如对图形进行检测，测量摄像头与物体的距离等等。A-Frame和Three.js这两个框架是提供了WebGL的渲染能力。官网的介绍也很简洁易懂，可以参阅AR.js Documentation
这里我介绍一下用AR.js搭建一个AR应用的方法。AR.js支持图像追踪，Marker识别，室外定位这几种AR触发方式。我这里基于图像追踪来搭建一个室内的AR应用。
首先选取几个室内的位置来摆放AR的内容，拍摄这些位置的图片，要注意的是图片内容越复杂越好，因为之后我们要对图片进行处理，提取图片的特征。图片越复杂，其包括的轮廓线条就越丰富，例如直线，转角，弧形等等，这样就能更准确的进行定位，另外图片包括的像素越多就越好，所以我们尽量不要对手机拍摄的图片进行缩小分辨率的操作。之后我们可以把图片上传到这个网站NFT-Creator-Web来提取图片的特征，这个网站会对每张图片生成三个文件，包含了图片的特征。把这些生成后的文件保存下来。
然后我们要创建AR的内容，这里我找到一个很好的网站，里面有很多很漂亮的免费的3D模型下载，Explore 3D Models - Sketchfab，这里我们下载模型的时候尽量选择GLTF格式，因为AR.js也是推荐使用这种格式的。
最后我们就可以在web服务器里面创建一个HTML文件，内容如下：
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<script src="https://raw.githack.com/fcor/arjs-gestures/master/dist/gestures.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait ...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true; precision: medium;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
gesture-detector
>
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-nft
type="nft"
url="marker/marker"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
>
<a-entity
gltf-model="/models/medieval/scene.gltf"
scale="5 5 5"
position="150 -100 -150"
class="clickable"
gesture-handler="minScale: 0.25; maxScale: 10"
>
</a-entity>
</a-nft>
<a-nft
type="nft"
url="ntf/location/location_1"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
>
<a-entity
gltf-model="/models/rocket/scene.gltf"
scale="1 1 1"
position="50 -100 -50"
class="clickable"
gesture-handler="minScale: 0.25; maxScale: 10"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
简单解释一下，首先三个Script标签是引入了相关的JS文件，其中第三个是用于手势识别的。这里最后两个Sricpt的地址需要有国外代理才能访问，建议先下载到本地。然后<a-scene>这个标签是建立AR场景的，因为这个场景里面我们有两个图片追踪，所以里面包括了两个<a-nft>的标签。在<a-nft>里面我们需要定义url，这是指向我们之前保存的图像特征文件的路径，在<a-entity>标签里面需要指定我们要加载的3D模型的路径。
启动web服务器之后，访问这个html即可测试AR应用。注意这里的Web服务器需要采用https的方式访问，因为需要打开摄像头，按照谷歌的设定，只有通过https调用的网站才能开启摄像头。