杭州崛新智能科技有限公司
官网域名
http://hzhd.eb.cn
好产品,一看就知道
品质源于对每个细节的关注
移动设备WebAR入坑指南
发布日期:2019-08-27 03:00:15    来源:未知    作者:点融黑帮    浏览量:7

增强现实(Augmented Reality,简称AR),是指透过摄影机视频的位置及角度精算并加上图像分析技术,让显示屏上的虚拟世界能够与现实世界场景进行结合与交互的技术。

增强现实(AR)实现原理:调用摄像头获取视频流、 图像分析识别、 虚拟物体叠加在视频画面上。实现技术分为光学透视式和视频透视式。

目前移动设备通常采用视频透视式来实现增强现实(AR)。在Https访问下使用WebRTC(Web Real-Time Communications 一个支持网页浏览器进行实时语音对话或视频对话的技术) 中的getUserMedia(默认前置摄像头)和enumerateDevices(遍历可用的多媒体输入和输出设备)来调用摄像头获取视频流。

getUserMedia(前置摄像头)示例如下:

getUserMedia(后置摄像头)示例如下:

facingMode的兼容性不佳,只能在iOS 11下勉强使用,安卓系统需要另辟蹊径。折中的方法是使用enumerateDevices遍历可用设备,让用户主动切换至后置摄像头。

enumerateDevices示例如下:

enumerateDevices遍历完设备后,可以通过sourceId指定选中设备

获取到视频流之后的工作就是图像的识别和追踪了。视频流可以看作一帧一帧的图像,所以处理视频流的过程可以理解为图像处理的过程。处理视频流一般有两种方式:前端处理和后端处理。

前端处理视频流可以使用Tracking.js、JSFeat和AR.js等。以Tracking.js色彩识别为例:

即使现在移动设备性能突飞猛进,目前还是存在前端算力不足和算力不统一。出于性能考虑则会采用前端传输视频流给后端,后端使用SLAM等算法处理完毕返回结果到前端。传输前可以先处理图片信息:canvas.toDataURL将图片转为base64字符串、canvas.toBlob将图片转为二进制、WebGLRenderingContext.readPixels获取framebuffer的像素值。然后同通过AJAX或WebSocket传输给后端。

识别完图像之后,就需要将虚拟物体叠加在视频画面上。这部分渲染与交互会用到WebGl。因为WebGL的API需要开发者了解大量OpenGL相关知识,所以推荐新学者使用目前比较成熟的WebGL 渲染交互库。A-Frame、Three.js、Babylon.js、Pixi.js等,其中的侧重点各不相同,2D、3D、高精度渲染等,可以根据自身项目选择使用方案。

若使用Three.js,渲染时Renderer、Camera、Scene等用法请移步至笔者虚拟现实(VR)初探。如果只想体验一下,并不想了解太多上文提及技术。请直接使用AR.js,只用以下HTML代码即可轻松实现一个增强现实(AR)应用。

不过本质上AR.js实现增强现实(AR)的方法和上文所述技术点基本相似。底层封装了Three.js和JSARToolKit,同时使用了WebGL、WebRTC来实现增强现实(AR)。上面HTML中的自定义tag则使用了A-Frame。

随着苹果在iOS 11中加入的ARKit、iOS 12中的ARKit2,移动设备运算能力逐年提升,增强现实(AR)的可用性也越来越高,用途也越来越广。除了ARKit和ARCore两个移动SDK外。Web开发者也可以使用AR.js、WebARonARKit、WebARonARCore、Three.ar.js等更加高效和便捷的库开发AR应用。

Copyright 版权所有 ©某某实业有限公司 power by LTD.com
技术支持 认证官微 举报反馈
官微互链: 财盛装饰工程 | 宇宙 | 三台山画室 | 浙江大学心理与行为科学系 | 电商网络 | 乐驾汽车服务 | 千禧搬家 | 古龙金属装饰 | 谊华汽车租赁 | 鼎尊 | 光大装饰工程 | 国力清算事务所 | 中铁房地产集团 | 鹏程实业集团 | 奥荣 | 建科建筑节能