第5章Vuforia开发 视频讲解 本章学习目标 了解Vuforia及其基础功能。 掌握使用Vuforia进行项目开发的步骤。 本章首先简要介绍Vuforia及其基础功能，然后重点讲解使用Vuforia进行项目开发的详细步骤和实现效果。 5．1Vuforia简介 Vuforia是一款能将现实世界物体与虚拟物品进行互动体验的AR开发平台。该平台利用计算机视觉技术,可以实时地识别和跟踪现实世界中的平面图像及简单的3D物体，使开发者能够在现实世界和数字世界之间架起体验的桥梁。 Vuforia通过Unity游戏引擎扩展提供了C、Java、ObjectiveC和 ．NET语言的应用程序编程接口，能够同时支持iOS和Android的原生开发，这也使开发者在Unity引擎中开发的AR应用很容易移植到iOS和Android平台上。 5．2Vuforia基础功能 1. Image Targets(图片识别) 通过Vuforia的图片识别功能，可以在图片上呈现模型的AR效果，如图5．1所示。 2. Cylinder Targets(圆柱体识别) 通过Vuforia的圆柱体图片识别功能，能在图片上呈现模型的AR效果，如图5．2所示。 图5．1Vuforia呈现的图片识别效果 图5．2Vuforia呈现的圆柱体图片的识别效果 3. Multi Targets(立方体识别) 通过Vuforia的立方体图片识别功能，能在图片上呈现模型的AR效果，如图5．3所示。 4. User Defined Targets(自定义识别) 通过截取当前屏幕内容作为识别图，呈现AR效果，如图5．4所示。 图5．3Vuforia呈现的立方体图片的识别效果 图5．4Vuforia的自定义图片识别效果 5. Text Recognition(文字识别) Vuforia还可以通过识别文字，呈现AR效果。目前文字基本支持英文，默认能够识别的英文单词必须是官方词库中的单词(十万个)，用户也可以自定义添加英文单词，如图5．5所示。 6. Virtual Buttons(虚拟按钮) 在识别图上制作特殊的按钮区域，通过遮挡特殊区域来实现按钮的效果，如图5．6所示。 图5．5文字识别效果 图5．6挡住特殊区域来实现按钮的效果 7. Cloud Recognition(云识别) 将识别图和模型等资源放在网络端，通过识别图识别下载模型呈现AR效果，如图5．7所示。 8. Smart Terrain (Unity only)(智能地形) 以图片识别、圆柱体、立方体识别为基点，向四周扩散识别周围一些立方体、圆柱体等形状的物体，以此为基础建立模型场景，如图5．8所示。 9. Object Recognition(物体识别) 在手机上安装Vuforia Object Scanner并打印A4Object Scanning Target 360°扫描物 图5．7识别下载模型呈现AR效果 图5．8凭借立体图形建立模型场景 体，记录物体特征点，以此为基础进行识别，呈现AR效果，如图5．9(a)~图5．9(c)所示。 图5．9Object Recognition识别过程 1） Penguin Penguin是Vuforia专门为Smart Terrain(智能地形)而开发的一款Demo小游戏。以一瓶瓶装饮料为识别基点，向周围识别茶杯、书籍、花瓶等各种形状的物体，生成冰川场景，让小企鹅在冰雪中滑行，如图5．10所示。 图5．10Demo小游戏 2） Find The Penguin Find The Penguin是Vuforia仿照Pokémon Go制作的一个Demo。通过使用设备的陀螺仪和Vuforia的User Defined Targets(自定义识别)功能，使模型能够固定在地面某一点，并且在周围随意活动，如图5．11所示。 图5．11Find The Penguin 5．3Vuforia项目开发 使用Vuforia进行项目开发，主要包括获取与导入Vuforia SDK、搭建开发环境、创建License Key、上传识别图、创建测试立方体、导入模型资源、创建虚拟按钮、动画制作、添加脚本和导出发布10个基本步骤。 5．3．1获取与导入Vuforia SDK Vuforia SDK已经内嵌到Unity引擎中，在安装Unity时使用默认的版本即可。也可以访问Vuforia的开发者官网http://developer．vuforia．com，在主页的Downloads选项卡中下载最新版的Vuforia SDK，如图5．12所示。从下载页面的说明可以看出，Vuforia引擎中已经集成到最新的Unity版本。如果下载了最新的Unity，在安装后就可以看到Vuforia模块。 图5．12Vuforia SDK下载页面 如果是新用户，需要单击右上角的Register，完成账号注册才能登录下载Vuforia SDK。如果新用户直接单击下载链接，也会自动跳转到账号注册页面，如图5．13所示。 图5．13新用户注册页面 安装Unity时如果使用的是默认版本，还需要在Unity中加载导入Vuforia模块。在Unity的File菜单选择Build Settings，在弹出窗口中单击Player Settings，在右侧的Inspector面板的XR Settings中如果看到有Vuforia Augmented Reality选项，就说明Unity中已经集成了Vuforia，可以勾选该选项后的方框加载Vuforia模块，如图5．14所示。 图5．14加载Vuforia 模块 如果Vuforia Augmented Reality选项下是带一个下画线的链接，则说明安装的Unity中没有Vuforia模块，可以单击链接获取Vuforia SDK后再加载Vuforia模块。 5．3．2搭建开发环境 加载Vuforia模块后，在Unity场景中看起来没有任何变化，只是在Project窗口中多了VuforiaConfiguration项。要使用Vuforia开发项目还需要进行开发环境的搭建。首先导入Vuforia资源包，在Unity的GameObject菜单中选择Vuforia Engine，添加一个AR Camera，如图5．15所示，会弹出一个对话框，提示用户是否导入Vuforia的资源包。单击Import按钮，完成导入。 图5．15导入Vuforia SDK资源包 导入成功后，在Hierarchy窗口中会出现AR Camera，如图5．16所示。这时需要把原来的Main Camera删除，将AR Camera移到Hierarchy窗口最上方。 图5．16调整AR Camera 然后添加识别图组件。在GameObject菜单中继续选择Vuforia Engine，添加一个Image，如图5．17所示，会弹出一个对话框，提示用户是否导入官方默认的识别图数据包。这里选择Skip，使用自己提前准备好的识别图。 图5．17导入识别图数据包 在Hierarchy窗口中会出现ImageTarget组件，如图5．18所示。 图5．18ImageTarget组件 5．3．3创建License Key 登录到开发者平台，单击License Manager(证书密钥管理)，如图5．19所示。用户可以单击选择Get Development Key获取一个开发者版的密钥，也可以单击Buy Deployment Key按钮购买一个商业版的密钥。这里选取免费开发者版。 图5．19获取开发者版密钥 在Add a free Development License Key页面的License Name处填写证书名字(一般和要发布的App保持相同或相似即可)，并在页面下方勾选同意获取Vuforia Developer Agreement，最后单击Confirm按钮，如图5．20所示，就可以获取对应的密匙。 也可以打开一个已有的密钥(以MyARTest为例)，修改该密匙对应的证书名字，或单击License Key，复制该License Key到剪贴板，如图5．21所示。 图5．20填写证书名字 图5．21复制License Key 然后在Unity的Hierarchy窗口中单击ARCamera，在右侧检视面板中单击Open Vuforia Engine configuration，将刚才复制的License Key粘贴到App License Key右侧的矩形框内，如图5．22所示。 图5．22粘贴License Key 5．3．4上传识别图 一般一个应用对应一个License Key，一个License Key对应一个Database。回到开发者后台，在Target Manager选项卡中，单击右侧的Add Database按钮,在弹出窗口中选择Device，为数据库命名为CarImage，单击Create按钮，如图5．23所示。 图5．23添加识别图数据库 单击Add Target按钮添加识别图，弹出窗口中会有4种识别图类型供选择，这里选择Single Image，然后单击File后的Browse按钮，在出现的路径中选择要使用的识别图。其中识别图必须是．jpg格式或．png格式，并且不能超过2MB。还要填写识别图的宽度(注意单位是米)和名字，单击Add按钮，如图5．24所示。识别图上传完成后，可以看到识别图的评定星级，星级越高，识别图的速度越快，追踪越稳定，可视角度越大。 图5．24添加识别图 识别图还可以选择Cuboid(立方体)和Cylinder(圆柱体)，不过需要在Unity中创建Multi Image或Cylinder Image与之对应，如图5．25所示。而识别图如果为3D Object(三维物体),则需要后台工具进行辅助。 图5．25与Cuboid和Cylinder对应的图像组件 在添加的识别图中，勾选识别图car5，单击Download Database(1)按钮，如图5．26所示,弹出窗口中选择Unity Editor，单击Download下载。 图5．26勾选识别图 下载后会得到一个CarImage unitypackage的资源包，如图5．27所示。 图5．27下载的识别图资源包 把该资源包拖曳到Project窗口的Assets文件夹，在弹出窗口中单击Import按钮，如图5．28所示。 图5．28导入识别图资源包 单击Hierarchy窗口的ImageTarget，在右侧Inspector面板对应Image Target Behaviour组件下的Database参数后单击选择CarImage，ImageTarget参数后选择图片car5，如图5．29所示，就可以在Scenes窗口中看到识别图。 图5．29识别图参数设置 5．3．5创建测试立方体 右击Hierarchy窗口的ImageTarget，级联菜单中依次选择3D Object→Cube命令，如图5．30所示，即在识别图上创建了一个立方体。 图5．30在识别图上创建立方体 单击Hierarchy窗口的ARCamera，在右侧Inspector面板中单击Open Vuforia Engine Configuration命令，下拉滚动条到面板的下部，在Webcam中可以选择台式机或笔记本计算机对应的摄像头。HD Pro Webcam C920是外接摄像头，Lenovo EasyCamera是笔记本计算机自带的摄像头，这里选择前者，如图5．31所示。 图5．31选择外接摄像头 单击Scenes窗口的运行按钮，可看到识别图上出现的立方体，如图5．32所示。 图5．32运行效果 5．3．6导入模型资源 测试完成后，可以把立方体替换成小车。小车模型资源可在官方资源商店Cartoon SportCar中下载。首先在Hierarchy窗口中将Cube删除，然后单击Scenes窗口的Assets Store，在资源商店中单击搜索按钮,在搜索框中键入关键字Cartoon SportCar，如图5．33所示。 图5．33Unity资源商店 找到如图5．34所示的小车资源，单击选择下载到本地。 图5．34在资源商店中查找小车模型资源 然后单击导入按钮，在弹出窗口中先单击All按钮，再单击Import按钮，即可将小车资源导入Unity中，如图5．35所示。 图5．35导入小车模型资源 导入过程会出现弹出窗口，提示用户是否更新当前插件的API，如图5．36所示，单击Go Ahead按钮。如果不更新，导入后的材质或某些插件的功能可能无法正常使用。 图5．36导入小车模型时的API更新需求 导入完成后，可在Project窗口看到导入的汽车资源，这里选择Cartoon_SportCar_B01，将其拖曳到Hierarchy窗口的ImageTarget上。在Scenes窗口中调整汽车大小，并在Inspector面板中调整小车的Rotation参数(旋转90°)，使其适合识别图大小，如图5．37所示。 图5．37调整汽车模型大小与角度参数 使用键盘的Ctrl+S快捷键保存场景后，单击Scenes窗口的运行按钮，可在Game窗口中查看运行效果，如图5．38所示。 图5．38查看运行效果 5．3．7创建虚拟按钮 接下来通过创建虚拟按钮来实现对小车模型的动画操作。在Scenes窗口可以看到识别图底部有3个提前使用Photoshop软件制作好的按钮，如图5．39所示。 图5．39识别图上的按钮 Hierarchy窗口中单击ImageTarget，在Inspector面板的Advanced组件下单击Add Virtual Button按钮，如图5．40所示。 图5．40添加虚拟按钮组件 调整虚拟按钮大小，使其与识别图中按钮的大小重叠，如图5．41所示。 图5．41调整虚拟按钮大小 同样方法，再添加两个虚拟按钮，分别使其与识别图中对应按钮重叠，如图5．42所示。 图5．42添加并调整其他虚拟按钮 5．3．8动画制作 虚拟按钮创建好后，还需要添加组件，使用户操作虚拟按钮时，小车可以实现开灯/关灯、更换颜色、拆解/还原等动画效果。首先在Hierarchy窗口中单击Cartoon_SportCar_B01，在Inspector面板中将Animator组件移除，如图5．43所示。 图5．43移除Animator组件 单击Add Component按钮，添加一个Animation组件，如图5．44所示。 图5．44添加animation组件 然后在Window菜单下选择Animation，或使用快捷键Ctrl+6打开动画编辑窗口，如图5．45所示。 图5．45打开动画编辑窗口 在动画编辑窗口单击Create按钮，新建一个动画，如图5．46所示。 图5．46新建一个动画 将动画保存到Vuforia路径下的Assets文件夹中，为该动画新建一个文件Animations，将新创建的动画命名为CarAnimation．anim，保存到Animations文件夹中，如图5．47所示。 图5．47保存动画文件 这里以两侧车门的拆解动画制作为例(模型要支持拆解)。在Animation窗口单击Add Property按钮，然后在右侧的Animatable下找到door_front_L，单击door_front_L的Transform组件下Position右侧的加号按钮，如图5．48所示。 图5．48为左侧车门添加动画 调整Position．z的值为-1．5(即左侧车门最大移动位移为z轴的-1．5的位置)，并单击红色圆点按钮，如图5．49所示，可在Scene窗口中看到左侧车门已经拆解出来。 图5．49设置左车门最大移动位移 同样的方法做右侧车门的拆解。在Animation窗口单击Add Property按钮，然后在右侧的Animatable下找到door_front_R，单击door_front_R的Transform组件下Position右侧的加号按钮，如图5．50所示。 图5．50设置右车门最大移动位移 调整右侧车门Position．z的值为-1．5(即右侧车门最大移动位移为z轴的1．5的位置)，如图5．51所示。单击红色圆点按钮，并单击三角符号的运行按钮，在Scene窗口中查看车门拆解的动画。 图5．51查看车门拆解动画 其他部位的拆解做法类似，读者可以自行进行车引擎盖、后备厢等的拆解动画制作。接下来实现单击虚拟按钮完成动画播放功能。在Hierarchy窗口中选择Cartoon_SportCar_B01，将Project窗口中刚才制作的动画文件CarAnimation拖曳到右侧Inspector面板的Animation后的方框内，并且把Play Automatically后的勾选取消，即不设置自动播放，如图5．52所示。 图5．52动画播放设置 单击Project窗口Animations下的CarAnimation，确认Inspector面板中的Wrap Mode为Default，即只播放1次，如图5．53所示。 图5．53动画播放次数设置 单击Hierarchy窗口中的VirtualButton按钮，该按钮对应“更换颜色”功能，因此在Inspector面板中Virtual Button Behaviour组件下Name后修改名称为Color。同理给拆解/还原按钮修改名称为Boom，给开灯/关灯按钮修改名称Light，如图5．54所示。 图5．54修改设置 5．3．9添加脚本 单击Hierarchy窗口的ImageTarget，在Inspector面板单击Add Component按钮添加脚本，脚本名为MyVirtualButtonBehaviour。脚本加载完成后，在Inspector面板双击如图5．55所示的脚本文件名位置，即可打开脚本。 图5．55创建脚本 虚拟按钮是Vuforia的一个功能，在脚本中需要继承一个虚拟按钮接口。首先，添加一个引用Vuforia的命名空间，代码如下： using Vuforia; 然后在MonoBehaviour后面加一个接口的继承： 单击接口IVirtualButtonEventHandler名称，在下拉功能中选择实现接口，如图5．56所示。 图5．56添加实现接口 添加实现接口后，即得到如图5．57所示的按钮按下和按钮释放两个方法，将其剪贴放到代码最后。 图5．57添加接口后得到的两种方法 初始化虚拟按钮，代码如图5．58所示。 图5．58初始化虚拟按钮 添加按钮按下脚本代码如图5．59所示。 图5．59添加按钮按下脚本代码 添加按钮松开脚本代码如图5．60所示。 图5．60添加按钮松开脚本代码 声明一个拆解/还原动画组件，代码如图5．61所示。 图5．61声明一个拆解/还原动画组件 然后在Unity中给虚拟按钮赋值。将Hierarchy窗口中的Cartoon_SportCar_B01拖曳到Inspector窗口My Virtual Button Nehaviour下的Car Anim组件后的方框内，如图5．62所示。 图5．62给虚拟按钮赋值 添加脚本使鼠标按下时播放carAnim组件，动画从第0帧开始播放，如图5．63所示。 图5．63添加拆解按钮播放动画脚本 还原相当于拆解动画的倒放，因此播放速度为-1，代码如图5．64所示。 图5．64添加释放按钮播放动画脚本 运行查看效果，当手放在虚拟按钮上时，拆解动画开始播放，手移开后汽车还原，如图5．65所示。 图5．65查看拆解/还原按钮动画播放效果 其他像引擎盖、车轮等部件的拆解和还原类似，用户可以自行制作。 5．3．10导出发布 将制作好的动画场景保存后可以导出发布到终端。首先，在Unity的File菜单中选择Build Settings，弹出界面中切换到Android平台。其次，单击平台下方的Play Settings按钮，在右侧Inspector面板的Other Settings组件下填写对应的包名和App版本号，如图5．66所示。最后，单击弹出窗口的Add Open Scenes按钮，添加要导出的场景即可。 图5．66导出发布 习题 一、 填空题 1． Vuforia是一款能将现实世界物体与虚拟物品进行互动体验的开发平台。 2． Vuforia通过Unity游戏引擎扩展提供了、、ObjectiveC和．NET语言的应用程序编程接口，能够同时支持、的原生开发。 3． Vuforia的基础功能主要有、圆柱体识别、立方体识别、、、、云识别、智能地形和物体识别。 二、 选择题 1． Vuforia SDK基础功能不包括()。 A． 图片识别B． 自定义识别 C． 文字识别D． 虚拟按钮 E． 云识别F． 人像识别 G． 智能地形 2． 以下()不属于Vuforia项目开发的基本步骤。 A． 获取SDKB． 创建License Key C． 制作模型D． 导入模型 E． 制作动画F． 导出发布 三、 简答题 1． 简单介绍Vuforia。 2． 简述使用Vuforia SDK进行项目开发的主要步骤。