演講 / 勞永超

整理 / LiveVideoStack

伴隨虛擬現實技術的爆發，AR和VR也被應用到各個領域中，而視頻直播行業與其融合可謂是“天作之合”，阿里巴巴移動事業群視頻播放技術負責人勞永超在LiveVideoStack Meet分享了UC瀏覽器在WebAR平臺研發過程中遇到的問題，以及解決方案。本文為現場分享的整理。

class="video_iframe" data-vidtype="2" allowfullscreen="" frameborder="0" data-ratio="1.7647058823529411" data-w="480" data-src="http://v.qq.com/iframe/player.html?vid=e0541axzrto&width=638&height=358.875&auto=0" style="display: block; width: 638px !important; height: 358.875px !important;" width="638" height="358.875" data-vh="358.875" data-vw="638" src="http://v.qq.com/iframe/player.html?vid=e0541axzrto&width=638&height=358.875&auto=0"/>

大家好，我是來自阿里巴巴廣州UC團隊的勞永超，這些年基本是在直播、點播、播放器一線上耕耘的，技術會更加側重于客戶端，今天跟大家分享的內容是關于WebAR的。

在分享開始前，我們需要知道AR是什么？和AR比較貼近、經常一起出現的VR有什么區別？我們用兩部電影來說明，相信大家都看過阿凡達和鋼鐵俠，鋼鐵俠通過面罩看到的東西是跟現實世界疊加在一起的，這就是增強現實（AR），而阿凡達中的場景則將大腦連接到一個純粹渲染出來的環境總，也就是虛擬現實（VR）。

AR的現狀

我們主要來分享AR部分的技術，那為什么要做這個事情？技術的浪潮總是一波接著一波，從PC的黃金時代、到互聯網、再到移動互聯網，相信大家對搶船票還是記憶猶新，而下一個崛起的領域并不太好確認，但AI人工智能一定是超級巨大的方向，也是由此我從中選擇了一個子命題AR。

在面對這種大的技術潮流，巨頭自然不甘寂寞。Google就推出了名為Tango的技術，它可以在攝像頭捕捉的畫面中添加一些元素效果； Facebook在4月大會上也發布Camera Effects平臺，讓所有開發者可以通過簡單的方式制作出AR的效果；而蘋果在WWDC上發布的ARKit讓iPhone6S以上的設備具備了實用性非常高的AR能力。這些巨頭的行動我相信也能從側面證明AR未來發展的前景。

UC瀏覽器 - WebAR平臺開發

我們在UC瀏覽器的平臺上面搭建了一個基于HTML5和JS的框架，再通過前端代碼完成整個AR相關產品或者營銷活動的開發，而所有的支持都是通過底層的識別、追蹤、定位等模塊來完成的。

那為什么要把AR平臺建在Web上？對于Web應用而言，上線過程是開發、灰度循環直到可以發布，所有的事情都是部署刷新就可以，而對于APP則是開發，送審、修改循環，最后發布，這個過程如果比較糟糕是要耗費一個月時間的。但是建立在Web開發也會自身的問題， H5平臺本身是有一些缺點的：首先是和JS在一個虛擬機里運行，它的性能可能是不及Native，這個問題對于自身瀏覽器，我們采用把嵌入一個Native模塊用于加速；而對于一些第三方沒有接入特定瀏覽器的，那么它也可以借助未來瀏覽器內部支持的密集運算，或者是一些Native具有的功能來實現，比如Workers是可以開線程運行，Web ?VR/AR也正在形成標準， WebASM可以憑借LVN編譯器把C的代碼生成到一種自解碼的形式，因此它也能夠達到接近Native的運行效果。

了解了為什么基于Web平臺，那AR都需要解決什么問題？我認為主要是三部分：第一是目標的識別，第二是定位，這個定位是指對手機自身的定位，或者說對使用用戶的定位，最后是渲染，因為我們是用Web來開發，它在渲染時會不可避免的會涉及到一些3D的性能問題。

目標識別

目標識別通常有兩種方式，一種是把一段目標拍下來，直接進行二進制對比，而另一種則是用一些特征描述的方式來把圖里具體的一些特征點描述出來，再去跟實際的圖進行對比，當兩邊關聯度比較高的點達到達到一定比例時，我們就認為找到這個物體了。

• 特征和匹配

而在實際過程中，因為不同的特征是有不同的性能要求和準確度的，因此我們最終選擇一個比較平衡的方式——FREAK，它的特征表示方式來源于人瞳孔的物理構造，從這張圖上可以看到，它是從外圈到內圈，不同直徑大小的圓作為一個采樣的區域，每一層都有6個圓組成一個環，總共有7層，這樣每一層就有6個特征，及6個二進制的值去表示這個地方是否大于某一個值，這樣總共就會有45個二進制位來表示這個特征。用二進制表示的好處就是在做二進制距離時可以直接通過異或一個指令馬上算出來，再用SIMD指令把多個數據拼接成16位，這樣通過比較前16位就可以過濾掉很多不相似的特征。

• 多目標匹配

假如在一個場景中有多個物體需要識別，其實在移動端會有一個取巧的方式——分時匹配這些特征，也就是這一幀把所有的資源都投入到一個物體識別，而下一幀會投入到下一個物體，這樣在很短的時間就可以識別到多個不同特征。

• 大量目標匹配

但是假如特征非常多的情況又該如何解決？這就需要支持大量的特征——云方案，首先把圖片通過裁減、縮放減小它的信息量后上傳到云，云根據算法快速定位當前特征，并把特征下發到本地，之后就可以回到前面的處理方式。

• 跟蹤

對于跟蹤來說，并不是每一幀都要對整個畫面進行識別，因為消耗是比較大的，因此我們會在第一幀進行特征匹配，直到完成匹配，因為不需要管跟蹤到的物體很遠地方的其他特征，因此我們只需要對原特征的相鄰區域進行特征匹配，匹配到之后繼續跟蹤，如果跟丟則需要回到一個整個畫面重新匹配跟蹤。

• 變種目標匹配

前面介紹方法中，特征都是基于某幾個拍攝畫面的采樣，假設我們要識別的特征的變化是非常大的，而我們又沒有太多的精力去編寫算法，或是校對每個目標，那我們可能就需要嘗試其他方式。

我們設想一個場景，在某個鋼筆品牌的活動上需要對每一只筆做識別，而每個人的手和拍照時背景的環境都是不一樣的，從而會影響特征的匹配。針對這類問題，我們嘗試的方法一個是通過卷積神經網絡，inceptionv3——Google開放的分類器，它在大量數據上訓練了數月從而得到數千種分類的物體，我們通過它來識別常用的物體；此外Facebook基于Caffe機器學習發布了移動端版本，它能夠利用神經網絡去做數字的量化和剪枝等優化使得模型非常小，而運行效率不會受到影響；除了國外巨頭，騰訊也發布了一個比較小的神經網絡庫NCNN，它的好處是沒有外部依賴、自身大小比較小、跨平臺，同時對于ARM指令是有優化的，因為在手機上是沒有PC上運行的顯卡環境，因此需要用CPU來做運行，而NCNN則是針對CPU做了優化。

定位

• IMU

第二個需要解決的問題就是定位，我們是采用手機的IMU來做定位，但同樣也會帶來一些難題：首先就是校準，IMU中是有很多的噪聲需要處理，而伴隨時間推移、或不同型號的IMU可能會產生各種偏差，也都需要重新校正，同時每個IMU在制造時內部的參數就已經確定，但這些參數在API上并不會體現，因此需要人工去收集信息；此外還會有精度問題，不同IMU會存在三軸、六軸、九軸不同的精度，同時除了最原始的陀螺儀，有些手機還會有加速器、甚至磁力。因此根據不同場景需要做不同的優化。

• vSLAM（視覺定位建圖）

vSLAM——視覺定位和建圖的技術，通過這個技術可以讓手機識別出我在室內走一圈重新回到原點，這個技術對于AR是非常基礎的。但是因為手機在運動過程中，IMU會由于外部干擾、重力因素、自身累計誤差等一些物理特性，導致我們不能完全依賴這種定位技術，因此我們做了視覺的定位。

上圖是視覺定位的基本框架，首先我們通過兩幅畫面的位移和三角關系去預估位移的距離，同時后端也會做優化，因為移動過程會出現偏差，因此需要通過數學的方法做過濾，比如剛才提到的場景——拿著手機走一圈再回到原點，但由于硬件的偏差定位也會出現一些偏差，所以我們需要通過視覺算法去做校正。我們現在使用的算法是視覺詞包，就是把當前畫面中所有不同特征都放到一個詞典里，再通過詞典的方式來匹配它是否回到原點，從而來校正偏差。最后一步通過建圖來表示現實世界中的狀態。

當然這個框架也會遇到一些問題，首先它對性能的要求很高，因此在計算相鄰運動時我們使用特征法或者直接用光流的方式來匹配；第二點是尺度問題，雖然我們可以知道畫面內部的相對距離（手機的相對移動）是怎樣的，但卻不知道空間上絕對的尺度，這個問題可以通過用參照系或者傳感器（三軸IMU無法做到）來解決；第三點是運動過快，在運動過快時傳感器可能會失靈，因為我們是依賴同一個畫面中大量相同特征去做的，如果快速切到另一個畫面的話就會丟失信息。

• 特定場景定位的優化

對于某些特定場景定位還可以再做一些優化，比如對于一個活動的線路導航，就可以預先做畫面采集并通過手機下發信息從而獲取當前位置；也可以在一些點（墻面）上貼不同的二維碼或數字來表示當前位置；或者可以通過NFC或WiFi的方式來輔助校正；最后還可以基于語義SLAM來識別物體，也就是通過某些技術——分類的方式或者切割的方式，得知畫面中有哪些物體以及推算它的尺寸是怎樣的，從而幫助我們建立更加準確的尺寸。

除了前面提到的，SLAM技術應該還會有一些突破。Google提出的框架Tango規定硬件必須要有一些能力：要求具有深度攝像頭，可以通過某種物理機制來定位看到物體的距離，其中一種方式是通過發射聲波，根據返回的時間點來計算距離；具有高精度的IMU；以及通過系統中Tango進程來更加精確的計算，或維持傳感器的自由狀態。MagicLeap發表了最新論文——端到端的Deep SLAM，它是通過深度學習的方式來感應空間的位置。此外SLAM基本框架采用的傳統算法是否可以應用機器學習，比如回環檢測部分，用機器學習分類器來替代原本的視覺詞袋模型。

渲染

下面介紹渲染部分，我們在一個網頁上去做AR的效果，首先相機的內容是要顯示出來的，同時AR上疊加的效果也要顯示，那我們通常有兩種方式來實現。

• web direct render

第一種方法是direct render，首先整個網頁有一個3D框架的顯示——我們是用THREE.js etc.來顯示，而攝像頭的數據也會通過底層傳輸到JavaScript引擎（底層數據和引擎中數據的表示方式不一樣——底層是Java的byte數組或C的Char數組），虛擬機因為存在垃圾回收的機制，使得它的對象在生命周期外還會需要做一些事情，那么就可以通過省略引擎中的一些機制加快過程；而在iOS中存在JSC接口來完成這個功能。

• Hybrid render

第二種方法是Hybrid render，也就是通過為網頁擴展兩個邏輯層從而在網頁上實現完整的AR效果。攝像頭的實際內容置于底層展示，中間AR層使用Native實現，上層為網頁層。我們將網頁的背景設置為透明，對于3D物體的渲染，如果有WebGL的情況下，我們就可以在網頁層實現；如果沒有WebGL則需要在Native層來完成渲染。

• 場景融合

另一個很難的問題就是場景融合，比如我們要對某一場景去做文字翻譯，并將得到的譯文放回到場景中。這就涉及到如何去檢測位置以及由于3D變化而帶來的位置變化，同時還要考慮怎樣合理與底色融合的問題。

Web架構

這張圖是我們Web的架構，首先我們是用Web來開發AR應用；其次在架構中我們把算法層暴露出來，這樣第三方就可以把自己的核心算法注冊到UC瀏覽器中供底層使用；最后是使用Native解決了性能問題。而對于沒有Native組件加成的情況，也可以用WebAssembly編譯的代碼進行運算。

展望

我們的平臺是基于H5和AR的，未來我們會嘗試將更多的東西融入到平臺中，包括聲音、文字、人臉以及神經網絡的運行。以上是我的全部分享，再次感謝大家。

LiveVideoStack招募全職技術編輯和社區編輯

LiveVideoStack是專注在音視頻、多媒體開發的技術社區，通過傳播最新技術探索與應用實踐，幫助技術人員成長，解決企業應用場景中的技術難題。如果你有意為音視頻、多媒體開發領域發展做出貢獻，歡迎成為LiveVideoStack社區編輯的一員。你可以翻譯、投稿、采訪、提供內容線索等。

通過contribute@livevideostack.com聯系，或在LiveVideoStack公眾號回復『技術編輯』或『社區編輯』了解詳情。

總結

以上是生活随笔為你收集整理的让你的手机浏览器来一场AR风暴的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。