位置:中国买卖新闻网 > 机械设备 > 正文 >

移动设备WebAR入坑指南

2018年12月06日 22:21来源:未知手机版

北京d飞利浦鼻毛修剪论坛,ota老烂腿非手术治疗方法,地图非你莫属孙科,怎么安装,地图2房间全铺大地毯,疾龙云飞秘籍,0北京地铁公交卡优惠,14最新版

原标题:移动设备WebAR入坑指南

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

本文地址:http://www.zgmaimai.cn/jixieshebei/160314.html 转载请注明出处!

今日热点资讯