广告

阿里巴巴Buy+负责人:做淘宝VR购物碰到过的那些“坑”

2016-11-14 刘方平 阅读:
一年一度的网购狂欢节“双十一”刚刚过去,这不仅仅是购物者的盛宴,也是各种新技术登场的时刻,其中就包括Buy+ VR购物。

Buy+于11月1日在手机淘宝上线,一个可以用VR手机盒子体验的购物应用,带你穿越到世界各地的商场购物,遇到喜欢的还可以直接线上下单。vxUednc

除了这个手机版,此前阿里还公布过通过3D建模打造的HTC Vive VR购物体验。那么,阿里巴巴是怎么做VR购物的?VR购物会成为电商的未来吗?Buy+负责人胡晓航为你解答所有这些疑问。vxUednc

Buy+的技术

2016111400002vxUednc

下面聊一聊大家比较关心的技术层面和产品层面的东西。通过以下四点展开来说:vxUednc

一、为什么是全景视频+手机淘宝+Cardboard

首先,为什么用全景视频和Cardboard,并且在手机淘宝上来呈现。vxUednc

因为现在Vive的方案是比较重的,除了VR设备还要买一台PC机,做出来的方案很难有大量的用户能够体验到。这样受众面非常窄,而且我们在造物节上做过一版Vive的体验。这次我们的考虑是让更多的消费者体验到VR,所以我们选择在移动端来实现这次的Buy+。vxUednc

另外,考虑到客户端普及度的问题,我们没有用独立的App去做,而是在手淘上。这样可以让最大的用户群体验到VR购物,不需要下载用户不认识的新App。vxUednc

由于我们希望更广泛的用户体验到VR购物,这也给我们的技术实现带来了很大困难。比如我们选择在手机淘宝App上实现,那么如果用了一个非常大游戏引擎,承载这些内容和交互,那会把手机淘宝App变得非常大。vxUednc

为什么是全景视频?因为如果全用3D方案,建模起来需要时间成本;采用Cardboard而没有用一体机也是从成本的角度考虑。另外,我们送出了20万Cardboard。vxUednc

二、场景建模

在全景视频+手淘+Cardboard 的情况下,场景建模我们选择了全景视频,因为成本和时间的考虑。vxUednc

但也出现了一些困难,因为选择了全景视频后,环境的清晰度下降了,空间移动也变得困难。vxUednc

这两块在接下来的商品建模和交互方式方面我也会讲到。vxUednc

三、商品建模

商品建模方面,之所以有没用3D模型,是因为受到了交互方式的局限。Cardboard搭配手机,即使是完完整整的3D模型,交互方式也无法发挥3D模型应有的作用。比如,把3D模型拿过来,近距离地看,走动,都不行。所以这些用的是360度环拍的照片,每隔一定角度我们取一张照片。vxUednc

有一个事情工作量非常大,就是在场景中旋转的照片需要把背景变成透明的,起初的时候觉得比较简单,通过绿幕拍完直接抠掉就好了,但实际情况并没有这么理想。vxUednc

所以这部分投入了非常大的工作量。vxUednc

四、交互方式

交互方式上,主要只有一个交互方式,就是盯住触发按钮。很多人发现的是其实Cardboard上点击的按键也是可以用的,但我们没有宣传。对于新事物,教用户更多的新交互方式也是有教育成本和风险的,一次教太多,用户反而可能不知所措。vxUednc

因为已经是基于手机+全景视频了,所以交互上没有特别好的方式让你体验到PC上Vive的体验,没法拿着商品,也没法走动。vxUednc

2016111400003

Buy+里标注的商品vxUednc

vxUednc

不知道大家注意到一个细节没有,采用了全景视频以后,停下来商品总是能标定得非常准确。如果在纯3D的模型里这是非常简单的,但现在是一个视频,要每时每刻都知道物品在哪里,是非常有难度的。vxUednc

假设一个视频每秒有60帧,是60张图片,如果用手工一张一张去标商品在哪里,这个工作量肯定是接受不了的。vxUednc

最后我们尝试了一些方案,碰到过的“坑”这里分享一下:

1、图片识别

作为技术人员,我们首先想到的是做图片识别。有一个标定的图片,然后跑算法,一帧一帧去算,看每张图片里是不是有你想要的物品。vxUednc

但是这个方案经过讨论以后很快就被否定,也没有去尝试,因为走到每个位置时看到的物品的面都不一样,这给图像识别带来很大难度。而且很多商品在场景中看上去并不是那么大,对图像识别的要求实在太高,按照目前的技术无法实现。vxUednc

2、颜色识别

于是我们想到了一个办法,把整个全景视频拍两遍,第一遍正常拍,第二遍在有商品的位置用一个有特殊颜色的物品代替。然后用颜色的识别来取出商品相应的位置;vxUednc

这里有两个难点,首先两次拍摄的速度必须是一样的,另外需要把场景中特殊颜色的位置全部用图像算法抠出来。vxUednc

我们真实尝试时发现了两个问题,一是如果代替物很小,在整个图片中的像素表现是不够的;二是很容易被其它颜色干扰,比如灯光,每个商店的灯光不一样,而且环境中可能会有与物体颜色一样的东西。经过多次尝试后发现,这个方案也是不可行的。因为我们对现场的灯光跟环境基本没有控制力。vxUednc

3、转换坐标系

这时我们又尝试了另外一个方案,我们开始拍的时候把视频的第一帧拿出来,所有物体离摄像头的距离都测出来。然后根据摄像头的匀速运动判断商品下一帧会在什么位置。vxUednc

这个方案理论上蛮通的,但实现的时候也遇到很大技术困难,首先是匀速运动的问题,这个用轨道车可以解决。第二点,整个坐标系转化的问题,测量时一个很小的误差会导致坐标系转化(平面坐标转化为三维坐标)产生很大的误差。还有,每个摄像头的参数不一样,这导致每次坐标系转化的参数都要重新通过数据去训练。vxUednc

我们尝试去训练Insta 360的一个设备,最后训练完拿到坐标系的参数,误差还可以。但是后来尝试其它摄像头,发现这个参数是完全不可用的。到此我们的第三种方案也基本可以认为是不可行的。vxUednc

空间移动方案

这次我们完成了两个方向的全自由移动,原理也是蛮简单的,我们把一个视频拍完以后,转成一个倒播的视频。只需要在正向走动的时候播正向的视频。vxUednc

3D商品的展示和交互体系

3D商品的展现,我们选择了一个蛮实用的方案,就是每个物品环拍一圈,然后每隔一定度数取一张照片,把它形成一个连播的文件。用户进来的时候,就默认先播一圈,但这里也有蛮坑的事情。如果商品和背景需要融合得很好的话,需要把背景抠成透明的。我们做了几百个商品,每个商品都有很多张图片,基本上属于不能完成的工作量。vxUednc

我们通过绿幕的手段,结合一些图片提取的方法让效率变得很高,最终把这件事情完成。vxUednc

刚才提到功能上线在手淘,像这种超级app对包的大小非常敏感,导致我们没法用一些现成的游戏引擎。里面所有UI和交互都是我们自己用Open GL研发的。vxUednc

我们构建了自己的坐标体验,事件的调度体系,UI复用还有粒子系统,动画系统和事件检测机制。vxUednc

Buy+项目的开发投入和内容制作

整个项目做了3个月左右,我们做了所有的开发、尝试,在3个国家取了7个场景。最后把场景和Buy+的产品融合起来。vxUednc

各方都是并行开始的,在还没有开发完产品的时候通过讨论和技术的实现就已经定了内容的方案,内容组的同事就已经出发去拍摄了,开发组的同事还在开发,需求偶尔还会有一些变更。vxUednc

可以想像,在这种情况下做出的内容要和系统完全匹配的难度是非常高的。vxUednc

这里不得不提一些拍摄内容的注意点,现在市面上拍摄有两个设备用得比较多,一个是GoPro一个是360,使用场景也不一样。GoPro的货柜间距要求会大一点,大概1点多米,360的话间距小一点,每边是0.6-0.8米的样子。vxUednc

比如拍日本药妆店,货柜放的非常近,因为安全距离的问题很难拍,所以用了360的摄像头,当然360的摄像头肯定没有GoPro那么好。vxUednc

还有拍摄VR视频时建议能用静止就静止,如果一定要移动,就稳稳匀速移动,不然有转弯或不是匀速的话,戴上去一分钟大家就会晕得要死。vxUednc

这就是选择手机上做VR购物引起的问题,现在手机上没有好技术来实现空间移动。vxUednc

由于安全距离的问题,对小商品的细节描述会遇到问题,比如货柜上的手表会看不清楚。vxUednc

最后我们用子场景来解决,也就是走到一个区域时,我们让你进入另外一个场景,这个场景是全景图片,这个时候商品细节表现会好一些。vxUednc

刚才一些注意点好多刚开始定方案时是没想到的,到实际拍时,技术的同学跟过去才发现这些问题,也导致了产品上非常多的一些反复。vxUednc

最后我们大概投入了7、8个市场运营和技术人员完成内容拍摄和后期制作,投入了大概20个开发人员把底层产品开发完毕,可以想像过程有多少紧张。vxUednc

本地开发的适配问题

除了工作量跟没有经验可以借鉴外,其实还有一个蛮重要的问题,这次所有开发用的是原生Native,而不是H5的方案。由于双十一所有的产品都要做一程度的保密,所以没办法做大规模灰度验证。因为按以往的开发惯例和经验,Native的东西上线需要做一些线上的灰度,让线上一些真实的用户来发现一些隐藏的问题。vxUednc

2016111400004

Buy+在手淘里的入口vxUednc

vxUednc

既然不能去做线上灰度,如何保障线上技术稳定呢?我们做了几个方面的事情,首先,我们适配了目前70几款主流的设备,保证其在这些设备上的运行是没有问题的。vxUednc

并且每一次改版都需要重新去适配,因为也不知道改版对兼容性会造成什么样的问题,特别是Android,它有4.X、5.X、6.X,甚至7.X的系统,在每个版上的表现是不一样的,适配问题上真的是投入了巨大的人力物力。vxUednc

另外,我们做了很多的降级预案,比如我们把性能比较差的机器直接列入了降级名单,让它看全景的图片,而不是像现在看有标定又有移动的全景视频方案。vxUednc

当然,所有的机型都可以加白名单和黑名单,也准备了很多降级开关,比如万一崩溃比较多,而且是针对某些机型的话,也可以顺手将这些机型降成全景图片,甚至屏蔽其玩Buy+。vxUednc

听起来加白名单黑名单这件事很简单,其实并不是这样。特别针对Android来说,不可能将市面上所有机器都做一轮适配,行的加白名单,不行的黑名单,这个事情是几乎做不到的。白名单的事每年都在提,但根本没多少用处,因为不可能将所有机器都列出来。vxUednc

唯一可能采用的方案就是黑名单,但也有问题,就是只能发现一款加入一款,这样很难确保线上不会出现大面积崩溃。这次我们基本上把Android 4.X以下的机器都降级了。Android上还有部分机器陀螺仪不行,这部分也全部降级了。vxUednc

iOS也不是完全没有问题,如果操作系统升上10.0时也会遇到陀螺仪调不同接口返回的情况不一样。vxUednc

总之,如果采用Native的方案,要保证线上尽量少的崩溃,需要考虑的问题是非常多的。其实到上线的最后一刻,我们还是没有信心说这个东西上去完全没有问题,不会出现大面积崩溃,当然最后的结果验证我们的努力是没有白费的。vxUednc

全链路购物

最后一点技术的问题,提一下全链路购物的事情,大部分的VR从业者开发的同学不是特别了解交易链路和支付链路的事情,它其实是一个蛮庞大和复杂的系统。举个简单的例子,做一个商品详情,看上去展现的东西并不多,测试的同学会告诉你这里面有几千个Test Case,大家可以感受一下它的复杂度。vxUednc

当然商品详情这种还算比较简单,如果涉及到优惠价格体系和支付宝链路的话,里面的复杂度不是几个人或者某几个团队可以搞清楚。所以这次开发都有核心的业务团队参与了,比如支付有支付专业的团队帮助开发,支付宝的同学也过来跟我们一起做VR适配。vxUednc

2016111400005

Buy+里的支付环节vxUednc

vxUednc

即使是这样,其实在完成整个交易链路的时候还是遇到了蛮多问题,比如优惠方案是怎么样的,在Buy+渠道只能有Buy+的优惠,但是你会发现,一旦给了他优惠,在其它地方搜索了Buy+的商品也会有优惠价格。这样种种交易链路上的问题都要一个个去趟开。vxUednc

造物神计划

整个造神计划,我们的宗旨是,让新的内容产生得更加容易。目前还是聚焦在3D模型的建模上,只有更好的3D场景和商品,我们才能在VR领域走得更远。所以这次双十一上,我们也借助buy+重启了造神计划。希望和大家一起把3D建模这件事情做到极致。vxUednc

目前我们推出了3种不同级别的解决方案,第一种是DIVA(Digital Interactive Visual Augmentation数字化交互视觉增强)。vxUednc

它在手机淘宝上已经开始应用了。核心的技术其实也是通过180轴的转动,拍照片、视频,再提取里面的关键帧,根据陀螺仪的信息显示里面的关键帧,可以大幅度提升商品和用户的交互过程。vxUednc

第二种方案,我们采用的方案是视频扫描方案。这种方案相对于上一种方案的成本可能会高一些。扫出一个商品,价格可能在200-300元左右,为这个扫描我们还是做了很多平台化的事情。比如我们所有的的扫描、贴图、计算、模型计算都把它放在了云端,不需要你去买一个特别好的PC机去承载这些东西。vxUednc

2016111400006

光场方案vxUednc

vxUednc

最后一种方案,是还在“寓言”中的方案——光场扫描。这个方案对建模难度非常高的商品是有比较好的效果。举个例子说,如果你用3D扫描仪去扫出来的手机可能只能做出iPhone的亚黑色,但用光场的技术去做,可以做出iPhone的亮黑色。vxUednc

问答

网易游戏工程师:为什么Buy+现在采用的移动方式没有选用VR应用中常见的那种瞬移的方式——就是看向哪个点,就瞬间传送到那个点?vxUednc

胡:如果用瞬移的方式,无论从场景采集的复杂度和眩晕度来讲,我觉得可能都比这种直线移动会好一点,毕竟我在体验的时候觉得,移动过程中加载的那些视频资源挺浪费的,因为我只会盯着地面移动,而且停下来的位置有时离商品很远,不如预设几个点来的好。vxUednc

网易游戏工程师提的方案我们考虑过。我们现在没有用3D场景,但是我们考虑过用全景图片。一个场景一个场景的跳跃移动,这个在我们的降级方案里面用了,我们觉得这个的自由度没有视频的好。视频的移动是去模拟正常的逛店铺的感觉。vxUednc

怎么平衡瞬移和模拟正常移动两种方案的优劣,和如何进一步优化,我们现在也已经有了新的方案会去尝试。vxUednc

云治(Buy+产品负责人):瞬间移送最好要有模型,纯全景图或视频是没有空间定位的。场景最大的问题在于你要真实感,现阶段比较低成本靠谱的就是全景图和全景视频,缺陷是没有空间定位。如果用场景模型,有了空间定位,缺点是很难建模到照片级别的真实感,或者手工优化成本太大。不过目前我们已经找到同时具备照片质量+空间定位的低成本方案了。vxUednc

三星研究院研究员:1、 “光场扫描“具体什么设备?2 、全景视频拍摄用什么设备移动的?vxUednc

胡:商店里面是轨道车,不能用轨道车的地方就是人的头盔上安装拍摄设备,用电动车。vxUednc

三星研究院研究员:商品的照片级渲染如何能够降低后期人工修正成本,是否可以让广大商家自行增加?vxUednc

云治:在商品方面,商家没有这方面的技术能力的,一般都是找ISV。你们就理解一个最简单的逻辑,商家的商品拍摄通常都是寄给ISV来拍摄的,然后ISV回传素材,商家把素材发布到线上。这样成本、效率、质量都是要考虑的部分。在场景方面,现在的全景店铺还没有到说成本有多少的时候,基本上属于探索阶段,商业的价值还没有说清楚。vxUednc


2016111400001
【胡晓航简介:Buy+负责人,负责VR业务的探索。手淘无线技术专家,虚拟互动的负责人,给双十一提供各种好玩的虚拟互动。】vxUednc

(本文由硬创公开课刘方平整理)vxUednc

20160630000123vxUednc

本文为EDN电子技术设计 原创文章,禁止转载。请尊重知识产权,违者本司保留追究责任的权利。
  • 微信扫一扫
    一键转发
  • 最前沿的电子设计资讯
    请关注“电子技术设计微信公众号”
您可能感兴趣的文章
相关推荐
    广告
    近期热点
    广告
    广告
    广告
    可能感兴趣的话题
    广告
    向右滑动:上一篇 向左滑动:下一篇 我知道了