林 晶 謝伙生 肖 斌
(福州大學(xué),福建福州,350116)
傳統(tǒng)的涂色繪本讓孩童的涂鴉有了發(fā)揮的地方,然而在科技高速發(fā)展的今天,數(shù)字媒體技術(shù)以及智能移動(dòng)設(shè)備的加速發(fā)展,這種娛樂方式已經(jīng)不能滿足孩童的興趣,孩童每一時(shí)刻都在不斷尋求著感官上的刺激。在這種背景下,“AR+繪本”早教類產(chǎn)品應(yīng)運(yùn)而生(AR:Augmented Reality,增強(qiáng)現(xiàn)實(shí))。AR技術(shù)與繪本的結(jié)合,使孩童的涂色作品突破了二維平面的限制跳出紙面,變成三維立體形式在移動(dòng)設(shè)備上“活”過來,增加孩童的興趣,激發(fā)創(chuàng)造力。國外Disney Research開發(fā)的涂色APP將涂鴉繪畫作品與3D模型匹配,能夠?qū)崟r(shí)展示作品,并采用了查閱映射技術(shù),能夠自動(dòng)匹配閉塞空間的顏色;國內(nèi)的“AR涂涂樂”將孩子的涂鴉繪畫作品變成3D動(dòng)畫,伴隨著聲音、色彩,提供“視、聽、說、觸、想”多感體驗(yàn)。這些涂色類產(chǎn)品能讓孩子在探索和與周圍世界互動(dòng)的過程中充分發(fā)揮他們的想象力。
本文以涂色服裝秀為例,研究一般涂色類AR產(chǎn)品的開發(fā)實(shí)現(xiàn)。涂色服裝秀APP將AR技術(shù)與繪本涂色、人偶換裝結(jié)合,要求不僅只是簡(jiǎn)單地給繪本上色,而是需要孩童開發(fā)大腦想象親自給人偶設(shè)計(jì)服裝圖案,在經(jīng)過裝有該APP的移動(dòng)設(shè)備掃描后,穿上設(shè)計(jì)好的服裝的3D人偶能活靈活現(xiàn)地展示出來,并且孩童可以跟人偶進(jìn)行交互操作。
增強(qiáng)現(xiàn)實(shí)呈現(xiàn)給用戶的是將虛擬物體和真實(shí)世界相混合的場(chǎng)景,它有三個(gè)關(guān)鍵技術(shù):三維跟蹤注冊(cè)技術(shù)、顯示技術(shù)、智能交互技術(shù),其中最重要的是三維跟蹤注冊(cè)的實(shí)現(xiàn)。[1]AR系統(tǒng)的實(shí)現(xiàn)是利用跟蹤注冊(cè)技術(shù)對(duì)物體進(jìn)行檢測(cè),通過使用攝像機(jī)的標(biāo)定技術(shù)得到檢測(cè)目標(biāo)的信息并計(jì)算出檢測(cè)目標(biāo)與真實(shí)場(chǎng)景的關(guān)系,從而得到場(chǎng)景和攝像機(jī)的角度信息及相對(duì)位置,以此作為虛擬景物添加信息的依據(jù),達(dá)到虛擬世界和現(xiàn)實(shí)世界的無縫融合 。[2,3]移動(dòng)智能設(shè)備的性能不斷提高,為移動(dòng)增強(qiáng)現(xiàn)實(shí)提供了很好的開發(fā)平臺(tái),涂色類AR產(chǎn)品是當(dāng)前AR類市場(chǎng)中少數(shù)成功產(chǎn)品,它是使用Vuforia或EasyAR的AR技術(shù)和Unity3D來實(shí)現(xiàn)新型的互動(dòng)兒童繪本玩具,涂色類移動(dòng)增強(qiáng)現(xiàn)實(shí)系統(tǒng)基本框架流程如圖1所示。
圖1 涂色類移動(dòng)增強(qiáng)現(xiàn)實(shí)系統(tǒng)基本框架流程
本文采用目前穩(wěn)定性較好、功能較全的Vuforia AR開發(fā)工具包,在Unity3D平臺(tái)通過編寫一系列C#腳本進(jìn)行AR系統(tǒng)開發(fā)。Unity3D是一個(gè)全面整合的游戲引擎,內(nèi)置IDE,具有編輯器、著色器、跨平臺(tái)發(fā)布、版本控制等一些特性。Vuforia是一款基于標(biāo)志識(shí)別的移動(dòng)增強(qiáng)現(xiàn)實(shí)開發(fā)工具包,支持2D平面圖像、3D物體等目標(biāo)(Target)識(shí)別,它為Unity3D平臺(tái)提供插件,實(shí)現(xiàn)了Android、IOS等跨平臺(tái)的AR開發(fā)。以圖像作為識(shí)別目標(biāo)、本地訪問目標(biāo)圖像數(shù)據(jù)庫的方式,使用Vuforia SDK開發(fā)增強(qiáng)現(xiàn)實(shí)應(yīng)用程序的過程如圖2所示,用戶將目標(biāo)圖像(Image Target)上傳至Vuforia數(shù)據(jù)庫,“注冊(cè)”后得到目標(biāo)圖像的識(shí)別文件,基于Vuforia SDK開發(fā)的AR應(yīng)用只要加載指定圖像的識(shí)別文件就可以通過外部攝像頭識(shí)別追蹤該目標(biāo)圖像,將真實(shí)的視頻圖像和虛擬對(duì)象融合并呈現(xiàn)在顯示屏上,實(shí)現(xiàn)三維的跟蹤與注冊(cè),用戶無需考慮圖像識(shí)別與追蹤的具體實(shí)現(xiàn)。[4]
圖2 使用Vuforia開發(fā)AR應(yīng)用程序過程
涂色服裝秀APP主要分成幾個(gè)功能模塊:增強(qiáng)現(xiàn)實(shí)模塊、涂色模塊、人偶換裝模塊、手勢(shì)交互模塊和按鈕及語音交互模塊,系統(tǒng)的整體功能模塊設(shè)計(jì)框架如圖3所示,移動(dòng)設(shè)備相機(jī)不斷掃描識(shí)別目標(biāo)圖像,獲取到目標(biāo)圖像后,將孩童給人偶服裝設(shè)計(jì)的涂色圖案“穿”在3D人偶模型上。
增強(qiáng)現(xiàn)實(shí)模塊:實(shí)現(xiàn)虛實(shí)融合功能,通過三維跟蹤注冊(cè)技術(shù)識(shí)別目標(biāo)圖像,將穿著服裝的人偶模型立體地展示出來;涂色模塊:為孩童提供二次創(chuàng)作的機(jī)會(huì),豐富其涂色體驗(yàn),將孩童的涂色作品展現(xiàn)在服裝模型上;人偶換裝模塊:設(shè)計(jì)多套服裝模型供孩童選擇,孩童完成二次創(chuàng)作涂色后,通過攝像頭掃描展示出不同的服裝模型,為增強(qiáng)趣味性、涂色多樣性,設(shè)計(jì)兩種服裝設(shè)計(jì)模式,全部涂色模式,涂畫人物服裝的前視圖、后視圖白模;部分涂色模式,涂畫服裝的局部白模,避免冗余的涂畫操作;觸屏手勢(shì)交互模塊:在3D模型展示時(shí),通過不同的觸屏手勢(shì)來實(shí)現(xiàn)對(duì)模型的放縮變換和自動(dòng)旋轉(zhuǎn)功能;按鈕及語音交互模塊:涂色模式下,通過UI按鈕實(shí)現(xiàn)對(duì)應(yīng)的重做、返回、退出、說話操作。
圖3 系統(tǒng)功能模塊設(shè)計(jì)框架
該模塊實(shí)現(xiàn)的功能是在目標(biāo)圖像上疊加3D模型,為實(shí)現(xiàn)該功能在開發(fā)前先準(zhǔn)備好模型以及圖像資源,然后進(jìn)行以下幾個(gè)步驟設(shè)置:[5]
1.上傳目標(biāo)圖像(“collorPad600”、“shibietuB”和“shibietuA”)到Vuforia數(shù)據(jù)庫,如圖4所示,并生成與下載識(shí)別文件。Vuforia是通過在圖片上注冊(cè)識(shí)別點(diǎn)來進(jìn)行識(shí)別的,星級(jí)越高代表可識(shí)別度越強(qiáng);
2.Unity3D新建工程項(xiàng)目,以資源包unitypackage形式加載Vuforia插件和識(shí)別文件;
3.添加Vuforia資源包下AR Camera和Image Target對(duì)象,刪除Unity3D自帶的Camera對(duì)象;
4.設(shè)置AR Camera、Image Target參數(shù),與掛載對(duì)應(yīng)3D模型。
經(jīng)過上述步驟設(shè)置后,程序在追蹤識(shí)別到目標(biāo)圖像時(shí)會(huì)在其上顯示對(duì)應(yīng)的3D模型,從而實(shí)現(xiàn)增強(qiáng)現(xiàn)實(shí)功能。
圖4 目標(biāo)圖像
涂色模塊是整個(gè)系統(tǒng)實(shí)現(xiàn)的主要功能,它將孩童在二維繪本上的涂色完全立體展現(xiàn)在服裝模型上。涂色模塊的實(shí)現(xiàn)包括兩方面:目標(biāo)圖像的完全獲取和模型涂色的實(shí)現(xiàn)。
首先,目標(biāo)圖像的完全獲取保證最后服裝設(shè)計(jì)的展示能更加完整。設(shè)置一個(gè)掃描框等比略小于屏幕以及一個(gè)透明面片標(biāo)識(shí)識(shí)別情況,面片與目標(biāo)圖像大小相等且完全貼合,根據(jù)面片與掃描框位置關(guān)系來判斷目標(biāo)圖像是否完全處于掃描框中。當(dāng)面片不完全在掃描框內(nèi),給面片的Render組件material屬性賦紅顏色材質(zhì)球,反之賦藍(lán)顏色材質(zhì)球,用戶根據(jù)顏色變化判斷當(dāng)前的識(shí)別情況。當(dāng)圖像穩(wěn)定在掃描框內(nèi)時(shí),對(duì)目標(biāo)圖像進(jìn)行截圖。延遲函數(shù)StartCoroutine調(diào)用編寫好的截圖腳本進(jìn)行截圖保存,并顯示“識(shí)別成功”彈框;當(dāng)目標(biāo)圖像中途跑出掃描框時(shí),延遲函數(shù)中斷,Render組件material屬性被賦透明材質(zhì)球,提示用戶沒有成功截圖,需要重新掃描目標(biāo)圖像。具體實(shí)現(xiàn)效果如圖5所示。
圖5 面片不完全在掃描框中(左)和完全在掃描框中(右)
其次,模型涂色的實(shí)現(xiàn)也是模型貼圖的過程,貼圖在圖形學(xué)上也叫做“紋理映射”,3D物體表面的顏色通過UV坐標(biāo)從指定的紋理上一一映射。如圖6所示的是利用第三方軟件MAYA制作的服裝模型的UV坐標(biāo)、對(duì)應(yīng)模型的UV貼圖以及對(duì)應(yīng)部分涂色模式的UV坐標(biāo)。由于限制只對(duì)服裝涂色,因此只對(duì)服裝模型貼圖,不對(duì)人偶模型貼圖,且為了使模型不遮擋到目標(biāo)圖像,使涂畫部分的圖像信息獲取受到影響,將人偶模型設(shè)置為Deactive狀態(tài),并給服裝模型部分賦予透明的color/special材質(zhì)。當(dāng)截圖腳本獲取到目標(biāo)圖像截圖后,將截圖作為模型紋理傳遞給著色器,實(shí)現(xiàn)服裝模型的涂色功能。
圖6 服裝模型的UV貼圖
人偶換裝模塊中設(shè)計(jì)了兩種涂畫方式(“全部涂色”模式和“部分涂色”模式)和兩套服裝模型增加游戲的趣味性和多樣性。不同涂畫模式的人物圖像的涂畫卡片(即shibietuA、shibietuB)是共用的,即相同的服裝模型可以有不同的涂畫方式。通過DefaultTrackableEventHandler類中的OnTrackingFound()方法獲取目標(biāo)圖像信息,確定涂色模式和服裝模型。
“全部涂色”模式下服裝秀實(shí)現(xiàn)。判斷獲取到的目標(biāo)圖像信息,當(dāng)目標(biāo)圖像為“shibietuA”或“shibietuB”時(shí),執(zhí)行獲取目標(biāo)圖像的腳本截取目標(biāo)圖像。調(diào)用TargetSet類中的TargetSetting()方法設(shè)置服裝模型,通過判斷,將無需展現(xiàn)的模型設(shè)置為Deactive狀態(tài)。
“部分涂色”模式下服裝秀實(shí)現(xiàn)。判斷獲取到的目標(biāo)圖像信息,當(dāng)目標(biāo)圖像為“colorPad600”時(shí),執(zhí)行目標(biāo)圖像獲取的腳本,設(shè)置成功截圖標(biāo)志布爾變量partShot,初始值為false,即未成功截圖,只有當(dāng)成功截圖后才能進(jìn)行服裝模型的設(shè)置。成功截圖后調(diào)用TargetSet類的TargetSettingP()方法,將partShot設(shè)置為true。在TargetSet類的update()方法中,實(shí)時(shí)判斷是否已經(jīng)成功截圖,并判斷是否已經(jīng)設(shè)置好模型,當(dāng)成功截圖并從未設(shè)置服裝模型的時(shí)候,才進(jìn)入服裝模型的設(shè)置腳本,防止進(jìn)行多次、重復(fù)設(shè)置,將無需展現(xiàn)的模型設(shè)置為Deactive狀態(tài)。
通過識(shí)別觸屏手勢(shì)操作人物模型讓用戶在觸覺、視覺上都有更好的體驗(yàn)感。為使人物模型和服裝模型在受操控后能同時(shí)、同步地進(jìn)行效果展示,將服裝模型設(shè)為主動(dòng)模塊,人物模型設(shè)為從動(dòng)模塊,以服裝模型對(duì)觸控操作的響應(yīng)帶動(dòng)人物模型對(duì)觸控操作的響應(yīng)。給模型添加物理屬性—碰撞體“Sphere Collider”,在 update()方法中判斷觸摸點(diǎn)數(shù)(具體的手勢(shì)對(duì)照如表1所示):當(dāng)判斷觸摸點(diǎn)數(shù)為1時(shí),通過存儲(chǔ)當(dāng)前狀態(tài)的布爾變量“SetState”設(shè)置開始或暫停模型自動(dòng)旋轉(zhuǎn),通過模型的Transform組件Rotate函數(shù)設(shè)置繞Y軸旋轉(zhuǎn);當(dāng)觸摸點(diǎn)數(shù)為2時(shí),計(jì)算雙指在當(dāng)前幀與前一幀的位置距離差作為相對(duì)縮放因子,通過模型的Transform組件的localScale函數(shù)設(shè)置模型縮放參數(shù):大于0為放大,小于0為縮小。為了使模型在可友好觀察的范圍內(nèi)展示,設(shè)置了縮放限制系數(shù)MinLimit=2f的最小縮小倍數(shù)和MaxLimit=16f的最大放大倍數(shù)??s放實(shí)現(xiàn)效果如圖7所示。
表1 觸屏手勢(shì)意義對(duì)照
在UI畫布上(Canvas對(duì)象)下添加UI組件button,通過腳本控制點(diǎn)擊按鈕觸發(fā)事件。對(duì)應(yīng)按鈕實(shí)現(xiàn)的功能設(shè)計(jì)如表2所示?!爸刈觥迸c“返回”按鈕,通過SceneManager.LoadScene()重新加載對(duì)應(yīng)的場(chǎng)景;“說話”按鈕,添加組件“Audio Source”,點(diǎn)擊時(shí)觸發(fā)Play事件播放語音,反饋用戶的服裝秀模型做好了;“退出”按鈕,通過SetActive激活顯示退出彈框。
表2 按鈕功能
5.實(shí)現(xiàn)效果
通過Unity3D平臺(tái)將應(yīng)用程序打包發(fā)布成apk文件,移動(dòng)端安裝后進(jìn)行游戲測(cè)試。如圖7左圖所示的是模式選擇界面:點(diǎn)擊“退出”按鈕,跳轉(zhuǎn)到右圖顯示的確認(rèn)退出界面;是點(diǎn)擊“部分涂色”按鈕后,攝像頭開啟不斷掃描檢測(cè)目標(biāo)圖像,識(shí)別到部分涂色卡片再識(shí)別涂色卡片后的部分涂色模型貼圖效果如圖7左圖所示;類似點(diǎn)擊“全部涂色”按鈕后,攝像頭開不斷掃描檢測(cè)目標(biāo)圖像,全部涂色模式模型貼圖效果如圖7右圖所示;如圖9所示的是兩種服裝模型展示效果圖;如圖10所示的是觸屏手勢(shì)交互實(shí)現(xiàn)模型放大縮小的效果圖。
圖7 模式選擇界面(左)和確認(rèn)退出界面(右)
圖8 部分涂色(左)和全部涂色(右)模式模型展示
圖9 兩種服裝模型展示
圖10 左圖模型縮小效果,右圖模型放大效果
涂色服裝秀APP順應(yīng)了當(dāng)下蓬勃發(fā)展的移動(dòng)增強(qiáng)現(xiàn)實(shí)技術(shù),利用了vuforia SDK提供的目標(biāo)圖像跟蹤技術(shù),對(duì)相應(yīng)的模型進(jìn)行涂畫圖案的獲取,并通過unity平臺(tái)對(duì)模型重新進(jìn)行紋理映射,從而,孩童就可以通過給圖片卡上的人物服裝設(shè)計(jì)不同的圖案,并利用移動(dòng)設(shè)備掃描,展示出穿著自己設(shè)計(jì)的衣服的人物模型。這對(duì)孩童來說充滿了新奇,而這認(rèn)知色彩的過程無形中對(duì)他們的能力發(fā)展起到積極的促進(jìn)作用,豐富了當(dāng)今孩童的生活,是一個(gè)非常有意義的產(chǎn)品。