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 35Detections per SecondDetectionsSeconds js-objectdetect17.5 / 16.950 / 502.86 / 2.96 jsfeat9.4 / 6.330 / 303.18 / 4.75 tracking.js7.7 / 8.9748 / 486.24 / 5.35 Beyond Reality Face7.4 / 1.741 / 415.50 / 23.98 CCV2.2 / 4.48 / 82.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能夠使用，需要導出成特定格式，導出的過程中因模型、動畫的不同，會有一些坑。另外資源大小的優化、壓縮也是一個問題。

總結

以上是生活随笔為你收集整理的webAR涉及的技术「建议收藏」的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。