春节期间,支付宝的「扫福得福」活动火爆异常。AR 是一种新的交互方式,与传统营销方式相比,可使用户更深刻地参与互动,给用户带来新体验。而支付宝红包,寄托着用户对将来的期盼,所以其团队就考虑将 AR 与红包相结合,探索一种新的玩法。在 AR 领域走在前面的支付宝,其 AR 红包的技术选型、技术架构及其背后的技术故事都有哪些?算法
2004 年 12 月 12 日,我加入雅虎中国,也加入了互联网大军。至今,我还依稀记得,当时心中那种对互联网的敬畏之情。2009 年,在雅虎的四年外企生活一晃而过,我有幸加入支付宝团队,并参与支付宝无线支付。从那以后,我天天都要接受无线浪潮的洗礼,人生轨迹今后也发生了巨变。安全
今天是我到阿里的第 4096 天,谈起“红包”,让我回忆起了,2015 年参加第一次支付宝春节口令红包项目,团队得到蚂蚁金服 CEO 大奖;2016 年负责识别猴子,开始具备了 AR 雏形,后续又提出了儿童时代“集卡片”玩法,可谓集五福前身;2016 年开始建造支付宝 AR 系统,全面支撑了 2017 年 AR 实景红包、AR 扫福等一系列活动……服务器
提到AR红包,这是咱们团队的一次大胆创新,如今就来和你们分享一下支付宝 AR 红包背后的技术和故事。架构
AR 是加强现实技术的简称,其历史能够追溯到 1968 年——哈佛大学电气工程副教授萨瑟兰,发明了名为“达摩克利斯之剑”的头戴式显示设备。并发
1998 年,在当时的体育转播图文包装和运动数据追踪领域领先的公司 Sportvision,在橄榄球赛的电视转播上使用了 AR 技术,将得分线叠加到了屏幕中的球场上。此后,AR 技术开始被用于天气预报——将计算机图像叠加到现实图像和地图上面,从那时起,AR 才真正地开始了其爆炸式的发展。高并发
1999 年,加强现实开发工具 ARToolKit 便问世了,不少开发者加入这个行业,推进领域向前发展。目前 Microsoft、Google、Apple 等公司都在 AR 领域进行了大规模投入,旨在推进下一代视窗交互系统的变革。工具
为何要作支付宝 AR 红包
AR 是一趟奔驰的列车,从我的到团队,从团队到公司,都但愿搭上这趟列车,可是如何搭上,用何种技术搭上都是新的挑战。性能
AR 是一种新的交互方式,与传统营销方式相比,可使用户更深刻地参与互动,给用户带来新体验。而支付宝红包,寄托着用户对将来的期盼,所以团队就考虑将 AR 与红包相结合,探索一种新的玩法。开发工具
AR 新玩法
2015 年,咱们开始关注AR这个领域,当时为2016年制定的一个新春红包方案就是用手机识别猴子。这个方案让你们有了AR的感受,项目组也想作一些AR的创新玩法。可是,因为当时相关技术储备不足,就放弃了。优化
方案虽然放弃了,但探索AR的新玩法这件事,深深地烙在了咱们的内心。2016 年一开春,咱们创新组就开始储备相关技术知识:识别跟踪算,OpenGL、3D渲染引擎,建模能力,AR体系架构,等等。这些相关技术也陆续在小视频美颜、人脸贴图等社交场景进行了实践,为后续AR相关技术快速成型提供了保障。
如何推动 AR 的新玩法呢?当时,咱们团队定下了两个目标,一是找一个小场景落地 AR 概念,二是在春节红包上使用AR技术,后者是咱们的年度终极目标。2016 年的“中秋节扫月亮”,算是支付宝在 AR 领域的第一次尝鲜,体验和反响还不错。迈出这第一步以后,各类业务需求也接踵而来,AR 新玩法也愈来愈多——双12线下商圈“扫双 12 集四宝”的活动,2017 年春节AR实景红包,扫可口可乐福娃领红,扫福集福……
支付宝 AR 红包带来的挑战
新玩法天然会带来新挑战,不说别的,单单用怎么样一种方式呈现 AR 红包,就是很是大的挑战。大多数 AR 的玩法都是针对预设的2D图片,离线训练好识别模型,而后在此基础上实现识别互动。因为是2D图片而且预先验证过,所以能较好的保证识别的效果。支付宝AR实景红包算是业界的一次大胆尝试。用户自由选择真实3D场景,拍摄一张图片做为线索图,其余人根据线索图到指定位置拍摄图片进行比对。而这种方式呈现AR红包,天然也对图像匹配的算法性能提出了新的挑战,主要涉及以下方面。
AR实景红包的技术选型
AR红包的初期方案也和不少已有的产品相似,仅依靠 LBS 和手机陀螺仪来进行互动:用户在某个位置发一个红包,其余人到达这个地点后打开摄像头,朝着某个方向拍摄就能看到别人发的红包。这个方案因为仅依赖 LBS 和手机陀螺仪,方案比较成熟,但主要存在两个问题:
定位精度
产品初期的定位是让附近的人领取红包(好比附近几十米的人或者同一层楼的人),这对近距离定位要求就很高。内部也讨论了不少潜在的方案,好比结合WiFi定位、室内定位等等,但都不是很通用或者不成熟,没有很好的解决方案;
主观体验:因为 GPS 和陀螺仪的数据自己就存在较大的偏差,位置定位和用户动做都没法精确度量,用户体验不太好,没有真实的藏↔找的体验。
所以在 AR 红包中,咱们但愿可以从新设计交互方式,提出了图片匹配方案。在发红包时,用户对着场景拍摄一张图;其余人想要领取红包,必须到达该位置而且对着同一场景拍摄,只有位置和图片匹配才能领取,大大增长了精确度和用户趣味性。最终该方案被采纳,诞生出了 AR 实景红包。
整个 AR 实景红包由两个场景组成:一是藏红包,用户对着某场景拍一张图,将红包藏在这个场景里面;二是找红包,用户在地图页选择一个红包,经过线索图走到对应地点,打开摄像头拍摄进行图片比对,匹配成功后领取红包。
藏红包
并非全部的场景都适合藏红包,好比白墙处处可见,会形成线索图不惟一的状况。所以在藏红包时,咱们会校验当前场景是否知足预设要求。藏成功后,拍摄的图片会传到服务端处理:一是将图片转成特征码用于图片匹配,二是生成一张线索图用于找红包。
找红包
根据用户当前的位置,服务端会下发附近的红包信息。用户经过红包列表能够选择领取某一个红包,此时客户端会到服务端拉取该红包的特征码和线索图。线索图在本地展现,提示用户红包的样子。特征码用于客户端本地实时比对。用户找红包时,将摄像头采集的图像转换成特征码,与服务端下发的红包特征码进行比对,若是本地匹配成功,则把图片信息传到服务端作二次校验来防止做弊。服务端校验经过后,红包就能够领取了。
扫福得福
在扫福字得福卡的活动中,为了解决高并发的问题,采用了客户端 + 服务端并行处理的架构体系,可支持两种识别方式:
如何防冒领
正经常使用户要成功领取红包,须要按照线索图的提示找到红包隐藏地点并完成实景拍摄,也就是说位置+像匹配两个条件都须要知足,才能够领红包。AR实景红包上线之初,为了让用户有较好的体验,线索图作的比较简洁美观。初版线索图是经过添加均匀的横条纹蒙版(相似百叶窗效果)来对原图进行遮挡,同时确保用户能简单的识别出图片。
可是,因为该方案比较简单,部分用户经过PS线索图来补全被遮挡部分,后续甚至出现了自动化的PS工具。咱们随后进行了升级,每一个红包的线索图都是动态选择一个蒙版,蒙版还会随机的动态旋转/偏移等。新的线索图方案,大大增长了自动化 PS 的难度,基本解决了PS的问题。
除了对付图片的攻击外、对于 LBS 篡改等其余做弊手段,蚂蚁安全团队也作了大量的防控技术手段,经过对用户的行为数据来分析潜在的做弊用户,也有效地拦截了大部分做弊用户。
AR 的将来
AR 是一种新颖的交互形式,虽然该领域已经有了不少年的发展历程,但技术成熟度和用户普及度都不是很高。目前市面上的 AR 应用场景仍是比较窄的,仍然有不少挖掘的空间,特别是结合各行业自身的特色去思考,确定会产出不少好的创意玩法。AR 红包正式上线时,那几天地图页都是满满的红包,咱们也很兴奋,说明你们对这个新鲜事物都很感兴趣而且可以接受。除了我的红包玩法,不少商家对这种新型互动方式更加感兴趣,也主动联系咱们。商家但愿用户经过拍摄本身的品牌 Logo 来加深用户对品牌的认知,认为这是一种新颖的营销方式,将来还会有更多的成长空间。
后续咱们会朝着 AR 开放平台的方向发展,提供一个开放的 AR 平台让更多商家和用户都参与进来。同时,结合线下支付场景,围绕用户体验,打造更多的创新产品。
初版Windows Mobile钱包的诞生让我完成向移动转型,接着,我带领团队经历了 Symbian 从鼎盛到衰退,而后又经历了 WP 项目的纠结,经历了 Android 从开发版到如今的家喻户晓,经历了 iOS 从奇怪的语法到后来轻车熟路……
技术在发展,而咱们在不断地创新。2013年开启了支付宝声波支付,2014 年银行卡识别和身份证识别用于钱包业务……同时,团队相关算法技术、工程能力和创新思惟在这个过程当中也获得很大的沉淀,为连续三年参与红包项目奠基了基础,为今年 AR 红包的新玩法奠基了基础。能力越大,责任也就越大,既然承担起了这份责任,我相信咱们的努力定会不负使命。
做者介绍
何强(花名:何武),2001 年毕业于北京工商大学,2004.12.12 加入中国雅虎,参与雅虎通等客户端研发工做。2009 年转战支付宝无线事业部,参与支付宝初版客户端研发,前后负责过 Symbian 团队、WP 团队、开放平台团队、创新团队等。在阿里期间,参与过无线的每次变革,引领过相关新技术用于钱包应用,如:声波用于支付、识别银行卡用于绑卡、OCR 用于实名认证、音频处理用语音降噪、图像处理用于美颜贴图、AR 综合技术用于红包等,所带团队连续三年承担红包重要角色,擅于与兄弟团队合做,融合相关产品和技术,促进新技术落地。目前就任于支付宝多媒体创新团队,协助主管朝山推进多媒体向前发展,探索更多新领域。
原文来自:InfoQ;原文连接:https://www.infoq.cn/article/story-and-technology-innovation-of-alipay-ar-hongbao
点击阅读更多,查看更多详情