如何把范冰冰“送”到你家？双11晚会逆天技术首次公开

阿里妹导读：2017天猫双11晚会, 1.4亿人次边看晚会边玩边买，一场别开生面的“明星到你家”AR互动活动令人印象深刻。晚会现场，范冰冰、卢靖姗瞬间穿越到了所有观众家中，6分钟内225万人次邀请“明星到你家”。

今天，我们邀请到了阿里工程师沐节，为大家揭秘如何把范冰冰“送”到你家里。

背景介绍

每一年的天猫双11狂欢夜都是明星云集，2017年当然也不例外，大半个娱乐圈都来了，还有好莱坞巨星、超级体育大咖等。

但是，如果明星们只是一如既往地呆在电视机里，那就太没有新意了。能不能让电视机里的明星走下舞台，甚至是进到每一个观众的家里去，和观众实现零距离互动呢？

https://v.qq.com/txp/iframe/player.html?vid=o0503fmadah&width=500&height=375&auto=0
范冰冰“瞬间移动”到你家

在这次晚会中，观众只要在手机上点一下按钮，就能把明星“请”到自己家里拍照、互动。

原来，阿里工程师首次把真人三维建模和动作捕捉技术运用到了国内的手机平台，把明星的动作甚至表情细节都进行了逼真的还原，再通过特殊加密算法将模型文件压缩在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. 不同算法对应的世界坐标不同，其单位也不同，这点需要去做统一处理。

猫晚效果图

写在最后

新零售供应链平台：零售终端技术团队持续在日常业务、台网通、线下门店业务中，基于AR/VR与娱乐互动、客户体验深度结合。期待前端& 客户端人才加入我们。简历投递邮箱：[e-mail]

 号外！号外！

阿里技术已经开通“知乎专栏”啦，从此我们又多了一个交流渠道！在知乎搜索“阿里技术”，或是点击文末“阅读原文”，即可关注我们～

希望这个知乎专栏，能成为一个小小的平台，让技术人不分领域、不分岗位，自由探讨技术。各篇文章作者、阿里技术童鞋，也会不定期做客“阿里技术”知乎专栏，与大家交流切磋哦。

你可能还喜欢

点击下方图片即可阅读

关注「阿里技术」

把握前沿技术脉搏