第6章　AR开发-6.5 操作实例2：展览场馆导览

第6章AR开发

6.5操作实例2：展览场馆导览

.目录.1.实例概述.2.

二维码识别呈现画作信息.3.

视频内容呈现.4.

脱卡模式.5.

交互设计1.实例概述

本例中，根据小型绘画艺术展览中以绘画作品（简称画作）为主要展品的特性，设计了两个层次的AR内容画作信息介绍，这是基本的功能需求；另一个层次是将画作以动画等其他方式呈现出来，将静态的画作以一种新颖、不一样的方式进行表达，可以加深参观者对画作的印象。

其中，第一个层次可以用二维码识别来实现，第二个层次则需要使用视频内容呈现、脱卡模式或者模型交互等技术手段来实现。EasyAR工具是从官网下载的EasyARSenseUnityPlugin_4.0.0-final_Samples包。2.二维码识别呈现画作信息EasyAR中使用二维码的步骤如下。（1）新建场景，按照6.3.1小节的方式设置默认摄像机的属性。（2）找到导入的SDK包中的EasyAR_ImageTracker-1_QRCode-1预设体，将其拖入场景，并把在官网注册的LicenseKey复制到预设体的EasyARBehaviour组件中，完成应用的注册。2.二维码识别呈现画作信息上面的步骤和一般的EasyAR设置步骤基本一样。但是EasyAR_ImageTracker-1_QRCode-1预设体里面有一个特殊的子物体BarCodeScanner，它上面挂载了一个脚本QRCodeScannerBehaviour，如图所示。观察该脚本内容可以发现，它是继承于QRCodeScannerBaseBehaviour类的，通过重载调用EasyAR的核心动态链接库实现二维码的发现、扫描与识别功能。如果在Project面板中找不到EasyAR_ImageTracker-1_QRCode-1预设体，也可以用EasyAR_Startup预设体替代，然后按照图中的内容，添加子物体和相关的脚本文件。2.二维码识别呈现画作信息（3）制作二维码。使用搜索引擎搜索一下，会找到很多提供二维码生成服务的网站，在网页上输入信息，就可以免费生成静态的二维码图像，并将图像下载下来使用。

例如，一段文字“作者：梵高作品名称：星空绘制时间：19世纪”，生成出来的携带信息的静态二维码图像如图所示。2.二维码识别呈现画作信息（4）扫描并识别出二维码中包含的信息之后，将这些信息通过UI显示出来。在场景中新建一个Canvas，在其下新建一个Text类型的UI元素作为显示二维码信息的载体。再新建一个脚本ARQRInfoShow，并将其添加到场景中的EasyAR_ImageTracker-1_QRCode-1物体上作为组件使用。脚本内容如下：2.二维码识别呈现画作信息2.二维码识别呈现画作信息3.视频内容呈现EasyAR支持视频种类：普通视频透明视频流媒体视频这3种视频形式的制作步骤类似3.视频内容呈现（1）接着

6.5.2

小节中的制作步骤，继续在场景中新建

3

个空物体，分别命名为ImageTarget-Video、ImageTarget-TransparentVideo和ImageTarget-StreamingVideo，调整它们的大小和位置，分别作为普通视频、透明视频和网络流媒体视频的播放载体。（2）为ImageTarget-Video和ImageTarget-TransparentVideo两个物体都添加ImageTargetBehaviour脚本组件，修改识别图属性如图所示。其中“Path”和“Name”属性，应该根据选择的识别图的名称来设置。3.视频内容呈现（3）为ImageTarget-Video和ImageTarget-TransparentVideo两个物体都添加一个Plane子物体来作为播放视频的平面，并为这两个Plane子物体都添加VideoPlayerBehaviour脚本组件。两个VideoPlayerBehaviour组件的属性设置如图所示。其中，“Path”属性指明了要播放的视频文件名称，视频文件需要放在项目中的StreamingAssets文件夹下。“Type”属性则指明了视频播放的模式，“Normal”为普通视频播放模式，“TransparentSideBySide”为透明视频播放模式。3.视频内容呈现（4）针对透明视频，还需使用EasyAR提供的一个特殊的材质。在工程中新建一个材质Material，选择其着色器为“EasyAR/TransparentVideo”，播放透明视频所需的材质如图所示，并将该材质赋予ImageTarget-TransparentVideo物体下的Plane子物体，作为播放透明视频的材质属性。（5）经过以上步骤的准备和设置之后，已经可以扫描相应的图像进行普通视频和透明视频的播放了。但是EasyAR不支持在Unity编辑器的环境下进行视频的识别和播放，必须将项目发布成App后才能预览。关于使用Unity发布App的方法，请参阅5.3.1小节中的相关内容。3.视频内容呈现（6）

在场景中新建一个Plane物体，重命名为VideoPlayer，并为其添加VideoPlayerBehaviour脚本组件。然后将VideoPlayer物体拖入Project面板形成一个预设体，以供后续使用。场景中的VideoPlayer物体可以删除。（7）在场景中新建一个空的游戏对象，命名为ImageTarget-StreamingVideo，并新建一个脚本ImageTarget_DynamicLoad，将该脚本赋予刚才新建的物体作为组件。然后编辑脚本内容如下：3.视频内容呈现3.视频内容呈现

这个脚本是继承于ImageTargetBehaviour的，它的作用主要有两个：一是指定识别图；二是指定流媒体视频文件的网络地址，动态生成携带VideoPlayerBehaviour组件的预设体，同时设置VideoPlayerBehaviour组件的各项属性。

至此，经过以上步骤的制作并将项目发布为App后，就能够通过摄像头识别图像来播放相应的视频了。在停止识别图像后，视频就会消失。当再次识别图像时，视频从上次停止的地方开始播放。视频播放完毕后会自动重新开始。这个过程是自动的，如果要添加视频播放控制的功能，需要进行进一步的制作。3.视频内容呈现（8）下面介绍实现视频暂停功能的方法。该方法对3种视频都有效，此处以普通视频为例，其他两种视频的情形可以此类推。（9）找到第1步中的ImageTarget-Video物体，为其Plane子物体添加一个BoxCollider，并勾选“IsTrigger”复选框，使BoxCollider变为一个触发器。（10）新建一个脚本VideoCtrl，赋予Plane子物体，并编辑脚本内容如下：3.视频内容呈现4.脱卡模式所谓脱卡，是指通过扫描识别图显示出AR内容后，当摄像头从识别图上移开，即停止识别后，原先的AR内容不会消失，而是继续显示在屏幕上。脱卡的好处是不需要用户将摄像头一直对着识别图，增加了灵活性。脱卡模式的实现方式有很多种，本例采用最简洁的方式。思路就是把要实现脱卡显示的AR物体复制一份，在脱卡的时候显示出来，替代因为脱卡而被隐藏掉的原AR物体。在本小节中将6.5.3小节中制作的AR视频功能修改为能支持脱卡模式。4.脱卡模式（1）打开6.5.3小节中制作的场景，找到ImageTarget-Video物体的子物体Plane并将其复制一份。这个复制出来的Plane物体就是用来脱卡显示的AR物体。（2）在Hierarchy面板中找到ARCamera物体，将复制出来的Plane作为其子物体，并调整比例，使其在屏幕上的大小适中。（3）新建脚本LostCard，编辑脚本内容如下：4.脱卡模式（4）将LostCard脚本赋予场景中的任意一个物体作为脚本组件，如图所示，进行LostCard脚本的属性赋值。（5）保存场景并将项目发布为App，即可通过扫描识别图后再停止扫描，实现脱卡观看视频的效果。5.交互设计如果呈现出来的AR物体只能观看，而不能与用户进行交互，效果上无疑会大打折扣。在前面制作视频内容呈现的章节中，我们实现了点击屏幕改变视频播放状态的功能。在本小节中我们继续增加交互的形式，实现单指拖动视频播放平面改变位置以及双指缩放视频播放平面大小这两项交互功能。所用的方法同样适用于其他AR物体的交互。5.交互设计（1）打开在6.5.4小节中制作的场景，找到ImageTarget-Video物体的子物体Plane，为其添加BoxCollider组件，并勾选“IsTrigger”复选框。（2）新建脚本Gesture，赋予Plane物体以作为脚本组件。脚本内容如下：5.交互设计（3）新建脚本Drag，赋予Pla