基于增强现实的互动广告系统实现

张承楷 林琳 温凌峰 魏宏宇 吴冬燕

摘要：该项目解决了当今广告行业的撒网式播放视频广告的问题。针对广告投入方无法直观看到广告访问量的问题，通过springboot快速开发了数据可视化图表来追踪广告访问人数;而对于视频广告缺少互动性的弱点，该项目通过添加增强现实（AR）模板，提升广告的趣味性，模板可复用同时达到快速开发的目的，促进广告投放的精准性，可追查性。

关键词：广告;springboot;增强现实;ar.js

中图分类号：TP311.5      文献标识码：A

文章编号：1009-3044（2020）36-0080-04

当今，伴随着互联网行业惊人的发展，传统广告和媒体预算的时代已成为过去式，数据与创意和媒介的相互融合成为显而易见的发展趋势。撒网式的广告投放不仅投入巨大，并且缺少直观的反馈，无法根据反馈即时改进。

因此，本项目通过增强现实技术，在增加广告的互动性，增强用户黏性的同时，收集了用户访问人数等等信息来分析，并且对于增强现实模块开发成本高的问题，本项目提出模块化的开发思路来降低技术难度和开发成本，做到高效率快速开发的目的。

1 系统需求分析

1.1 需求分析

本项目针对的是广告投放商，目的是解决广告商不能持续跟踪广告投放效果，以及通过增强现实等技术来与客户形成更多的互动。在此基础上，本项目进行了以下的优化：

1）增加了可视化的数据统计

客户可以随时进入网页查询可视化数据统计分析，通过分析推广数据，可以根据数据分析出新老用户、每日使用人数、用户所在地区等信息，来将广告推送给适宜的群体，这些数据对调整市场投放策略起到重要作用。

2） 降低广告换代制作成本

对于广告投放商来说，从头制作一个广告的代价确实太高，因此对于更新换代的产品来说，在广告视频上嵌入一个可供扫描的二维码或者通过平面或者纸质广告上的图案增加AR功能都是可以接受的。

3）易用一键即达

相对于使用ARCore或者制作App之类烦琐的行为，通过手机浏览器访问无疑减少用户的决策负担，易用且直观。

2 系统设计

2.1 用例设计

该系统设计了三种角色：客戶、管理员和广告受众。客户可以进行以下操作：登录、注册、填写订单和提交、查看订单状态、查看广告反馈数据。管理员以管理员身份登录后台系统后，可以查看订单和客户信息，修改、删除和添加一些信息。广告受众的操作是用微信扫描商品或其他地方上的二维码，跳转到制作好的AR页面，进行AR互动，最后引流至客户发布的活动页面。

管理员和广告受众的用例比较简单略去不表，客户用例图如图1。

广告反馈页面，包含每月观看量/地区观看量和多次收看观众占比，通过可视化数据统计帮助客户了解广告效果并及时调整广告策略。

2.2 AR设计方案

AR技术支持如图2所示：

AR系统中一般都包含以下4个基本步骤：1）获取实时场景信息;2）对实时场景及相机位置信息进行分析;3）生成虚拟背景;4）合并视频或直接显示[1]。

2.3 后端设计方案

本项目采用Spring Boot作为开发框架进行快速构建和开发。Spring Boot是由核心团队基于Spring framework开发的微服务开发框架的微服务开发框架体系，致力于简化项目开发流程，优化项目代码结构，实现零配置。与传统的Spring框架相比，Spring Boot在代码编写形式、业务逻辑实现、项目部署实现、松耦合项目开发等方面都有了很大的飞跃[2]。

系统架构设计是系统编程的基础，是项目设计的核心。本系统采用controller（控制层），service（业务层）和dao（数据持久层）三层体系结构的系统模式。其功能如图3所示。

Entity层：entity层即数据库实体层，也被称为model层，pojo层。一般数据库一张表对应一个Entity实体类，类属性同表字段一一对应。

Dao层：dao层即数据持久层，也被称为mapper层，它的作用为访问数据库，向数据库发送sql语句，完成数据的增删改查任务。

Service层：service层即业务逻辑层，作用为完成功能设计。service层调用dao层接口，接收dao层返回的数据，完成项目的基本功能设计。

Controller层：controller层即控制层，功能为请求和响应控制，负责前后端交互，接受前端请求，调用service层，接收service层返回的数据，最后返回具体的页面和数据到客户端。

3 技术实现

3.1 Spring Security技术实现

在Web应用程序开发中，安全性一直是一个非常重要的方面。Spring Security是一个安全框架，可以为基于Spring的企业应用程序系统提供声明式安全访问控制解决方案。它提供了一组可以在Spring应用程序上下文中配置的Bean和相关配置文档。借助IOC（控制反转），DI（依赖注入）和AOP（面向切面编程）对用户身份验证进行统一管理，从而实现对资源访问的全面控制和维护[3]。

因此本项目的安全管理技术栈为Spring Boot + Spring Security。

网络应用的安全性包括两个部分：用户认证（Authentication）和用户授权（Authorization）。用户身份验证是指验证用户是否是系统中的合法主体，即用户是否能够访问系统。用户身份验证通常要求用户提供用户名和密码。系统通过验证用户名和密码来完成身份验证过程。用户授权是指验证用户是否具有执行操作的权限。在一个系统中，不同的用户拥有不同的权限。

在用户授权方面，Spring Security提供了基于角色的访问控制和访问控制列表。在这个项目中设计了两个角色：ROLE_USER和ROLE_ADMIN，它们被分配了不同的访问权限。下面描述了如何在这个项目中使用Spring Security。

1）在pom.xml中添加Spring Security的依赖。

2）实现UserDetails接口：

最终提交给Spring Security的是UserDetails 。该接口是提供用户信息的核心接口。该接口实现仅仅存储用户的信息。后续会将该接口提供的用户信息封装到认证对象Authentication中去。UserDetails 默认提供了：用户的权限集，用户的加密后的密码，应用内唯一的用户名。另外还有账户是否过期、锁定等信息，可以视需求重写这些功能，也可以自行实现扩展以存储更多的用户信息。比如用户的邮箱、手机号等

3）实现UserDetailsService接口：

本接口提供了一个方法：loadUserByUsername（） ，即通过用户名来加载用户，于从系统数据中查询并加载UserDetails的实现类的实例到Spring Security中。

4）配置身份认证机制和资源访问规则：

编写配置类WebSecurityConfig，繼承自WebSecurityConfigurerAdapter。在configure方法中定义认证用户信息获取来源和安全策略。

3.2 整合Mybatis管理持久层

在DAO层管理方面，为了方便开发，本项目选择了Mybatis。Mybatis是一个集成了SQL查询、存储过程调用和高级映射的持久层框架。它封装了几乎所有手工设置的JDBC代码，并通过简单的XML配置和注释将Java POJOs映射到数据库中的记录[4]。

整合与开发过程快捷且方便，首先通过meaven拉取相关依赖，其中包括mybatis-spring-boot-starter，这个模块能够使用SqlSessionFactoryBean注册SqlSessionFactory 实例，并自动检测并设置DataSource数据源，并在使用时自动扫描@Mapper注解类，并通过SqlSessionTemplate注册到Spring Context中，达到了springboot所提倡开箱即用的想法。

springboot会自动加载相关配置，数据源就会自动注入sqlSessionFactory中，再自动注入Mapper中，因此只需要通过注解或者xml的方式来简单的连接并操作数据库，通常在mapper类中存放对于相应xml，在Service层及Controller层便可以简单地调用方法操作数据库，实现所需的功能。

3.3 支付系统

在本项目中，针对用户支付系统，我们采用集成支付宝支付系统来实现，方便用户下单购买。

1）Mapper层实现与数据库交互

在持久层中本系统主要集成MyBatis，实现与数据库的交互。在下订单时在后台插入一条订单数据，用以后台记录订单的相关状态，在实现相关其他服务时，为其他相关服务提供数据支持。

2）Service层实现下订单的功能函数

在服务层中主要实现下订单的功能函数以及串联支付宝接口实现支付。主要设计两个函数，pay，returnUrl和notifyUrl：

①pay函数实现下订单

下订单时通过用户所填的付款金额，订单名称实现下订单的功能的实现。在此功能实现之前应首先判断订单正确与否，通过表单号判断订单的正确性，过滤非法订单。当订单正确时实现下订单的功能

②支付宝接口实现支付功能

通过商户订单号，支付宝交易号，付款金额，实现让用户的支付功能。通过获取支付宝GET过来的返回信息进行验签。

3） Controller层实现逻辑功能

在Controller层主要实现功能函数的逻辑串联，使得整体用户功能得到完美的实现。在此层中获取到前台的商户订单号，支付宝交易号和交易状态作为参数传入后台功能函数，以此实现响应支付下订单功能。

3.4 页面设计

在本项目中，所有页面都采用Html5实现，通过CSS和JavaScript来实现页面的环境渲染和页面布局。

1）登录、注册及修改密码页面的设计

登录界面通过注册时提交的用户的用户名和密码来登录系统，如果用户需要修改密码，通过认证

用户的原密码来修改，数据库会更新用户提交的新密码，再次登录时使用新的用户密码。

2）首页展示页面的设计

首页主要是展示界面，提供一些功能按钮，如登录，注册，租用界面的入口。还有一些公司简介和产品的介绍，为用户提供方便的导航界面。

3）租用广告页面的设计

本页面主要为用户提供下订单的页面。此页面用户需输入广告标题、手机号、广告类型、租用时间以及上传需要的文件，为用户在本系统下订单提供便利的购物体验。

4）主面板页面的设计

主面板主要为用户提供数据的统计。新老用户比例的统计为广告投放用户提供新用户的增长率。各城市访问人数的统计为用户提供各个地点的用户使用量，可以让用户的产品通过广告的统计对于各个城市的销售有所不同的策略。每月访问人数可以看到这个月的用户增长趋势，可以帮助广告投放用户指定相应的月销售计划。

5）AR广告页面的设计

在此页面主要是对于广告投放用户所提交的广告进行展示。我们所设计的AR广告较传统的广告更增加了用户的互动性与趣味性，在此界面用户通过扫描二维码可以获取到AR广告，让广告使用者如临其境，深切地感受每个产品的魅力。

3.5 增强现实模块实现

针对广告投放时，为方便每个用户无成本地体验到增强现实的效果，本项目通过WebGL来实现AR的效果，可以在不使用插件的情况下在任何兼容的浏览器中呈现交互式3D图形，所有用户只需用微信内嵌浏览器即可体验AR效果。

为快速开发本项目调用了AR.js及three.js这两个JavaScript库来实现AR效果，three.js负责实现3D模型，AR.js负责AR显示，其中重点主要分为图像识别与导入模型。

1） 图像识别

基于图像识别追踪的三维空间注册技术可使用光学摄像机对平面识别标识图像的特征点提取， 或使用深度摄像机对现实物体的立体轮廓及距离进行识别追踪。这两种方式都可以实时计算虚拟与现实世界坐标系对应关系， 并将虚拟物体准确叠加到现实场景中的平面识别标识或者物体上[5]。

對于图像识别创建标记部分，AR.js使用了Marker来标记特征信息，通过从图片提取像素值来作为匹配特征，而在识别时，会将像素值当作灰度值转换为图像来识别，减少图像信息，加速处理。

对于识别标记部分，AR.js本质是将artoolkit c++库通过 Emscripten编译成对应的js文件，本部分在实际调用中的过程如图6所示：

在实际调用中，仅需将文件中的markerControls中的patternUrl替换成所需的训练后的图片模型即可。2）导入模型

本项目选用obj格式来导入3D模型，导入obj格式的文件需要MTLLoader与OBJLoader两个加载器来辅助加载模型。

其中，obj包含mtl格式的纹理及材质部分及obj格式的物体的主体部分，MTLLoader的作用就是用来加载mtl文件部分的，负责将mtl材质渲染到obj平面之上;而obj格式的模型包含了物体的顶点信息，纹理坐标及顶点法线等等信息，通过OBJLoader解析并渲染到界面上，图7就清晰展示了obj包含模型的顶点信息：

6 结束语

本文介绍了基于springboot技术，以及ar.js和three.js等技术实现的广告牌系统，系统主要分为所需实现功能的分析，对项目后台快速开发，AR功能实现技术的选择，以及对各项所需要功能的实现。当下，广告的发展也要追求形式上的变化，从2D进化为3D也是一种未来的可能。本项目正是对于广告不同形式的一种尝试，而本项目使用基于WebGL的AR技术实现，也是在向移动端曾经基于ARCore实现的AR系统的一种尝试。相信AR技术对于未来而言，能够得到广泛的应用与发展，AR技术的各种应用将被逐渐挖掘。

参考文献：

[1] 吴帆，张亮.增强现实技术发展及应用综述[J].电脑知识与技术，2012，8（34）：8319-8325.

[2] 王悦，张雷，钱英军.基于SpringBoot微服务的Spring Security身份认证机制研究[J].电脑编程技巧与维护，2019（8）：64-65，68.

[3] Stephen Young.How to become a web developer part5：Web a，plication architecture[EB/OL].[2020-06-18]（2015-01-13）.https：//aestheticio.com/web-application-architecture-basics/.

[4] 荣艳冬.关于Mybatis持久层框架的应用研究[J].信息安全与技术，2015，6（12）：86-88.

[5] 朱淼良，姚远，蒋云良.增强现实综述[J].中国图象图形学报A辑，2004，9（7）：767-774.

【通联编辑：谢媛媛】