WebAR入坑学习

一、解决的问题

   1、解决AR需要下载App的麻烦

   2、分享简单

   3、高效制作

       Web3D都能相较传统的AR、VR制作周期要缩短很多，在更需要抓时效性的宣传中，选择WebAR/VR会更加适合。此外                     RAVVAR的Web3D编辑器也开放给大众来制作WebAR/VR场景。

   4、增加粉丝

   5、更酷炫产品展示

二、需要的技术面及目前开源的技术解决方案

WebRTC

   RAVVAR的Web3D编辑器也开放给大众来制作WebAR/VR场景

   EasyAR

       EasyAR实现WebAR功能

   AR.js打造高效WebAR（three.js+AR.js）

      AR.js 是一款应用于 Web 的高效增强现实（AR）库。

           特点：

• 非常快：即使在手机上也能高效运行，包括 Android、IOS 和 Windows phone 。
  
• 基于 Web ：纯 Web 解决方案，无需安装。基于 three.js + jsartoolkit5
  
• 开源：完全开源、免费
  
• 标准：适用于任何带有 webgl 和 webrtc 的手机
  

  Three.js

      Three.j入门学习

       GitHub

   A-Frame    

        A-Frame School

        DEMO

JsArtoolkit

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

Awejs

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

JsObjectDetect

   亮点功能在人脸和手势识别跟踪方面的表现，且能识别、跟踪人脸五官。 自称人脸识别方面能力和效果秒杀其他库：

Tracking.js

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

caffejs

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

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

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

三、DEMO例子

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

   https://blog.csdn.net/qq_35128576/article/details/81334847

   https://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201612/537832.shtml

   http://web.jobbole.com/90914/

四、3D素材在线制作

   https://www.ddd.online/mall/search?isFree=true