如何把范冰冰“送”到你家？雙11晚會逆天技術(shù)首次公開
2017天貓雙11晚會, 1.4億人次邊看晚會邊玩邊買，一場別開生面的“明星到你家”AR互動活動令人印象深刻。晚會現(xiàn)場，范冰冰、盧靖姍瞬間穿越到了所有觀眾家中，6分鐘內(nèi)225萬人次邀請“明星到你家”。
今天，我們邀請到了阿里工程師沐節(jié)，為大家揭秘如何把范冰冰“送”到你家里。
背景介紹
每一年的天貓雙11狂歡夜都是明星云集，2017年當(dāng)然也不例外，大半個娛樂圈都來了，還有好萊塢巨星、超級體育大咖等。
但是，如果明星們只是一如既往地呆在電視機(jī)里，那就太沒有新意了。能不能讓電視機(jī)里的明星走下舞臺，甚至是進(jìn)到每一個觀眾的家里去，和觀眾實現(xiàn)零距離互動呢？
范冰冰“瞬間移動”到你家
在這次晚會中，觀眾只要在手機(jī)上點一下按鈕，就能把明星“請”到自己家里拍照、互動。
原來，阿里工程師首次把真人三維建模和動作捕捉技術(shù)運(yùn)用到了國內(nèi)的手機(jī)平臺，把明星的動作甚至表情細(xì)節(jié)都進(jìn)行了逼真的還原，再通過特殊加密算法將模型文件壓縮在20M左右，同時巧妙地將AR技術(shù)與VR全景技術(shù)結(jié)合，實現(xiàn)了用技術(shù)將明星通過AR技術(shù)投射到真實場景，達(dá)到和觀眾面對面、多角度、零距離接觸的效果。
機(jī)遇與挑戰(zhàn)
在接到這樣一個項目的時候，整個團(tuán)隊都是很興奮的，可以把一種新技術(shù)帶給大眾, 不僅是炫技, 更是技術(shù)人心中的一種執(zhí)念：技術(shù)改變世界。
進(jìn)行技術(shù)調(diào)研后，我們有了以下顧慮:
1.AR算法需要較好的性能表現(xiàn)。
2.需要集成在手淘&貓客APP中，bundle尺寸越小越好。
3.在iOS平臺上只有iPhone 6S及 iOS 11的用戶可以使用 ARKIT。
4.Android端碎片化嚴(yán)重，機(jī)型差別巨大，有各種各樣的兼容性問題。
針對上述問題，我們調(diào)研了一些成熟引擎:
1.類似于Unreal，Unity這樣的游戲引擎，具有成熟的開發(fā)生態(tài)，強(qiáng)大的能力。專業(yè)的效果需要專業(yè)的團(tuán)隊，簡單的效果Unity這樣的入門也不難。但是他們比較大并且是框架性質(zhì)，直接生成一個獨(dú)立App的大型引擎，不適合嵌入手機(jī)淘寶這樣的應(yīng)用中使用。
2.WebGL隨著瀏覽器的發(fā)展，純渲染的能力和兼容性越來越強(qiáng)，會滿足大量的需求。但是在面對高性能要求的AR各種算法，或者各種與渲染相關(guān)的強(qiáng)Native能力（譬如優(yōu)化的直播視頻流，圖片插值內(nèi)容等）時就會力不從心。等待原生的發(fā)展事實上是要等待標(biāo)準(zhǔn)的發(fā)展和普及，PWA，WebAssembly等技術(shù)尚不能算完全可用。
3.Hybrid方案通常會面臨異構(gòu)系統(tǒng)渲染帶來的不同步的硬傷，并且高頻通訊也通常帶來糟糕的性能問題。另外，Native的透出能力，除了api級別的透出，無論是資源使用的細(xì)粒度控制，或是需底層處理的渲染內(nèi)容，都不是簡單的一兩個函數(shù)調(diào)用的抽象可以解決的問題。
考慮到2017貓晚的覆蓋人群與廣泛性, 兼容手淘/貓客與各種機(jī)型&渠道是必然的, 綜上所述最終我們采用Weex-Redim架構(gòu)解決，Weex-redim在能嵌入淘系A(chǔ)pp的包大小的情況下，實現(xiàn)了多端一致性，動態(tài)性，高易用性和高性能的3D/VR/AR應(yīng)用研發(fā)體系并具備開放使用的能力。
關(guān)于Weex-Redim的常見問題與思考
Redim 以vuecomponents 形式調(diào)用，對于熟悉Vue/Weex的同學(xué)只需要了解一些圖形學(xué)的概念上手幾乎沒有任何成本。這一點難得可貴，市面上的大部分引擎都需要熟悉一定的圖形學(xué)相關(guān)知識，開發(fā)者上手需要學(xué)習(xí)成本。
1. 如何創(chuàng)建一個AR+ SLAM的場景？
使用<r-slam> 與<r-ar-cursor-layout>標(biāo)簽就可以創(chuàng)建一個AR場景，而Camera/Renderer/Light等 Redim已經(jīng)幫助處理無需關(guān)心，Tracking也由Redim的slam算法解決，你所要做的只是在標(biāo)簽上指定一個算法:type=arkit/planeasmarker/imu就好了。
- <r-slam type="arkit">
- <r-ar-cursor-layout>
- <slot></slot>
- </r-ar-cursor-layout>
- </r-slam>
2. 動畫支持
Redim原生支持Animation動畫，目前支持translate3d與opacity,一些常用的矩陣操作基本可以支持。復(fù)雜的動畫支持較為有限。
3. Redim不適合做哪些？
高質(zhì)量大規(guī)模場景級渲染：對于大量內(nèi)容的，燈光渲染場景，目前由于工具鏈的缺失，擺起來還是比較吃力。并且動態(tài)創(chuàng)建不確定類型和數(shù)量的節(jié)點，也是一個寫起來不太方便的事兒。
高效幀級粒度的富交互：當(dāng)出現(xiàn)實時60fps的計算需求并要反應(yīng)在組件的屬性變化時，由于Weex的線程轉(zhuǎn)發(fā)機(jī)制，效率不高。暫時可以通過降低回調(diào)頻率緩解，但是會看出來一些。
亞組件粒度的自由控制：當(dāng)希望控制組件無法描述的很底層渲染特性時，如組件沒有提供控制力，就無法進(jìn)行自定義。除非自己擴(kuò)展新組件。
…
Redim 有著上手快，無兼容性困擾，性能穩(wěn)定，開發(fā)效率高的優(yōu)勢，但在大規(guī)模場景渲染上由于工具鏈缺乏，還存在很多不便之處, 總的來說絕大部分業(yè)務(wù)場景上還是推薦同學(xué)們使用的：）
項目中的一些“坑”
1. 模型過大，50Mb左右的模型尺寸足以讓大部分用戶望而卻步。
解決方案比較針對性，我們通過雙十一前置活動提前下發(fā)相關(guān)模型文件, 晚會當(dāng)晚預(yù)加載等，這種方案非常多就不一一列舉了。一勞永逸還是要通過模型壓縮算法啊:)
2. 需要三種算法：
- 在iPhone 6s+ iOS 11平臺上有蘋果的硬件支持, Arkit可以給用戶最好的體驗。
- 低于iOS11的其他系統(tǒng)與Android跑分在75分以上的中高端機(jī)型采用傳感器+Marker解決。
- 剩余不在黑名單的機(jī)型采用IMU傳感器。
3. 基于面還是特征點？
在這個問題上我們反復(fù)了很多次，基于特征點有以下問題：
- 每次啟動應(yīng)用它不知道設(shè)備的位置。
- 長距離和長時間的使用，誤差會累計變成drift。
- 主要體現(xiàn)出的問題還是定位不準(zhǔn)確，范爺很容易就在天上了：）
基于面的檢測，有以下問題：
- 面對環(huán)境不可辨認(rèn)，比如純色的墻，純色的桌子。
- 面對室外環(huán)境。因為深度傳感器有距離限制，空間大小超出限制就沒有深度信息了。
- 主要體現(xiàn)出的問題是定位時間過長，很容易讓用戶失去耐心。
為了體現(xiàn)最好的視覺效果，我們最終還是選擇了基于面的檢測。
4. 不同算法對應(yīng)的世界坐標(biāo)不同，其單位也不同，這點需要去做統(tǒng)一處理。
貓晚效果圖
【本文為51CTO專欄作者“阿里巴巴官方技術(shù)”原創(chuàng)稿件，轉(zhuǎn)載請聯(lián)系原作者】
