手机端创新体验——手把手教你搭建VR&AR架构
声明：本文阿里巴巴技术论坛整理文章，首发于CSDN，未经许可，禁止任何形式的转载。
作者：袁岳峰，阿里移动平台虚拟&互动实验室负责人，GM Lab技术负责人。
责编：钱曙光，关注架构和算法领域，寻求报道或者投稿请发邮件[email protected]，另有「CSDN 高级架构师群」，内有诸多知名互联网公司的大牛架构师，欢迎架构师加微信qianshuguangarch申请入群，备注姓名+公司+职位。【摘要】12月6日-7日，由阿里巴巴集团、阿里巴巴技术发展部、阿里云云栖社区联合主办，以“2016双11技术创新”为主题的阿里巴巴技术论坛（Alibaba Technology Forum，ATF）成功在线举办。在本次论坛中阿里移动平台虚拟&互动实验室负责人，GM Lab技术负责人袁岳峰分享了手机端的创新体验——VR&AR。他主要通过BUY+和寻找狂欢猫两个案例分别介绍了双11手机端VR、AR的创新技术和实现过程。
电商和创新
今年的双11，在手机上有很多新的互动玩法和新的业务尝试，希望能够把最新的技术和现有的业务结合起来。比如，通过BUY+在未来购物体验的探索做一款能够用于购物的VR应用，通过“寻找狂欢猫”的活动完成线上线下的双重链接。
BUY+
技术架构
上图是BUY+的技术架构。最底层是System，用到了两项核心技术，即OpenGL、MediaPlayer。全景视频是目前最优的一个解决方案，所以需要用到MediaPlayer。由于需要在全景视频上绘制一些3D的UI，所以需要用到OpenGL。基于底层，实现了VR播放器和整个VR UI体系（UI动画系统、点击事件系统）。最上层构建了整个世界，整个业务逻辑其实就是一个个场景的切换，所以需要有一个场景切换器来更好的管理场景的变化。在上层做业务的时候，给自己提了三个要求：场景可移动，希望用户在一个VR购物的场景里面是有一定的*移动性；商品有交互，用户一定程度上可以和商品产生互动；交易能闭环，能完成一个完整的商业流程。
场景可移动
视频中每一帧都是可以看周围风景的VR图片。基于有限的交互方式，选择了有限的用户在场景中移动，并且准备了比较直线的场景，现有的交互能力不支持转弯。在反向播放的时候，可能出现正向视频和反向视频不能很好衔接的问题，这是由于安卓是通过关键帧来播放的，停留的时候不一定能准确停留在关键帧上。
商品有交互
需要解决两个问题：我们需要在场景中、亚场景中标定出可购买的商品；希望用户在看到这个商品的时候能够和商品产生一定程度的交互。如果用图像识别来标定，识别率将是很大的障碍。即使在拍摄的时候就标注相应的mark，这些mark也不会在所有的帧都工作。如果使用轨道车进行拍摄，所有的拍摄都是匀速的，仍然很难基于数轴计算所有mark的东西。最终选择的方案是半自动的方式进行标注，在PC端播放视频，同时用鼠标来跟踪商品，对于现有场景来说是一个比较高效的解决方案。做完这些之后还要做一些压缩工作来进行优化。面临的问题是：怎样完美地还原商品？利用了一些绿幕视频的方案降低整个图片的制作门槛。
交易能闭环
整个交易链是非常复杂和冗长的，这样的过程中需要做大量的交互。所以需要减少用户自有的操作，让用户进入BUY+的时候就强行登录，并且判断是否设置了默认收货地址，这样保证了用户在VR世界有限的交互条件下不用再输入完整的内容。提升研发效率，通过IOS或者Android的UI View完成UI的绘制，通过统一的方案放置在VR世界里完成了2D转3D的效果。
寻找狂欢猫（AR）
很多基于LBS的AR互动可以给用户带来不一样的感受，可以驱使用户做一些线下移动的事情，这也是该业务尝试的初衷。这个互动是一个线上线下的双重连接，虽然是奔着LBS的AR，但是也充分利用了线上的流量。
整体架构
主要由两部分组成，包括常规互动的支撑技术（WLP快速的生成奖池让用户完成抽奖；Aplatform服务端的开发平台能够快速完成活动业务的研发和部署上线；MT配置管理能够帮助运营方便操作），创新技术赋能业务（LBS-AR通过LBS计算现有的物体和我们相应的距离和方向，通过AR的形式固定在现有真实世界中的某个地方；T3D是能够在手机淘宝端运作的3D引擎；Web 3D在3D地图上完成3D建筑物的绘制）。
LBS-AR
怎么用现有的手机传感器完成空间位置的计算？根据重力加速的方向大致预估手机的基础姿态，利用磁力计进行手机朝向的判断。使用低通滤波进行防抖的修正。有没有更好的办法？陀螺仪获取手机6个方向旋转的信息，结合前面的传感器信息进行卡尔曼滤波，完成更为精准的手机姿态信息的收集。遇到的问题：有些手机没有陀螺仪或者陀螺仪精度不高。
T3D
比较核心的技术包括：骨骼蒙皮动画、粒子系统、多mesh part渲染、相机旋转插值。
Web 3D
为什么和T3D选择不同的方案呢？因为抓猫需要更好的渲染效果，需要在AR场景上更好地去体验。3D地图则需要更好的兼容性，并不需要复杂的渲染效果。选择用Canvas 3D来做，主要是因为并不是所有机器都支持WebGL。主要解决的问题是建筑物的生成，先把建筑物的模型建好，然后将贴图贴在建筑物上，再加入一些光照的效果。然后通过六边形投影算法，把LBS信息转化为游戏场景坐标。首先，需要把地球通过运算逻辑投影到整个平面，然后把地球坐标转化为自有坐标。在3D地图上并没有用到LBS-AR传递过来的所有信息，因为3D地图在移动的时候仅仅需要考虑平移，所以仅仅留下单轴移动的信息。
AR在电商的未来
这里有两个问题：
如何构建出一个自洽的线上线下商业逻辑？如何让商家长线地投入成本来获得更高的收益，只有双赢的状态才能让商家端和消费者端愿意持续用这样的互动方式。
如何避免用户丧失对互动的新鲜感？
总结
我们需要构建一个有创新能力的技术体系。今年在双11的时候其实做了很多常规互动、创新互动。这些都用到了以前体系之外的新技术，也是团队一年积累的一个比较好的呈现。常规的基础能力搭建、新技术的储备一起支撑起了整个体系。所以，持续将技术体系搭建完毕，才能更好、更快速地完成一些创新互动。
相关阅读：