移动设备WebAR入坑指南

来自:点融黑帮(微信号:DianrongMafia),作者:点融mafia

增强现实(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应用。

推荐↓↓↓
人工智能与大数据
上一篇:深度学习2018下半年关键技术大盘点:模型、社区与框架 下一篇:谷歌NeurIPS 2018论文:GAN生成3D模型,图像自带逼真效果