Web 前端中的增強現實（AR）開發技術

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

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

Web AR 初音未(wei)來

AR 它可以簡(jian)單(dan)地(di)理解(jie)為(wei)將虛擬(ni)圖像實時疊加到現(xian)實場景中(zhong)的技(ji)術(shu)，并且(qie)可以交互[1]。我個人認(ren)為(wei) AR 比 VR 主要原因是：

AR 其(qi)優點是(shi)將現(xian)實(shi)場景(jing)轉(zhuan)化為背景(jing)，將現(xian)實(shi)世(shi)界(jie)(jie)與數字世(shi)界(jie)(jie)無縫連(lian)接。

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

AR 實現方法和關鍵技術

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

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

Web AR

根據(ju)上(shang)一節的闡述，我們可以得(de)出結(jie)論：實(shi)現 AR 在瀏覽器(qi)中，需要識別、跟蹤(zong)和渲染(ran)三個步(bu)驟。此(ci)外，還(huan)可以結(jie)合傳感(gan)(gan)器(qi)提供更(geng)(geng)多的交互或讓步(bu) AR 渲染(ran)更(geng)(geng)準確，通(tong)過(guo)網(wang)絡連接云(yun)加(jia)速計算(suan)或交換(huan)更(geng)(geng)多數(shu)據(ju)。如下圖(tu)所(suo)示(shi)，這是我自(zi)己整理的 Web AR 流程圖(tu)。Web AR 或者說(shuo)移動 AR 在便攜(xie)性(xing)、傳感(gan)(gan)器(qi)豐(feng)富、自(zi)帶網(wang)絡等方(fang)面(mian)還(huan)是有很大(da)優勢的，這里就不多說(shuo)了(le)。

Web AR 流程圖WebVR 規(gui)范(fan)

首先，Web AR 它仍(reng)然是一(yi)(yi)項前沿技術，沒有標(biao)準(zhun)或成熟的(de)(de)庫供(gong)使用，但一(yi)(yi)些(xie)大公司和(he)一(yi)(yi)些(xie)開發商正在積(ji)極推(tui)廣。2017 年 10 月 2 日(ri) W3C 的(de)(de) WebVR 組(zu) 發布(bu)了 WebVR 規范 karrylady.cn 版的(de)(de)初稿，karrylady.cn 版本仍(reng)在熱火朝天地修訂中。

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

為(wei)什(shen)么這(zhe)篇(pian)文章的(de)題(ti)目(mu)(mu)是 Web AR，這(zhe)里卻提(ti)到 WebVR 呢？因為(wei) WebVR 規范的(de)部分 API 對 Web AR 也(ye)適(shi)用。比(bi)如(ru) VRDevicePose 攝像(xiang)頭位置可以獲得。這(zhe)是目(mu)(mu)前(qian)唯一(yi)的(de)接近(jin) Web AR 有(you)了(le)(le)標準，我們只能(neng)開(kai)發標準接口(kou)，以適(shi)應絕大(da)多數設備。擴(kuo)展閱讀：WebVR 為(wei)了(le)(le)增強現實，智能(neng)手機 AR 的(de) WebVR API 擴(kuo)展。

WebARonARKit, WebARonARCore

ARKit 和(he)(he)(he)(he) ARCore 蘋(pin)果和(he)(he)(he)(he)谷(gu)(gu)歌(ge)制作的(de)移動(dong)(dong) AR SDK，我相(xiang)信很(hen)多功(gong)能(neng)都(dou)是相(xiang)似的(de):運(yun)動(dong)(dong)跟蹤、環境感(gan)知和(he)(he)(he)(he)光感(gan)應 AR 對(dui)這兩個開發(fa)者(zhe)感(gan)興(xing)趣 SDK 都(dou)不陌生(sheng)。但兩者(zhe)都(dou)在(zai)移動(dong)(dong) AR 的(de) SDK，于是谷(gu)(gu)歌(ge)的(de) AR 團(tuan)隊提(ti)供(gong)了 WebARonARKit 和(he)(he)(he)(he) WebARonARCore 開發(fa)者(zhe)可以使用(yong)兩個庫(ku) Web 技術(shu)來基于 ARKit 和(he)(he)(he)(he) ARCore 從而(er)實現(xian)開發(fa) WebAR。這兩個庫(ku)目前還處于試驗階段，想(xiang)吃螃蟹的(de)人趕緊(jin)試試。實際上，實現(xian)原則與(yu)特定系統相(xiang)結合（iOS 和(he)(he)(he)(he) Android）擴展(zhan)了 WebVR API。Google AR 團(tuan)隊包(bao)裝了一個 karrylady.cn 提(ti)供(gong)了一些實用(yong)的(de)庫(ku) AR API，包(bao)括 ARView, ARReticle, ARPerspectiveCamera, ARDebug 和(he)(he)(he)(he) ARUtils 等。

karrylady.cn

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

WebRTC。下面將(jiang)詳細解釋(shi)，主要(yao)(yao)是(shi)(shi)獲取視頻(pin)流。JSARToolKit。ARToolKit 可(ke)以說是(shi)(shi)第(di)一(yi)個(ge)開(kai)源(yuan) AR 框架，在 1999 年發布，至今已(yi)更(geng)新。雖然(ran)歷(li)史悠(you)久，但(dan)仍被廣泛使用(yong)（官(guan)方網站的風格根(gen)本沒有(you)歷(li)史感(gan)）。它主要(yao)(yao)提(ti)供(gong)識別和跟蹤(zong) ** rker 本文附錄還補充了功(gong)能(neng)。karrylady.cn, karrylady.cn, A-Frame。這些都是(shi)(shi)基(ji)于的 WebGL 渲(xuan)染庫用(yong)于渲(xuan)染 AR 下文將(jiang)擴展(zhan)環境中顯示的內容。

由此(ci)觀(guan)之，karrylady.cn 就像(xiang)一把(ba)瑞士(shi)軍刀，把(ba)所有(you)(you)的輪子拼在一起，簡單易(yi)用。 GitHub 和 Twitter 都很活躍，有(you)(you)什么問(wen)題可以(yi)直(zhi)接(jie)問(wen)他。

WebRTC 獲取視頻流

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

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

karrylady.cn, JSFeat, ConvNetJS, karrylady.cn, karrylady.cn 識別與追(zhui)蹤

獲取視(shi)頻(pin)(pin)流后(hou)的工作是識(shi)別和跟蹤。您可(ke)以將視(shi)頻(pin)(pin)流視(shi)為(wei)一(yi)(yi)幀一(yi)(yi)幀的圖像(xiang)，因(yin)此(ci)處理(li)視(shi)頻(pin)(pin)流的過程可(ke)以理(li)解(jie)為(wei)圖像(xiang)處理(li)的過程。但(dan)這也涉及到(dao)如何傳(chuan)輸視(shi)頻(pin)(pin)流的問題(ti)，通(tong)常有兩(liang)種(zhong)方(fang)式：

1. 視頻流直接在(zai)前端處理(li)

可(ke)(ke)直接(jie)在(zai)前(qian)端進行圖(tu)像處理 karrylady.cn 和(he) JSFeat。這兩個庫類似于前(qian)端的(de)計(ji)算(suan)(suan)機視覺，包括(kuo)提取特征(zheng)點、人臉識(shi)別等。把 WebRTC 視頻流直接(jie)傳輸并調(diao)用 API 你(ni)(ni)可(ke)(ke)以得到(dao)你(ni)(ni)想(xiang)要(yao)的(de)結果(guo)。對(dui)于一些(xie)成熟(shu)的(de)算(suan)(suan)法(fa)，如(ru)(ru)人臉識(shi)別，你(ni)(ni)可(ke)(ke)以直接(jie)得到(dao)識(shi)別結果(guo)。如(ru)(ru)果(guo)你(ni)(ni)想(xiang)識(shi)別更復(fu)雜的(de)對(dui)象，你(ni)(ni)也可(ke)(ke)以計(ji)算(suan)(suan)自(zi)己(ji)的(de)特征(zheng)點，但(dan)這可(ke)(ke)能(neng)在(zai)前(qian)端缺乏計(ji)算(suan)(suan)能(neng)力(li)，下面將討(tao)論性能(neng)問題。

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

這(zhe)些框架在主頁上提供了(le)豐富的 Demo，很有意(yi)思，玩一下也許會激(ji)發(fa)你(ni)的靈(ling)感。

2. 前端(duan)將視(shi)頻傳輸到后(hou)端(duan)，后(hou)端(duan)處理后(hou)返回到前端(duan)

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

將圖片信(xin)息(xi)傳(chuan)輸到(dao)(dao)后(hou)(hou)端。Canvas 提供了兩(liang)個(ge) API，一個(ge)是(shi) toDataURL，它可以(yi)生成(cheng)圖片 base ** 字符串(chuan)；另一個(ge)是(shi) toBlob，這(zhe)種(zhong)方(fang)法是(shi)異步的(de)，可以(yi)將圖片轉換成(cheng) Blob 因為文件對象是(shi)二(er)進制(zhi)的(de)，傳(chuan)輸到(dao)(dao)后(hou)(hou)端更方(fang)便。具體(ti)來說，后(hou)(hou)者比(bi)前者高一點(dian)。傳(chuan)像(xiang)素信(xin)息(xi)到(dao)(dao)后(hou)(hou)端。WebGL 的(de) readPixels 可以(yi)獲(huo)得方(fang)法 framebuffer 中像(xiang)素值。

此外，還應(ying)該(gai)有其他方法。簡而(er)言(yan)之，目標是(shi)將(jiang)前(qian)端(duan)圖像信息(xi)傳(chuan)輸到后端(duan)，可以使用(yong)傳(chuan)輸方式(shi) AJAX，也可以用(yong) WebSocket，根據場(chang)景(jing)確定。

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

A-Frame, karrylady.cn, karrylady.cn, karrylady.cn, WebGL 渲染與交(jiao)互

談(tan)完識別和(he)跟(gen)蹤，終于該談(tan)渲(xuan)染(ran)了。A-Frame 是(shi)(shi)(shi) Mozilla 團(tuan)隊在(zai)(zai) 2015 一(yi)(yi)年開(kai)源的(de)(de)(de)做(zuo) WebVR 但(dan)是(shi)(shi)(shi)前(qian)幾天 A-Frame 團(tuan)隊發(fa)布的(de)(de)(de) aframe-xr 包括一(yi)(yi)些 Web AR 組(zu)件(jian)(jian)(jian)。一(yi)(yi)開(kai)始我(wo)們也(ye)說過(guo) VR 和(he) AR 有(you)些是(shi)(shi)(shi)重疊的(de)(de)(de)，所(suo)以(yi)(yi)使(shi)用(yong)(yong)(yong) A-Frame 各種(zhong)組(zu)件(jian)(jian)(jian)很少(shao)的(de)(de)(de)代碼構(gou)建各種(zhong)組(zu)件(jian)(jian)(jian) AR 所(suo)需要的(de)(de)(de) 3D 立體世界。提到 3D，不(bu)(bu)得不(bu)(bu)提 WebGL。WebGL 是(shi)(shi)(shi) OpenGL ES 你可(ke)(ke)以(yi)(yi)理(li)解瀏覽(lan)器端(duan)(duan)的(de)(de)(de)實(shi)現 OpenGL 的(de)(de)(de)子集。用(yong)(yong)(yong) WebGL 你可(ke)(ke)以(yi)(yi)在(zai)(zai)前(qian)端(duan)(duan)操作(zuo)每個像素點(dian)。懂一(yi)(yi)點(dian)圖(tu)形學(xue)(xue)的(de)(de)(de)同(tong)學(xue)(xue)一(yi)(yi)定知(zhi)道它的(de)(de)(de)力量，可(ke)(ke)以(yi)(yi)調用(yong)(yong)(yong) GPU，因(yin)此，涉(she)及(ji)到前(qian)端(duan)(duan) GPU 它也(ye)缺不(bu)(bu)可(ke)(ke)。WebGL 雖(sui)然(ran)強大，但(dan)寫(xie)作(zuo)極其(qi)復雜(za)，學(xue)(xue)習成本也(ye)很高，前(qian)端(duan)(duan)最著名 3D 庫 karrylady.cn 將繁(fan)瑣(suo)的(de)(de)(de) WebGL API 包裝和(he)優化，這樣你就可(ke)(ke)以(yi)(yi)用(yong)(yong)(yong)可(ke)(ke)讀(du)性(xing)(xing)更好的(de)(de)(de)代碼在(zai)(zai)前(qian)端(duan)(duan)書寫(xie) WebGL。karrylady.cn 和(he) karrylady.cn 做(zuo)類似的(de)(de)(de)事情，但(dan)它只支(zhi)持 2D 渲(xuan)染(ran)，但(dan)它仍(reng)然(ran)很容(rong)易使(shi)用(yong)(yong)(yong)，如(ru)(ru)果(guo)你只是(shi)(shi)(shi)想使(shi)用(yong)(yong)(yong)它 WebGL 做(zuo)復雜(za)的(de)(de)(de)渲(xuan)染(ran)，但(dan)不(bu)(bu)涉(she)及(ji) 3D 場景，不(bu)(bu)妨(fang)試試。karrylady.cn 更牛，是(shi)(shi)(shi)游(you)戲引(yin)擎，也(ye)是(shi)(shi)(shi)封裝的(de)(de)(de) WebGL 高性(xing)(xing)能渲(xuan)染(ran)在(zai)(zai)前(qian)端(duan)(duan)，但(dan)它和(he) karrylady.cn 的(de)(de)(de)關注(zhu)點(dian)不(bu)(bu)一(yi)(yi)樣，如(ru)(ru)果(guo)你對渲(xuan)染(ran)的(de)(de)(de)精(jing)細程(cheng)度非常有(you)要求，比如(ru)(ru)光(guang)線(xian)、陰影等，那么你可(ke)(ke)以(yi)(yi)考慮下 karrylady.cn，畢竟(jing)這是(shi)(shi)(shi)款由(you)微軟(ruan)前(qian)員(yuan)工開(kai)發(fa)的(de)(de)(de)游(you)戲引(yin)擎啊……

這(zhe)些(xie)基于 WebGL 的(de)渲染(ran)方法(fa)，有一個共性(xing)的(de)難題是(shi)如(ru)(ru)(ru)何交(jiao)(jiao)互，比如(ru)(ru)(ru) hover, click 效果(guo)如(ru)(ru)(ru)何實現(xian)。其(qi)實在 Web AR 中交(jiao)(jiao)互非常局(ju)限(xian)：如(ru)(ru)(ru)果(guo)是(shi)桌面(mian)設備(bei)即電腦，和瀏覽網頁的(de)交(jiao)(jiao)互差不多(duo)，有 hover, click, drag 拖拽(zhuai)等；如(ru)(ru)(ru)果(guo)用(yong)的(de)是(shi)移動設備(bei)，即手機、平板，則可能有 zoom 的(de)交(jiao)(jiao)互（這(zhe)里多(duo)嘴一句(ju)，其(qi)實移動 AR 中，應該(gai)盡量避免手指(zhi)(zhi)去 zoom 的(de)交(jiao)(jiao)互，而(er)應該(gai)引導用(yong)戶(hu)用(yong)移近或移遠設備(bei)來進(jin)行(xing)放大縮小）。這(zhe)些(xie)實現(xian)起來要依賴于 光線投射算(suan)(suan)法(fa) Ray casting 方法(fa)。karrylady.cn 直(zhi)接(jie)提供(gong)了 Raycaster 類供(gong)實現(xian) ray casting 算(suan)(suan)法(fa)。其(qi)實原理很(hen)簡(jian)單，就是(shi)攝像頭（這(zhe)里的(de)攝像頭不是(shi)指(zhi)(zhi)手機的(de)攝像頭，而(er)是(shi)你渲染(ran)時的(de) Camera，可以(yi)參考 karrylady.cn 中的(de) Camera）視(shi)(shi)(shi)作視(shi)(shi)(shi)點(dian)，與(yu)(yu)你在屏(ping)幕上觸碰的(de)點(dian)坐(zuo)標連(lian)城一條射線，看這(zhe)條射線與(yu)(yu)你視(shi)(shi)(shi)圖中哪些(xie)物體相(xiang)交(jiao)(jiao)。

Ray casting 算法

這一(yi)節主(zhu)要(yao)講(jiang)了渲(xuan)染與交(jiao)互，事實上在實現 AR 的(de)時(shi)候，識別追蹤(zong)和渲(xuan)染交(jiao)互是同(tong)時(shi)進行的(de)，如何給用戶更好、更流暢(chang)的(de)體驗是現在 Web AR 的(de)又一(yi)大難題。

性能

性能(neng)是很(hen)多人關心的問(wen)題。目(mu)(mu)前瀏覽器(qi)的算(suan)力確實還不(bu)足以與客戶(hu)端去媲美，但(dan)較(jiao)之前也(ye)有了(le)巨(ju)大的提(ti)升。識別和追蹤本質上是像(xiang)素級的計(ji)(ji)算(suan)，對(dui)算(suan)力的要求都很(hen)高(gao)，因此 ** ker-based 的 AR 定(ding)位(wei)效率(lv)通常(chang)比(bi) ** kerless 的要高(gao)很(hen)多。此外，計(ji)(ji)算(suan)機視(shi)覺算(suan)法的效率(lv)對(dui)性能(neng)影(ying)響也(ye)很(hen)大，比(bi)如人臉(lian)識別目(mu)(mu)前較(jiao)其他識別要成熟很(hen)多，所以人臉(lian)識別的算(suan)法在(zai) Web 前端運行(xing)還算(suan)流暢。

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

還(huan)有一種變相(xiang)“提升”性(xing)能(neng)的方法是用濾波(bo)算法（比如卡爾曼(man)濾波(bo)）將(jiang)卡頓降(jiang)到更(geng)小(xiao)，讓用戶從視覺感受上(shang)似乎更(geng)流(liu)暢(chang)。

結尾

現在 Web AR 大潮剛剛開始(shi)，有很多高(gao)地需要(yao)人去攻(gong)克，比如(ru)光照估(gu)計、性能優(you)化等，希望有興(xing)趣的同學(xue)可以積極參與進來。而且 Web 前端(duan)無論是(shi)技(ji)術(shu)還是(shi)人口(kou)都發展迅(xun)速，充滿(man)了無限可能，有限的只是(shi)你的想象(xiang)力。我(wo)很久之(zhi)前做(zuo)了個(ge)人臉(lian)識別 + AR 的小 demo，在 GitHub 上 karrylady.cn，大家可以玩(wan)玩(wan)，其實就幾(ji)行代碼。下一篇可能會寫寫 Web 前端(duan)做(zuo)人臉(lian)識別相(xiang)關的文(wen)章(zhang)，感(gan)覺又給自(zi)己挖了個(ge)大坑，希望我(wo)的拖延癥(zheng)早日治好。

附錄：AR 開發技術

參考(kao)文(wen)獻 [2] 中(zhong)曾總結了當時所(suo)有的 AR 開發技術(shu)，如下表:

AR 開發技術

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

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

上海(hai)西陸信息科技有限(xian)公(gong)司(si) 承接各(ge)類微信小程序(xu)開發(fa)制(zhi)(zhi)作、小程序(xu)定制(zhi)(zhi)、APP 網站 開發(fa)制(zhi)(zhi)作，聯系電話 18221533805、15900430334