基于增強現實的涂色服裝秀APP

林 晶 謝伙生 肖 斌

（福州大學，福建福州，350116）

一、引言

傳統的涂色繪本讓孩童的涂鴉有了發揮的地方，然而在科技高速發展的今天，數字媒體技術以及智能移動設備的加速發展，這種娛樂方式已經不能滿足孩童的興趣，孩童每一時刻都在不斷尋求著感官上的刺激。在這種背景下，“AR+繪本”早教類產品應運而生（AR：Augmented Reality，增強現實）。AR技術與繪本的結合，使孩童的涂色作品突破了二維平面的限制跳出紙面，變成三維立體形式在移動設備上“活”過來，增加孩童的興趣，激發創造力。國外Disney Research開發的涂色APP將涂鴉繪畫作品與3D模型匹配，能夠實時展示作品，并采用了查閱映射技術，能夠自動匹配閉塞空間的顏色；國內的“AR涂涂樂”將孩子的涂鴉繪畫作品變成3D動畫，伴隨著聲音、色彩，提供“視、聽、說、觸、想”多感體驗。這些涂色類產品能讓孩子在探索和與周圍世界互動的過程中充分發揮他們的想象力。

本文以涂色服裝秀為例，研究一般涂色類AR產品的開發實現。涂色服裝秀APP將AR技術與繪本涂色、人偶換裝結合，要求不僅只是簡單地給繪本上色，而是需要孩童開發大腦想象親自給人偶設計服裝圖案，在經過裝有該APP的移動設備掃描后，穿上設計好的服裝的3D人偶能活靈活現地展示出來，并且孩童可以跟人偶進行交互操作。

二、涂色類AR系統開發框架

增強現實呈現給用戶的是將虛擬物體和真實世界相混合的場景，它有三個關鍵技術：三維跟蹤注冊技術、顯示技術、智能交互技術，其中最重要的是三維跟蹤注冊的實現。[1]AR系統的實現是利用跟蹤注冊技術對物體進行檢測，通過使用攝像機的標定技術得到檢測目標的信息并計算出檢測目標與真實場景的關系，從而得到場景和攝像機的角度信息及相對位置，以此作為虛擬景物添加信息的依據，達到虛擬世界和現實世界的無縫融合 。[2，3]移動智能設備的性能不斷提高，為移動增強現實提供了很好的開發平臺，涂色類AR產品是當前AR類市場中少數成功產品，它是使用Vuforia或EasyAR的AR技術和Unity3D來實現新型的互動兒童繪本玩具，涂色類移動增強現實系統基本框架流程如圖1所示。

圖1 涂色類移動增強現實系統基本框架流程

本文采用目前穩定性較好、功能較全的Vuforia AR開發工具包，在Unity3D平臺通過編寫一系列C#腳本進行AR系統開發。Unity3D是一個全面整合的游戲引擎，內置IDE，具有編輯器、著色器、跨平臺發布、版本控制等一些特性。Vuforia是一款基于標志識別的移動增強現實開發工具包，支持2D平面圖像、3D物體等目標（Target）識別，它為Unity3D平臺提供插件，實現了Android、IOS等跨平臺的AR開發。以圖像作為識別目標、本地訪問目標圖像數據庫的方式，使用Vuforia SDK開發增強現實應用程序的過程如圖2所示，用戶將目標圖像（Image Target）上傳至Vuforia數據庫，“注冊”后得到目標圖像的識別文件，基于Vuforia SDK開發的AR應用只要加載指定圖像的識別文件就可以通過外部攝像頭識別追蹤該目標圖像，將真實的視頻圖像和虛擬對象融合并呈現在顯示屏上，實現三維的跟蹤與注冊，用戶無需考慮圖像識別與追蹤的具體實現。[4]

圖2 使用Vuforia開發AR應用程序過程

三、涂色服裝秀系統設計

涂色服裝秀APP主要分成幾個功能模塊：增強現實模塊、涂色模塊、人偶換裝模塊、手勢交互模塊和按鈕及語音交互模塊，系統的整體功能模塊設計框架如圖3所示，移動設備相機不斷掃描識別目標圖像，獲取到目標圖像后，將孩童給人偶服裝設計的涂色圖案“穿”在3D人偶模型上。

增強現實模塊：實現虛實融合功能，通過三維跟蹤注冊技術識別目標圖像，將穿著服裝的人偶模型立體地展示出來；涂色模塊：為孩童提供二次創作的機會，豐富其涂色體驗，將孩童的涂色作品展現在服裝模型上；人偶換裝模塊：設計多套服裝模型供孩童選擇，孩童完成二次創作涂色后，通過攝像頭掃描展示出不同的服裝模型，為增強趣味性、涂色多樣性，設計兩種服裝設計模式，全部涂色模式，涂畫人物服裝的前視圖、后視圖白模；部分涂色模式，涂畫服裝的局部白模，避免冗余的涂畫操作；觸屏手勢交互模塊：在3D模型展示時，通過不同的觸屏手勢來實現對模型的放縮變換和自動旋轉功能；按鈕及語音交互模塊：涂色模式下，通過UI按鈕實現對應的重做、返回、退出、說話操作。

圖3 系統功能模塊設計框架

四、涂色服裝秀系統開發實現

（一）增強現實模塊的實現

該模塊實現的功能是在目標圖像上疊加3D模型，為實現該功能在開發前先準備好模型以及圖像資源，然后進行以下幾個步驟設置：[5]

1.上傳目標圖像（“collorPad600”、“shibietuB”和“shibietuA”）到Vuforia數據庫，如圖4所示，并生成與下載識別文件。Vuforia是通過在圖片上注冊識別點來進行識別的，星級越高代表可識別度越強；

2.Unity3D新建工程項目，以資源包unitypackage形式加載Vuforia插件和識別文件；

3.添加Vuforia資源包下AR Camera和Image Target對象，刪除Unity3D自帶的Camera對象；

4.設置AR Camera、Image Target參數，與掛載對應3D模型。

經過上述步驟設置后，程序在追蹤識別到目標圖像時會在其上顯示對應的3D模型，從而實現增強現實功能。

圖4 目標圖像

（二）涂色模塊的實現

涂色模塊是整個系統實現的主要功能，它將孩童在二維繪本上的涂色完全立體展現在服裝模型上。涂色模塊的實現包括兩方面：目標圖像的完全獲取和模型涂色的實現。

首先，目標圖像的完全獲取保證最后服裝設計的展示能更加完整。設置一個掃描框等比略小于屏幕以及一個透明面片標識識別情況，面片與目標圖像大小相等且完全貼合，根據面片與掃描框位置關系來判斷目標圖像是否完全處于掃描框中。當面片不完全在掃描框內，給面片的Render組件material屬性賦紅顏色材質球，反之賦藍顏色材質球，用戶根據顏色變化判斷當前的識別情況。當圖像穩定在掃描框內時，對目標圖像進行截圖。延遲函數StartCoroutine調用編寫好的截圖腳本進行截圖保存，并顯示“識別成功”彈框；當目標圖像中途跑出掃描框時，延遲函數中斷，Render組件material屬性被賦透明材質球，提示用戶沒有成功截圖，需要重新掃描目標圖像。具體實現效果如圖5所示。

圖5 面片不完全在掃描框中（左）和完全在掃描框中（右）

其次，模型涂色的實現也是模型貼圖的過程，貼圖在圖形學上也叫做“紋理映射”，3D物體表面的顏色通過UV坐標從指定的紋理上一一映射。如圖6所示的是利用第三方軟件MAYA制作的服裝模型的UV坐標、對應模型的UV貼圖以及對應部分涂色模式的UV坐標。由于限制只對服裝涂色，因此只對服裝模型貼圖，不對人偶模型貼圖，且為了使模型不遮擋到目標圖像，使涂畫部分的圖像信息獲取受到影響，將人偶模型設置為Deactive狀態，并給服裝模型部分賦予透明的color/special材質。當截圖腳本獲取到目標圖像截圖后，將截圖作為模型紋理傳遞給著色器，實現服裝模型的涂色功能。

圖6 服裝模型的UV貼圖

（三）人偶換裝模塊的實現

人偶換裝模塊中設計了兩種涂畫方式（“全部涂色”模式和“部分涂色”模式）和兩套服裝模型增加游戲的趣味性和多樣性。不同涂畫模式的人物圖像的涂畫卡片（即shibietuA、shibietuB）是共用的，即相同的服裝模型可以有不同的涂畫方式。通過DefaultTrackableEventHandler類中的OnTrackingFound()方法獲取目標圖像信息，確定涂色模式和服裝模型。

“全部涂色”模式下服裝秀實現。判斷獲取到的目標圖像信息，當目標圖像為“shibietuA”或“shibietuB”時，執行獲取目標圖像的腳本截取目標圖像。調用TargetSet類中的TargetSetting()方法設置服裝模型，通過判斷，將無需展現的模型設置為Deactive狀態。

“部分涂色”模式下服裝秀實現。判斷獲取到的目標圖像信息，當目標圖像為“colorPad600”時，執行目標圖像獲取的腳本，設置成功截圖標志布爾變量partShot，初始值為false，即未成功截圖，只有當成功截圖后才能進行服裝模型的設置。成功截圖后調用TargetSet類的TargetSettingP()方法，將partShot設置為true。在TargetSet類的update()方法中，實時判斷是否已經成功截圖，并判斷是否已經設置好模型，當成功截圖并從未設置服裝模型的時候，才進入服裝模型的設置腳本，防止進行多次、重復設置，將無需展現的模型設置為Deactive狀態。

（四）觸屏手勢交互模塊的實現

通過識別觸屏手勢操作人物模型讓用戶在觸覺、視覺上都有更好的體驗感。為使人物模型和服裝模型在受操控后能同時、同步地進行效果展示，將服裝模型設為主動模塊，人物模型設為從動模塊，以服裝模型對觸控操作的響應帶動人物模型對觸控操作的響應。給模型添加物理屬性—碰撞體“Sphere Collider”，在 update()方法中判斷觸摸點數（具體的手勢對照如表1所示）：當判斷觸摸點數為1時，通過存儲當前狀態的布爾變量“SetState”設置開始或暫停模型自動旋轉，通過模型的Transform組件Rotate函數設置繞Y軸旋轉；當觸摸點數為2時，計算雙指在當前幀與前一幀的位置距離差作為相對縮放因子，通過模型的Transform組件的localScale函數設置模型縮放參數：大于0為放大，小于0為縮小。為了使模型在可友好觀察的范圍內展示，設置了縮放限制系數MinLimit=2f的最小縮小倍數和MaxLimit=16f的最大放大倍數。縮放實現效果如圖7所示。

表1 觸屏手勢意義對照

（五）按鈕及語音交互模塊的實現

在UI畫布上（Canvas對象）下添加UI組件button，通過腳本控制點擊按鈕觸發事件。對應按鈕實現的功能設計如表2所示。“重做”與“返回”按鈕，通過SceneManager.LoadScene（）重新加載對應的場景；“說話”按鈕，添加組件“Audio Source”，點擊時觸發Play事件播放語音，反饋用戶的服裝秀模型做好了；“退出”按鈕，通過SetActive激活顯示退出彈框。

表2 按鈕功能

5.實現效果

通過Unity3D平臺將應用程序打包發布成apk文件，移動端安裝后進行游戲測試。如圖7左圖所示的是模式選擇界面：點擊“退出”按鈕，跳轉到右圖顯示的確認退出界面；是點擊“部分涂色”按鈕后，攝像頭開啟不斷掃描檢測目標圖像，識別到部分涂色卡片再識別涂色卡片后的部分涂色模型貼圖效果如圖7左圖所示；類似點擊“全部涂色”按鈕后，攝像頭開不斷掃描檢測目標圖像，全部涂色模式模型貼圖效果如圖7右圖所示；如圖9所示的是兩種服裝模型展示效果圖；如圖10所示的是觸屏手勢交互實現模型放大縮小的效果圖。

圖7 模式選擇界面（左）和確認退出界面（右）

圖8 部分涂色（左）和全部涂色（右）模式模型展示

圖9 兩種服裝模型展示

圖10 左圖模型縮小效果，右圖模型放大效果

六、總結

涂色服裝秀APP順應了當下蓬勃發展的移動增強現實技術，利用了vuforia SDK提供的目標圖像跟蹤技術，對相應的模型進行涂畫圖案的獲取，并通過unity平臺對模型重新進行紋理映射，從而，孩童就可以通過給圖片卡上的人物服裝設計不同的圖案，并利用移動設備掃描，展示出穿著自己設計的衣服的人物模型。這對孩童來說充滿了新奇，而這認知色彩的過程無形中對他們的能力發展起到積極的促進作用，豐富了當今孩童的生活，是一個非常有意義的產品。