第6章　AR开发-6.4 操作实例1：儿童绘画教育应用-涂涂乐VIP

第6章AR开发

6.4操作实例1：儿童绘画教育应用—涂涂乐

.目录.1.制作步骤.2.

实现原理和代码分析涂涂乐是近年来非常成功的一种基于AR技术的儿童绘画启蒙教育产品，它的玩法简单，趣味性强，非常适合儿童群体。具体就是准备一些图像给儿童填色，在图6-32所示的图像中，小熊的线条图就是儿童涂色的地方。涂好色之后，利用手机或者平板电脑上的摄像头，在AR程序中识别图像，就可以看到绘制的颜色在小熊的三维模型上显示出来，并且可以制作小熊模型的动画，增加互动性。1.制作步骤（1）在官网下载EasyARSenseUnityPlugin_4.0.0-final_Samples包，将其导入Unity。新建场景，按照6.3.1小节的方式设置默认摄像机的属性。（2）在Project面板的“Assets”→“EasyAR”→“Prefabs”→“Composites”文件夹中找到“EasyAR_ImageTracker-1”预设体，将其拖入场景，作为图像跟踪器。（3）制作识别图和模型。这个步骤应该是由美工来完成的，制作上需要注意两点。第一，识别图在满足儿童绘画的基础上，对比尽量强烈一点，以提高后期的识别率和识别速度。第二，三维模型制作好之后，在制作模型的UV展开时，需要对照识别图上模型的外形来进行，否则会在图像匹配模型时发生错位。1.制作步骤（4）

将制作好的识别图和模型导入工程。在Project面板中新建Resources和StreamingAssets两个文件夹，将识别图命名为“bear.jpg”后放入StreamingAssets文件夹，而模型文件则放入Resources文件夹。这里要注意的是，这两个文件夹是Unity中特殊的文件夹，名称必须对，包括大小写都不能有错，否则Unity会找不到路径。（5）在Project面板的“Assets”→“EasyAR”→“Prefabs”→“Primitives”文件夹中找到“ImageTarget”预设体，将其拖入场景，来指定图像目标属性，修改其“Path”属性为“bear.jpg”，设置识别图如图所示。1.制作步骤（6）将制作好的模型拖入场景，作为ImageTarget的子物体。运行场景，通过摄像头识别图像，显示出模型。根据显示出来的情况，可以适当调整模型的初始角度，使模型可以正确地面向使用者。（7）在Project面板中搜索并找到“Coloring3DBehaviour”脚本，将其赋给第6步中拖入场景的模型物体作为脚本组件。重新运行场景，就可以看到在识别图中绘制的颜色显示到模型上了。至此，通过以上步骤实现了使用EasyAR来制作涂涂乐的例子。2.实现原理和代码分析——三维模型和识别图的关系

（1）UV展开三维模型表面凹凸不平，需要先将其展开成平面，然后才能方便地绘制或制作纹理贴图。这个展平的过程，叫作UV展开。三维模型的UV展开如图所示，一个人物头像经过UV展开后变为平面的形式，在此平面上绘制的贴图，就会根据其坐标正确显示到头像模型的相应位置上。2.实现原理和代码分析——三维模型和识别图的关系

（2）UV展开和识别图的关系因为要把识别图中涂色的部分显示到模型表面的正确位置上，所以模型的UV展开必须和识别图是匹配的。小熊模型的UV展开和识别图的匹配如图所示，以识别图作为小熊模型的材质贴图，而UV展开则是根据识别图上的图案，按小熊的前后两部分进行划分，覆盖在识别图上的绘图区域。2.实现原理和代码分析——代码分析

将模型的UV展开和识别图进行匹配以后，剩下的工作主要还有两个步骤。步骤一：从摄像头拍摄的动态画面中实时识别出识别图。步骤二：定位识别图在画面中的位置，并将其作为纹理贴图赋予三维模型的材质。

其中，步骤一由EasyAR的核心功能自动完成，不需要额外的干预。步骤二则需要结合Unity的着色器来编写控制脚本。官方示例中提供了一个名为Coloring3D的材质，TextureSample材质的Shader属性如图6-36所示，其中point1到point4这4个属性分别代表识别图的4个顶点。这4个顶点属性可以通过脚本来动态地赋值，从而界定识别图范围，这样才能正