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

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

Web AR 初音未來

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

AR 其優(yōu)點是將現(xiàn)實場景轉(zhuǎn)化為背景，將現(xiàn)實世界與數(shù)字世界無縫連接。

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

AR 實現(xiàn)方法和關(guān)鍵技術(shù)

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

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

Web AR

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

Web AR 流程圖WebVR 規(guī)范

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

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

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

WebARonARKit, WebARonARCore

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

www.yingtumall.com

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

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

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

WebRTC 獲取視頻流

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

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

www.yingtumall.com, JSFeat, ConvNetJS, www.yingtumall.com, www.yingtumall.com 識別與追蹤

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

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

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

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

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

2. 前端將視頻傳輸?shù)胶蠖?，后端處理后返回到前?/p>

另一種處理視頻流的方法是將其傳輸?shù)胶蠖诉M行處理。后端處理的選擇數(shù)不勝數(shù)，現(xiàn)在實現(xiàn)了 AR 大部分都是用的 SLAM 算法，后端處理后返回前端結(jié)果。所以如何傳輸成為我們前端學(xué)生的難題，通常有兩種方法:

將圖片信息傳輸?shù)胶蠖恕anvas 提供了兩個 API，一個是 toDataURL，它可以生成圖片 base ** 字符串；另一個是 toBlob，這種方法是異步的，可以將圖片轉(zhuǎn)換成 Blob 因為文件對象是二進制的，傳輸?shù)胶蠖烁奖?。具體來說，后者比前者高一點。傳像素信息到后端。WebGL 的 readPixels 可以獲得方法 framebuffer 中像素值。

此外，還應(yīng)該有其他方法。簡而言之，目標是將前端圖像信息傳輸?shù)胶蠖?，可以使用傳輸方?AJAX，也可以用 WebSocket，根據(jù)場景確定。

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

A-Frame, www.yingtumall.com, www.yingtumall.com, www.yingtumall.com, WebGL 渲染與交互

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

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

Ray casting 算法

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

性能

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

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

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

結(jié)尾

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

附錄：AR 開發(fā)技術(shù)

參考文獻 [2] 中曾總結(jié)了當時所有的 AR 開發(fā)技術(shù)，如下表:

AR 開發(fā)技術(shù)

這張表將 AR 開發(fā)工具分成了四類，分別羅列出來。其實目前大多的 AR 開發(fā)都是用 Unity 去做的，很多第三方 SDK 也都是先集成到 Unity 上，再由 Unity 輸出到對應(yīng)設(shè)備所需的格式。表中的 Vuforia據(jù)我觀察是目前用的最多的第三方 SDK。ARToolKit 則在 Web 前端和移動端用的很多，它的開源版是基于標記的 (Marker-based)，也提供機器學(xué)習(xí)的訓(xùn)練方法，讓你可以將任意圖片訓(xùn)練成 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: 微信

上海西陸信息科技有限公司 承接各類微信小程序開發(fā)制作、小程序定制、APP 網(wǎng)站 開發(fā)制作，聯(lián)系電話 18221533805、15900430334