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

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

背景介紹

每一年的天貓雙11狂歡夜都是明星云集，2017年當然也不例外，大半個娛樂圈都來了，還有好萊塢巨星、超級體育大咖等。

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

范冰冰“瞬間移動”到你家

在這次晚會中，觀眾只要在手機上點一下按鈕，就能把明星“請”到自己家里拍照、互動。

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

機遇與挑戰(zhàn)

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

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

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

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

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

4.Android端碎片化嚴重，機型差別巨大，有各種各樣的兼容性問題。

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

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

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

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

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

關于Weex-Redim的常見問題與思考

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

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

使用<r-slam> 與<r-ar-cursor-layout>標簽就可以創(chuàng)建一個AR場景，而Camera/Renderer/Light等 Redim已經(jīng)幫助處理無需關心，Tracking也由Redim的slam算法解決，你所要做的只是在標簽上指定一個算法: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,一些常用的矩陣操作基本可以支持。復雜的動畫支持較為有限。

3. Redim不適合做哪些？

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

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

亞組件粒度的自由控制：當希望控制組件無法描述的很底層渲染特性時，如組件沒有提供控制力，就無法進行自定義。除非自己擴展新組件。

 …

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

項目中的一些“坑”

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

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

2. 需要三種算法：

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

3.  基于面還是特征點？

在這個問題上我們反復了很多次，基于特征點有以下問題：

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

基于面的檢測，有以下問題：

• 面對環(huán)境不可辨認，比如純色的墻，純色的桌子。
• 面對室外環(huán)境。因為深度傳感器有距離限制，空間大小超出限制就沒有深度信息了。
• 主要體現(xiàn)出的問題是定位時間過長，很容易讓用戶失去耐心。

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

4. 不同算法對應的世界坐標不同，其單位也不同，這點需要去做統(tǒng)一處理。

[[216378]]

貓晚效果圖

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

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