手机端创新体验——手把手教你搭建VR&AR架构-CSDN博客

12月6日-7日，由阿里巴巴集团、阿里巴巴技术发展部、阿里云云栖社区联合主办，以“2016双11技术创新”为主题的阿里巴巴技术论坛（Alibaba Technology Forum，ATF）成功在线举办。在本次论坛中阿里移动平台虚拟&互动实验室负责人，GM Lab技术负责人袁岳峰分享了手机端的创新体验——VR&AR。他主要通过BUY+和寻找狂欢猫两个案例分别介绍了双11手机端的VR、AR的创新技术和实现过程。

电商和创新

今年的双11，在手机上有很多新的互动的玩法和新的业务的尝试，希望能够把最新的技术和现有的业务结合起来。比如，通过BUY+在未来购物体验的探索做一款能够用于购物的VR应用，通过“寻找狂欢猫”的活动完成线上线下的双重链接。

BUY+

技术架构

2e6ac5071a13f612181d6d380fb5c6a45a33a2b6

上图是BUY+的技术架构。最底层是System，用到了两项核心的技术，即OpenGL、MediaPlayer。全景视频是目前最优的一个解决方案，所以需要用到MediaPlayer。由于需要在全景视频上绘制一些3D的UI，所以需要用到OpenGL。基于底层，实现了VR播放器和整个VR UI体系（UI动画系统、点击事件系统）。最上层构建了整个世界，整个业务逻辑其实就是一个个场景的切换，所以需要有一个场景切换器来更好的管理场景的变化。在上层做业务的时候，给自己提了三个要求：场景可移动，希望用户在一个VR购物的场景里面是有一定的自由移动性；商品有交互，用户一定程度上可以和商品产生互动；交易能闭环，能完成一个完整的商业流程。

场景可移动

be408eaca7fabb5a97c1bfe3b7177e579fa2943b

视频中每一帧都是可以看周围风景的VR图片。基于有限的交互方式，选择了有限的让用户在场景中移动，并且准备了比较直线的场景，现有的交互能力不支持转弯。在反向播放的时候，可能出现正向视频和反向视频不能很好的衔接，这是由于安卓是通过关键帧来播放的，停留的时候不一定能准确停留在关键帧上。

商品有交互

82078ebb4a8338202bf56bce471a4d1d0d0d4efb

需要解决两个问题：我们需要在场景中、亚场景中标定出可购买的商品；希望在用户看到这个商品的时候能够和商品产生一定程度的交互。如果用图像识别来标定，识别率将是很大的障碍。即使在拍摄的时候就标注相应的mark，这些mark也不会在所有的帧都工作。如果使用轨道车进行拍摄，所有的拍摄都是匀速的，仍然很难基于数轴计算所有mark的东西。最终选择的方案是半自动的方式进行标注，在PC端播放视频，同时用鼠标来跟踪商品，对于现有的场景来说是一个比较高效的解决方案。做完这些之后还有做一些压缩工作来进行优化。面临的问题是：怎样完美的还原商品？利用了一些绿幕视频的方案降低整个图片的制作门槛。

交易能闭环

6e5ce7065b77ce1766fc481e80269ae833f05925

整个交易链是非常复杂和冗长的，这样的过程中需要做大量的交互。所以需要减少用户自有的操作，让用户进入BUY+的时候就强行登录，并且判断是否设置了默认收货地址，这样保证了用户在VR世界有限的交互条件下不用再输入完整的内容。提升研发效率，通过IOS或者Android的UI View完成UI的绘制，通过统一的方案放置在VR世界里面完成了2D转3D的效果。

寻找狂欢猫（AR）

a15e348f9c4509b996df7996c02a375cde88a8b6

很多基于LBS的AR互动是可以给用户带来不一样的感受，可以驱使用户做一些线下移动的事情，这也是这个业务尝试的初衷。这个互动是一个线上线下的双重连接，虽然是奔着LBS的AR，但是也充分利用了线上的流量。

整体架构

e405fa2d8d4ad31283f8d4068cd56f122bccd2f5

主要由两部分组成，包括常规互动的支撑技术（WLP快速的生成奖池让用户完成抽奖；Aplatform服务端的开发平台能够快速完成活动业务的研发和部署上线；MT配置管理能够帮助运营方便操作），创新技术赋能业务（LBS-AR通过LBS计算现有的物体和我们相应的距离和方向，通过AR的形式固定在现有真实世界中的某个地方；T3D是能够在手机淘宝端运作的3D引擎；Web 3D在3D地图上完成3D建筑物的绘制）。

LBS-AR

f1da2734afcb8e9d9395359f66a65a4772a1b3b4

怎么用现有的手机传感器完成空间位置的计算？根据重力加速的方向大致预估手机的基础姿态，利用磁力计进行手机朝向的判断。使用低通滤波进行防抖的修正。有没有更好的办法？陀螺仪获取手机6个方向旋转的信息，结合前面的传感器信息进行卡尔曼滤波完成更为精准的手机姿态信息的收集。遇到的问题：有些手机没有陀螺仪或者陀螺仪精度不高。

T3D

c597bf772864c42ba703f3eb56d883ae0d428794

比较核心技术的包括：骨骼蒙皮动画，粒子系统，多mesh part渲染，相机旋转插值。

Web 3D

5924aec40dccac16ea81273be61a00ad9bcfe23d

为什么和T3D选择不同的方案呢？因为抓猫需要更好的渲染效果，需要更好的在AR的场景上去体验。3D地图则需要更好的兼容性，并不需要复杂的渲染效果。选择用Canvas 3D来做，主要是因为WebGL并不是所有机器都支持。主要解决的问题是建筑物的生成，先把建筑物的模型建好，然后将贴图贴在建筑物上，再加入一些光照的效果。然后通过六边形投影算法，把LBS信息转化为游戏场景坐标。首先，需要把地球通过运算逻辑投影到整个平面，然后把地球坐标转化为自有坐标。在3D地图上并没有用到LBS-AR传递过来的所有信息，因为3D地图在移动的时候仅仅需要考虑平移，所以仅仅留下单轴移动的信息。

AR在电商的未来

这里有两个问题：

如何构建出一个自洽的线上线下商业逻辑？如何让商家长线的投入成本来获得更高的收益，只有双赢的状态才能让商家端和消费者端愿意持续用这样的互动方式。

如何避免用户对互动的新鲜感丧失？

总结

959274a2fd6005bbb6c22882e9b5993e3009f5a6

我们需要构建一个有创新能力的技术体系。今年在双11的时候其实做了很多常规的互动、创新的互动。这些都用到了在以前体系之外的新的技术，也是整个团队在整个一年积累的一个比较好的呈现。常规的基础能力的搭建、新的技术的储备一起支撑起了整个体系。所以，持续的将技术体系搭建完毕，才能更好的、更快速的完成一些创新的互动。

大会所有资源（视频回放、PDF、文章整理）一键下载：https://yq.aliyun.com/articles/65238

大会系列整理文章：