增強(qiáng)現(xiàn)實(shí)（以下簡(jiǎn)稱 AR）浪潮正滾滾而來(lái)，Web 瀏覽器作為人們最唾手可得的人機(jī)交互終端，正在大力發(fā)展 AR 技術(shù)。很多 Web 前端工程師也在尋求職業(yè)轉(zhuǎn)型，于是我把我近半年的相關(guān)調(diào)研結(jié)果在此匯結(jié)成文。本文力求把目前前端方向的 AR 技術(shù)都羅列一遍，細(xì)節(jié)不贅述（保證文章篇幅不過(guò)長(zhǎng)），只做概括和科普（因此文章中的鏈接很多），零零散散寫(xiě)了一個(gè)多月（拖延癥），歡迎已經(jīng)在從事該領(lǐng)域或研究的道友前來(lái)糾正補(bǔ)充。

AR 可以簡(jiǎn)單的理解為一種實(shí)時(shí)將虛擬圖像疊加在現(xiàn)實(shí)場(chǎng)景中的技術(shù)，且能交互[1]。我個(gè)人覺(jué)得 AR 比 VR 要有前景，主要因?yàn)椋?/p>

AR 的優(yōu)勢(shì)在于把目之所及的現(xiàn)實(shí)場(chǎng)景變成了背景，并將現(xiàn)實(shí)世界和數(shù)字世界無(wú)縫連接。

當(dāng)然這個(gè)“無(wú)縫”目前還談不上，不過(guò)一直在進(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)。目前，市面上的頭戴式設(shè)備通常采用 2 種方式中的 1 種或 2 種都采用，而手持設(shè)備（手機(jī)、平板等）通常采用視頻透視式。光學(xué)透視式是將電腦生成的數(shù)字圖像顯示在眼前的一層半透明鏡片上，這樣就可以使現(xiàn)實(shí)場(chǎng)景和虛擬信息同時(shí)出現(xiàn)在視網(wǎng)膜上。而視頻透視式技術(shù)是將現(xiàn)實(shí)場(chǎng)景首先通過(guò)相機(jī)錄入電腦，經(jīng)過(guò)和虛擬對(duì)象整合、壓縮，再統(tǒng)一呈現(xiàn)在用戶眼前。兩者各有優(yōu)劣[4]：光學(xué)透視式中的現(xiàn)實(shí)場(chǎng)景因?yàn)闆](méi)有經(jīng)過(guò)電腦處理，因此顯示得更自然、直接；雖然它實(shí)現(xiàn)簡(jiǎn)單，但是也存在定位精度不高、匹配不準(zhǔn)確、顯示有延遲等問(wèn)題。而視頻透視式因?yàn)榻?jīng)過(guò)整合，所以匹配準(zhǔn)確，最終顯示效果同步程度高，還能對(duì)生成的顯示結(jié)果根據(jù)用戶需求進(jìn)行進(jìn)一步處理；但是它實(shí)現(xiàn)難度較高，且丟失了一部分真實(shí)感。目前（2017 年底） Web 前端要想實(shí)現(xiàn) AR，都是靠的視頻透視式技術(shù)。

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

Web AR

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

WebVR 規(guī)范

首先，Web AR 目前還是一項(xiàng)前沿技術(shù)，沒(méi)有標(biāo)準(zhǔn)也沒(méi)有成熟的庫(kù)供使用，不過(guò)已經(jīng)有大公司和一部分開(kāi)發(fā)者正在積極推進(jìn)。2017 年 10 月 2 日 W3C 的 WebVR 組 發(fā)布了 WebVR 規(guī)范 1.1 版的初稿，2.0 版還在熱火朝天地修訂當(dāng)中。

WebVR 是一個(gè)開(kāi)放標(biāo)準(zhǔn)，使您可以在瀏覽器中體驗(yàn) VR。我們的目標(biāo)是讓每個(gè)人都可以更輕松地體驗(yàn) VR，無(wú)論您擁有什么設(shè)備。 -  webvr.info

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

WebARonARKit, WebARonARCore

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

AR.js

2017 年 SIGGRAPH（圖形學(xué)頂級(jí)會(huì)議）上 AR.js 可謂大放異彩，有人做了 Web AR 相關(guān)的 session 就是用了 AR.js 來(lái)講解。AR.js 是 Jerome Etienne 開(kāi)發(fā)的一款 Web AR 庫(kù)，可以用十行 HTML 就實(shí)現(xiàn) AR，并有 60 FPS 的幀率。但其實(shí) AR.js 做的事很簡(jiǎn)單，它主要封裝了以下幾個(gè)庫(kù)：

• WebRTC。下文會(huì)詳細(xì)講解，主要是獲取視頻流。
• JSARToolKit。ARToolKit 可以說(shuō)是第一個(gè)開(kāi)源的 AR 框架，在 1999 年發(fā)布，一直更新至今。雖然歷史悠久但目前仍被廣泛應(yīng)用（官方網(wǎng)站的風(fēng)格一點(diǎn)也沒(méi)有歷史感）。它主要提供了識(shí)別和追蹤 marker 的功能，本文附錄中還有補(bǔ)充。
• Three.js, Babylon.js, A-Frame。這幾個(gè)都是基于 WebGL 的渲染庫(kù)，用于渲染要在 AR 環(huán)境中顯示的東西，下文會(huì)擴(kuò)充。

由此觀之，AR.js 像是一個(gè)把所有輪子都拼起來(lái)的瑞士軍刀，簡(jiǎn)單易用。作者在 GitHub 和 Twitter 上都很活躍，有什么問(wèn)題可以直接問(wèn)他。

WebRTC 獲取視頻流

前三節(jié)我們提到了一個(gè)正在成形的標(biāo)準(zhǔn)和兩個(gè)框架，是目前 Web AR 的最新進(jìn)展了。指望標(biāo)準(zhǔn)發(fā)布肯定黃花菜都涼了，但我們可以自己動(dòng)手豐衣足食。

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

Tracking.js, JSFeat, ConvNetJS, deeplearn.js, keras.js 識(shí)別與追蹤

獲取到視頻流之后的工作就是識(shí)別和追蹤了。視頻流你可以看作是一幀一幀的圖像，所以處理視頻流的過(guò)程可以理解為圖像處理的過(guò)程。但這里其實(shí)還涉及到一個(gè)如何傳輸視頻流的問(wèn)題，一般有兩種方式：

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

在前端直接進(jìn)行圖像處理，可以用 Tracking.js 和 JSFeat。這兩個(gè)庫(kù)類似，都是在前端做計(jì)算機(jī)視覺(jué)的，包括提取特征點(diǎn)、人臉識(shí)別等。把 WebRTC 拿到的視頻流直接傳給它們并調(diào)用 API 就能得到自己想要的效果。對(duì)于一些成熟的算法，如人臉識(shí)別，可以直接拿到識(shí)別結(jié)果，如果自己要識(shí)別的物體比較復(fù)雜你也可以自己進(jìn)行特征點(diǎn)的計(jì)算，但這可能在前端會(huì)算力不足，關(guān)于性能的問(wèn)題下文再論述。

提到計(jì)算機(jī)視覺(jué)，不得不提深度學(xué)習(xí)，畢竟現(xiàn)在很多圖像處理算法被深度學(xué)習(xí)吊打。ConvNetJS，是斯坦福大學(xué)開(kāi)源的一個(gè)前端深度學(xué)習(xí)框架，可以讓你在前端完成深度神經(jīng)網(wǎng)絡(luò)的訓(xùn)練。deeplearn.js 則是 Google Brain 團(tuán)隊(duì)搞的，功能和 ConvNetJS 類似?，F(xiàn)在 ConvNetJS 好像不怎么維護(hù)了，deeplearn.js 還在頻繁更新中，感興趣的同學(xué)可以試用一下。另外一個(gè)緊鑼密鼓開(kāi)發(fā)的深度學(xué)習(xí)庫(kù) keras.js 則是讓你可以在瀏覽器中運(yùn)行已經(jīng)訓(xùn)練好的 Keras 模型（Kears 是著名的深度學(xué)習(xí)開(kāi)發(fā)框架），并支持 WebGL 2。

這些框架都在主頁(yè)上提供了豐富的 Demo，非常有趣，把玩一下說(shuō)不定激發(fā)你的靈感。

2. 前端傳輸視頻流給后端，后端處理完畢返回結(jié)果到前端

另一種處理視頻流的方法就是傳到后端去處理，后端處理方式的選擇就數(shù)不勝數(shù)了，現(xiàn)在實(shí)現(xiàn) AR 大多數(shù)用的都是 SLAM 算法，后端處理完返回前端結(jié)果即可。那么如何傳輸成了我們前端同學(xué)的難題，一般有這兩種方法：

• 傳圖片信息給后端。Canvas 提供了兩個(gè) API，一個(gè)是 toDataURL，它可以生成圖片的 base64 字符串；另一個(gè)是 toBlob，這個(gè)方法是異步的，可以將圖片轉(zhuǎn)換成 Blob 文件對(duì)象，因?yàn)槠涫嵌M(jìn)制的，所以更方便傳給后端。具體使用來(lái)看，后者比前者的效率更高一點(diǎn)。
• 傳像素信息給后端。WebGL 的 readPixels 方法，可以獲取 framebuffer 中的像素值。

除此之外應(yīng)該還有其他方法，總之目標(biāo)是將前端的圖像信息傳給后端，傳輸方式可以用 AJAX，也可以用 WebSocket，具體根據(jù)場(chǎng)景來(lái)定。

這一節(jié)主要講了識(shí)別和追蹤，其實(shí)除了單純的對(duì)圖像、視頻流處理，我們還能通過(guò)移動(dòng)端設(shè)備的各種傳感器數(shù)據(jù)獲取到更多的距離、深度、光照等信息，從而使識(shí)別追蹤更準(zhǔn)確。

A-Frame, Three.js, Babylon.js, Pixi.js, 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 中有部分實(shí)現(xiàn)是重合的，所以用 A-Frame 的各種組件可以讓你用很少的代碼構(gòu)建出 AR 所需要的 3D 立體世界。提到 3D，不得不提 WebGL。WebGL 是 OpenGL ES 在瀏覽器端的實(shí)現(xiàn)，你可以理解其為 OpenGL 的子集。用 WebGL 你可以操作前端的每一個(gè)像素點(diǎn)，懂一點(diǎn)圖形學(xué)的同學(xué)一定知道它的強(qiáng)大，而且它能調(diào)用 GPU，所以前端涉及到 GPU 的地方也缺不了它。WebGL 雖然強(qiáng)大，但寫(xiě)起來(lái)異常復(fù)雜，學(xué)習(xí)成本也很高，而前端最著名的 3D 庫(kù) Three.js 將繁瑣的 WebGL API 進(jìn)行了封裝和優(yōu)化，讓你可以用可讀性更好的代碼在前端書(shū)寫(xiě) WebGL。Pixi.js 和 Three.js 做了類似的事情，但它只支持 2D 渲染，不過(guò)它還是很好用的，如果你只是想用 WebGL 來(lái)做復(fù)雜的渲染但沒(méi)涉及到 3D 場(chǎng)景，不妨試試它。Babylon.js 就更牛了，它是一款游戲引擎，也是封裝了 WebGL 在前端做高性能的渲染，但它和 Three.js 的關(guān)注點(diǎn)不一樣，如果你對(duì)渲染的精細(xì)程度非常有要求，比如光線、陰影等，那么你可以考慮下 babylon.js，畢竟這是款由微軟前員工開(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 方法。Three.js 直接提供了 Raycaster 類供實(shí)現(xiàn) ray casting 算法。其實(shí)原理很簡(jiǎn)單，就是攝像頭（這里的攝像頭不是指手機(jī)的攝像頭，而是你渲染時(shí)的 Camera，可以參考 Three.js 中的 Camera）視作視點(diǎn)，與你在屏幕上觸碰的點(diǎn)坐標(biāo)連城一條射線，看這條射線與你視圖中哪些物體相交。

這一節(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ì)算力的要求都很高，因此 maker-based 的 AR 定位效率通常比 makerless 的要高很多。此外，計(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ù) gpu.js也沒(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 上 https://github.com/geekplux/AR-AI-VIS-demo，大家可以玩玩，其實(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ā)工具分成了四類，分別羅列出來(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] Azuma R T. A survey of augmented reality[J]. Presence Teleoperators & Virtual Environments, 1997, 6(4): 355-385
• [2] Billinghurst M, Clark A, Lee G. A survey of augmented reality[J]. Foundations and Trends in Human-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 ISMAR[C] //Proceedings of the 7th IEEE/ACM International Symposium on Mixed and Augmented Reality. Washington: IEEE Computer Society Press, 2008: 193-202
• [4] Rolland J P, Fuchs H. Optical versus video see-through head-mounted displays in medical visualization[M]. Cambridge: MIT Press, 2000, 9: 287-309