快速搭建一个Web AR应用_webar

作者：IT小白 | 2024-02-15 09:32:33

踩

webar

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调用的网站才能开启摄像头。

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/83208