Web AR 技术调研笔记

1.技术体系

1.1技术体系整理

其中绿色底色的代表Demo中表现出的能力比较成熟,可以直接应用。

脑图地址:http://naotu.baidu.com/file/3392a895a903972520b2f65fda12ee3c?token=55695cff60c6e275

1.2 兼容性

Web AR的兼容性,可以认为是其用到两大核心技术的兼容性:

WebRTC:

WebGL:

1.3案例分析

公司的王者荣耀貂蝉AR广告, 《Web前端也能做的AR互动》

实际上就是一个基于Three.js渲染模型,并自行基于Three.js实现空间定位的一个AR应用。效果类似的是awe.js的空间定位功能,下面的Demo中有提供。

其开发模式为:

UI开发

  • 开发or导出貂蝉游戏人物模型
  • 开发人物皮肤贴图纹理
  • 开发模型动画
  • 使用3D软件导出Three.js支持的模型格式(这里看似简单,实际有大坑,不同的模型、骨骼、贴图、动画,导出时会有不同问题,还要控制模型资源大小,不能过大)

前端开发

  • · WebGL全景场景(不支持WebRTC设备柔性降级)
  • · 空间定位开发
  • · 模型渲染
  • · 交互与动画控制
  • · 终端适配

2.业界相关的库及Demo

整理了部分Demo:https://artoolkittest.sparta.html5.qq.com/

2.1JsArtoolkit

Artoolkit的js版本,支持pat marker和nft marker的识别与跟踪,配合threejs可渲染模型,目前的问题是nft marker跟踪的帧率不高。

JsArtoolkit的项目地址为:https://github.com/artoolkit/jsartoolkit5

Pat识别

https://artoolkittest.sparta.html5.qq.com/pat/examples/pattern_and_barcode_threejs.html

效果较好:

Nft识别

https://artoolkittest.sparta.html5.qq.com/nft/examples/nft_worker_threejs.html

2.2 Awejs

基于jsartoolkit实现了图片marker识别,并封装了空间定位能力,提供了AR/VR设备体验版本的Demo。

Awejs的项目地址为:https://github.com/buildar/awe.js

pat识别

https://artoolkittest.sparta.html5.qq.com/awe/examples/marker_ar/

空间定位

此Demo需要在手机中打开

https://artoolkittest.sparta.html5.qq.com/awe/examples/geo_ar/

结合Oculus Rift

暂未调研

结合体验仪器的体验(Google Glass、Kinect(XBOX体感外设))

暂未调研

2.3 JsObjectDetect

JsObjectDetect亮点功能在人脸和手势识别跟踪方面的表现,且能识别、跟踪人脸五官。

JsObjectDetect的项目地址:https://github.com/mtschirs/js-objectdetect/

人脸、五官识别

该Demo提供了人脸识别能力(嘴巴、眼睛、鼻子),从图片识别:

https://artoolkittest.sparta.html5.qq.com/jsobjectdetect/examples/example_image.htm

识别+跟踪

https://artoolkittest.sparta.html5.qq.com/jsobjectdetect/examples/example_sunglasses.htm

从效果来看,该库是Web AR中少有的人脸识别跟踪效果较好,且帧率较高的AR库。下面的Demo中可以选择一款眼镜,Demo识别到人脸后把眼镜放在眼部并跟踪。

另外,http://facedetection.jaysalvat.com/ 这是一个基于js-objectdetect的人脸识别jquery插件,可以识别图片和视频中的人脸,没有提供摄像头帧实时识别的Demo,估计是此插件计算性能应该跟不上,帧率不会高。

性能

JsObjectDetect自称人脸识别方面能力和效果秒杀其他库:

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模型的姿态,可以控制,但是效果不佳,有点莫名其妙的意思。

https://artoolkittest.sparta.html5.qq.com/jsobjectdetect/examples/example_gesture_input.htm

手势翻页

用手势控制网页翻页,手在镜头下部时向下翻页,在镜头上部时向上翻页,点红框内链接开始。

https://artoolkittest.sparta.html5.qq.com/jsobjectdetect/examples/example_gesture_scroll.htm

2.4 Tracking.js

Tracking.js提供了人脸识别的能力,但是在浏览器里边表现不佳。另外,这个库还提供了显示识别特征点等能力。

tracking.js的项目地址为:https://github.com/eduardolundgren/tracking.js/

tracking.js的 Demo列表:https://trackingjs.com/examples/brief_camera.html

https://trackingjs.com/examples/face_fish_tank.html

tracking.js人脸+姿态 帧率不高 17.5 fps

2.5 caffejs

Caffejs支持在Web中运行神经网络功能,该项目提供了一些示例模型的演示。

如果能有一套成熟的方案把这个库包装一下用起来,意义还是挺大的:将图片识别的工作放在浏览器中完成,可以节省大量的网络流量和服务器资源。

但是目前浏览器中做识别由于性能原因,识别耗时较长,不能太过频繁的识别。

项目地址:https://github.com/chaosmail/caffejs

2.6 其他

CCV

http://wesbos.com/demos/html5-face-detection/

基于CCV的人脸识别demo

帧率并不高,没有深入看

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能够使用,需要导出成特定格式,导出的过程中因模型、动画的不同,会有一些坑。另外资源大小的优化、压缩也是一个问题。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

R语言可视化——中心放射状路径图

最近一直在研究ggplot剩余还没有涉略过的图表类型,试图挖掘出一些新的图表形式,就像是该包的作者所暗示的那样,ggplot2只是给你搭建了一个图层语法环境,至...

4044
来自专栏机器人网

机械臂部设计的基本要求

承载能力足: n手臂是支承手腕的部件,设计时不仅要考虑抓取物体的重量或携带工具的重量,还要考虑运动时的动载荷及转动惯性。 刚度高: 为了防止臂部在运动过程中产生...

2595
来自专栏安富莱嵌入式技术分享

【安富莱二代示波器教程】第1章 示波器基础知识

本章的内容整理自网络,主要讲解示波器的基础知识。如果初学的话非常有必要对这部分知识有一个了解。因为示波器是硬件调试必不可少的设备。

853
来自专栏机器学习算法与Python学习

漫画线稿上色AI最新版来了(视频教程)

还记得那个给本子上色的Style2paints吗?这是目前最好的线稿上色AI工具,没有之一。

1101
来自专栏Jackson0714

Web性能探索之旅-1.无线网络基础

1332
来自专栏大数据挖掘DT机器学习

数据挖掘知识点总结(Microsoft 关联规则分析算法)

前言 本篇继续我们的微软挖掘算法系列总结,前几篇我们分别介绍了:Microsoft决策树分析算法、Microsoft聚类分析算法、Microsoft Naive...

3306

如何使用Google工作表创建杀手级数据仪表板

每家公司都围绕目标开展业务并使用关键绩效指标(KPI)跟踪实现这些目标的进展情况。对于每个目标,团队应能随时轻松地回答以下两个主要问题:

2006
来自专栏数据猿

【每周一本书】之《Microsoft Power BI 数据可视化与数据分析》

【数据猿导读】随着大数据研究热潮的兴起,各种数据可视化图表层出不穷,大数据生动呈现就成为了具有挑战性的工作,随之出现了大量的可视化软件 编辑 | abby 官网...

36011
来自专栏python开发者

[验证码识别技术]-初级的滑动式验证图片识别

初级的滑动式验证图片识别方案 1 abstract 验证码作为一种自然人的机器人的判别工具,被广泛的用于各种防止程序做自动化的场景中。传统的字符型验证安全性已经...

2505
来自专栏张善友的专栏

思维导图FreeMind

什么是MindMap? MindMap(被译成思维导图或心智图)是一种思维工具,由英国的记忆之父托尼-博赞发明。 MindMap是一种新的思维模式,它将左脑...

2308

扫码关注云+社区