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