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能夠使用，需要導出成特定格式，導出的過程中因模型、動畫的不同，會有一些坑。另外資源大小的優化、壓縮也是一個問題。
https://blog.csdn.net/milli236/article/details/78672220