webAR涉及的技术「建议收藏」

webAR涉及的技术「建议收藏」1.技术体系1.1技术体系整理其中绿色底色的代表Demo中表现出的能力比较成熟,可以直接应用。脑图地址:http://naotu.baidu.com/file/3392a895a90397252

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1.技术体系
1.1技术体系整理
webAR涉及的技术「建议收藏」
 
其中绿色底色的代表Demo中表现出的能力比较成熟,可以直接应用。
 
 
1.2 兼容性
Web AR的兼容性,可以认为是其用到两大核心技术的兼容性:
 
WebRTC:
 
webAR涉及的技术「建议收藏」
 
WebGL:
webAR涉及的技术「建议收藏」
 
 
1.3案例分析
公司的王者荣耀貂蝉AR广告, 《Web前端也能做的AR互动》
 
实际上就是一个基于Three.js渲染模型,并自行基于Three.js实现空间定位的一个AR应用。效果类似的是awe.js的空间定位功能,下面的Demo中有提供。
 
其开发模式为:
 
UI开发
 
开发or导出貂蝉游戏人物模型
 
开发人物皮肤贴图纹理
 
开发模型动画
 
使用3D软件导出Three.js支持的模型格式(这里看似简单,实际有大坑,不同的模型、骨骼、贴图、动画,导出时会有不同问题,还要控制模型资源大小,不能过大)
 
前端开发
 
· WebGL全景场景(不支持WebRTC设备柔性降级)
 
· 空间定位开发
 
· 模型渲染
 
· 交互与动画控制
 
· 终端适配
 
2.业界相关的库及Demo
 
2.1JsArtoolkit
Artoolkit的js版本,支持pat marker和nft marker的识别与跟踪,配合threejs可渲染模型,目前的问题是nft marker跟踪的帧率不高。
 
JsArtoolkit的项目地址为:
https://github.com/artoolkit/jsartoolkit5
 
Pat识别
 
 
效果较好:
webAR涉及的技术「建议收藏」
 
 
Nft识别
 
 
2.2 Awejs
基于jsartoolkit实现了图片marker识别,并封装了空间定位能力,提供了AR/VR设备体验版本的Demo。
 
Awejs的项目地址为:
https://github.com/buildar/awe.js
 
pat识别
 
webAR涉及的技术「建议收藏」
 
 
空间定位
 
此Demo需要在手机中打开
 
 
webAR涉及的技术「建议收藏」
 
结合Oculus Rift
 
暂未调研
 
结合体验仪器的体验(Google Glass、Kinect(XBOX体感外设))
 
暂未调研
 
2.3 JsObjectDetect
JsObjectDetect亮点功能在人脸和手势识别跟踪方面的表现,且能识别、跟踪人脸五官。
 
JsObjectDetect的项目地址:
https://github.com/mtschirs/js-objectdetect/
 
人脸、五官识别
 
该Demo提供了人脸识别能力(嘴巴、眼睛、鼻子),从图片识别:
 
 
webAR涉及的技术「建议收藏」
 
识别+跟踪
 
 
从效果来看,该库是Web AR中少有的人脸识别跟踪效果较好,且帧率较高的AR库。下面的Demo中可以选择一款眼镜,Demo识别到人脸后把眼镜放在眼部并跟踪。
 
webAR涉及的技术「建议收藏」
 
另外,
http://facedetection.jaysalvat.com/ 这是一个基于js-objectdetect的人脸识别jquery插件,可以识别图片和视频中的人脸,没有提供摄像头帧实时识别的Demo,估计是此插件计算性能应该跟不上,帧率不会高。
 
性能
 
JsObjectDetect自称人脸识别方面能力和效果秒杀其他库:
webAR涉及的技术「建议收藏」
webAR涉及的技术「建议收藏」
 
Chrome 40 / FF 35    Detections per Second    Detections    Seconds
js-objectdetect    17.5 / 16.9    50 / 50    2.86 / 2.96
jsfeat    9.4 / 6.3    30 / 30    3.18 / 4.75
tracking.js    7.7 / 8.97    48 / 48    6.24 / 5.35
Beyond Reality Face    7.4 / 1.7    41 / 41    5.50 / 23.98
CCV    2.2 / 4.4    8 / 8    2.22 / 1.80
手势控制3D模型
 
用手势控制3 D模型的姿态,可以控制,但是效果不佳,有点莫名其妙的意思。
 
 
webAR涉及的技术「建议收藏」
 
手势翻页
 
用手势控制网页翻页,手在镜头下部时向下翻页,在镜头上部时向上翻页,点红框内链接开始。
 
 
webAR涉及的技术「建议收藏」
 
2.4 Tracking.js
Tracking.js提供了人脸识别的能力,但是在浏览器里边表现不佳。另外,这个库还提供了显示识别特征点等能力。
 
tracking.js的项目地址为:
https://github.com/eduardolundgren/tracking.js/
 
 
 
tracking.js人脸+姿态 帧率不高 17.5 fps
webAR涉及的技术「建议收藏」
 
 
2.5 caffejs
Caffejs支持在Web中运行神经网络功能,该项目提供了一些示例模型的演示。
 
如果能有一套成熟的方案把这个库包装一下用起来,意义还是挺大的:将图片识别的工作放在浏览器中完成,可以节省大量的网络流量和服务器资源。
 
但是目前浏览器中做识别由于性能原因,识别耗时较长,不能太过频繁的识别。
 
 
2.6 其他
CCV
 
 
基于CCV的人脸识别demo
 
webAR涉及的技术「建议收藏」
 
帧率并不高,没有深入看
 
Jsfeat
 
暂未研究
 
Beyond Reality Face
 
暂未研究
 
3.总结
目前Web AR业界已经有了一定的技术积累,但是还没有达到成熟可用的地步,用一句话概括一下:底层识别能力弱,上层渲染能力强。
 
3.1底层能力
Marker识别方面,jsartoolkit的pat模式识别跟踪效果不错,但是nft识别速度慢,且卡顿,无法达到可以应用的地步。
 
人脸识别方面,JsObjectDetect的表现还算不错,可以识别、跟踪人脸以及五官位置,据观察应该是只支持2D坐标的识别,不支持3D姿态的识别。
 
手势识别方面,JsObjectDetect支持手势识别能力,根据其提供的Demo来看,识别是可以识别,但是不够稳定,经常识别丢,难以在现实项目中应用。
 
图像识别方面,之前经x哥介绍看了下caffejs这个Web神经网络的项目,目前是官方的Demo可以跑起来,但是我们自己训练的模型跑出来结果不对。
 
3.2上层渲染
模型渲染,目前看到的Web中主流3D模型渲染方式是Three.js,做Web AR方面的开发,无论底层能力采用何种方案,都是必须系统学习一下Three.js的。
 
3D模型开发,需要专业的UI开发工程师来开发3D模型、贴图以及动画,涉及到maya、3Dmax等软件的学习。
 
模型导出,3D模型要让Three.js能够使用,需要导出成特定格式,导出的过程中因模型、动画的不同,会有一些坑。另外资源大小的优化、压缩也是一个问题。
 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167110.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号