關於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下發布的開源庫。
【文章】ARToolKit之概述篇
https://www.cnblogs.com/polobymulberry/p/5857372.html?utm_source=itdadao&utm_medium=referral
【文章】ARToolKit之Example篇
https://www.cnblogs.com/polobymulberry/p/5905680.html
【開源項目】
https://github.com/artoolkit/jsartoolkit5/
https://artoolkit.github.io/jsartoolkit5/examples/index.html
https://github.com/jeromeetienne/jsartoolkit-experiments
https://samples.argonjs.io/jsartoolkit/index.html
https://devpost.com/software/noapp-ar
3、argon.js
argon.js最初旨在利用iOS上支持Argon AR的網絡瀏覽器的增強現實功能，從而簡化了提供移動AR體驗的過程，而無需創建，發佈和支持本機應用程序。但是，argon.js也可以與其他Web瀏覽器一起使用，以利用它們的功能允許你的應用程序提供每種瀏覽器能夠提供的各種AR體驗。儘管目前大多數Web瀏覽器的AR功能很少，但是它們正在迅速改進。
【源碼下載】
https://github.com/argonjs/argon
【示例samples】
https://samples.argonjs.io/
4、awe.js
awe.js提供了一些其他類型的AR體驗，如增強現實標記，基於位置，和leap motion傳感器AR。它使用WebRTC, WebGL，和getUserMedia設備API在瀏覽器中實現AR功能。Awe.js是一個JavaScript庫，它使用Three.js,可以在awe.js GitHub上下載該庫和一些示例。
【官網】
https://awe.media/
【代碼下載】
https://github.com/awe-media/awe.js/
【文章】使用Awe.js在瀏覽器中增強現實
https://blog.csdn.net/dingshi7798/article/details/105820263
5、three.ar.js
Three.ar.js用於構建運行在WebARonARKit和WebARonARCore中的AR web體驗。WebARonARKit和WebARonARCore是針對iOS和Android的實驗性應用程序，允許開發者使用web技術創建增強現實(AR)體驗。
【文章】AR.js打造高效WebAR（three.js+AR.js）
https://blog.csdn.net/weixin_37683659/article/details/79513816
【文章】THREE.AR.JS 入門教程 WEBG實例
https://blog.csdn.net/qq_40795166/article/details/87692589
【代碼下載】
https://github.com/google-ar/three.ar.js?files=1
【samples】
https://stemkoski.github.io/AR-Examples/
6、tracking.js
tracking.js庫將不同的計算機視覺算法和技術引入瀏覽器環境。通過使用現代HTML5規範，我們使您能夠進行實時顏色跟蹤，面部檢測等。
【文章】Tracking.js 學習筆記
https://www.jianshu.com/p/59989ab397b0
【文章】tracking.js實現前端人臉識別
https://blog.csdn.net/u014131617/article/details/86673037
【官網鏈接】
https://trackingjs.com/
【下載鏈接】
https://github.com/eduardolundgren/tracking.js/archive/master.zip
WebAR關鍵技術
想要實現WebAR效果，其實說白了就三個步驟：識別、跟蹤、3D物體的渲染。用到我們上面提到的幾個開源WebAR框架庫實現原理如下圖：
無論是native AR還是WebAR的一個最基礎要實現的功能就是識別。WebRTC（網頁實時通信，Web Real-Time Communication）是一個支持網頁瀏覽器進行實時語音對話或視頻對話的API。百度百科對WebRTC的解釋是這樣的：“它於2011年6月1日開源並在Google、Mozilla、Opera支持下被納入萬維網聯盟的W3C推薦標準。WebRTC實現了基於網頁的視頻會議，標準是WHATWG 協議，目的是通過瀏覽器提供簡單的javascript就可以達到實時通訊（Real-Time Communications (RTC)）能力。WebRTC（Web Real-Time Communication）項目的最終目的主要是讓Web開發者能夠基於瀏覽器（Chrome\FireFox\...）輕易快捷開發出豐富的實時多媒體應用，而無需下載安裝任何插件，Web開發者也無需關注多媒體的數字信號處理過程，只需編寫簡單的Javascript程序即可實現，W3C等組織正在制定Javascript 標準API，目前是WebRTC 1.0版本，Draft狀態；另外WebRTC還希望能夠建立一個多互聯網瀏覽器間的實時通信的平臺，形成開發者與瀏覽器廠商良好的生態環境。同時，Google也希望和致力於讓WebRTC的技術成爲HTML5標準之一，可見Google佈局之深遠。WebRTC提供了視頻會議的核心技術，包括音視頻的採集、編解碼、網絡傳輸、顯示等功能，並且還支持跨平臺：windows，linux，mac，android。”
WebRTC的API有以下特性：
1. 實時視頻或音頻以流對象的形式表示。
2. 一定的安全控制,在web應用程序開始獲取流數據之前,它通過詢問用戶是否授權。
3. 輸入設備的選擇由MediaStream 處理(例如,當本地計算機有兩個或者兩個以上的攝像頭或麥克風連接時).
4. 每個MediaStream對象包括幾個MediaStreamTrack對象。它們代表來自不同輸入設備的視頻和音頻。
5. 每個MediaStreamTrack對象可能包括幾個信道(右聲道和左聲道)。這些是MediaStream定義的最小部件。
其中WebRTC最關鍵的API方法是getUserMedia()：以實時獲取攝像頭的視頻流（PS：iOS11纔剛剛支持，Android很早版本就支持了）。爲用戶提供訪問硬件設備媒體（攝像頭、視頻、音頻、地理位置等）的接口，基於該接口，開發者可以在不依賴任何瀏覽器插件的條件下訪問硬件媒體設備。
MediaDevices.getUserMedia() 會提示用戶給予使用媒體輸入的許可，媒體輸入會產生一個MediaStream，裏面包含了請求的媒體類型的軌道。此流可以包含一個視頻軌道（來自硬件或者虛擬視頻源，比如相機、視頻採集設備和屏幕共享服務等等）、一個音頻軌道（同樣來自硬件或虛擬音頻源，比如麥克風、A/D轉換器等等），也可能是其它軌道類型。默認獲取的是前置攝像頭，如果想獲取後置攝像頭的視頻流，需要用
navigator.mediaDevices.enumerateDevices() 遍歷設備camera得到。且要用 https 打開網頁才能訪問攝像頭。
通過camera捕獲這一幀一幀的video stream之後，接下來就是圖像處理與跟蹤。圖像處理其實解決的就是特徵點匹配的問題。其實有很多第三方Web庫很輕鬆的實現，比如上面提到的tracking.js。“這兩個庫類似（Tracking.js和JSFeat），都是在前端做計算機視覺的，包括提取特徵點、人臉識別等。把 WebRTC 拿到的視頻流直接傳給它們並調用 API 就能得到自己想要的效果。對於一些成熟的算法，如人臉識別，可以直接拿到識別結果，如果自己要識別的物體比較複雜你也可以自己進行特徵點的計算，但這可能在前端會算力不足，關於性能的問題下文再論述。提到計算機視覺，不得不提深度學習，畢竟現在很多圖像處理算法被深度學習吊打。ConvNetJS，是斯坦福大學開源的一個前端深度學習框架，可以讓你在前端完成深度神經網絡的訓練。deeplearn.js是 Google Brain 團隊搞的，功能和 ConvNetJS 類似。現在 ConvNetJS 好像不怎麼維護了，deeplearn.js 還在頻繁更新中，感興趣的同學可以試用一下。另外一個緊鑼密鼓開發的深度學習庫 keras.js 則是讓你可以在瀏覽器中運行已經訓練好的 Keras 模型（Kears 是著名的深度學習開發框架），並支持 WebGL 2。”（引用自
https://www.yuque.com/letica/frontend/xnqkyn）。識別其實很簡單，不管是對於native AR還是WebAR，目前的識別算法與框架已經非常成熟，難就難在識別之後如何跟蹤，如何更好更穩定更高質量的跟蹤，這也是WebAR目前遇到的問題（其實也是整個AR行業技術上的一個難路虎），不管是上面提到的幾個WebAR的框架還是目前市面上已經商業化的WebAR SDK、WebAR解決方案都沒有很好的實現實時跟蹤。
WebAR進階
1、WebGL
WebGL（全寫Web Graphics Library）是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以爲HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就可以藉助系統顯卡來在瀏覽器裏更流暢地展示3D場景和模型了，還能創建複雜的導航和數據視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用於創建具有複雜3D結構的網站頁面，甚至可以用來設計3D網頁遊戲等等。
【在線網站】WebGL 中文教程
https://www.w3cschool.cn/webgl/vjxu1jt0.html
【視頻】WebGL視頻教程
https://ke.qq.com/course/325642
【WebGL網站】
http://www.hiwebgl.com/?cat=17
【文章】WebGL入門教程系列
https://www.bbsmax.com/A/ZOJPoN2zvV/
2、Three.js
Three.js是一個跨瀏覽器的腳本，使用JavaScript函數庫或API來在網頁瀏覽器中創建和展示動畫的三維計算機圖形。Three.js使用WebGL。但又不同於WebGL和OpenGL，Three.js更容易學習和掌握。Three.js允許使用JavaScript創建網頁中的GPU加速的3D動畫元素，而不是使用特定的瀏覽器插件。高級的JavaScript函數庫例如Three.js或GLGE、SceneJS、PhiloGL或一定數量的其他函數庫使作者在瀏覽器中顯示覆雜的三維計算機動畫而不需要使用傳統的獨立應用程序或插件成爲可能。
【官網鏈接】
https://threejs.org/
【文檔API】
https://www.techbrood.com/threejs/docs/
【代碼下載】
https://github.com/mrdoob/three.js/
【示例】
https://threejs.org/examples/#webgl_animation_cloth
【教程網站】
http://www.yanhuangxueyuan.com/
【視頻】Three.js視頻教程
https://ke.qq.com/course/325673?flowToken=1004926
https://edu.csdn.net/course/detail/26205
【視頻】WebGL之3D引擎Three.js基礎與項目實戰
http://edu.ibeifeng.com/view-index-id-322.html
Three.js 中文教程
https://www.techbrood.com/threejs/docs/
3、A-Frame
A-Frame是用於構建虛擬現實（VR）體驗的Web框架。A-Frame基於HTML之上，因此入門起來很簡單。但是A-Frame不僅是3D場景圖或標記語言，還包括能強大的實體組件框架，A-Frame最初是在Mozilla中構思的，現在由Supermedium中A-Frame的共同創建者維護。2015年12月16日Mozilla旗下的MozVR團隊，在經過長時間的試驗，並且從一些3D/VR工具（例如：JanusVR、GLAM、SceneVR）中汲取經驗，公佈了JavaScript開源框架A-Frame。作爲一個獨立的開源項目，A-Frame已成長爲最大的VR社區之一。A-Frame支持大多數VR眼鏡，例如Vive，Rift，Windows Mixed Reality，Daydream，GearVR，Cardboard，Oculus Go，甚至可以用於增強現實。
A-Frame 中文教程
https://www.techbrood.com/aframe
【官網鏈接】
https://aframe.io/
4、PlayCanvas
PlayCanvas是一個基於WebGL遊戲引擎的企業級開源JavaScript框架，它有許多的開發工具能幫你快速創建3D遊戲。
PlayCanvas中文教程
https://developer.playcanvas.com/zh/engine/
PlayCanvas 開發者資源
https://developer.playcanvas.com/en/
PlayCanvas彙總
https://psq.youthup.cn/playcanvas_all/
WebAR實戰
1、小程序AR
去年7月份，微信小程序正式宣佈支持實現AR效果，並向品牌商戶、AR引擎服務商開放接入。微信團隊也表示，微信小程序在AR科技領域的全新探索，體現其在新技術應用落地上的強大能力，將爲各行各業帶來更廣闊的發展空間。同時首個支持AR動態試妝的美妝品牌小程序“阿瑪尼美妝官方精品商城”也正式更新上線。小程序AR在彩妝行業、美髮行業、廣告行業、時尚行業、電商行業、零售行業等多領域進行場景嘗試，不僅能爲用戶帶來更具科技感、更便捷、更趣味、更新奇的體驗，也能爲商家構建更爲極致的營銷場景，助力行業提升品牌效能和生意增長。對於開發者而言：在前端開發中，工程師常常這樣調侃“一入前端深似海”。確實，前端的應用面十分廣，知識點比較零碎，學習範圍也比較大，當然，實現的功能也更加全面。所以對於當下十分火熱的AR，運用前端技術也可以輕鬆的實現。
微信小程序開放AR接口
https://developers.weixin.qq.com/community/develop/doc/000040d401c0b0abead8b57835b000
【視頻】入門微信小程序開發
http://www.imooc.com/learn/974
【視頻】開發微信小程序視頻教程
https://www.php.cn/course/857.html
微信小程序開發資源彙總
https://www.runoob.com/w3cnote/wx-xcx-repo.html
https://xueyuanjun.com/books/wechat-miniprogram-tutorial
小程序開發快速入門教程（附源碼）
https://zhuanlan.zhihu.com/p/32834666
2、AR Quick Look
AR Quick Look是用於在AR場景中預覽3D模型的技術，通過它開發者能快速在自己的App中展示高質量的3D內容。ARKit作爲iOS 11的一部分首次亮相，使開發人員可以輕鬆地將AR體驗添加到他們的應用程序中。現在使用iOS 12，可以從瀏覽器體驗AR，無需其他應用程序。內置的iOS應用程序（例如Safari，消息，郵件，新聞）使用AR Quick Look以3D或AR形式顯示虛擬對象的USDZ文件。你可以在應用程序和網站中嵌入AR Quick Look視圖，以使用戶看到令人難以置信的詳細渲染。AR Quick Look技術是基於usdz文件的，這是一種全新的用於描述3D模型的文件格式，它基於Pixar的開源USD文件格式，將模型和模型的紋理打包在一個文件當中，同時支持iOS和macOS系統。利用這一文件，我們可以很容易預覽或者分享3D內容。Xcode10中提供了usdz_converter工具用以生成usdz文件。AR Quick Look給開發者提供了便捷的3D模型預覽和分享的工具，在生成usdz文件後，可以很輕鬆的在App或者HTML中展示AR效果。創建任何類型網站的Web開發人員現在都可以在其網站上添加圖片並將其鏈接到usdz文件。
開發資源乾貨
https://developer.apple.com/augmented-reality/quick-look/
https://sketchfab.com/blogs/community/view-sketchfab-models-with-ar-quick-look-on-ios-12/
【AR Quick Look官網】
https://developer.apple.com/augmented-reality/quick-look/
在 AR Quick Look 和 RealityKit 中添加視覺效果
https://developer.apple.com/cn/documentation/arkit/adding_visual_effects_in_ar_quick_look_and_realitykit/
3、EasyAR WebAR
視辰科技針對開發者、企業提供的WebAR服務是國內最早研發WebAR技術的公司，不僅支持傳統的H5+AR，還支持小程序AR，並且與雲端圖庫結合，可視化界面操作，大大提高開發者開發集成的效率。視辰WebAR具有以下特點：
- 自主AR引擎：EasyAR引擎針對微信小程序進行算法深度優化，只爲打造卓越小程序AR體驗
- Web3D引擎算法深度優化：網絡三維引擎針對小程序進行算法深度優化，實現極致的3D 渲染效果，打造逼真的AR體驗
- 大數據&精準營銷：與騰訊深度合作，爲品牌提供大數據和精準營銷服務
- 極速開發，快速落地：憑藉領先技術和豐富經驗，視+ AR 可實現快速開發，高質量落地項目，抓住營銷節點
【視頻】EasyAR直播｜如何開發一個微信AR小程序？
https://www.bilibili.com/video/av667620636/
【視頻】WebGL入門
https://www.bilibili.com/video/BV14T4y1G7P8?from=search&seid=16118143828268253860
【視頻】Three.js視頻教程(Threejs/WebGL)
https://www.bilibili.com/video/BV1s4411c7RD?from=search&seid=16118143828268253860
【視頻】WebGL（three.js）視頻教程
https://www.bilibili.com/video/BV1o4411T7gj?from=search&seid=16118143828268253860
4、8th Wall
8th Wall Web使用符合標準的JavaScript和WebGL構建，加入了同步定位和SLAM功能，並針對移動瀏覽器上的實時AR進行了優化。並且最近8th Wall最近推出了一個集創造、協作和發佈增強現實項目於一體的平臺，不需要第三方軟件，服務器設置或外部工具，只需登錄，編碼，然後點擊發布。
【官方網站】
https://www.8thwall.com/
官方教程
https://www.8thwall.com/tutorials
代碼示例
https://github.com/8thwall/web/tree/master/examples/threejs
獲得文中所涉及的開發資源合集，可以關注公衆號：AIRX社區，共同學習，一起進步！
