
5.5 识别图片显示3D模型
5.5.1 最基础的例子——识别一个图片显示3D模型
(1)在导入EasyAR SDK以后,添加“StreamingAssets”目录,并将要识别的图片导入该目录中,如图5-15所示。

图5-15
(2)新建一个场景,删除原有的“Main Camera”,从目录“EasyAR/Prefabs/Composites”里将预制件“EasyAR_ImageTracker-1”拖动添加到场景中,并将EasyAR的“SDK License Key”复制到“EasyARBehaviour”组件的“Key”属性中,如图5-16所示。

图5-16
(3)将“EasyAR/Prefabs/Primitives”目录下的预制件“ImageTarget”拖动添加到场景中,如图5-17所示。

图5-17
(4)将场景中的“ImageTracker”游戏对象拖入“ImageTarget”游戏对象的“ImageTargetBehaviour”组件的“Loader”属性中为该属性赋值。
(5)将要识别的图片的路径填写在“ImageTargetBehaviour”组件的“Path”属性中,路径以“StreamingAssets”目录为根目录。
(6)设置“ImageTargetBehaviour”组件的“Storage”属性为“Assets”。
(7)在“ImageTarget”游戏对象下添加子游戏对象,添加的内容就是识别以后要显示的内容。在例子中添加了一个方块,如图5-18所示。

图5-18
图片识别显示3D模型可以在Windows系统下调试,运行以后就可以看到当摄像头对准识别图片时会在识别图片的上方显示一个方块,如图5-19所示。

图5-19
5.5.2 图片识别的两个关键类
图片识别的类结构示意图如图5-20所示。

图5-20
1.ImageTrackerBaseBehaviour
ImageTrackerBaseBehaviour类的主要作用是设置图片识别的追踪质量和对应图片识别与显示的个数。一个ImageTrackerBaseBehaviour类可以对应多个ImageTargetBaseBehaviour类。
“Mode”属性可以设置追踪的偏好——质量还是性能,默认为“Prefer Quality”,追踪质量较好。如果需要运行速度更快,可以选择“Prefer Performance”,如图5-21所示。

图5-21
“Simultaneous Target Number”属性设置该追踪器同时能追踪多少个目标对象。在一个场景中,同时能被追踪的目标对象是所有追踪器对象的“Simultaneous Target Number”属性之和,如图5-22所示。

图5-22
2.ImageTargetBaseBehaviour
ImageTargetBaseBehaviour类主要用于设置被追踪的具体图片和操作追踪以后显示的内容。
“Loader”属性用来指定该目标对象受到哪个追踪器的影响。将对应的追踪器拖入该属性即可,如图5-23所示。

图5-23
“Storage”属性用来指定识别图片路径的类型。Unity下建议使用“Assets”,这个是以Unity程序下的“StreamingAssets”目录为根目录的相对路径,通常是识别图片在打包时就已经存在。当程序打包时,识别图片不存在时,可以考虑使用“App”以程序运行目录为根目录的相对路径或者“Absolute”绝对路径。这个需要运行环境相对固定,如果考虑到各种设备的路径以及权限等问题,当程序打包时,对于识别图片不存在的情况,更推荐使用云识别,如图5-24所示。

图5-24
选中“App”时,不同系统的目录如下:
● Android:程序持久化数据目录(注意,这个目录与Unity的Application.persistentDataPath可能不同)。
● iOS:程序沙盒目录。
● Windows:可执行文件(exe)目录。
● Mac:可执行文件目录(如果App是一个bundle,则这个目录在bundle内部)。
“Path”是被识别图片的路径,需要确保是UNIX方式的,使用“/”来分隔路径元素,如图5-25所示。

图5-25
提示
被识别图片是可以重复的。“Path”还可以填写识别图片的配置文件的路径,具体请参考官方文档,地址为https://www.easyar.cn/doc/EasyAR%20SDK/Guides/EasyAR-Target-Configure.html。
5.5.3 从多张图片中只识别出一张图片
(1)在导入EasyAR SDK以后,添加“StreamingAssets”目录,并将要识别的图片导入到该目录中。
(2)新建一个场景,删除原有的“Main Camera”,从目录“EasyAR/Prefabs/Composites”里将预制件“EasyAR_ImageTracker-1”添加到场景中,并将EasyAR的“SDK License Key”复制到“EasyARBehaviour”组件的“Key”属性中。
(3)将“EasyAR/Prefabs/Primitives”目录下的预制件“ImageTarget”添加到场景中。
(4)将场景中的“ImageTracker”游戏对象拖入“ImageTarget”游戏对象的“ImageTargetBehaviour”组件的“Loader”属性中为该属性赋值。
(5)将要识别的图片的路径填写在“ImageTargetBehaviour”组件的“Path”属性中,路径以“StreamingAssets”目录为根目录。
(6)设置“ImageTargetBehaviour”组件的“Storage”属性为“Assets”。
(7)在“ImageTarget”游戏对象下添加子游戏对象,添加的内容就是识别以后要显示的内容。在例子中添加了一个方块,如图5-26所示。

图5-26
(8)“ImageTrackerBaseBehaviour”的“Size”属性不影响最终的运行效果,为了编辑方便,这里设置一下。根据图片的比例,设置“Size”属性即可,不过不要设置得太大,如图5-27所示。

图5-27
(9)为了在多个图片编辑的情况下便于识别,需要添加一下纹理。在Unity下新建一个“Textures”目录,然后将图片导入到该目录,如图5-28所示。

图5-28
(10)选中导入的“Textures”目录下的图片,在“Inspector”窗口中修改“Texture Shape”属性为“2D”,然后单击“Apply”按钮确认并保存修改,如图5-29所示。

图5-29
(11)修改“ImageTarget”下的模型大小,使其大小合适。这时,“ImageTarget”因为没有纹理,显示为粉红色,如图5-30所示。

图5-30
(12)将与“ImageTarget”的属性“Path”对应的图片纹理拖到“Scene”窗口中的“ImageTarget”游戏对象上,如图5-31所示。

图5-31
(13)调整要显示的3D模型的大小、角度等。
(14)重复上面的步骤(3)~(13)。每次添加新的“ImageTarget”的时候,记得修改一下位置,避免重叠,虽然重叠不影响最终运行效果,但是不便于编辑,如图5-32所示。

图5-32
运行效果如图5-33所示。

图5-33
当摄像头中同时出现多个图片的时候,其中一张图片被识别以后就不再识别其他图片。
5.5.4 从多张图片中同时识别出多张图片
从多张图片中同时识别多张图片和从多张图片中识别出一张图片基本一致,只需要改动一个地方即可。
在上一节(从多张图片中只识别出一张图片)的基础上,修改“ImageTracker”游戏对象下的“Simulations Target Number”属性即可。
1.单张图片追踪器
例如,将“Simulations Target Number”属性改为3(见图5-34),即同时识别3张图片。运行结果如图5-35所示。

图5-34

图5-35
将“Simulations Target Number”属性改为2(见图5-36),即同时识别2张图片。运行结果如图5-37所示。

图5-36

图5-37
在多张图片同时被识别时,具体哪张图片会被识别是由程序来控制的,一般是最先进入摄像头视野的或者识别率较高的那张图片。
2.多张图片追踪器
在上一节(单张图片追踪器)的基础上,添加“ImageTracker”即可。
(1)复制一个图片追踪器“ImageTracker”游戏对象,如图5-38所示。

图5-38
(2)将两个追踪器的“Simulations Target Number”属性都设为1,这时,会同时识别2张图片,即两个追踪器的“Simulations Target Number”属性的和,如图5-39所示。

图5-39
(3)将namecard的“ImageTarget”游戏对象的“Loader”属性设置为复制出来的“ImageTracker(1)”游戏对象,其他不变,如图5-40所示。运行结果如图5-41所示。

图5-40

图5-41
这时,虽然还是同时识别2张图片,和单张图片追踪器的例子很相似,但是这个例子中namecard照片每次都会被识别,而另外2张图片则随机识别其中的1张。
3.同时识别多张相同的图片
EasyAR可以同时识别多张相同的图片,在上一节(多张图片追踪器)的基础上,添加“ImageTarget”即可。
复制namecard的“ImageTarget”游戏对象,并将新复制出来的对象显示的模型修改成其他的模型,如图5-42所示。

图5-42
修改“ImageTracker(1)”游戏对象的“Simulations Target Number”属性,设为2,如图5-43所示。运行结果如图5-44所示。

图5-43

图5-44