web AR 最近一直再做一个web ar的东西记录一下
由于主要浏览器的限制,用户只能在 https 网站下才能访问手机的摄像头或摄像头 GPS 传感器。
现在有的一些前端ar的架构
AR.js : 中文文档
AR.js 在增强现实方面提供了如下功能:
-
图像追踪。当相机发现一幅2D图像时,可以在其上方或附近显示某些内容。内容可以是2D图像、gif、3D模型(也可以是动画)和2D视频。案例:艺术品、学习资料(书籍)、传单、广告等等。
-
基于位置的AR。这种“增强现实”技术利用了真实世界的位置,在用户的设备上显示增强现实的内容。开发者可以利用该库使用户获得基于现实世界位置的体验。用户可以随意走动(最好是在户外)并通过智能手机看到现实世界中任何地点的 AR 内容。若用户移动和旋转手机,AR内容也会同步做出反应(这样一些AR内容就被“固定”到真实位置了,且会根据它们与用户的距离做出适当的变化)。这样的解决方案让我们做出交互式旅游向导成为可能,比如游客来到一个新的城市,游览名胜古迹、博物馆、餐馆、酒店等等都会更方便。我们也可以改善学习体验,如寻宝游戏、生物或历史学习游戏等,还可以将该技术用于情景艺术(视觉艺术体验与特定的现实世界坐标相结合)。
-
标记跟踪。当相机发现一个标记时,可以显示一些内容(这与图像跟踪相同)。标记的稳定性不成问题,受限的是形状、颜色和尺寸。可以应用于需要大量不同标记和不同内容的体验,如:(增强书籍)、传单、广告等。
优点:
- 非常快: 在手机上运行如丝般顺滑。
- 基于 Web: 纯粹的 web 解决方案,因此无需安装。由 Three.js + A-Frame + jsartoolkit5 组成。
- 开源: 完全开源免费。
- 标准: 适用于任何使用 webgl 和 webrtc 的手机
下面是一些要求和已知的限制条件:
-
适用于任何使用 webgl 和 webrtc 的手机
-
标记相关的功能消耗很小,而图像追踪才是消耗 CPU 的大头。
-
很遗憾在 iOS 的 Chrome 上无法使用,因为目前 iOS 上的 Chrome 不支持摄像头访问。
-
在拥有多个摄像头的设备上,Chrome 可能在检测正确的摄像头方面存在问题。(‘这个可以通过修改源码修改强制获取后置摄像头’)
-
`getUserMedia( { video: { facingMode: { exact: "environment", }, }, }, success, error );
`
-
如果您发现 AR.js 打开的摄像头不对,请使用火狐浏览器。
-
要使用基于位置的功能,您的手机需要有 GPS 传感器。
-
请 iOS 用户仔细阅读所有 AR.js 的弹出层内容,因为在 iOS 上需要用户做出操作来激活地理位置。
-
基于位置的功能仅在 A-Frame 版中可用。