如何把范冰冰“送”到你家？双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. 不同算法对应的世界坐标不同，其单位也不同，这点需要去做统一处理。
猫晚效果图
写在最后
新零售供应链平台：零售终端技术团队持续在日常业务、台网通、线下门店业务中，基于AR/VR与娱乐互动、客户体验深度结合。期待前端& 客户端人才加入我们。简历投递邮箱：mujie.zzl@alibaba-inc.com
号外！号外！
阿里技术已经开通“知乎专栏”啦，从此我们又多了一个交流渠道！在知乎搜索“阿里技术”，或是点击文末“阅读原文”，即可关注我们～
希望这个知乎专栏，能成为一个小小的平台，让技术人不分领域、不分岗位，自由探讨技术。各篇文章作者、阿里技术童鞋，也会不定期做客“阿里技术”知乎专栏，与大家交流切磋哦。
如何把范冰冰“送”到你家？双11晚会逆天技术首次公开相关推荐
- 免费下载！《九年双11：互联网技术超级工程》，300页干货精华
人类历史上的超级工程有什么?金字塔.万里长城.迪拜世界岛.三峡大坝-- 其实,我们还有个很特别的超级工程:人们看不到它的形态,却无时无刻不在感知它的存在.天南海北的货物因它向世界各地集散,各行各业因它 ...
- 【双11背后的技术】集团AliDocker化双11总结
选自<不一样的技术创新--阿里巴巴2016双11背后的技术>,全书目录:https://yq.aliyun.com/articles/68637 本文作者: 林轩.白慕.潇谦 前言 在基 ...
- 天猫双11晚会和狂欢城的互动技术方案
编者按: \\ 4月21日,天猫互动的技术专家邓红春(续彬)在QCon北京2016分享了<天猫双11晚会和狂欢城的互动技术方案>.2015年天猫联合湖南卫视联合打造了一场最互联网的双11晚 ...
- 【双11背后的技术】双11数据大屏背后的实时计算处理
选自<不一样的技术创新--阿里巴巴2016双11背后的技术>,全书目录:https://yq.aliyun.com/articles/68637 本文作者:藏六 黄晓锋 同杰 1. 双 ...
- 【技术精华汇总】不一样的技术创新——阿里巴巴2016双11背后的技术
2019独角兽企业重金招聘Python工程师标准>>> 每年的"双11"是阿里技术的大阅兵和创新能力的集中检阅.2016年的"双11"背后,更 ...
- 阿里云CDN直播架构与双11晚会直播实战
摘要: 分享人:阿里云CDN直播 高级技术专家 阙寒分享内容:双11直播活动是众多直播活动中非常典型的场景,离不开直播本身这个话题.所以今天的分享会从直播概述.直播架构.业务功能.直播监控.双11这几 ...
- 第八章 交互技术，8.5 双11晚会背后的技术(作者：邵雍)
8.5 双11晚会背后的技术 回顾2015年在鸟巢举行的第一届双11晚会,我们可以称之为"全民互动"的晚会.因为不止是现场的几千位观众,全国所有在电视机面前的观众朋友,都可以拿起手 ...
- 今年天猫双11的这些技术，可能会改变整个零售行业
零售行业的"春晚"天猫双11于20日在香港揭幕,我有幸赶赴现场,见证了一场别开生面的启动仪式:启德码头.醒狮点睛.模拟飞行-之所以在形式上大费周章,用阿里巴巴CEO.一手缔造天猫的 ...
- 阿里云CDN直播架构与双11晚会直播实战 1
摘要: 分享人:阿里云CDN直播 高级技术专家 阙寒分享内容:双11直播活动是众多直播活动中非常典型的场景,离不开直播本身这个话题.所以今天的分享会从直播概述.直播架构.业务功能.直播监控.双11这几 ...
最新文章
- PHP问题 —— Warning: PHP Startup: Unable to load dyna
- 每瓶汽水一元，两个空瓶可以置换一瓶汽水，现有N元，最多能喝多少瓶？
- 第一篇：构建Mysql服务器
- Linux的实际操作：文件目录类的实用指令（创建目录mkdir 删除目录rmdir 递归删除目录rm -rf）
- Java（多）线程中注入Spring的Bean
- Linux目录下有剩余空间，但无法写入数据
- 公众号管理系统 html,微信公众号平台管理后台.html
- 【python笔记】：python简介
- VC对密码加密和解密函数
- for linux shell 菜鸟_Linux 命令大全 | 菜鸟教程
- uniapp app中导出手机号码到通讯录
- 笔记本取消fn +功能键
- 计算机网络(自顶向下方法)-应用层
- 得帆创始人张桐：《华为数字化转型之道》系列解读之三
- 程序员养生之道：Google 是如何鼓励员工多吃蔬菜的？
- 起点篇：跨入半导体行业，数字IC设计
- 【Git】分支概念及操作
- IE浏览器打不开jupyter notebook网页的解决办法
- VMware ESXi 7.0 Update 3k - 领先的裸机 Hypervisor (sysin Custom Image)
- Java枚举类型的使用