本文作者 GeekPlux，首發外刊君也可以去GeekPlux 博客閱讀本文。注明作者和地址即可轉載。

增強現實(以下簡稱 AR）浪潮滾滾而來，Web 瀏覽器作為容易獲得的人機交互終端，瀏覽器正在大力發展 AR 技術。很多 Web 前端工程師也在尋求職業轉型，所以我在這里匯總了我近半年的相關研究成果。本文努力將目前的前端方向推向 AR 技術再次列出，細節不重復（確保文章長度不長），只做總結和科普（所以文章中有很多鏈接），分散寫一個多月（拖延），歡迎從事該領域或研究的道教朋友糾正和補充。

Web AR 初音未來

AR 它可以簡單地理解為將虛擬圖像實時疊加到現實場景中的技術，并且可以交互[1]。我個人認為 AR 比 VR 主要原因是：

AR 其優點是將現實場景轉化為背景，將現實世界與數字世界無縫連接。

當然，這種無縫目前還沒有提及，但一直在進步。 Web 前端如何做 AR 前，有必要先了解一下 AR 實現的 2 主要方法及其關鍵技術：

AR 實現方法和關鍵技術

AR 實現的主要方法有 2 種[2][3]：光學透視 (Optical see-through) 視頻透視 (Video see-through)。目前，市場上通常使用頭戴設備 2 種方式中的 1 種或 2 所有種類都使用，而手持設備(手機、平板電腦等)通常使用視頻透視。光學透視是在眼前的半透明鏡片上顯示計算機生成的數字圖像，使現實場景和虛擬信息同時出現在視網膜上。視頻透視技術是通過相機將現實場景輸入電腦，與虛擬對象集成壓縮，然后統一呈現給用戶。兩者各有優缺點[4]：光學透視中的現實場景顯示更自然、更直接，因為它沒有由計算機處理；雖然簡單，但也存在定位精度低、匹配不準確、顯示延遲等問題。由于視頻透視集成，匹配準確，最終顯示效果同步度高，生成的顯示結果可根據用戶需要進一步處理；但難以實現，失去了部分真實感。目前（2017 年底） Web 要實現前端 AR，都靠視頻透視技術。

此外，計算機視覺技術還在 AR 它起著至關重要的作用。因為實現 AR 核心是識別和跟蹤。首先，相機應首先識別基準標志、關鍵點、光學圖，然后根據特征檢測、邊緣檢測或其他圖像處理方法實時跟蹤；最后將虛擬圖像疊加到真實場景中。根據 2008 根據年度統計結果，近十年來著名 AR 會議 I ** AR 追蹤技術論文占了 20%以上[3].

Web AR

根據上一節的闡述，我們可以得出結論：實現 AR 在瀏覽器中，需要識別、跟蹤和渲染三個步驟。此外，還可以結合傳感器提供更多的交互或讓步 AR 渲染更準確，通過網絡連接云加速計算或交換更多數據。如下圖所示，這是我自己整理的 Web AR 流程圖。Web AR 或者說移動 AR 在便攜性、傳感器豐富、自帶網絡等方面還是有很大優勢的，這里就不多說了。

Web AR 流程圖WebVR 規范

首先，Web AR 它仍然是一項前沿技術，沒有標準或成熟的庫供使用，但一些大公司和一些開發商正在積極推廣。2017 年 10 月 2 日 W3C 的 WebVR 組 發布了 WebVR 規范 www.qpst1967.cn 版的初稿，www.qpst1967.cn 版本仍在熱火朝天地修訂中。

WebVR 在瀏覽器中體驗是一個開放的標準 VR。我們的目標是讓每個人都更容易體驗 VR，不管你有什么設備。 -? www.qpst1967.cn

為什么這篇文章的題目是 Web AR，這里卻提到 WebVR 呢？因為 WebVR 規范的部分 API 對 Web AR 也適用。比如 VRDevicePose 攝像頭位置可以獲得。這是目前唯一的接近 Web AR 有了標準，我們只能開發標準接口，以適應絕大多數設備。擴展閱讀：WebVR 為了增強現實，智能手機 AR 的 WebVR API 擴展。

WebARonARKit, WebARonARCore

ARKit 和 ARCore 蘋果和谷歌制作的移動 AR SDK，我相信很多功能都是相似的:運動跟蹤、環境感知和光感應 AR 對這兩個開發者感興趣 SDK 都不陌生。但兩者都在移動 AR 的 SDK，于是谷歌的 AR 團隊提供了 WebARonARKit 和 WebARonARCore 開發者可以使用兩個庫 Web 技術來基于 ARKit 和 ARCore 從而實現開發 WebAR。這兩個庫目前還處于試驗階段，想吃螃蟹的人趕緊試試。實際上，實現原則與特定系統相結合（iOS 和 Android）擴展了 WebVR API。Google AR 團隊包裝了一個 www.qpst1967.cn 提供了一些實用的庫 AR API，包括 ARView, ARReticle, ARPerspectiveCamera, ARDebug 和 ARUtils 等。

www.qpst1967.cn

2017 年 SIGGRAPH(頂級圖形會議) www.qpst1967.cn 可謂大放異彩，有人做到了 Web AR 相關的 session就是用了 www.qpst1967.cn 來講解。www.qpst1967.cn 是 Jerome Etienne 開發的一款 Web AR 庫，可用十行 HTML 就實現 AR，并有 60 FPS 的幀率。但其實 www.qpst1967.cn 它主要包裝以下庫：

WebRTC。下面將詳細解釋，主要是獲取視頻流。JSARToolKit。ARToolKit 可以說是第一個開源 AR 框架，在 1999 年發布，至今已更新。雖然歷史悠久，但仍被廣泛使用（官方網站的風格根本沒有歷史感）。它主要提供識別和跟蹤 ** rker 本文附錄還補充了功能。www.qpst1967.cn, www.qpst1967.cn, A-Frame。這些都是基于的 WebGL 渲染庫用于渲染 AR 下文將擴展環境中顯示的內容。

由此觀之，www.qpst1967.cn 就像一把瑞士軍刀，把所有的輪子拼在一起，簡單易用。 GitHub 和 Twitter 都很活躍，有什么問題可以直接問他。

WebRTC 獲取視頻流

我們在前三節提到了一個正在形成的標準和兩個框架 Web AR 最新進展。期待標準的發布肯定是黃花菜涼了，但我們可以自己豐衣足食。

我們剛才說的 AR 首先要識別，就要用了 WebRTC 技術。WebRTC（Web 實時通信，Web Real-Time Communication），顧名思義，它是一種支持網頁瀏覽器實時語音對話或視頻對話的技術。其中一個很重要 API：getUserMedia() 攝像頭的視頻流可以實時獲取，這是視頻透視 AR 實現的前提(目前 iOS 11 剛才支持這個 API，Android 很早就可以用了)。通過視頻流，我們可以分析特征點，用計算機視覺算法識別和跟蹤視頻流中的事物。這里有 2 還個要點也要提一下:一是 getUserMedia 前置攝像頭是默認獲取的。如果你想獲得后置攝像頭的視頻流，你需要使用它 www.qpst1967.cn() 通過設備的音頻和視頻設備，具體參考 demo；二是要用 https 打開網頁訪問攝像頭。

www.qpst1967.cn, JSFeat, ConvNetJS, www.qpst1967.cn, www.qpst1967.cn 識別與追蹤

獲取視頻流后的工作是識別和跟蹤。您可以將視頻流視為一幀一幀的圖像，因此處理視頻流的過程可以理解為圖像處理的過程。但這也涉及到如何傳輸視頻流的問題，通常有兩種方式：

1. 視頻流直接在前端處理

可直接在前端進行圖像處理 www.qpst1967.cn 和 JSFeat。這兩個庫類似于前端的計算機視覺，包括提取特征點、人臉識別等。把 WebRTC 視頻流直接傳輸并調用 API 你可以得到你想要的結果。對于一些成熟的算法，如人臉識別，你可以直接得到識別結果。如果你想識別更復雜的對象，你也可以計算自己的特征點，但這可能在前端缺乏計算能力，下面將討論性能問題。

說到計算機視覺，我們必須提到深度學習。畢竟，許多圖像處理算法現在都被深度學習打敗了。ConvNetJS，是斯坦福大學開源的前端深度學習框架，可以讓你在前端完成深度神經網絡的訓練。www.qpst1967.cn則是 Google Brain 團隊，功能和 ConvNetJS 類似。現在 ConvNetJS 好像不怎么維護，www.qpst1967.cn 還在頻繁更新中，感興趣的同學可以試試。另一個深度學習庫密集開發 www.qpst1967.cn 它允許你在瀏覽器中操作訓練好的 Keras 模型（Kears 是著名的深度學習開發框架)，支持 WebGL 2。

這些框架在主頁上提供了豐富的 Demo，很有意思，玩一下也許會激發你的靈感。

2. 前端將視頻傳輸到后端，后端處理后返回到前端

另一種處理視頻流的方法是將其傳輸到后端進行處理。后端處理的選擇數不勝數，現在實現了 AR 大部分都是用的 SLAM 算法，后端處理后返回前端結果。所以如何傳輸成為我們前端學生的難題，通常有兩種方法:

將圖片信息傳輸到后端。Canvas 提供了兩個 API，一個是 toDataURL，它可以生成圖片 base ** 字符串；另一個是 toBlob，這種方法是異步的，可以將圖片轉換成 Blob 因為文件對象是二進制的，傳輸到后端更方便。具體來說，后者比前者高一點。傳像素信息到后端。WebGL 的 readPixels 可以獲得方法 framebuffer 中像素值。

此外，還應該有其他方法。簡而言之，目標是將前端圖像信息傳輸到后端，可以使用傳輸方式 AJAX，也可以用 WebSocket，根據場景確定。

本節主要討論識別和跟蹤。事實上，除了簡單地處理圖像和視頻流外，我們還可以通過移動設備的各種傳感器數據獲得更多的距離、深度、光等信息，使識別跟蹤更加準確。

A-Frame, www.qpst1967.cn, www.qpst1967.cn, www.qpst1967.cn, WebGL 渲染與交互

談完識別和跟蹤，終于該談渲染了。A-Frame 是 Mozilla 團隊在 2015 一年開源的做 WebVR 但是前幾天 A-Frame 團隊發布的 aframe-xr 包括一些 Web AR 組件。一開始我們也說過 VR 和 AR 有些是重疊的，所以使用 A-Frame 各種組件很少的代碼構建各種組件 AR 所需要的 3D 立體世界。提到 3D，不得不提 WebGL。WebGL 是 OpenGL ES 你可以理解瀏覽器端的實現 OpenGL 的子集。用 WebGL 你可以在前端操作每個像素點。懂一點圖形學的同學一定知道它的力量，可以調用 GPU，因此，涉及到前端 GPU 它也缺不可。WebGL 雖然強大，但寫作極其復雜，學習成本也很高，前端最著名 3D 庫 www.qpst1967.cn 將繁瑣的 WebGL API 包裝和優化，這樣你就可以用可讀性更好的代碼在前端書寫 WebGL。www.qpst1967.cn 和 www.qpst1967.cn 做類似的事情，但它只支持 2D 渲染，但它仍然很容易使用，如果你只是想使用它 WebGL 做復雜的渲染，但不涉及 3D 場景，不妨試試。www.qpst1967.cn 更牛，是游戲引擎，也是封裝的 WebGL 高性能渲染在前端，但它和 www.qpst1967.cn 的關注點不一樣，如果你對渲染的精細程度非常有要求，比如光線、陰影等，那么你可以考慮下 www.qpst1967.cn，畢竟這是款由微軟前員工開發的游戲引擎啊……

這些基于 WebGL 的渲染方法，有一個共性的難題是如何交互，比如 hover, click 效果如何實現。其實在 Web AR 中交互非常局限：如果是桌面設備即電腦，和瀏覽網頁的交互差不多，有 hover, click, drag 拖拽等；如果用的是移動設備，即手機、平板，則可能有 zoom 的交互（這里多嘴一句，其實移動 AR 中，應該盡量避免手指去 zoom 的交互，而應該引導用戶用移近或移遠設備來進行放大縮?。＿@些實現起來要依賴于 光線投射算法 Ray casting 方法。www.qpst1967.cn 直接提供了 Raycaster 類供實現 ray casting 算法。其實原理很簡單，就是攝像頭（這里的攝像頭不是指手機的攝像頭，而是你渲染時的 Camera，可以參考 www.qpst1967.cn 中的 Camera）視作視點，與你在屏幕上觸碰的點坐標連城一條射線，看這條射線與你視圖中哪些物體相交。

Ray casting 算法

這一節主要講了渲染與交互，事實上在實現 AR 的時候，識別追蹤和渲染交互是同時進行的，如何給用戶更好、更流暢的體驗是現在 Web AR 的又一大難題。

性能

性能是很多人關心的問題。目前瀏覽器的算力確實還不足以與客戶端去媲美，但較之前也有了巨大的提升。識別和追蹤本質上是像素級的計算，對算力的要求都很高，因此 ** ker-based 的 AR 定位效率通常比 ** kerless 的要高很多。此外，計算機視覺算法的效率對性能影響也很大，比如人臉識別目前較其他識別要成熟很多，所以人臉識別的算法在 Web 前端運行還算流暢。

提升性能的方法有很多種，大家一般會先想到用 WebGL 調用 GPU 加速，其次會想到用 Web Worker，WebAssembly。前兩者我都試過，把純計算的代碼移到 WebGL 的 shader 或 Web Worker 里，這兩者雖然都是加速計算，但適用場景不同。shader 可以用于加速只和渲染（重繪）有關的代碼，無關渲染的代碼放入 shader 中反而會造成重復計算。Web Worker 適用于事先計算或實時性要求不高的代碼，如布局算法。WebAssembly 我還沒在做 AR 的時候用過，還有一個庫 www.qpst1967.cn也沒試過，希望有大神試過之后告訴我有什么效果。

還有一種變相“提升”性能的方法是用濾波算法（比如卡爾曼濾波）將卡頓降到更小，讓用戶從視覺感受上似乎更流暢。

結尾

現在 Web AR 大潮剛剛開始，有很多高地需要人去攻克，比如光照估計、性能優化等，希望有興趣的同學可以積極參與進來。而且 Web 前端無論是技術還是人口都發展迅速，充滿了無限可能，有限的只是你的想象力。我很久之前做了個人臉識別 + AR 的小 demo，在 GitHub 上 www.qpst1967.cn，大家可以玩玩，其實就幾行代碼。下一篇可能會寫寫 Web 前端做人臉識別相關的文章，感覺又給自己挖了個大坑，希望我的拖延癥早日治好。

附錄：AR 開發技術

參考文獻 [2] 中曾總結了當時所有的 AR 開發技術，如下表:

AR 開發技術

這張表將 AR 開發工具分成了四類，分別羅列出來。其實目前大多的 AR 開發都是用 Unity 去做的，很多第三方 SDK 也都是先集成到 Unity 上，再由 Unity 輸出到對應設備所需的格式。表中的 Vuforia據我觀察是目前用的最多的第三方 SDK。ARToolKit 則在 Web 前端和移動端用的很多，它的開源版是基于標記的 (Marker-based)，也提供機器學習的訓練方法，讓你可以將任意圖片訓練成 Marker。另外由于這張表是 2015 年的，當時蘋果公司的 ARKit 和谷歌的 ARCore 這 2 個 SDK 還沒有橫空出世，可以將其歸到表中的第三行。

參考文獻[1] Azu ** R T. A survey of augmented reality[J]. Presence Teleoperators & Virtual Environments, 1997, 6(4): 微信[2] Billinghurst M, Clark A, Lee G. A survey of augmented reality[J]. Foundations and Trends in Hu ** n-Computer Interaction, 2015, 8(2-3): 73-272[3] Zhou F, Duh B L, Billinghurst M. Trends in augmented reality tracking, interaction and display: a review of ten years of I ** AR[C] //Proceedings of the 7th IEEE/ACM International Symposium on Mixed and Augmented Reality. Washington: IEEE Computer Society Press, 2008: 微信[4] Rolland J P, Fuchs H. Optical versus video see-through head-mounted displays in medical visualization[M]. Cambridge: MIT Press, 2000, 9: 微信

上海西陸信息科技有限公司 承接各類微信小程序開發制作、小程序定制、APP 網站 開發制作，聯系電話 18221533805、15900430334