萬字乾貨介紹WebAR的實現與應用

關注我，私信“AR乾貨”，即可獲得AR開發資料包和AR行業書籍報告！

提到WebAR，你腦海中會立刻想到什麼？可能會有三種不同的關注點或答案：

• 關注點在Web上。“Web上也能實現AR效果嗎？那以後做營銷會不會更簡單、傳播更廣更快了。”
• 關注點在AR上。“就是那個Pokemon Go啊，我知道的，它不是原生應用嗎，使用Android開發的嗎，難道以後Web端也可以體驗到嗎？“
• 關注點在WebAR上。“WebAR現在確實是個流行趨勢，尤其是對廣告營銷電商行業，但是好像行業沒有爆款應用啊，它的應用前景到底有多大呢？”。

不管你是三種情況的哪一種，無法否認的是WebAR正在快速的與各行各業結合產生新的應用場景，並給我們的生活帶來不一樣的體驗與感受。對於商家企業普通用戶來說：其實在今年7月份，微信小程序正式宣佈支持實現AR效果，並向品牌商戶、AR引擎服務商開放接入。微信團隊也表示，微信小程序在AR科技領域的全新探索，體現其在新技術應用落地上的強大能力，將為各行各業帶來更廣闊的發展空間。同時首個支持AR動態試妝的美妝品牌小程序“阿瑪尼美妝官方精品商城”也正式更新上線。小程序AR在彩妝行業、美髮行業、廣告行業、時尚行業、電商行業、零售行業等多領域進行場景嘗試，不僅能為用戶帶來更具科技感、更便捷、更趣味、更新奇的體驗，也能為商家構建更為極致的營銷場景，助力行業提升品牌效能和生意增長。對於開發者而言：在前端開發中，工程師常常這樣調侃“一入前端深似海”。確實，前端的應用面十分廣，知識點比較零碎，學習範圍也比較大，當然，實現的功能也更加全面。所以對於當下十分火熱的AR，運用前端技術也可以輕鬆的實現。Web平臺在AR，SLAM或跟蹤的技術應用上將會越來越普及。本篇文章希望從以下這些角度去為大家介紹WebAR！

• WebAR概念
• 優點
• 發展史
• WebAR常用框架
• WebAR關鍵技術
• WebAR市面上常用的開發工具
• WebAR和瀏覽器的兼容性

WebAR概念

通俗的按照字面意思來講，WebAR就是在Web端集成AR的功能。WebAR使用WebRTC，WebGL和現代傳感器API的組合技術，通過Web瀏覽器提供對基於Web的增強現實的訪問與實現。

WebAR發展史

WebAR的發展史一定是與Web的迭代息息相關的。

• WebAR的誕生：2009年FLARToolKit的誕生標誌著AR技術進入了Web時代。FLARToolKit在當年是一個明星項目，被用於當時很多極富創意的AR營銷，比如通用電氣的Plug Into the Smart Grid AR營銷在當時獲得了極大的關注，紐約時報、華爾街日報等上百家的媒體與博客報道了這次營銷活動。這一營銷只需你通過電腦訪問一個網站，然後網站會調用你的攝像頭，當你在攝像頭前舉起一張打印著特定標識的白紙時，網站會識別紙上的標識並顯示出對應的動畫內容。儘管運用了Flash技術而不是純粹的Web技術來完成這次WebAR營銷，這是大多數人首次僅僅打開一個網站就可以體驗到AR功能給人們帶來的新鮮感。那時的Web只能做一些很簡單的顯示工作，顯示三維模型與動畫全部需要依賴於Flash插件，但這也掀起了一波WebAR的浪潮，相當多的公司投入到了相關技術的研發當中。
• FLASH沒落淘汰時期：2010年iPhone4智能手機的發佈標誌著Web進入下一個階段，原本人們訪問網頁上的視頻、動畫或者遊戲，都需要通過Flash插件來實現。但是無奈Flash自身漏洞實在是太多，存在嚴重的安全問題，iPhone在最初上市時就不支持這一插件，安卓在2011年的4.0版本也取消了對Flash的支持。雖FLARToolKit有JavaScript版本的替代品JSARToolKit，可以不通過Flash插件來實現WebAR功能，但手機AR應用相比那時的WebAR有著相當多的優勢——能夠完全發揮設備性能、深度優化的針對手機設備的AR體驗、隨時隨地打開即可使用而無需等待從網絡中加載龐大的數據。這些使得手機AR應用的數量大大超過了WebAR，許多WebAR項目被無限期冷藏，開發人員紛紛投入到了體驗更好的移動AR平臺中。
• HTML5時期：2012年，由W3C組織制定的HTML5的規範正式定稿，增強了對手機設備上瀏覽多媒體的支持，其中最重要的莫過於Canvas標籤的引入，網頁終於擁有了方便使用的實時圖形渲染接口，目前的WebVR與WebAR畫面都是渲染在這一標籤中的。這一變化帶來了WebGL以及WebRTC技術。WebGL技術允許網頁在渲染圖形時可以使用硬件加速來提高渲染效率。WebRTC的出現讓網頁可以實時處理手機攝像頭的數據，可以實現實時視頻通話的功能。在WebRTC（Web Real-Time Communication）出現之前，人們使用手機時只能通過網頁拍攝照片或者是錄製視頻文件然後上傳。WebRTC提供的實時視頻流處理技術對AR技術意義重大，因為AR中的許多識別功能需要實時的攝像頭數據以及傳感器數據才能保證識別結果的精確。Chrome瀏覽器與Firefox瀏覽器均在2013年的更新中增加了對WebRTC的支持。

以上關於WebAR的歷史發展參考：
https://xw.qq.com/cmsid/20181024A1LEWB00

WebAR優缺點

• WebAR可以輕鬆地運行在Android、iOS、Windows、Mac系統的Web瀏覽器上，無需APP，輕鬆實現跨平臺。
• WebAR 可以實現掃描識別圖呈現3D動畫模型、視頻、圖片、文字、UI按鈕等效果，並且支持3D模型交互。
• WebAR主要是以URL的格式傳播，符合微信等社交媒體信息流動的基本技術要求，配合創意策劃方案，可以形成爆炸式的病毒營銷效果。

當然WebAR目前也存在一些問題：

• 各瀏覽器標準不統一
• 3D內容加載慢，無法實現複雜的內容
• 渲染質量低
• 存在隱私問題
• 無法實現複雜交互

WebAR開發框架

上面提到2009年FLARToolKit的誕生標誌著AR技術進入了Web時代（當然這麼說有點誇張，但其實想表達的是WebAR其實很早就發展起來了）。FLARToolKit是使用最廣泛的基於Flash的AR庫，得到了大型開發人員社區和許多帶有示例應用程序的網站的支持。FLARToolKit是ARToolKit的Flash Actionscript（v3）版本，可用於快速開發基於Web的AR體驗。FLARToolKit從輸入圖像中識別出視覺標記，然後計算攝像機在3D世界中的方向和位置，並將虛擬圖形覆蓋在實時視頻圖像上。FLARToolKit支持所有主要的Flash 3D圖形引擎（Papervision3D，Away3D，Sandy，Alternativa3D）。但隨著Flash的沒落，FLARToolKit框架也慢慢淡出歷史舞臺。如今WebAR越來越主流，市面上也有許多優質的高效的第三方框架可供開發者使用，好的框架或工具往往會事半功倍，下面是作者總結的比較成熟的一些框架：

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應用程序變得更加簡單高效。它具有以下優點：

• 跨瀏覽器兼容性
• 即使在較舊的設備上也可以達到60fps的高性能
• 基於Web，無需安裝
• 開源，可免費訪問
• 使用WebGL和WebRTC在所有移動設備上均可使用
• 無需額外或不常見的硬件
• 可以用不到10行HTML來完成

AR.js 2.0版本首次引入了另一種類型的增強現實:基於位置的。所以基於標記的與基於位置到底本質上有什麼區別呢？實際上基於標記的就是我們現在市面上常見的掃描識別圖出現AR模型效果，不管對於識別圖也是有要求限制的，AR.js使用artoolkit，它支持多種類型的標記模式或者條形碼，也就是我們做CV開發常用的Maker。如下圖所示：

基於位置的就是通俗理解就是通過使用手機傳感器的方向和位置，AR.js可以在相機上顯示其“物理”位置上每個位置的內容（因此，如果將相機指向現實生活中的位置，你將看到附近的內容）。如果移動相機，它將再次計算方向和位置。如果位置較遠，則顯示的內容較小；反之更大，在視覺上面會有明顯偏差，增強沉浸感與代入感。就像下面的示例演示那樣：

AR.js主要封裝了以下這幾個庫：

• WebRTC
• JSARToolKit
• 基於 WebGL 的渲染庫：Three.js, Babylon.js, A-Frame

後面會詳細介紹這幾個庫的功能與使用。AR.js的作者在這幾個手機瀏覽器進行了一些測試，測試結果如下供參考：

• 帶有網絡攝像頭和2個標籤的臺式機Chrome（一個用於Hero，一個用於結果）（有效，成功運行）
• Android 4.4.2（無效，出現不允許使用相機的提示。會看到白色背景和提示文本）
• Android native 5.0（出現不允許使用相機的提示。會看到白色背景和提示文本）
• Android 4.4.2上的Chrome（可以運行）
• Android 5.0上的Chrome（無法正常工作，需要獲得許可認證，會看到黑色背景，文本）
• iOS 低於11版本上的Safari和Chrome（無效，出現不允許使用相機的提示。會看到白色背景和提示文本）
• Windows 10上的Microsoft Edge（Google Pixel手機上的Chrome瀏覽器查看全息圖）

AR.js 示例下載資源：

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

ARToolKit

ARToolKit是用於構建增強現實（AR）應用程序的軟件庫。為了創建強大的增強現實體驗，它使用視頻跟蹤功能來實時計算相對於方形物理標記或自然特徵標記的真實攝像機位置和方向。一旦知道了真實相機的位置，便可以將虛擬相機放置在同一點，並將繪製的3D計算機圖形模型精確覆蓋在真實標記上。因此，ARToolKit解決了增強現實中的兩個關鍵問題。視點跟蹤和虛擬對象交互。這樣可以輕鬆開發各種增強現實應用程序。

2001年ARToolWorks成立,併發布ARToolKit 1.0版本，是第一個基於“增大化現實”技術的sdk,最早於2005年在Symbian上運行，然後是2008年在iPhone 3G上運行的iOS，最後是在2010年在Android上運行的，並在2011年晚些時候由ARToolWorks推出專業版。ARToolKit被DAQRI收購，並於2015年5月13日從5.2版開始重新發布，[包括了所有以前只能在專業授權版本中使用的功能。其中包括移動支持和自然特徵跟蹤。

ARToolKit的一些功能包括：

• 單攝像頭或立體攝像頭(攝像頭位置/方向跟蹤)。
• 跟蹤簡單的黑色方塊(任何方塊標記模式)。
• 平面圖像跟蹤(自然特徵標記)。
• 攝像機標定、光學立體標定、正方形標記產生、自然特徵標記產生等功能。
• Unity和OpenSceneGraph的插件。
• 光學頭戴式顯示支持。
• 免費和開源軟件。
• 足夠快的實時AR應用。

當前版本的ARToolKit支持Microsoft Windows，Mac OS X，Linux，iOS和Android平臺。其他版本的ARToolKit也已移植到Symbian和Windows Phone以支持移動AR應用程序。ARToolKit還可以作為Unity 遊戲引擎的插件使用，例如，相對於跟蹤的標記目標，將Unity中的虛擬攝像機與真實攝像機對準，並負責與攝像機通信。該插件支持OS X上的Unity，Windows上的Unity，Android上的Unity和iOS上的Unity。

下載資源乾貨：

https://github.com/artoolkit/jsartoolkit5

https://samples.argonjs.io/jsartoolkit/index.html

https://github.com/artoolkit/artoolkit5/tree/master/examples

其實目前的許多WebAR 框架都是基於ARToolKit的，比如上面提到的AR.js,還有將要介紹的JSARToolKit。

JSARToolKit

ARToolkit 的 js 版本，支持 pat marker 和 nft marker 的識別與跟蹤，基於開源的ARToolKit跟蹤庫，JSARToolKit使用WebGL & Three.js在真實世界對象上呈現3D模型。JSARToolKit是JavaScript的增強現實庫。它是在GPL下發布的開源庫。它的整個運行機制是這樣的：

（1）JSARToolKit在畫布元素上運行。由於需要從畫布上讀取圖像，因此圖像需要與頁面來自同一來源，或者需要使用CORS來解決同源政策。簡而言之，將crossOrigin要用作紋理的圖像或視頻元素的-property 設置為''或'anonymous'。

（2）將畫布傳遞給JSARToolKit進行分析時，JSARToolKit返回在圖像中找到的AR標記列表以及相應的轉換矩陣，要在標記上方繪製3D對象，需將轉換矩陣傳遞到用戶使用的任何3D渲染庫中，以便使用該矩陣對對象進行轉換。

（3）然後，在WebGL場景中繪製視頻幀並在其上方繪製對象。要使用JSARToolKit分析視頻，需首先在畫布上繪製視頻，然後將畫布傳遞給JSARToolKit。

（4）對每一幀都執行此操作，就可以進行視頻AR跟蹤。即使在640x480視頻幀上，JSARToolKit在現代JavaScript引擎上也足夠快實時地做到這一點。但是，視頻幀越大，處理時間就越長。合適的視頻幀大小為320x240，但是如果你希望使用較小的標記或多個標記，則最好使用640x480。

下面這個數據是開發者測試的關於JSARToolKit的性能：

下載資源乾貨：

（1）https://github.com/artoolkit/jsartoolkit5/

（2）https://artoolkit.github.io/jsartoolkit5/examples/index.html

（3）https://github.com/jeromeetienne/jsartoolkit-experiments

（4）https://samples.argonjs.io/jsartoolkit/index.html

（6）https://devpost.com/software/noapp-ar

argonjs

無論用於創建新的AR應用程序，還是將AR視圖添加到現有的web應用程序，argon.js框架都提供了一組抽象和實用程序，用於以獨立於平臺和技術的方式將AR視圖添加到web應用程序中。

argon.js最初旨在利用iOS上支持Argon AR的網絡瀏覽器的增強現實功能，從而簡化了提供移動AR體驗的過程，而無需創建，發佈和支持本機應用程序。但是，argon.js也可以與其他Web瀏覽器一起使用，以利用它們的功能允許你的應用程序提供每種瀏覽器能夠提供的各種AR體驗。儘管目前大多數Web瀏覽器的AR功能很少，但是它們正在迅速改進。

資源乾貨鏈接：

（1）源碼下載：
https://github.com/argonjs/argon

（2）示例samples：
https://samples.argonjs.io/

awe.js

awe.js提供了一些其他類型的AR體驗，如增強現實標記，基於位置，和leap motion傳感器AR。它使用WebRTC, WebGL，和getUserMedia設備API在瀏覽器中實現AR功能。

Awe.js是一個JavaScript庫，它使用Three.js,可以在awe.js GitHub上下載該庫和一些示例。它提供了四種不同的AR體驗，每種都帶有自己的示例：

• geo_ar –允許將對象放置在設定的點上。
• grift_ar –與Oculus Rift兼容。
• leap_ar –與Leap Motion控制器集成。
• marker_ar–允許創建基於增強現實標記上的體驗。

資源乾貨鏈接：

（1）官網：https://awe.media/

（2）代碼下載：
https://github.com/awe-media/awe.js/

three.ar.js

Three.ar.js用於構建運行在WebARonARKit和WebARonARCore中的AR web體驗。WebARonARKit和WebARonARCore是針對iOS和Android的實驗性應用程序，允許開發者使用web技術創建增強現實(AR)體驗。

資源乾貨鏈接：

（1）代碼下載：

https://github.com/google-ar/three.ar.js?files=1

（2）samples：

https://stemkoski.github.io/AR-Examples/

tracking.js

tracking.js庫將不同的計算機視覺算法和技術引入瀏覽器環境。通過使用現代HTML5規範，我們使您能夠進行實時顏色跟蹤，面部檢測等。

資源乾貨鏈接：

（1）官網鏈接：https://trackingjs.com/

（2）下載鏈接：

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解決方案都沒有很好的實現實時跟蹤。

渲染

圖像識別處理之後，接下來就是渲染3D內容。WebAR不同於native AR，可以實時高效處理大量的3D內容，相比於此，WebAR處理3D內容的能力還是欠缺的，這也是現在市面上缺少優質的AR內容的關鍵原因。

其實隨著WebAR技術的發展，已經有許多成熟的Web 3D渲染框架了，比如：A-Frame、Three.js、Pixi.js和Babylon.js。

關於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使用Web開發者熟悉的HTML標籤來創建WebVR場景，使得非WebGL開發者無需學習強大而又複雜的WebGL API來創建VR場景，降低了初學者學習的門檻，並且A-Frame一個最大的優勢在於跨平臺性，目前版本已迭代到v0.3.0，支持VR頭戴設備Oculus Rift和HTC Vive以及非VR設備的PC端和Mobile端（可開啟VR模式，利用Google Cardboard、Gear VR等設備觀看）。

A-Frame還為開發者提供了許多的功能模塊，比如一些基礎的幾何形狀（盒子、球面、圓柱、平面等）、可導入3D建模工具製作或從網上下載的Collada模型、定義背景的天空、定義用戶從哪個角度觀看場景的相機、動畫、光影、全景視頻等功能。

A-Frame 有著以下功能特性：

• VR／AR開發變得更簡單：只需放入