快速搭建一个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-scenevr-mode-ui="enabled: false;"renderer="logarithmicDepthBuffer: true; precision: medium;"embeddedarjs="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-nfttype="nft"url="marker/marker"smooth="true"smoothCount="10"smoothTolerance=".01"smoothThreshold="5"raycaster="objects: .clickable"emitevents="true"cursor="fuse: false; rayOrigin: mouse;"><a-entitygltf-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-nfttype="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-entitygltf-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调用的网站才能开启摄像头。

快速搭建一个Web AR应用相关推荐

go html vue,用Go+Vue.js快速搭建一个Web应用(初级demo)
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开 ...
【技术分享】Sanic+Amis：3天快速搭建一个web服务
前言测试工作中,需要搭建一些生产力小工具来提高工作效率. 基于web的服务,无需终端可多人协作,易部署,成为第一选择. 问题:搭建web服务需要全栈知识,编写http服务和前端样式需要一定技术门槛. ...
一步步学习SpringBoot（一）快速搭建一个web
适应读者前端工程师(java系的公司) 前端架构师(java系的公司) java工程师测试工程师(java系的公司) 什么是SpringBoot? Spring Boot便是一个社区反馈推动的项目 ...
快速搭建一个网关服务，动态路由、鉴权看完就会（含流程图）
[文章来源]https://sourl.cn/tcbSPi 前言本文记录一下我是如何使用Gateway搭建网关服务及实现动态路由的,帮助大家学习如何快速搭建一个网关服务,了解路由相关配置,鉴权的流 ...
test.php创建,基于phpstudy简单快速搭建一个php程序
原标题:基于phpstudy简单快速搭建一个php程序人人都是程序员,希望在零碎的阅读时间里,给您一些技术提升. 1 安装phpstudy 通过以下链接download.csdn.net/downl ...
使用Django+MySQL快速搭建一个属于自己的网站
使用Django+MySQL快速搭建一个属于自己的网站 Hello小伙伴们,你们好啊~~ 又是日常get新技能的一天, 今天,咱们来整理一下如何使用VMware Workstation上进行openE ...
如何快速搭建一个完整的移动直播系统？
**如何快速搭建一个完整的移动直播系统?** 原文连接:http://toutiao.com/a6301796359717945601/ http://toutiao.com/a62784095597 ...
如何快速搭建一个 linux 全方位资源监控系统并带有炫酷的表盘图形统计？
如何快速搭建一个 linux 全方位资源监控系统并带有炫酷的表盘图形统计? 使用prometheus.grafana或者zabbix 这些监控软件,也是非常不错的一个选择,但是还有更简单.更小巧的统计 ...
java造轮子：快速搭建一个网关服务，动态路由、鉴权看完就会（含流程图）
前言本文记录一下我是如何使用Gateway搭建网关服务及实现动态路由的,帮助大家学习如何快速搭建一个网关服务,了解路由相关配置,鉴权的流程及业务处理,有兴趣的一定看到最后,非常适合没接触过网关服务的 ...

快速搭建一个Web AR应用

快速搭建一个Web AR应用相关推荐

最新文章

热门文章