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

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

Web AR 初音未來(lái)

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

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

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

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

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

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

Web AR

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

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

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

WebVR 在瀏覽器中體驗(yàn)是一個(gè)開(kāi)放的標(biāo)準(zhǔn) VR。我們的目標(biāo)是讓每個(gè)人都更容易體驗(yàn) VR，不管你有什么設(shè)備。 -? wy661.cn

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

WebARonARKit, WebARonARCore

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

wy661.cn

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

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

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

WebRTC 獲取視頻流

我們?cè)谇叭?jié)提到了一個(gè)正在形成的標(biāo)準(zhǔn)和兩個(gè)框架 Web AR 最新進(jìn)展。期待標(biāo)準(zhǔn)的發(fā)布肯定是黃花菜涼了，但我們可以自己豐衣足食。

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

wy661.cn, JSFeat, ConvNetJS, wy661.cn, wy661.cn 識(shí)別與追蹤

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

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

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

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

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

2. 前端將視頻傳輸?shù)胶蠖耍蠖颂幚砗蠓祷氐角岸?/p>

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

將圖片信息傳輸?shù)胶蠖?。Canvas 提供了兩個(gè) API，一個(gè)是 toDataURL，它可以生成圖片 base ** 字符串；另一個(gè)是 toBlob，這種方法是異步的，可以將圖片轉(zhuǎn)換成 Blob 因?yàn)槲募?duì)象是二進(jìn)制的，傳輸?shù)胶蠖烁奖?。具體來(lái)說(shuō)，后者比前者高一點(diǎn)。傳像素信息到后端。WebGL 的 readPixels 可以獲得方法 framebuffer 中像素值。

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

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

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

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

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

Ray casting 算法

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

性能

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

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

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

結(jié)尾

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

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

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

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

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

參考文獻(xiàn)[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: 微信

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