WebAR｜前端开发者开发WebAR资源最全大汇总

关于WebAR

WebAR就是在Web端集成AR的功能。WebAR使用WebRTC，WebGL和现代传感器API的组合技术，通过Web浏览器提供对基于Web的增强现实的访问与实现。

WebAR优缺点

• WebAR可以轻松地运行在Android、iOS、Windows、Mac系统的Web浏览器上，无需APP，轻松实现跨平台。
• WebAR 可以实现扫描识别图呈现3D动画模型、视频、图片、文字、UI按钮等效果，并且支持3D模型交互。
• WebAR主要是以URL的格式传播，符合微信等社交媒体信息流动的基本技术要求，配合创意策划方案，可以形成爆炸式的病毒营销效果。

当然WebAR目前也存在一些问题：

• 各浏览器标准不统一
• 3D内容加载慢，无法实现复杂的内容
• 渲染质量低
• 存在隐私问题
• 无法实现复杂交互

基础知识

 

熟练的开发WebAR应用那就必须掌握Web前后端知识，HTML、js、PHP。

1、HTML

HTML不用多说了，网上学习资源多的不计其数，在这里列举一些AIRX团队平时学的视频、书籍、网站等。

HTML的英文全称是 Hyper Text Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。

【视频】初识HTML(5)+CSS(3)-2020升级版

https://www.imooc.com/learn/9

【视频】HTML5 教程手册

https://www.html.cn/doc/html5/

【在线网站】HTML5 教程 | 菜鸟教程

https://www.runoob.com/html/html-tutorial.html

【在线网站】W3School

https://www.w3school.com.cn/

2、JavaScript

【视频】JavaScript深入浅出

https://www.imooc.com/learn/277

【视频】JavaScript入门篇

https://www.imooc.com/learn/36

【视频】JavaScript进阶篇

https://www.imooc.com/learn/10

【在线网站】JavaScript 教程 | 菜鸟教程

https://www.runoob.com/js/js-tutorial.html

3、PHP

【视频】PHP入门篇

https://www.imooc.com/learn/54

【视频】PHP面向对象编程

https://www.imooc.com/learn/184

【在线网站】PHP 教程 | 菜鸟教程

https://www.runoob.com/php/php-tutorial.html

WebAR开源框架

1、AR.js

AR.js是一个轻量级的增强现实类JavaScript库，支持基于标记和位置的增强现实。开发人员可以使用几行HTML将AR特性和功能引入任何网站。该项目是开源的，在GitHub上拥有近14,000个stars，各种平台的开发人员正在使用它来创建更多新的数字体验。AR.js框架包括跨浏览器兼容性，并且支持WebGL和WebRTC，这意味着它可以在iOS 11以上的Android和iPhone设备上正常工作。通过包装许多不同的AR框架，包括three.js，a-frame和ARToolKit，AR.js使得将AR引入Web应用程序变得更加简单高效。

 

【文章】AR.js 初探

https://zhuanlan.zhihu.com/p/26364493

【文章】AR.js打造高效WebAR

https://blog.csdn.net/weixin_37683659/article/details/79513816

【开源项目】

https://jeromeetienne.github.io/AR.js-docs/misc/EXAMPLES.html

https://github.com/jeromeetienne/AR.js/

GeoAR.js:https://github.com/nicolocarpignoli/GeoAR.js

https://github.com/google-ar/three.ar.js

2、ARToolKit

ARToolkit 的 js 版本，支持 pat marker 和 nft marker 的识别与跟踪，基于开源的ARToolKit跟踪库，JSARToolKit使用WebGL & Three.js在真实世界对象上呈现3D模型。JSARToolKit是JavaScript的增强现实库。它是在GPL下发布的开源库。

【文章】