内容简介:。# AR实现原理分析三要素:
导语 AR浪潮正滚滚而来,Web 浏览器作为人们最唾手可得的人机交互终端,AR技术又有那些进展,下面作者将自己在项目内AR的探索总结了一下,和大家分享 。
。
# AR实现原理分析三要素:
1.摄像头的调用
2.视频流内容识别
3.虚拟物体的叠加在画面上
# 技术实现一:摄像头的调用
1.使用getUsermedia获取摄像头内容
2.截取当前帧的内容:canvas toDataURL
目前的浏览器支持情况如下:
#技术实现第二步:视频流内容识别
方案1:纯JS识别库:js-aruco,tracking.js ,jsartoolkit5, ar.js进行识别
js-aruco和tracking.js在处理识别主要应用了:canvas来读取分析对应的图片信息。在处理视频流,视频如果尺寸大了,则识别速度慢,卡顿明显。目前主流分辨率都在750*1334左右,直接处理这个大小的视频,速度肯定不够。下图附上参考和网址:
jsartoolkit5和 AR.js:主要是将artoolkit c++库通过 Emscripten编译成对应的js文件(asm.js)文件,在性能和计算上得到了提升。但是对应视频流的解析会有轻微的抖动。
观看对应的帧频,js-aruco = tracking.js <jsartoolkit5+ar.js
方案2:websocket + opencv
既然前端处理视频流不够快,那我们是否直接后端处理就好?
为了减少网络请求:主要用上了websocket来网络请求处理,
后台主要适用了node-opencv
问题:网络传输会影响识别速度。
1.图片数据转化耗时:视频转成当前帧图片,toDataURL(),750*1334,耗时大概在80ms左右。
优化方法:toDataURL(‘image/jpeg’)会加快速度,因为这里不需要计算Alpha通道。在20ms左右。速度会高于toDataURL();
2.图片传输耗时:websocket在传输图片信息大约在50ms左右。
#技术实现第三步:实现虚拟场景和视频结合
2D内容和视频结合:canvas,利用 Canvas API 在相应坐标上进行绘制,展示一个实现的demo:
3D内容和视频结合:three.js或者layabox,利用webgl API在对应位置增加3D模型。
最后附上demo:
#总结
最近在AR项目探索,在web端的实现AR已经有了很好基础,解析耗时都是可以接受的。后端解析,前端结合3D是比较理想的解决方案。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- ROS探索总结(五十六)—— launch文件
- ROS2探索总结(十)—— ROS 2基础工具使用入门
- ROS2探索总结(十二)—— ROS2 Python编程基础
- airflow探索篇
- 探索 React 合成事件
- webSocket原理探索
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
机器与人:埃森哲论新人工智能
【美】保罗•多尔蒂 詹姆斯•威尔逊 / 赵亚男 / 中信出版社 / 2018-10-1 / 49.00元
自人工智能问世以来,人们普遍持有人机对立的观点,且无时无刻不在害怕自己的工作会被人工智能取代。作者认为,是时候抛开这些无谓的担忧了,因为人类社会正走向一个与机器共融共生的时代。 未来的新型工作模式是什么?未来有哪些工作不会被人工智能取代?人工智能时代重要的生存技能是什么?本书围绕这三大核心问题做了透彻的分析。作者带我们见识了置于业务流程背景之下的人工智能,阐述了其在不同职能部门中起到的推动作......一起来看看 《机器与人:埃森哲论新人工智能》 这本书的介绍吧!