2017天貓雙11晚會(huì), 1.4億人次邊看晚會(huì)邊玩邊買，一場(chǎng)別開生面的“明星到你家”AR互動(dòng)活動(dòng)令人印象深刻。晚會(huì)現(xiàn)場(chǎng)，范冰冰、盧靖姍瞬間穿越到了所有觀眾家中，6分鐘內(nèi)225萬(wàn)人次邀請(qǐng)“明星到你家”。

今天，我們邀請(qǐng)到了阿里工程師沐節(jié)，為大家揭秘如何把范冰冰“送”到你家里。

背景介紹

每一年的天貓雙11狂歡夜都是明星云集，2017年當(dāng)然也不例外，大半個(gè)娛樂(lè)圈都來(lái)了，還有好萊塢巨星、超級(jí)體育大咖等。

但是，如果明星們只是一如既往地呆在電視機(jī)里，那就太沒(méi)有新意了。能不能讓電視機(jī)里的明星走下舞臺(tái)，甚至是進(jìn)到每一個(gè)觀眾的家里去，和觀眾實(shí)現(xiàn)零距離互動(dòng)呢？

范冰冰“瞬間移動(dòng)”到你家

在這次晚會(huì)中，觀眾只要在手機(jī)上點(diǎn)一下按鈕，就能把明星“請(qǐng)”到自己家里拍照、互動(dòng)。

原來(lái)，阿里工程師首次把真人三維建模和動(dòng)作捕捉技術(shù)運(yùn)用到了國(guó)內(nèi)的手機(jī)平臺(tái)，把明星的動(dòng)作甚至表情細(xì)節(jié)都進(jìn)行了逼真的還原，再通過(guò)特殊加密算法將模型文件壓縮在20M左右，同時(shí)巧妙地將AR技術(shù)與VR全景技術(shù)結(jié)合，實(shí)現(xiàn)了用技術(shù)將明星通過(guò)AR技術(shù)投射到真實(shí)場(chǎng)景，達(dá)到和觀眾面對(duì)面、多角度、零距離接觸的效果。

機(jī)遇與挑戰(zhàn)

在接到這樣一個(gè)項(xiàng)目的時(shí)候，整個(gè)團(tuán)隊(duì)都是很興奮的，可以把一種新技術(shù)帶給大眾, 不僅是炫技, 更是技術(shù)人心中的一種執(zhí)念：技術(shù)改變世界。

進(jìn)行技術(shù)調(diào)研后，我們有了以下顧慮:

1.AR算法需要較好的性能表現(xiàn)。

2.需要集成在手淘&貓客APP中，bundle尺寸越小越好。

3.在iOS平臺(tái)上只有iPhone 6S及 iOS 11的用戶可以使用 ARKIT。

4.Android端碎片化嚴(yán)重，機(jī)型差別巨大，有各種各樣的兼容性問(wèn)題。

針對(duì)上述問(wèn)題，我們調(diào)研了一些成熟引擎:

1.類似于Unreal，Unity這樣的游戲引擎，具有成熟的開發(fā)生態(tài)，強(qiáng)大的能力。專業(yè)的效果需要專業(yè)的團(tuán)隊(duì)，簡(jiǎn)單的效果Unity這樣的入門也不難。但是他們比較大并且是框架性質(zhì)，直接生成一個(gè)獨(dú)立App的大型引擎，不適合嵌入手機(jī)淘寶這樣的應(yīng)用中使用。

2.WebGL隨著瀏覽器的發(fā)展，純渲染的能力和兼容性越來(lái)越強(qiáng)，會(huì)滿足大量的需求。但是在面對(duì)高性能要求的AR各種算法，或者各種與渲染相關(guān)的強(qiáng)Native能力（譬如優(yōu)化的直播視頻流，圖片插值內(nèi)容等）時(shí)就會(huì)力不從心。等待原生的發(fā)展事實(shí)上是要等待標(biāo)準(zhǔn)的發(fā)展和普及，PWA，WebAssembly等技術(shù)尚不能算完全可用。

3.Hybrid方案通常會(huì)面臨異構(gòu)系統(tǒng)渲染帶來(lái)的不同步的硬傷，并且高頻通訊也通常帶來(lái)糟糕的性能問(wèn)題。另外，Native的透出能力，除了api級(jí)別的透出，無(wú)論是資源使用的細(xì)粒度控制，或是需底層處理的渲染內(nèi)容，都不是簡(jiǎn)單的一兩個(gè)函數(shù)調(diào)用的抽象可以解決的問(wèn)題。

考慮到2017貓晚的覆蓋人群與廣泛性,  兼容手淘/貓客與各種機(jī)型&渠道是必然的, 綜上所述最終我們采用Weex-Redim架構(gòu)解決，Weex-redim在能嵌入淘系A(chǔ)pp的包大小的情況下，實(shí)現(xiàn)了多端一致性，動(dòng)態(tài)性，高易用性和高性能的3D/VR/AR應(yīng)用研發(fā)體系并具備開放使用的能力。

關(guān)于Weex-Redim的常見問(wèn)題與思考

Redim 以vuecomponents 形式調(diào)用，對(duì)于熟悉Vue/Weex的同學(xué)只需要了解一些圖形學(xué)的概念上手幾乎沒(méi)有任何成本。這一點(diǎn)難得可貴，市面上的大部分引擎都需要熟悉一定的圖形學(xué)相關(guān)知識(shí)，開發(fā)者上手需要學(xué)習(xí)成本。

1. 如何創(chuàng)建一個(gè)AR+ SLAM的場(chǎng)景？

使用<r-slam> 與<r-ar-cursor-layout>標(biāo)簽就可以創(chuàng)建一個(gè)AR場(chǎng)景，而Camera/Renderer/Light等 Redim已經(jīng)幫助處理無(wú)需關(guān)心，Tracking也由Redim的slam算法解決，你所要做的只是在標(biāo)簽上指定一個(gè)算法:type=arkit/planeasmarker/imu就好了。

<r-slam type="arkit"> 
    <r-ar-cursor-layout> 
        <slot></slot> 
    </r-ar-cursor-layout> 
</r-slam>    

2. 動(dòng)畫支持

Redim原生支持Animation動(dòng)畫，目前支持translate3d與opacity,一些常用的矩陣操作基本可以支持。復(fù)雜的動(dòng)畫支持較為有限。

3. Redim不適合做哪些？

高質(zhì)量大規(guī)模場(chǎng)景級(jí)渲染：對(duì)于大量?jī)?nèi)容的，燈光渲染場(chǎng)景，目前由于工具鏈的缺失，擺起來(lái)還是比較吃力。并且動(dòng)態(tài)創(chuàng)建不確定類型和數(shù)量的節(jié)點(diǎn)，也是一個(gè)寫起來(lái)不太方便的事兒。

高效幀級(jí)粒度的富交互：當(dāng)出現(xiàn)實(shí)時(shí)60fps的計(jì)算需求并要反應(yīng)在組件的屬性變化時(shí)，由于Weex的線程轉(zhuǎn)發(fā)機(jī)制，效率不高。暫時(shí)可以通過(guò)降低回調(diào)頻率緩解，但是會(huì)看出來(lái)一些。

亞組件粒度的自由控制：當(dāng)希望控制組件無(wú)法描述的很底層渲染特性時(shí)，如組件沒(méi)有提供控制力，就無(wú)法進(jìn)行自定義。除非自己擴(kuò)展新組件。

 …

Redim 有著上手快，無(wú)兼容性困擾，性能穩(wěn)定，開發(fā)效率高的優(yōu)勢(shì)，但在大規(guī)模場(chǎng)景渲染上由于工具鏈缺乏，還存在很多不便之處, 總的來(lái)說(shuō)絕大部分業(yè)務(wù)場(chǎng)景上還是推薦同學(xué)們使用的：）

項(xiàng)目中的一些“坑”

1. 模型過(guò)大，50Mb左右的模型尺寸足以讓大部分用戶望而卻步。

解決方案比較針對(duì)性，我們通過(guò)雙十一前置活動(dòng)提前下發(fā)相關(guān)模型文件, 晚會(huì)當(dāng)晚預(yù)加載等，這種方案非常多就不一一列舉了。一勞永逸還是要通過(guò)模型壓縮算法啊:)

2. 需要三種算法：

• 在iPhone 6s+ iOS 11平臺(tái)上有蘋果的硬件支持, Arkit可以給用戶最好的體驗(yàn)。
• 低于iOS11的其他系統(tǒng)與Android跑分在75分以上的中高端機(jī)型采用傳感器+Marker解決。
• 剩余不在黑名單的機(jī)型采用IMU傳感器。

3.  基于面還是特征點(diǎn)？

在這個(gè)問(wèn)題上我們反復(fù)了很多次，基于特征點(diǎn)有以下問(wèn)題：

• 每次啟動(dòng)應(yīng)用它不知道設(shè)備的位置。
• 長(zhǎng)距離和長(zhǎng)時(shí)間的使用，誤差會(huì)累計(jì)變成drift。
• 主要體現(xiàn)出的問(wèn)題還是定位不準(zhǔn)確，范爺很容易就在天上了：）

基于面的檢測(cè)，有以下問(wèn)題：

• 面對(duì)環(huán)境不可辨認(rèn)，比如純色的墻，純色的桌子。
• 面對(duì)室外環(huán)境。因?yàn)樯疃葌鞲衅饔芯嚯x限制，空間大小超出限制就沒(méi)有深度信息了。
• 主要體現(xiàn)出的問(wèn)題是定位時(shí)間過(guò)長(zhǎng)，很容易讓用戶失去耐心。

為了體現(xiàn)最好的視覺(jué)效果，我們最終還是選擇了基于面的檢測(cè)。

4. 不同算法對(duì)應(yīng)的世界坐標(biāo)不同，其單位也不同，這點(diǎn)需要去做統(tǒng)一處理。

[[216378]]

貓晚效果圖

【本文為51CTO專欄作者“阿里巴巴官方技術(shù)”原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)聯(lián)系原作者】

戳這里，看該作者更多好文