第6章　AR開(kāi)發(fā)-6.4 操作實(shí)例1：兒童繪畫(huà)教育應(yīng)用-涂涂樂(lè)

第6章AR開(kāi)發(fā)

6.4操作實(shí)例1：兒童繪畫(huà)教育應(yīng)用—涂涂樂(lè)

.目錄.1.制作步驟.2.

實(shí)現(xiàn)原理和代碼分析涂涂樂(lè)是近年來(lái)非常成功的一種基于AR技術(shù)的兒童繪畫(huà)啟蒙教育產(chǎn)品，它的玩法簡(jiǎn)單，趣味性強(qiáng)，非常適合兒童群體。具體就是準(zhǔn)備一些圖像給兒童填色，在圖6-32所示的圖像中，小熊的線(xiàn)條圖就是兒童涂色的地方。涂好色之后，利用手機(jī)或者平板電腦上的攝像頭，在AR程序中識(shí)別圖像，就可以看到繪制的顏色在小熊的三維模型上顯示出來(lái)，并且可以制作小熊模型的動(dòng)畫(huà)，增加互動(dòng)性。1.制作步驟（1）在官網(wǎng)下載EasyARSenseUnityPlugin_4.0.0-final_Samples包，將其導(dǎo)入U(xiǎn)nity。新建場(chǎng)景，按照6.3.1小節(jié)的方式設(shè)置默認(rèn)攝像機(jī)的屬性。（2）在Project面板的“Assets”→“EasyAR”→“Prefabs”→“Composites”文件夾中找到“EasyAR_ImageTracker-1”預(yù)設(shè)體，將其拖入場(chǎng)景，作為圖像跟蹤器。（3）制作識(shí)別圖和模型。這個(gè)步驟應(yīng)該是由美工來(lái)完成的，制作上需要注意兩點(diǎn)。第一，識(shí)別圖在滿(mǎn)足兒童繪畫(huà)的基礎(chǔ)上，對(duì)比盡量強(qiáng)烈一點(diǎn)，以提高后期的識(shí)別率和識(shí)別速度。第二，三維模型制作好之后，在制作模型的UV展開(kāi)時(shí)，需要對(duì)照識(shí)別圖上模型的外形來(lái)進(jìn)行，否則會(huì)在圖像匹配模型時(shí)發(fā)生錯(cuò)位。1.制作步驟（4）

將制作好的識(shí)別圖和模型導(dǎo)入工程。在Project面板中新建Resources和StreamingAssets兩個(gè)文件夾，將識(shí)別圖命名為“bear.jpg”后放入StreamingAssets文件夾，而模型文件則放入Resources文件夾。這里要注意的是，這兩個(gè)文件夾是Unity中特殊的文件夾，名稱(chēng)必須對(duì)，包括大小寫(xiě)都不能有錯(cuò)，否則Unity會(huì)找不到路徑。（5）在Project面板的“Assets”→“EasyAR”→“Prefabs”→“Primitives”文件夾中找到“ImageTarget”預(yù)設(shè)體，將其拖入場(chǎng)景，來(lái)指定圖像目標(biāo)屬性，修改其“Path”屬性為“bear.jpg”，設(shè)置識(shí)別圖如圖所示。1.制作步驟（6）將制作好的模型拖入場(chǎng)景，作為ImageTarget的子物體。運(yùn)行場(chǎng)景，通過(guò)攝像頭識(shí)別圖像，顯示出模型。根據(jù)顯示出來(lái)的情況，可以適當(dāng)調(diào)整模型的初始角度，使模型可以正確地面向使用者。（7）在Project面板中搜索并找到“Coloring3DBehaviour”腳本，將其賦給第6步中拖入場(chǎng)景的模型物體作為腳本組件。重新運(yùn)行場(chǎng)景，就可以看到在識(shí)別圖中繪制的顏色顯示到模型上了。至此，通過(guò)以上步驟實(shí)現(xiàn)了使用EasyAR來(lái)制作涂涂樂(lè)的例子。2.實(shí)現(xiàn)原理和代碼分析——三維模型和識(shí)別圖的關(guān)系

（1）UV展開(kāi)三維模型表面凹凸不平，需要先將其展開(kāi)成平面，然后才能方便地繪制或制作紋理貼圖。這個(gè)展平的過(guò)程，叫作UV展開(kāi)。三維模型的UV展開(kāi)如圖所示，一個(gè)人物頭像經(jīng)過(guò)UV展開(kāi)后變?yōu)槠矫娴男问?，在此平面上繪制的貼圖，就會(huì)根據(jù)其坐標(biāo)正確顯示到頭像模型的相應(yīng)位置上。2.實(shí)現(xiàn)原理和代碼分析——三維模型和識(shí)別圖的關(guān)系

（2）UV展開(kāi)和識(shí)別圖的關(guān)系因?yàn)橐炎R(shí)別圖中涂色的部分顯示到模型表面的正確位置上，所以模型的UV展開(kāi)必須和識(shí)別圖是匹配的。小熊模型的UV展開(kāi)和識(shí)別圖的匹配如圖所示，以識(shí)別圖作為小熊模型的材質(zhì)貼圖，而UV展開(kāi)則是根據(jù)識(shí)別圖上的圖案，按小熊的前后兩部分進(jìn)行劃分，覆蓋在識(shí)別圖上的繪圖區(qū)域。2.實(shí)現(xiàn)原理和代碼分析——代碼分析

將模型的UV展開(kāi)和識(shí)別圖進(jìn)行匹配以后，剩下的工作主要還有兩個(gè)步驟。步驟一：從攝像頭拍攝的動(dòng)態(tài)畫(huà)面中實(shí)時(shí)識(shí)別出識(shí)別圖。步驟二：定位識(shí)別圖在畫(huà)面中的位置，并將其作為紋理貼圖賦予三維模型的材質(zhì)。

其中，步驟一由EasyAR的核心功能自動(dòng)完成，不需要額外的干預(yù)。步驟二則需要結(jié)合Unity的著色器來(lái)編寫(xiě)控制腳本。官方示例中提供了一個(gè)名為Coloring3D的材質(zhì)，TextureSample材質(zhì)的Shader屬性如圖6-36所示，其中point1到point4這4個(gè)屬性分別代表識(shí)別圖的4個(gè)頂點(diǎn)。這4個(gè)頂點(diǎn)屬性可以通過(guò)腳本來(lái)動(dòng)態(tài)地賦值，從而界定識(shí)別圖范圍，這樣才能正