互动投影与增强现实教程（Augmented Reality简称 AR）计算摄影机影像的位置及角度并加上相应图像的技术

第9讲互动投影与增强现实第一节增强现实技术简介1.1增强现实技术简介增强现实（AugmentedReality，简称AR），是一种实时地计算摄影机影像的位置及角度并加上相应图像的技术，这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动。增强现实技术包含了多媒体、三维建模、实时视频显示及控制、多传感器融合、实时跟踪及注册、场景融合等新技术与新手段。增强现实技术的特点真实世界和虚拟世界的信息集成具有实时交互性是在三维尺度空间中增添定位虚拟物体增强现实的应用领域医疗领域军事领域古迹复原和数字化文化遗产保护工业维修领域教育领域娱乐、游戏领域旅游、展览领域市政建设规划、房地产领域艺术领域1.2增强现实常用开发工具Vuforia（高通-PTC）ARCore（谷歌）ARKit（苹果）Aero（Adobe）Spark（Meta）WikitudeARToolKitEasyAR（中国）……第二节VuforiaSDK开发基础2.1下载安装Unity3D下载安装文件，运行安装

/releases下载Unity组件Unity2017.2以上版本自带Vuforia组件，下载安装时注意勾选若为Unity2017.2以下版本，则需要下载导入Vuforia插件。见下页安装/导入Vuforia组件安装完Unity后继续安装Vuforia插件。或从Vuforia官网下载VuforiaSDK并在创建新工程后导入

https:///downloads/sdk安装/导入Vuforia组件或从“unityassetstore”官网搜索“Vuforia”下载导入

/2.2申请Licence及建立数据库申请License建立数据库2.3建立AR工程建立一个新的项目工程将VuforiaSDK的功能添加到项目，添加一个ARCamera，同时删掉原场景的MainCamera激活VuforiaFile>BuildSettings，出现下图的对话框，选中你需要的平台，然后点击playSettings,勾选XRSettings中的VuforiaAugmentedReality。在Unity中访问Vuforia功能，选中场景中的ARCamera，在属性面板中点击“OpenVuforiaConfiguartion”打开Vuforia全局配置面板激活目标（识别图）数据库打开VuforiaConfiguration后，将申请的Licensekey复制到方框中。导入你的数据库文件

MyDataset.unitypackage

（根据你的实际名字）添加目标ImageTarget（识别图）在场景中选中ARCamera>VuforiaEngine>Image将Vuforia目标（识别图）添加到场景中点击ImageTarget，Sence窗口会出现你的识别图，在右侧的Inspector中找到C#脚本ImageTargetBehaviour，其下拉选项的Database选择“MyDataset”，ImageTarget就选择你的图片名，其他默认选中场景中的ARCamera，在属性面板中点击“OpenVuforia

Configuartion”打开Vuforia全局配置面板。在Load****（你数据库名）Database和它下面的Active中打勾（Unity2018及以后没有这步）现在所有的软件设置已经完成，现在需要在场景中叠加一些虚拟物体。我们先创建一个Cube，并将它作为ImageTarget的子物体，调整位置和大小，如图保证你的摄像头

是正常连接上的OK!识别图2.4一个带动画的AR例子建立新工程。先对其进行交互动画功能制作和程序编写导入角色动画模型

导入课件所给资源LvBuModel.unitypackage。

也可自制3D动画模型，导出成fbx模型，放入工程的Assets目录中（注意，网上下载的模型素材，有的会在后面设计状态机时动画不能播放，可能由于3dmax或Unity版本的原因）切分动画

LvBu模型中提供了两个动画，attack和dance。可以从attack动画中切出一个用于播放站立不动的stand“动画”，取其一帧即可。把javan@attack1动画模型拖入场景，调整位置和大小，Hierarchy中对其改名“LvBu”在Assets目录下创建AnimatorController,改名为“LvBuAnimatorController”。双击LvBuAnimatorController打开状态机编辑视图把stand动画拖入状态机视图，产生一个状态（注意看看这个状态的motion属性是否指定为attack1动画。如果这里是None，而且改不了，这就是前面说的有的网上下载的模型不能用状态机播放动画。你可能需要更换动画模型素材，或者重新制作）把attack1动画拖入状态机视图，产生新状态attack1。创建stand状态和attack1状态之间的两个转换箭头创建一个Bool变量，命名为bAttack为stand到attack1的转换箭头增加一个bAttack=true的条件同理，为attack1状态转换到stand状态的转换箭头增加一个bAttack1=false的条件把模型的Controller属性设置为LvBuAnimatorController测试工程。手动改变bAttack值可以激发模型动画同理，利用dance动画拖入状态机视图，创建dance状态。创建Attack1和Dance之间的两个转换箭头继续新建Bool变量bDance为两个转换箭头增加转换条件运行，手动改变bAttack和bDance变量，激发模型动画创建一个目录，命名为Scripts在Scripts目录中创建一个C#脚本，命名为PlayerControl双击PlayerControl脚本，打开VisualStudio编写代码……publicclassPlayerControl:MonoBehaviour{

privateAnimatoranim;//定义一个Animator对象voidStart(){anim=GetComponent<Animator>();//取得Animator对象

}voidUpdate(){//每帧执行的函数}voidFixedUpdate()

{//固定的时间间隔执行的函数，与Update()不同//隔多少时间，可在Edit->ProjectSetting->time中查看

if(Input.GetButtonDown(“Fire1”))

{//开火是什么键，可在edit->//projectsettings->input中查看anim.SetBool(“bDance”,false);//把bDance变量设为falseanim.SetBool("bAttack",true);//把bAttack变量设为true

}elseif(Input.GetButtonDown("Fire2"))

{anim.SetBool("bAttack",false);anim.SetBool("bDance",true);

}

}}把脚本赋于LvBu测试程序。此时鼠标左键应可激发攻击，右键可激发跳舞然后再参照第一个例子，加入AR功能申请License建立数据库将VuforiaSDK的功能添加到项目，添加一个ARCamera，并删掉原场景的MainCamera激活Vuforia

点击File>BuildSettings会出现下图的对话框，选中你需要的平台，然后点击playSettings,勾选XRSettings中的VuforiaAugmentedReality。Vuforia功能

选中场景中的ARCamera，在属性面板中点击“OpenVuforiaConfiguartion”打开Vuforia全局配置面板激活目标（识别图）数据库

打开VuforiaConfiguration后，将申请的Licensekey复制到方框中，把下载好的Database拖入到Unity工程中。在场景中添加目标ImageTarget（识别图）

选中ARCamera>VuforiaEngine>Image，将Vuforia目标（识别图）添加到场景中。设置ImageTarget

点击ImageTarget，在右侧Inspector的ImageTargetBehaviour的Database中选择你想要的数据库及目标图。把吕布模型拖至ImageTarget下，作为其子物体保证你的摄像头是正常连接OK！第三节虚拟按钮（Vuforia）3.1虚拟按钮Vuforia提供虚拟按钮(VirtualButton)功能。可用来实现简单的控制与交互3.2虚拟按钮控制材质变化的例子创建Unity工程场景创建

删除场景中的MainCamera，从GameObject/VuforiaEngine/ARCamera的路径中将添加ARCamera，激活Vuforia。设置AppLicenseKey

进入官网获取AppLicenseKey，在Hierarchy>ARCamera游戏对象的Inspector中找到VuforiaBehaviour脚本，单击OpenVuforiaConfiguration按钮进入设置界面，将从官网获取到的AppLicenseKey填入相应的选项中，并激活当前识别图信息在场景中添加目标（识别图）

把下载好的Database拖入到Unity工程中,从GameObject>Vuforia>Image菜单中将Vuforia目标（识别图）添加到场景中，这个时候Sence窗口出现了识别图。添加VirtualButton

选中ImageTarget找到Inspector面板中的Advanced，选择AddVirtualButton，创建3个虚拟按键，并把虚拟按钮的Name属性分别改为：VirtualButton_R，VirtualButton_G，VirtualButton_B,设置灵敏度SensitivitySetting为Low

添加cube

在ImageTarget之下,创建一个正方体，命名为cube，调整其大小位置，并赋予其黄色材质新建脚本，命名为VirtualBTCtrl这个类不仅需要继承自MonoBehaviour,还需要实现接口IVirtualButtonEventHandler。代码如下：usingSystem.Collections;usingUnityEngine;usingVuforia;publicclassVirtualBTCtrl:MonoBehaviour,

IVirtualButtonEventHandler{GameObjectcube;//准备取得场景中的cube物体Materialmat;//准备记录cube的材质voidStart(){VirtualButtonBehaviour[]vbBehaviours=this.GetComponentsInChildren<VirtualButtonBehaviour>();for(inti=0;i<vbBehaviours.Length;i++)

{//注册所有的VirtualButton事件vbBehaviours[i].RegisterEventHandler(this);}cube=transform.Find(“Cube”).gameObject;//取得Cube物体mat=cube.GetComponent<MeshRenderer>().material;//取材质

}voidUpdate(){}publicvoidOnButtonPressed(VirtualButtonBehaviourvb)

{

//mat是在Start函数中获得的立方体的材质switch(vb.VirtualButtonName)//检查按下的虚拟按钮的名称

{case"VirtualButton_R":mat.color=Color.red;break;case"VirtualButton_G":mat.color=Color.green;break;case"VirtualButton_B":mat.color=Color.blue;break;default:break;

}

}publicvoidOnButtonReleased(VirtualButtonAbstractBehaviour

vb)

{

mat.color=Color.yellow;

}}编译把脚本附于ImageTarget上OK！作业开发制作一个AR程序，摄像头对着一张图片，弹出一个模型，点击则播放一个动画。第四节EasyAR模型识别4.1EasyAR简介EasyAR是国内开发的一款功能强大的增强现实引擎。其主要功能包括图像识别、多图识别、3D物体识别、云识别、录屏、SLAM等EasyAR可以C++、Java、Objective-C、Unity等多种语言环境下进行开发。4.2EasyAR模型识别的例子下载EasyARSDK到EasyAR官网（/view/download.html）上下载"EasyAR2.0package(forunity)"。当然，也可以选最新版本。新建Unity项目新建一个unity项目，命名为"HelloEasyAR"。导入EasyAR将解压之后的"EasyAR_SDK_2.0.0_Basic.unitypackage"导入到unity中配置识别图准备一张我们需要识别的图片然后我们在unity里新建一个目录，命名为"StreamingAssets",然后将这张识别图拖入到unity的该目录下获取key到官网（/view/open/app.html）申请key开发删除原有场景的"MainCamera",然后把我们的EasyARCamera拖到面板将从官网上申请的Key填入到"EasyAR_Startup"中把

ImageTarget

拖到面板中编辑挂在ImageTarget组件上的“ImageTargetBehaviour”脚本（代码功能：可在Console窗口中看到调试信息）usingUnityEngine;usingSystem.Collections;namespaceEasyAR{publicclassImageTargetBehaviour:ImageTargetBaseBehaviour

{protectedoverridevoidAwake(){

base.Awake();

TargetFound+=OnTargetFound;

TargetLost+=OnTargetLost;

TargetLoad+=OnTargetLoad;

TargetUnload+=OnTargetUnload;

}voidOnTargetFound(TargetAbstractBehaviourbehaviour){Debug.Log("Found:"+Target.Id);}voidOnTargetLost(TargetAbstractBehaviourbehaviour){Debug.Log("Lost:"+Target.Id);}voidOnTargetLoad(ImageTargetBaseBehaviourbehaviour,ImageTrackerBaseBehaviourtracker,boolstatus){Debug.Log("Loadtarget("+status+"):"+Target.Id+"("+Target.Name+")"+"->"+tracker);}voidOnTargetUnload(ImageTargetBaseBehaviourbehaviour,ImageTrackerBaseBehaviourtracker,boolstatus){Debug.Log("Unloadtarget("+status+"):"+Target.Id+"("+Target.Name+")"+"->"+tracker);}}}填写脚本参数信息Path:识别图的路径Name:识别图的名字Size:识别图的大小

并将Storage的格式修改为Assets在ImageTarget底下创建一个Cube测试

点击菜单BuildSetting，点击PlayerSettings按钮。填写公司和团队名信息。注意要和申请License时的信息对应。OK!第五节EasyAR多图识别单图识别与多图识别第四节使用EasyAR_Startup的方法为单图识别，即只能进行一个目标图像识别和模型显示。若需多个目标图像和模型同时工作，则需要用到多图识别功能。5.1新建项目并导入SDK新建一个unity项目，命名为"ARMultiTarget“下载、导入EasyAR2.0package（或更高版本）在unity中新建一个文件夹,命名为"StreamingAssets"，将我们的识别图导入到该文件目录下删除原有的"MainCamera"，将我们的"EasyAR_ImageTracker-1-MultiTarget"拖到面板中到官网申请Key填写到相机上5.2处理相机编写段脚本来处理EasyAR

的多图识别功能，在"EasyAR_ImageTracker-1-MultiTarget"组件上新建一个脚本"HelloARTarget“

这个脚本是提示用户不要忘记输入key的。using

UnityEngine;using

EasyAR;

namespace

EasyARSample{public

class

HelloARTarget

:

MonoBehaviour{

private

const

string

title

=

"Please

enter

KEY

first!";

private

const

string

boxtitle="===PLEASE

ENTER

YOUR

KEY

HERE===";

private

const

string

keyMessage

=

""

+

"Steps

to

create

the

key

for

this

sample:\n"

+

"

1.login

\n"

+

"

2.create

app

with\n"

+

"

Name:

HelloARMultiTarget-SameImage

(Unity)\n"

+

"

Bundle

ID:

cn.easyar.samples.unity.helloarmultitarget.si\n"

+

"

3.find

the

created

item

in

the

list

and

show

key\n"

+

"

4.

replace

all

text

in

TextArea

with

your

key";

private

void

Awake()

{

if

(FindObjectOfType<EasyARBehaviour>().Key.Contains(boxtitle))

{#if

UNITY_EDITOR

UnityEditor.EditorUtility.DisplayDialog(title,keyMessage,"OK");#endif

Debug.LogError(title

+

"

"

+

keyMessage);

}

}}}5.3处理ImageTarget准备两张识别图拖动一个"ImageTarget"组件到面板中像前一节那样处理好ImageTarget,使得可以显示一个model，在其下面新建一个cube再建一个ImageTarget，改变识别图，创建一个sphere，并创建不同的材质Build，测试，OK！第六节EasyAR模型交互本节目标尝试几种常见的AR模型的交互方式

-单点触摸拖动模型

-双点触摸放大缩小

以第四节HelloEasyAR程序为基础继续扩展6.1打开HelloEasyAR项目将对它加上以下动态效果：（1）点击正方体，可以使其更换颜色与材质。（2）触摸屏幕两点滑动，可以使正方体放大缩小。（3）触摸拖动正方体，可以对正方体拖动调整位置。6.2点击模型更换颜色与材质新建两个Material，命名为“blue”、CubeBox新建一个脚本"ChangeColor",实现点击时颜色改变usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassChangeColor:MonoBehaviour{

publicMaterialblue;publicMaterialCubeBox;privatebool

isClick=false;//UsethisforinitializationvoidStart(){}//UpdateiscalledonceperframevoidUpdate(){}voidOnMouseDown(){if(!isClick){this.gameObject.GetComponent<MeshRenderer>().material=blue;isClick=true;}else{this.gameObject.GetComponent<MeshRenderer>().material=CubeBox;isClick=false;}}}脚本赋予Cube，并且对参数赋值Build，OK！6.3两点缩放在Cube上挂一个脚本,命名为"Gesture“usingUnityEngine;usingSystem.Collections;publicclassGesture:MonoBehaviour{privateToucholdTouch1;//上次触摸点1(手指1)privateToucholdTouch2;//上次触摸点2(手指2)voidUpdate(){//没有触摸，就是触摸点为0if(Input.touchCount<=0){return;}//多点触摸,放大缩小

TouchnewTouch1=Input.GetTouch(0);TouchnewTouch2=Input.GetTouch(1);//第2点刚开始接触屏幕,只记录，不做处理

if(newTouch2.phase==TouchPhase.Began){oldTouch2=newTouch2;oldTouch1=newTouch1;return;}//计算老的两点距离和新的两点间距离，变大要放大模型，变小要缩放模型

floatoldDistance=Vector2.Distance(oldTouch1.position,oldTouch2.position);floatnewDistance=Vector2.Distance(newTouch1.position,newTouch2.position);//两个距离之差，为正表示放大手势，

为负表示缩小手势

float

offset

=

newDistance

-

oldDistance;

//放大因子，

一个像素按

0.01倍来算(100可调整)floatscaleFactor=offset/100f;Vector3scale=newVector3(localScale.x+scaleFactor,localScale.y+scaleFactor,localScale.z+scaleFactor);//在什么情况下进行缩放

if(scale.x>=0.05f&&scale.y>=0.05f&&scale.z>=0.05f){transform.localScale=scale;}//记住最新的触摸点，下次使用

oldTouch1=newTouch1;oldTouch2=newTouch2;}}Build，运行，OK！6.4任意拖动在Cube新建脚本，命名为"Drag“usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassDrag:MonoBehaviour{privateVector3_vec3TargetScreenSpace;//目标物体的屏幕空间坐标

privateVector3_vec3TargetWorldSpace;//目标物体的世界空间坐标

privateTransform_trans;//目标物体的空间变换组件

privateVector3_vec3MouseScreenSpace;//鼠标的屏幕空间坐标

privateVector3_vec3Offset;//偏移

voidAwake(){_trans=transform;}IEnumeratorOnMouseDown(){//把目标物体的世界空间坐标转换到它自身的屏幕空间坐标

_vec3TargetScreenSpace=Camera.main.WorldToScreenPoint(_trans.position);//存储鼠标的屏幕空间坐标（Z值使用目标物体的屏幕空间坐标）

_vec3MouseScreenSpace=newVector3(Input.mousePosition.x,Input.mousePosition.y,_vec3TargetScreenSpace.z);//计算目标物体与鼠标物体在世界空间中的偏移量

_vec3Offset=_trans.position-Camera.main.ScreenToWorldPoint(_vec3MouseScreenSpace);

//鼠标左键按下

while(Input.GetMouseButton(0)){//存储鼠标的屏幕空间坐标（Z值使用目标物体的屏幕空间坐标）

_vec3MouseScreenSpace=newVector3(Input.mousePosition.x,Input.mousePosition.y,_vec3TargetScreenSpace.z);//把鼠标的屏幕空间坐标转换到世界空间坐标（Z值使用目标物体的屏幕空间//坐标），加上偏移量，以此作为目标物体的世界空间坐标

_vec3TargetWorldSpace=Camera.main.ScreenToWorldPoint(_vec3MouseScreenSpace)+_vec3Offset;//更新目标物体的世界空间坐标

_trans.position=_vec3TargetWorldSpace;//等待固定更新

yieldreturnnewWaitForFixedUpdate();}}}Build，运行，OK！第七节EasyAR开发实例---AR礼物本节目标开发一个简单的应用实例——AR礼物应用

当计算机或手机发现识别图时，将显示几个礼物盒。其中一个盒子打开之后有一个玩偶模型在里面，打开后伴随围绕着一些酷炫的效果。7.1搭建AR环境参考第四节，新建工程导入EasyARSDK删除原来的MainCamera放置EasyAR_Startup，填入key放置ImageTarget，并填写好属性7.2准备模型将准备好的资源--礼物与二次元女生导入到unity中，并将三个礼物盒子与女主角拖入到ImageTarget充当子物体根据自己的需求修改其位置，实现其如下效果7.3编写脚本为礼物盒添加BoxCollider，并勾选Trigger新建脚本，名字随便起，先实现点击礼物盒后，礼物盒消失二次元女生出现，这里用到了一个最巧但最常用方便的方法VoidOnMouseDown（），使用这个方法前提是该物体挂了个CollidervoidOnMouseDown(){Destroy(this.gameObject);}7.4添加粒子特效使用粒子特效来使得更令人惊喜的礼物效果编写脚本，基本思路就是在点击礼物盒子后，盒子销毁，创建粒子特效usingUnityEngine;usingSystem.Collections;publicclassExplore:MonoBehaviour{publicGameObject

explore1,explore2,explore3;publicAudioSourcesound;//UsethisforinitializationvoidStart(){}//UpdateiscalledonceperframevoidUpdate(){}voidOnMouseDown(){Destroy(this.gameObject);

Instantiate(explore1,transform.position,transform.rotation);Instantiate(explore2,transform.position,transform.rotation);Instantiate(explore3,transform.position,transform.rotation);}}7.5添加音效给礼物盒子添加AudioSourceOnMouseDown()中增加播放声音的代码voidOnMouseDown(){Destroy(this.gameObject);

sound.Play

();Instantiate(explore1,transform.position,transform.rotation);Instantiate(explore2,transform.position,transform.rotation);Instantiate(explore3,transform.position,transform.rotation);}Build，OK！第八节显示视频8.1准备准备好所需的识别图和要显示的视频。8.2环境搭建新建Unity工程导入EasyARSDK删除MainCameraEasyAR_ImageTracker-1拖到面板中，并填写Key拖动

ImageTarget

到面板中,命名为

"Local_Play"8.3本地视频播放新建一个脚本：SampleImageTargetBehaviour

主要用来判断识别图的found与lost。usingUnityEngine;usingSystem.Collections;usingEasyAR;publicclassSampleImageTargetBehaviour:ImageTargetBehaviour{protectedoverridevoidAwake(){

base.Awake();

TargetFound+=OnTargetFound;

TargetLost+=OnTargetLost;

TargetLoad+=OnTargetLoad;

TargetUnload+=OnTargetUnload;}voidOnTargetFound(TargetAbstractBehaviourbehaviour){Debug.Log("Found:"+Target.Id);}

voidOnTargetLost(TargetAbstractBehaviourbehaviour){Debug.Log("Lost:"+Target.Id);}voidOnTargetLoad(ImageTargetBaseBehaviourbehaviour,ImageTrackerBaseBehaviourtracker,boolstatus){Debug.Log("Loadtarget("+status+"):"+Target.Id+"("+Target.Name+")"+"->"+tracker);}voidOnTargetUnload(ImageTargetBaseBehaviourbehaviour,ImageTrackerBaseBehaviourtracker,boolstatus){Debug.Log("Unloadtarget("+status+"):"+Target.Id+"("+Target.Name+")"+"->"+tracker);}}删除ImageTarget组件上的脚本（ImageTargetBehaviour），将我们新建的脚本挂上去新建一个文件夹：

StreamingAssets

用来放识

别图与视频资源。填写识别图信息

→→→→在ImageTarget下新建一个Plane在Plane上面挂一个脚本：VideoPlayerBehaviour。设置参数一切准备好之后，打包成APK，在移动端测试即可（目前不支持在PC端直接进行测试）。OK！8.4URL在线视频播放首先将一个ImageTarget预制体拖到面板中,命名为"URL_Play”在ImageTarget下面新建一个脚本(AutoPlay_URL),脚本内容与上面创建本地视频播放时的SampleImageTargetBehaviour脚本内容相同为ImageTarget设置参数创建一个Plane，在它的上面挂一段脚本（VideoPlayerBehaviour.cs）,与之前操作相似，填好相关参数（Path可以先不用管，因为我们需要代码获取URL）新建一个文件夹"Resources",将制作好的Plane放进去制成预制体在AutoPlay_URL

脚本中继续编写相关代码usingUnityEngine;usingSystem.Collections;usingEasyAR;

publicclassAutoPlay_URL:ImageTargetBehaviour{privatestringvideo=@"https:///

sdkvideo/EasyARSDKShow201520.mp4";

protectedoverridevoidStart(){

base.Start();

LoadVideo();}

publicvoidLoadVideo(){GameObjectsubGameObject=Instantiate(Resources.Load("Plane",typeof(GameObject)))asGameObject;subGameObject.transform.parent=this.transform;subGameObject.transform.localPosition=newVector3(0,0.125f,0);subGameObject.transform.localRotation=newQuaternion();subGameObject.transform.localScale=newVector3(0.2f,0.11f,0.11f);VideoPlayerBaseBehaviourvideoPlayer=subGameObject.GetComponent<VideoPlayerBaseBehaviour>();if(videoPlayer){videoPlayer.Storage=StorageType.Absolute;videoPlayer.Path=video;videoPlayer.EnableAutoPlay=true;videoPlayer.EnableLoop=true;videoPlayer.Open();}}protectedoverridevoidAwake(){base.Awake();TargetFound+=OnTargetFound;TargetLost+=OnTargetLost;TargetLoad+=O