基于AR的商品信息展示工具
金玉洲1 左士海1 胡叶民1
效果展示
需求分析
当我们去线下的商店里买东西时总会因为无法快速便捷地获取商品各项信息,而无法准确的判断商品是否满足自己的需求与预期,造成买到手后才发现并不是自己最需要的东西。另外许多人买东西都会关注价格但由于信息缺乏并不知道自己买的价格是否高了。最后当前许多商品都有很多不同品牌的商品,不易进行选择,最后发现东西不符合自身需求。
我们作品主要面向喜欢线下购物的用户,在后期的开发中会逐步添加目标用户细化功能,以便更好辅助用户针对自身独特需求。我们为用户提供比较详细的商品展示信息功能,附近商家同样商品的价格与距离比对功能。同类产品的相关信息比对功能以期能够更方便地帮助用户进行选择决策增加购物体验。性能方面依托于特征点匹配,对许多商品的识别很灵敏,不限于角度等客观因素的限制。整体工具的使用流畅,响应迅速。
概要设计
依据需求与初期目标我们进行了工具的开发,在商品识别中我们运用了Vuforia平台的基于特征点匹配的3D物体识别。并基于数据库,爬虫等技术,实现了部分功能的自动运转。减少人工添加的时间损耗。
我们的作品主要分为三个主要部分,首先是Vuforia部分,我们将模型存放在Vuforia的数据库中,并在unity中添加数据库,以实现商品识别的功能。我们在unity中添加脚本以帮助识别以及识别后的信息装载。第二部分就是unity部分,我们在unity端搭建UI界面,组织和维护商品信息以及对比信息的展示。依托unity的事件处理函数,我们编写各类脚本以实现用户与信息的交互功能以及信息的展示控制和场景的维护。第三部分就是我们的信息渠道,我们依托数据库与爬虫脚本搜集有关信息,并在AR Camera识别到商品后一句识别信息自动调取搜集的信息完成所有信息的装载,最后绑定按钮实现每个功能的独立。
如上图工作流程- 1 流程图显示,我们的工作流程是先有商品的模型存储在数据库中,再将数据库绑定在我们的工具上,此时将我们的apk安装在安卓设备上。当设备摄像头捕捉到相关商品后就会在数据库中查询到商品名进而绑定商品信息,并在设备屏幕上予以显示。
详细设计
一、界面设计
1. 初始界面
进入应用初始界面如界面- 1 初始界面所示。
界面- 1 初始界面
2. 对比界面
点击进入对比以后可以进入对比界面,如界面- 2 对比界面所示。
界面- 2 对比界面
3. 同款/类商品附近商店对比
在进入对比界面后,若识别到物体,用户可以点击加入对比,将当前物体加入列表,之后点击对比价格,即可显示同款/类商品附近商店的价格对比。四款商品的同款/类商品附近商店的价格对比如价格对比- 1 冰红茶、价格对比- 2 王老吉、价格对比- 3 绿茶、价格对比- 4 加多宝所示。
价格对比- 1 冰红茶
价格对比- 2 王老吉
价格对比- 3 绿茶
价格对比- 4 加多宝
4. 商品信息可视化对比
当时别到物体时,用户通过点击加入对比,将不同的商品加入对比列表,可以对加入列表的物体进行商品信息横向对比,如商品信息对比- 1 成分含量、商品信息对比- 2 生产地、商品信息对比- 3 市场份额所示。
商品信息对比- 1 成分含量
商品信息对比- 2 生产地
商品信息对比- 3 市场份额
5. 商品信息可视化展示
当识别到物体时,用户点击展示商品信息,即可弹出商品信息可视化图表,左上方的为在京东上爬取的商品评论信息,可以滑动翻页,如商品信息- 1 王老吉。
商品信息- 1 王老吉
6. 广告展示
当识别到物体时,点击展示广告,会在物体旁出现一个虚拟屏幕,如广告展示- 1 虚拟屏幕所示。
广告展示- 1 虚拟屏幕
若用户不喜欢这种形式可以点击切换广告形式,变成cube形播放,如广告展示- 2 Cube形所示
广告展示- 2 Cube形
二、数据库设计
数据库:我们选择关系型数据库MYSQL,由于其体积小、速度快、总体拥有成本低和开放源码,被广泛应用于中小型项目开发,数据关系如数据库- 1 数据关系所示,数据库表与字段如数据库- 2 数据库表与字段所示。
数据库- 1 数据关系
数据库- 2 数据库表与字段
三、关键算法
1. 云识别服务与云数据库:我们的程序后期可能需要识别大量的物体,可能也需要频繁的删除和添加物体,如果使用Vuforia Web Services可以让我们很轻松的管理数量庞大的对象数据库,并且可以建立自动的工作流。Cloud Database包含了存储于网络云服务器上的对象的数据库,需要通过网络进行获取。CloudDatabase数据库可以包含数量百万级别的对象,因此当识别对象超过1000个,而且对象需要经常进行更新时,Cloud Database- 1 云数据库是最好的选择。
Cloud Database- 1 云数据库
2. Vuforia Scanner:我们使用Vuforia Scanner扫描实物物体,Vuforia Scanner可以将实物物体进行建模,提取特征点,再上传到Database。识别时通过比对特征点来追踪物体。
3. AR物体的无延迟显示:由于Vuforia会将识别后的物体及场景进行缓存来使下一次更快地识别,但这样会导致我们想要展现的虚拟信息延迟出现,后来我们通过阅读源码,并对其进行了一定程序的修改来解决这个问题,使每次点击展示信息的时候传给摄像头一个未找到的标记来使摄像头重新识别物体,以达到虚拟信息立刻展现的目的。
4. 我们基于特征点匹配算法,通过提取物体表面的特征点,打包后上传到数据库,当识别物体时,将物体的特征点与数据库中的数据进行比对,从而实现快速识别3D物体。如图特征点匹配- 1 扫描模型、特征点匹配- 2 打包特征点所示。
特征点匹配- 1 扫描模型
特征点匹配- 2 打包特征点
5. 交互功能:我们编写了一系列的脚本使得应用与用户的交互更加完善与紧密,让使用者更具有AR沉浸感,他们可以任意放大缩小出现的虚拟物体,旋转虚拟电视机的放置角度以便更好地观看商品广告与信息,如图广告展示- 3 放大缩小、广告展示- 4 旋转所示。
广告展示- 3 放大缩小
广告展示- 4 旋转
6. 后端服务:为了提高工作效率、提高Unity性能、减轻前台负载、降低维护成本,我们选择前后端分离的开发方式(Unity端与服务端)。后端开发语言选择Golang,接口设计原则RESTful ,Golang天生高并发的同时,既优化了服务器性能又保证了安全性。流程如服务端- 1 数据流所示,封装规范如服务端- 2 RESTful API所示。
服务端- 1 数据流
服务端- 2 RESTful API
7. 评论模块:评论模块使用Fancy ScrollerView插件,可以模仿书本翻页去阅读热门评论,以便用户更好地了解商品的特点,增强用户体验感。
测试报告
一、测试报告
- 测试概要:我们针对工具可能的应用场景进行了两次不同测试环境下的测试,分别在超市的复杂环境下以及桌面的简单环境下的商品识别,信息展示以及按钮响应。
- 测试过程:首先我们在干净的桌面上摆放上商品,在安卓平板上进行测试。分别测试了冰红茶,绿茶,加多宝以及王老吉的识别与商品信息展示。之后我们又分别将四款商品加入到对比列表测试其对比功能。另外我们还在超市进行了复杂环境下的测试,测试当商品自然摆放在货架上时,工具是否还能正确识别商品并展示对应信息,同样我们先对四样商品进行了分别的测试,最后又一起进行了对比测试。
- 测试结果:在干净桌面的测试中,工具能较快识别出对应商品并进行商品信息展示。商品信息对比也能正常运行。且界面整体看起来整洁有序。文字显示较为清晰。在超市的测试中,商品识别速度也很快,识别后功能正常,但由于超市货架商品众多,在展示时会出现信息遮挡,模型显示出现问题。
- 修正过程:针对测试中出现的显示问题,我们在unity端进行了整体UI结构的调整,调整商品对比信息的展示方式同时将原来的商品信息展示页面与对比页面分割为两个页面,主页面显示商品信息,点击按钮后进入商品对比页面包括多种商品的三类信息对比以及附近商家的当前商品的价格对比。使得整体界面显得有序有层次。
二、技术指标
- 运行速度:在我们的多次测试下,工具对于商品的识别很灵敏,且按钮的响应速度也很快,在摄像头对准商品后在0.5s内完成识别,按钮按下后信息展示以及页面切换无明显停顿感。
- 安全性:由于我们的工具当前未涉及用户信息的获取也没有存储任何隐私信息,不存在被盗取信息的风险。
- 扩展性:各功能实现相对独立,不存在添加新的功能后导致之前的功能损坏失效的情况,同时商品种类也可扩展。
- 可用性:我们的作品使用简单,流程不复杂且每项功能都由按钮控制自主性强。另外工具实现了商品的信息数据可视化和交互功能
安装及使用
我们作品目前可以运行在安卓手机以及安卓平板上,安装时需要将我们的apk下载到手机或平板上,并安装。使用时需要将设备摄像头对准指定商品待识别成功后会在商品体上出现小手标识标识以成功识别,之后可以根据需要,选择商品信息展示以及商品对比,其中商品信息展示功能按钮排列于主页面下,根据需要点击广告按钮,信息展示按钮可以分别查看商品广告与商品的信息包括主要产地,营养成分表,市场占有率以及购买用户评论信息。当选择对比页面时可以体验当前商品的附近商家价格以及距离的对比信息功能。在之前识别的商品基础上,再扫描其他三类产品就可以体验商品信息对比功能包括主要产地,营养成分表以及市场占有率。四类信息的展示都可以通过按钮的点击来自主控制是否展示。按下返回按键时便会返回主页面,此时可以重新扫描别的商品重复体验上述功能。
项目总结
一、 任务分解
我们将项目前后端分离。前端使用Unity3D编程开发,用来实现AR效果、用户交互动作以及商品信息可视化等。服务端使用Golang进行开发,主要用来实现爬虫与开放数据库中数据的操作接口。数据库使用mysql,主要用来存放爬取下来的商品信息与前端进行数据交互。
二、 面对困难
- Vuforia的学习:由于网上没有比较详细的教程来学习如何使用Vuforia,我们花费了很多的时间去阅读源码,学习和探索如何使用Vuforia以及借助其实现各种各样我们想要的功能,为此走了许多的弯路。
- 商品的评论及信息:由于商品的信息及评论数量太多,并且热门评论需要实时更新,因此我们需要使用网络爬虫技术爬取信息并动态加载到应用中。而淘宝、京东等网站都存在着严格的反爬机制,我们通过设置Header、Cookie以及设置代理和请求间隔来回避反爬。
- 内存问题:后期商品数量增加,相关信息和广告所占内存大小也会随之增加,我们通过阿里云对象储存OSS将资源文件云存储生成网链url的形式从网络加载这些信息,以实现应用的轻量化以及减轻数据库负载。
- UI的布局以及商品信息的展示形式:调整UI布局以及商品信息的展示如何才能不显得花里胡哨也不显得平庸,同时也能尽可能展示使用者想要了解的商品的信息上花费了很大的功夫。
- 实物物体的扫描与识别:一开始由于Vuforia Scanner扫描物体模型扫描的不好或是实物物体特征点少导致最终识别艰难或是识别不出,找问题和扫描各种物体模型花费了我们大量的时间。