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

简介: VR、AR如何通过创新改变世界?2016双11,阿里移动平台虚拟&互动实验室负责人,GM Lab技术负责人袁岳峰分享了BUY+和寻找狂欢猫两个案例,带你目睹双11手机端的VR、AR的创新技术和实现过程。

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

大会系列整理文章:

相关文章
|
3月前
|
人工智能 编解码 5G
虚拟现实(VR)与增强现实(AR)的融合:开启全新交互时代
【6月更文挑战第17天】虚拟现实(VR)与增强现实(AR)融合成混合现实(MR),打造全新交互体验。MR结合VR的沉浸感和AR的现实增强,应用于教育、游戏、设计和营销,带来创新教学方式、沉浸式游戏体验和高效设计工具。尽管面临技术挑战,随着5G和AI的发展,MR有望引领未来交互的革命。
|
3月前
|
传感器 数据可视化 安全
【虚拟现实】二、主要的AR/VR硬件设备
【虚拟现实】二、主要的AR/VR硬件设备
51 3
|
17天前
|
编解码 vr&ar 芯片
VR与AR:未来的科技趋势
【8月更文挑战第26天】VR与AR技术正以前所未有的速度发展,并在市场规模、技术创新、应用场景以及竞争格局等方面展现出强劲的增长潜力。随着技术的不断进步和应用场景的不断拓展,VR/AR/MR技术将为人们带来更加丰富的虚拟体验和更加便捷的生活方式。未来,我们有理由相信,VR与AR技术将在多个领域实现更广泛的应用和更深入的融合,成为推动社会进步的重要力量。
|
15天前
|
算法 vr&ar 计算机视觉
基于PTGui和Ps 有手和低端手机就能拼接生成一张酷酷VR720°商用全景图
这篇文章介绍了如何使用PTGui和PhotoShop软件,配合低端手机,通过一系列步骤拍摄并拼接生成一张720°商用全景图,包括软件下载、拍摄要求、素材获取、拼接合成、发布全景图以及提高拍摄效果的方法。
基于PTGui和Ps 有手和低端手机就能拼接生成一张酷酷VR720°商用全景图
|
11天前
|
vr&ar 图形学 开发者
步入未来科技前沿:全方位解读Unity在VR/AR开发中的应用技巧,带你轻松打造震撼人心的沉浸式虚拟现实与增强现实体验——附详细示例代码与实战指南
【8月更文挑战第31天】虚拟现实(VR)和增强现实(AR)技术正深刻改变生活,从教育、娱乐到医疗、工业,应用广泛。Unity作为强大的游戏开发引擎,适用于构建高质量的VR/AR应用,支持Oculus Rift、HTC Vive、Microsoft HoloLens、ARKit和ARCore等平台。本文将介绍如何使用Unity创建沉浸式虚拟体验,包括设置项目、添加相机、处理用户输入等,并通过具体示例代码展示实现过程。无论是完全沉浸式的VR体验,还是将数字内容叠加到现实世界的AR应用,Unity均提供了所需的一切工具。
44 0
|
2月前
|
传感器 人工智能 数据可视化
虚拟现实(VR)与增强现实(AR)的技术革新:塑造未来的沉浸式体验
【7月更文挑战第24天】VR和AR作为两种前沿的沉浸式技术,正以前所未有的速度改变着我们的世界。随着技术的不断革新和应用的不断拓展,我们有理由相信,未来的VR和AR将为我们带来更多令人惊叹的体验和技术革新。
|
2月前
|
数据可视化 前端开发 大数据
商场智能导视系统深度解析,AR与大数据融合创新商业运营模式
**商场智能导视系统提升购物体验:** 通过三维电子地图、AR导航、AR营销、VR全景导购及可视化数据,解决顾客寻路困扰,增强店铺曝光,简化招商流程,优化商场管理,借助科技创新驱动顾客满意度、品牌曝光度及运营效率的全面提升。
86 0
商场智能导视系统深度解析,AR与大数据融合创新商业运营模式
|
3月前
|
vr&ar
AR和VR的光学结构分别是什么?
【6月更文挑战第25天】AR和VR的光学结构分别是什么?
75 5
|
3月前
|
传感器 物联网 5G
AR和VR
【6月更文挑战第25天】AR和VR
84 4
|
3月前
|
传感器 数据可视化 人机交互
虚拟现实(VR)与增强现实(AR)技术解析
【6月更文挑战第27天】 VR创造沉浸式虚拟环境,模拟真实感受,应用于旅游、医疗、教育和游戏。AR将虚拟信息叠加到现实,强调虚实结合与实时交互,常见于游戏、教育、购物和医疗。两者提供超越现实的体验,随着技术进步,将在更多领域发挥作用,开启新可能。

热门文章

最新文章