基于個(gè)性化定制的交互式蒙版擦除動畫設(shè)計(jì)與實(shí)現(xiàn)

王 華，李紳紳，何曉宇，朱付保，姚 妮，徐明亮

基于個(gè)性化定制的交互式蒙版擦除動畫設(shè)計(jì)與實(shí)現(xiàn)

王 華1，李紳紳1，何曉宇1，朱付保1，姚 妮1，徐明亮2

(1. 鄭州輕工業(yè)學(xué)院計(jì)算機(jī)與通信工程學(xué)院，河南 鄭州 450001；2. 鄭州大學(xué)信息工程學(xué)院，河南 鄭州 450001)

隨著虛擬現(xiàn)實(shí)技術(shù)和移動互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，眾多商家希望通過移動端實(shí)現(xiàn)交互式蒙版擦除動畫。然而目前在個(gè)性化實(shí)時(shí)定制、交互性等方面存在問題。為此，設(shè)計(jì)了一種基于個(gè)性化定制的交互式蒙版擦除動畫方法，包括個(gè)性化定制模塊和交互式蒙版擦除動畫可視化模塊，其中個(gè)性化定制模塊實(shí)現(xiàn)了定制數(shù)據(jù)的初始化處理，交互式蒙版擦除動畫可視化模塊實(shí)現(xiàn)了移動端甩動—可視化終端蒙版擦除—后臺數(shù)據(jù)查詢編輯的交互式蒙版擦除動畫。搭建了原型系統(tǒng)并進(jìn)行了實(shí)驗(yàn)測試，測試結(jié)果表明，該系統(tǒng)可以實(shí)現(xiàn)移動端約2 000次甩動的實(shí)時(shí)同步擦除動畫可視化。

個(gè)性化定制；移動端；交互式；蒙版擦除動畫

隨著虛擬現(xiàn)實(shí)技術(shù)和移動互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，越來越多的商家從各種角度出發(fā)，致力于提高用戶的參與度和體驗(yàn)性。利用移動終端實(shí)現(xiàn)交互式蒙版擦除動畫，成為不少商家在新品發(fā)布會上希望采取的互動方式。

利用移動終端實(shí)現(xiàn)交互式蒙版擦除動畫，即用戶通過持續(xù)甩動手機(jī)、平板等移動終端，實(shí)現(xiàn)顯示大屏等可視化終端蒙版上任意形狀的擦除動畫，從而逐漸露出底版數(shù)據(jù)，達(dá)到現(xiàn)場互動的目的。利用移動終端實(shí)現(xiàn)交互式蒙版擦除動畫，面臨3個(gè)主要問題：①如何實(shí)現(xiàn)擦除形狀、蒙版及底版等數(shù)據(jù)的個(gè)性化實(shí)時(shí)定制，從而支持任意形狀及連通性的擦除形狀，支持任意格式的底版數(shù)據(jù)(例如二維柵格數(shù)據(jù)、視頻數(shù)據(jù)及三維圖形數(shù)據(jù)等)；②如何提高移動端用戶的交互性，使得擦除形狀與其甩動姿態(tài)相關(guān)聯(lián)：甩動角度與對應(yīng)擦除形狀旋轉(zhuǎn)角度相一致，甩動幅度和擦除形狀大小成正比等；③大批量用戶同時(shí)持續(xù)甩動移動終端時(shí)，如何同步處理這些甩動數(shù)據(jù)并實(shí)現(xiàn)可視化終端擦除的動畫展示。

關(guān)于蒙版擦除的計(jì)算機(jī)仿真，國內(nèi)外已經(jīng)有了許多相當(dāng)成熟的技術(shù)和軟件系統(tǒng)。例如photoshop等二維圖像處理軟件采用基于alpha通道圖像融合技術(shù)實(shí)現(xiàn)的二維底版/蒙版圖像的蒙版擦除[1-4]。此類軟件支持任意形狀的擦除，也支持任意蒙版和底版圖像的定制，但是，其定制圖像只能是二維數(shù)據(jù)，不支持三維或其他類型底版數(shù)據(jù)的定制。三維仿真軟件如Unity 3D，Unreal Engine 4等，利用其強(qiáng)大的shader功能，將包含擦除形狀信息的圖像和蒙版圖像進(jìn)行紋理透明度混合，從而露出底版信息[5-6]。混合過程中允許圖像位置的改變，可以實(shí)現(xiàn)任意位置處蒙版的擦除。但是，針對多次擦除的可視化，需要創(chuàng)建加載多個(gè)shader，非常耗時(shí)。此外，如何語義化移動端用戶的甩動姿勢信息，將其和擦除形狀相關(guān)聯(lián)，實(shí)現(xiàn)擦除動畫展示，目前并無現(xiàn)成的軟件和系統(tǒng)。蒙版擦除，本質(zhì)上是對圖像進(jìn)行摳圖處理，該技術(shù)廣泛的應(yīng)用在數(shù)字圖像融合編輯處理中。經(jīng)典的摳圖方法有Knockkout方法[7]、全局采樣摳圖算法[8]、Weight color and texture matting[9]、KNN matting[10]、半監(jiān)督學(xué)習(xí)的摳圖方法[11]、鄰域和非鄰域結(jié)合的方法[12]、魯棒摳圖方法[13]等多種摳圖方法[14-16]。上述方法可以較好地實(shí)現(xiàn)圖像摳取。但還不能實(shí)現(xiàn)三維場景前景和背景的融合、擦除形狀、蒙版及底板等數(shù)據(jù)的個(gè)性化實(shí)時(shí)定制，以及與移動端的高效實(shí)時(shí)交互。

為此，本文設(shè)計(jì)了一種基于個(gè)性化定制的交互式蒙版擦除動畫方法，包括個(gè)性化定制模塊和交互式蒙版擦除動畫可視化模塊。個(gè)性化定制模塊實(shí)現(xiàn)了蒙版、底版、擦除形狀等的定制和初始化處理；交互式蒙版擦除動畫可視化模塊實(shí)現(xiàn)了“移動端甩動—可視化終端蒙版擦除—后臺數(shù)據(jù)查詢編輯”的交互式蒙版擦除動畫。移動端的每次有效甩動信息，包括甩動位置、幅度及角度等，都將同步產(chǎn)生不同的蒙版擦除動畫，并且，個(gè)性化定制數(shù)據(jù)和移動端甩動數(shù)據(jù)信息都可以在交互式蒙版擦除動畫過程中實(shí)時(shí)的進(jìn)行編輯和修改。針對上述方法，本文進(jìn)行了系統(tǒng)的實(shí)現(xiàn)和應(yīng)用，證明本文方法可以支持不同底版、蒙版數(shù)據(jù)、擦除形狀等的定制，并且可以實(shí)現(xiàn)任意位置、任意大小、任意旋轉(zhuǎn)角度的形狀擦除。效率測試結(jié)果證明，本文方法可以實(shí)現(xiàn)移動端約2 000次甩動的實(shí)時(shí)同步擦除動畫。

1 本文方法框架

交互式蒙版擦除動畫實(shí)現(xiàn)的大致流程包括：

(1) 擦除動畫初始化，輸入所需要的一些初始信息以及數(shù)據(jù)預(yù)處理；

(2) 移動端獲取參與權(quán)限并通過各種甩動參與蒙版擦除；

(3) 可視化終端對歷史甩動信息作可視化展示，并實(shí)時(shí)獲取當(dāng)前時(shí)刻甩動信息疊加做動畫展示。

針對上述擦除動畫實(shí)現(xiàn)流程，本文提出了一種交互式蒙版擦除動畫的實(shí)現(xiàn)方法，能夠?qū)崿F(xiàn)大量參與者同時(shí)參與實(shí)時(shí)的擦除動畫可視化展示，并且考慮了參與者不同甩動姿勢對擦除動畫的影響。其技術(shù)框架如圖1所示。首先，受蒙版擦除動畫使用目的、擦除形狀、參與人數(shù)、參與權(quán)限等不確定性因素的影響，為定制個(gè)性化的蒙版擦除，給出一種個(gè)性化定制方案建模方法，將上述不確定信息計(jì)算機(jī)語義化并做預(yù)處理，預(yù)處理后的數(shù)據(jù)采用SQLServer數(shù)據(jù)庫分類存儲，服務(wù)于實(shí)時(shí)擦除動畫的實(shí)現(xiàn)。然后，基于這些數(shù)據(jù)，本文給出了交互式蒙版擦除動畫的實(shí)現(xiàn)方法，使得移動端、后臺數(shù)據(jù)管理端以及可視化端通過實(shí)時(shí)訪問數(shù)據(jù)庫，間接完成數(shù)據(jù)交流，從而實(shí)現(xiàn)交互式的蒙版擦除動畫。

圖1 本文方法框架

2 個(gè)性化定制方案建模

以交互式蒙版擦除動畫實(shí)現(xiàn)流程(圖2)為基礎(chǔ)依據(jù)，根據(jù)個(gè)性化定制方案對相關(guān)初始化要素進(jìn)行歸納及計(jì)算機(jī)語義化和預(yù)處理，方便后續(xù)擦除動畫的實(shí)現(xiàn)。

圖2 交互式蒙版擦除動畫實(shí)現(xiàn)流程圖

2.1 交互式蒙版擦除動畫實(shí)現(xiàn)流程

交互式蒙版擦除動畫實(shí)現(xiàn)的流程主要包括：

(1) 擦除動畫初始化。根據(jù)不同的應(yīng)用場景對蒙版、底版、模板形狀、擦除次數(shù)等蒙版擦除所需要的一些信息進(jìn)行數(shù)據(jù)初始化和預(yù)處理。蒙版用來刻畫蒙版圖層信息，通常即為RGB圖像，圖像信息可以定制。底版指的是蒙版全部被擦除后呈現(xiàn)出的數(shù)據(jù)信息，根據(jù)不同的應(yīng)用場景可以初始化為二維矢量、柵格、視頻數(shù)據(jù)甚至三維圖形數(shù)據(jù)等。例如應(yīng)用于新品發(fā)布的蒙版擦除，底版通常設(shè)置為新品二維圖像或者新品演示視頻；應(yīng)用于抽獎互動的蒙版擦除，底版通常為一些矢量數(shù)據(jù)表示的中獎信息。擦除模板可以認(rèn)為是一個(gè)標(biāo)準(zhǔn)化的擦除形狀，根據(jù)輸入的包含擦除形狀信息的圖像數(shù)據(jù)計(jì)算得到。擦除過程中，實(shí)際擦除的形狀基于擦除模板做平移、縮放以及旋轉(zhuǎn)等實(shí)現(xiàn)。擦除次數(shù)指的是將蒙版圖層完全擦除所需要的總次數(shù)，擦除次數(shù)一定程度上決定了擦除形狀的大小。擦除音效指的是用戶每次交互擦除時(shí)同步的擦除聲音。可視化終端信息包括可視化終端尺寸、移動端與可視化終端的平均距離等。

(2) 用戶移動端獲取參與權(quán)限并通過各種甩動參與蒙版擦除。用戶在移動端通過注冊等形式提交個(gè)人信息獲取參與互動的權(quán)限，獲取權(quán)限后，移動端的每次有效甩動信息(例如幅度、角度等)都會被可視化終端捕獲并通過對擦除模板做相應(yīng)的形變實(shí)現(xiàn)擦除動畫的可視化展示。

(3) 可視化終端對歷史甩動信息作可視化展示，并實(shí)時(shí)獲取當(dāng)前時(shí)刻甩動信息疊加作動畫展示。歷史甩動信息指的是擦除動畫初始化完成后至當(dāng)前時(shí)刻參與用戶在移動端的甩動信息?？梢暬K端實(shí)時(shí)捕獲所有參與者的甩動信息，并將其累加至歷史甩動信息上做可視化展示。因此，每位用戶在移動端的一次有效甩動，都會實(shí)時(shí)產(chǎn)生一次蒙版擦除。具體擦除形狀、位置等由有效甩動信息決定。有效甩動的定義在后續(xù)的3節(jié)詳細(xì)給出。

2.2 要素歸納與語義建模

根據(jù)上述交互式蒙版擦除動畫實(shí)現(xiàn)流程，將交互式蒙版擦除方案中包含的要素進(jìn)行歸納，并進(jìn)行語義建模。

2.2.1 結(jié)構(gòu)化方案

結(jié)構(gòu)化方案建模指的是對系統(tǒng)所需初始化數(shù)據(jù)根據(jù)其邏輯順序的先后通過某種形式進(jìn)行計(jì)算機(jī)語義化表達(dá)，使得后續(xù)擦除動畫效率提高。

結(jié)構(gòu)化方案建模涉及的要素根據(jù)其功能不同可以分為擦除預(yù)案要素和移動端要素。

擦除預(yù)案要素包括蒙版數(shù)據(jù)、底版數(shù)據(jù)、擦除模板數(shù)據(jù)以及可視化終端數(shù)據(jù)等。蒙版數(shù)據(jù)以柵格形式存儲。底版數(shù)據(jù)根據(jù)不同的應(yīng)用場景可以初始化為二維矢量、柵格、視頻數(shù)據(jù)甚至三維圖形數(shù)據(jù)等。本文中，底版數(shù)據(jù)包含底版數(shù)據(jù)類型typeID和底版模型數(shù)據(jù)。typeID取值范圍為[0, 3]，相對應(yīng)的底版模型數(shù)據(jù)類型分別為二維矢量、柵格、視頻數(shù)據(jù)和三維圖形數(shù)據(jù)?？梢暬K端數(shù)據(jù)包括可視化終端顯示器的分辨率以及可視化終端與移動端的平均距離等。分辨率決定可視化展示時(shí)三維投影的參數(shù)，可視化終端與移動端的平均距離決定了擦除動畫繪制的LOD級別。

擦除模板要素主要指的是擦除模板的形狀要素，包含模板形狀邊界要素和模板形狀面積要素。二者由輸入的包含擦除形狀信息的圖像數(shù)據(jù)和擦除次數(shù)共同決定。移動端要素主要指的是在移動端通過注冊等形式獲取到參與權(quán)限的每位參與用戶信息，即用戶的ID信息，用來實(shí)現(xiàn)參與權(quán)限管理及區(qū)分互動中每位參與者的不同參與次數(shù)。

2.2.2 擦除模板制作

擦除模板制作是將包含擦除形狀信息的圖像數(shù)據(jù)經(jīng)處理制作成具有一定格式的矢量數(shù)據(jù)，并根據(jù)擦除次數(shù)、可視化終端尺寸等做仿射變換處理后得到。其目的是為了減少蒙版擦除動畫過程中擦除形狀的計(jì)算量。擦除模板制作可以大致分為形狀提取和模板制作。

(1) 形狀提取。將用戶需求的形狀信息從包含該信息的圖像中剝離出來，另存為一張前景和背景邊界清晰，并且不包含任何噪聲的圖像。之所以進(jìn)行本步驟的處理，是因?yàn)橛脩艚o出的具有其需求形狀的圖像中噪聲較多，并且前景和背景之間的邊界模糊，后續(xù)很難便捷快速的從該圖像中獲取其需求形狀的信息。形狀提取過程如圖3所示，主要包括：

①需要導(dǎo)入包含用戶需求形狀信息(圖3最左側(cè)圖像中紅色像素值組成的3個(gè)連通區(qū)域)的圖像。本文方法中，用戶需求形狀可以由任意凸多邊形或者凹多邊形構(gòu)成，可以是任意單連通或多連通區(qū)域。對輸入圖像的基本要求：圖像中用戶需求形狀信息(即前景)特征較清晰；前景和背景之間有較為清晰的邊界(肉眼可識別)；圖像在需求形狀肉眼可識別的前提下，可以包含各種噪聲。

②對圖像進(jìn)行摳圖處理以獲取圖像中用戶需要的形狀邊界，可以采用簡單快速的Knockout方法等，也可以使用具備摳圖功能的圖像處理軟件。如圖3中間圖所示，綠色線條為摳取獲得的形狀邊界，綠色線條圍成的3個(gè)封閉區(qū)域即為用戶需求形狀信息。

③根據(jù)摳取獲得的邊界信息，得到一張包含形狀信息且前景背景區(qū)分明顯、不包含任何噪聲的灰度圖，如圖3最右側(cè)圖所示)。

圖3 形狀提取過程示意圖

(2) 模板制作過程如圖4所示，主要包括形狀數(shù)據(jù)矢量標(biāo)準(zhǔn)化和仿射變換。

形狀數(shù)據(jù)矢量標(biāo)準(zhǔn)化的過程采用的是多邊形掃描轉(zhuǎn)換算法的思想實(shí)現(xiàn)。通過對柵格數(shù)據(jù)逐行求交、排序和配對得到采用二維坐標(biāo)序列表示的形狀邊界矢量數(shù)據(jù)集。為了提高后續(xù)數(shù)據(jù)處理的效率，本文將上述矢量數(shù)據(jù)集進(jìn)一步做了矩陣標(biāo)準(zhǔn)化處理。

圖4 模板制作過程示意圖

作仿射變換處理是考慮到上述標(biāo)準(zhǔn)化后的矢量數(shù)據(jù)用于蒙版動畫繪制時(shí)存在一些問題：①相對于蒙版而言，形狀圖形過大，需要進(jìn)行縮放后才能將形狀繪制至蒙版上；②相對于蒙版而言，形狀邊界坐標(biāo)值過大，需要經(jīng)過平移后才能將形狀繪制至蒙版上。為此需要對標(biāo)準(zhǔn)化的數(shù)據(jù)進(jìn)行仿射變換處理，通過對矢量數(shù)據(jù)做縮放和平移等仿射變換來避免上述2種情況的產(chǎn)生。縮放系數(shù)由初始化的擦除次數(shù)、模板形狀面積以及蒙版尺寸共同決定，平移量由形狀數(shù)據(jù)坐標(biāo)的平均值決定。

3 交互式蒙版擦除動畫實(shí)現(xiàn)

以個(gè)性化定制結(jié)果為初始數(shù)據(jù)實(shí)現(xiàn)的交互式蒙版擦除動畫，主要包括移動端交互、蒙版擦除動畫可視化以及交互式數(shù)據(jù)查詢編輯3部分。

3.1 移動端交互

在移動端注冊獲得參與權(quán)限后，用戶每次有效甩動都會在可視化終端擦除出第2節(jié)擦除模板形狀的底版信息，實(shí)現(xiàn)蒙版擦除動畫，從而完成和可視化終端的一次交互。交互過程如圖5所示。用戶執(zhí)行甩動操作后，首先進(jìn)行甩動的有效性判斷，若當(dāng)前次甩動為有效甩動，則將甩動幅度(即位移量)和甩動角度存入數(shù)據(jù)庫，可視化終端實(shí)時(shí)讀取數(shù)據(jù)庫信息，響應(yīng)該次甩動，根據(jù)第2節(jié)的擦除模板作蒙版擦除動畫展示，當(dāng)前次擦除形狀大小和旋轉(zhuǎn)角度由甩動幅度和甩動角度決定。

圖5 移動端和可視化終端交互過程示意圖

其中有效甩動定義為：

(1) 同一用戶，2次有效甩動之間的時(shí)間間隔不小于周期閾值deltaT，本文deltaT取值為0.1 s；

(2) 甩動速度不小于速度閾值v_ threshold，本文中v_ threshold的取值為2 m/s。

移動端捕獲一次有效甩動的偽代碼為：

diffTime=curTime-lastTime

if (diffTime>=deltaT)

if (dis/diffTime>=v_threshold)

=getRotaAng(x-last_x, z-last_z)

addMSG(dis,)

lastTime = curTime

end if

last_x=

last_y=

last_z=

end if

其中，curTime為當(dāng)前時(shí)間；lastTime為上次有效甩動開始的時(shí)刻；(,,)以及(last_x, last_y, last_z)分別為當(dāng)前手機(jī)重心坐標(biāo)和上一時(shí)刻重心坐標(biāo)，該坐標(biāo)所在坐標(biāo)系信息為：

(1) 坐標(biāo)原點(diǎn)為可視化終端屏幕中心點(diǎn)；

(2)軸方向和軸方向分別平行于屏幕的水平方向和垂直方向；

(3)軸、軸和軸組成的坐標(biāo)系滿足右手法則。

dis為當(dāng)前甩動在面上投影的位移量，用來表示甩動的幅度，getRotaAng()方法返回二維向量的角度值，即為向量(-last_x，-last_z)的角度值。addMSG()方法將當(dāng)前有效甩動信息(包括在面上的甩動幅度和甩動角度)傳入數(shù)據(jù)庫。

3.2 蒙版擦除動畫可視化

蒙版擦除動畫可視化即如何響應(yīng)當(dāng)前甩動，并在蒙版上擦除出模板形狀的底版數(shù)據(jù)。直觀上需要分別繪制擦除形狀區(qū)域內(nèi)的底版數(shù)據(jù)(如圖6所示區(qū)域) 以及其他區(qū)域的蒙版紋理(如圖6所示區(qū)域)，由于底版數(shù)據(jù)可能是三維的，造成這種直觀的繪制方法繁瑣且耗時(shí)。

圖6 直觀形狀繪制示意圖

受圖像摳圖技術(shù)[17]以及現(xiàn)有三維仿真引擎中采用shader實(shí)現(xiàn)蒙版擦除工作的啟發(fā)，本文采用三維空間正射投影分圖層繪制的方式實(shí)現(xiàn)形狀繪制。即在正射投影構(gòu)成的三維空間中，沿觀察者視線方向上，先繪制底版信息，然后在其正前方繪制蒙版圖像，蒙版繪制中，已被擦除區(qū)域的alpha通道設(shè)置為0，即完全透明，其它區(qū)域的alpha通道設(shè)置為1，即完全不透明(圖7)。其中，已被擦除區(qū)域即為當(dāng)前時(shí)刻位置，所有用戶在蒙版擦上所有擦除形狀的集合。

圖7 本文中形狀繪制示意圖

For (=1;<=;++)

For (=1;<=n;=+)

End

End

End

其中，dis為當(dāng)前擦除對應(yīng)用戶移動端甩動幅度，根據(jù)4.1節(jié)計(jì)算得到；thre_dis為幅度閾值，本文中thre_dis=0.2 m；LOD為正整數(shù)，由可視化終端和移動終端的距離決定；θ為當(dāng)前擦除旋轉(zhuǎn)角度，根據(jù)3.1節(jié)計(jì)算得到；為了提高旋轉(zhuǎn)變換的計(jì)算效率，cos和sin分別為cos(θ)和sin(θ)一階泰勒展開；(x,jy,j) (∈[1,]，∈[1,2s])為擦除模板形狀邊界；P_Rect(1,1,2,2,3,3,4,4)表示由坐標(biāo)(1,1)，(2,2)，(3,3)，(4,4)圍成的多邊形的點(diǎn)的集合。

3.3 交互式數(shù)據(jù)查詢編輯

交互式數(shù)據(jù)查詢編輯指的是用戶可以在后臺數(shù)據(jù)管理端實(shí)時(shí)查詢編輯底版、蒙版、擦除模板、擦除次數(shù)、擦除音效以及移動端參與用戶權(quán)限等數(shù)據(jù)。

底版蒙版的編輯主要是指更改底版蒙版數(shù)據(jù)，可以將二維的底版數(shù)據(jù)改為三維的底版數(shù)據(jù)，也可以將柵格的底版數(shù)據(jù)改為矢量的底版數(shù)據(jù)，可視化終端實(shí)時(shí)響應(yīng)編輯修改的數(shù)據(jù)。

用戶可以通過更改擦除模板數(shù)據(jù)實(shí)現(xiàn)擦除形狀的改變，若用戶選擇系統(tǒng)自帶的擦除模板，則可視化終端實(shí)時(shí)響應(yīng)編輯修改后的數(shù)據(jù)，若用戶選擇自定義的擦除形狀，需要重新進(jìn)行擦除模板制作流程。

擦除次數(shù)的編輯修改直接影響擦除模板大小的縮放系數(shù)。假設(shè)擦除模板形狀原始面積為，蒙版面積為，擦除次數(shù)為，則擦除模板的縮放系數(shù)為/(×)。

擦除音效的編輯是更改擦除音效，擦除音效更改后，移動端再次甩動時(shí)，可視化終端對應(yīng)擦除動畫音效為更改后的音效。

移動端參與用戶權(quán)限編輯是指對移動端用戶是否可以繼續(xù)參與蒙版擦除動畫互動做修改，不具備參與權(quán)限的用戶，其在移動端的甩動無法在可視化終端作擦除動畫展示。

4 系統(tǒng)實(shí)現(xiàn)及應(yīng)用

本文實(shí)現(xiàn)了基于個(gè)性化定制的蒙版擦除動畫系統(tǒng)，系統(tǒng)包括移動端、數(shù)據(jù)管理端和可視化終端3個(gè)模塊(圖8)。移動端甩動信息存入數(shù)據(jù)管理端，可視化終端從數(shù)據(jù)管理端獲取數(shù)據(jù)作實(shí)時(shí)動畫展示。數(shù)據(jù)管理端不僅負(fù)責(zé)所有數(shù)據(jù)的初始化及編輯修改，還控制移動端權(quán)限的開通和關(guān)閉等。

圖8 個(gè)性化定制的蒙版擦除動畫系統(tǒng)三模塊關(guān)系示意圖

4.1 應(yīng)用實(shí)例

移動端用戶通過注冊獲取參與權(quán)限，注冊頁面如圖9所示，只需要填寫簡單的姓名和手機(jī)號，即可完成注冊。

圖9 移動端用戶注冊示意圖

數(shù)據(jù)管理端進(jìn)行數(shù)據(jù)編輯。首先可以進(jìn)行擦除形狀的編輯，圖10為不同形狀對應(yīng)可視化擦除效果；其次可以進(jìn)行擦除次數(shù)的編輯，圖11(a)圖為數(shù)據(jù)管理端擦除次數(shù)設(shè)置界面圖，圖11(b)和(c)分別為擦除次數(shù)等于500和1 000時(shí)對應(yīng)的可視化終端擦除效果截圖?？梢钥闯?，擦除次數(shù)多的，對應(yīng)的擦除形狀較小。此外，擦除形狀不僅和擦除次數(shù)相關(guān)，還和移動端用戶的甩動幅度有關(guān)，甩動幅度越大，相應(yīng)的擦除形狀也越大。

本系統(tǒng)還可以進(jìn)行諸如底版蒙版數(shù)據(jù)的編輯修改，圖12為不同底版數(shù)據(jù)和蒙版數(shù)據(jù)對應(yīng)的可視化終端單次擦除效果截圖。

(a) 界面圖

(b) 擦除次數(shù)500

(c) 擦除次數(shù)1 000 圖11 數(shù)據(jù)管理端設(shè)置擦除次數(shù)及不同擦除次數(shù)對應(yīng)截圖

圖12 不同底版和蒙版可視化終端擦除效果圖

可視化終端響應(yīng)移動端的有效甩動，并根據(jù)甩動幅度和角度做等信息動畫展示。圖13上圖和中間圖為首次有效甩動時(shí)，不同甩動角度對應(yīng)的可視化終端擦除效果截圖，下圖為多次甩動后對應(yīng)的可視化終端擦除效果截圖。

圖13 不同甩動角度和不同甩動次數(shù)對應(yīng)可視化終端效果截圖

4.2 動畫繪制效率測試

為驗(yàn)證本文方法的有效性，對系統(tǒng)計(jì)算效率進(jìn)行了測試，可視化端測試環(huán)境為：Intel(R) Core 8 Xeon(TM) i7-4790 CPU @3.60 GHz and 4.0 GB RAM。測試采用的形狀邊界頂點(diǎn)個(gè)數(shù)為1 192個(gè)。

首先在學(xué)院某次新生見面會現(xiàn)場進(jìn)行了公測，現(xiàn)場1 500人左右，學(xué)生通過手中各類品牌的手機(jī)注冊參與蒙版擦除互動活動。數(shù)據(jù)管理端捕獲到學(xué)生實(shí)時(shí)(50 ms時(shí)長內(nèi))甩動峰值為620次，可視化終端可以實(shí)現(xiàn)在該時(shí)段內(nèi)620次甩動的實(shí)時(shí)擦除計(jì)算和繪制顯示。

為了進(jìn)一步驗(yàn)證本文方法的計(jì)算效率，模擬了不同用戶人數(shù)下的計(jì)算時(shí)間。模擬中假設(shè)用戶在移動端的甩動信息可以實(shí)時(shí)傳到數(shù)據(jù)管理端，即通過自動寫入擦除次數(shù)來測試任意甩動次數(shù)下的情況。

測試結(jié)果如圖14所示?？梢钥闯?，對于上述形狀，本文方法可以實(shí)時(shí)繪制約2 000左右擦除形狀。

圖14 形狀繪制繪制次數(shù)和時(shí)間的關(guān)系

圖14的結(jié)果忽略了用戶甩動數(shù)據(jù)的識別與傳輸?shù)扔?jì)算時(shí)間。事實(shí)上，這些計(jì)算只是一些簡單的判斷和數(shù)據(jù)上傳，只要網(wǎng)絡(luò)暢通，需要的時(shí)間和動畫繪制相比，是微不足道的。

5 結(jié) 論

本文給出了一種基于個(gè)性化定制的交互式蒙版擦除動畫實(shí)現(xiàn)方法。首先依據(jù)蒙版擦除動畫實(shí)現(xiàn)流程，對蒙版擦除所需的初始化數(shù)據(jù)進(jìn)行了個(gè)性化定制方案建模，實(shí)現(xiàn)了對初始數(shù)據(jù)的歸納、定義以及預(yù)處理；然后，基于上述個(gè)性化定制結(jié)果，實(shí)現(xiàn)了“移動端甩動—可視化終端蒙版擦除—后臺數(shù)據(jù)查詢編輯”的交互式蒙版擦除動畫；最后，對本文方法進(jìn)行了系統(tǒng)實(shí)現(xiàn)和應(yīng)用，證明本文方法可以支持不同底版、蒙版數(shù)據(jù)、擦除形狀等的定制，并且可以實(shí)現(xiàn)任意位置、任意大小、任意旋轉(zhuǎn)角度的形狀擦除。效率測試結(jié)果證明，本文方法可以實(shí)現(xiàn)移動端約2 000次甩動的實(shí)時(shí)同步擦除動畫。

參考文獻(xiàn)

[1] WANG J, AGRAWALA M, COHEN M F. Soft scissors: An interactive tool for realtime high quality matting [J]. ACM Transactions on Graphics, 2007, 26(3): 1-9.

[2] 姚桂林, 姚鴻勛. 基于仿射方法的圖像摳圖算法綜述[J]. 計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào), 2016, 28(4): 677-692.

[3] 沈洋, 林曉, 謝志峰, 等. 交互式前景摳圖技術(shù)綜述[J]. 計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào), 2014, 26(4): 511-519.

[4] 林生佑, 潘瑞芳, 杜輝, 等. 數(shù)字摳圖技術(shù)綜述[J]. 計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào), 2007, 19(4): 473-479.

[5] Unity Technologies. Unity3D [EB/OL]. [2018-05-10]. https://docs.unity3d.com/.

[6] Epic Games, Inc. UE4. [EB/OL]. [2018-05-15]. https://docs.unrealengine.com/.

[7] BERMAN A, DARDOURIAN A, VLAHOS P. Comprehensive method for removing from an image the background surrounding a selected object: US, 6134346 [P]. 2000-10-17.

[8] HE K M, RHEMANN C, ROTHER C, et al. A global sampling method for alpha matting [C]//Proceedings of 2011 IEEE Conference on Computer Vision and Pattern Recognition. Washington, DC: IEEE Computer Society Press, 2011: 2049-2056.

[9] SHAHRIAN E, RAJAN D. Weighted color and texture sample selection for image matting [C]//2012 IEEE Conference on Computer Vision and Pattern Recognition. New York: IEEE Press, 2012: 718-726.

[10] CHEN Q F, LI D, TANG C K. KNN matting [J]. IEEE Transactions on Pattern Analysis and Machine Intelligence, 2013, 35(9): 2175-2188.

[11] WANG J. Image matting with transductive inference [C]// Proceeding of the 5th International Conference on Computer Vision/Computer Graphics Collaboration Techniques. Heidelberg: Springer, 2011: 239-250.

[12] CHEN X W, ZOU D Q, ZHOU S Z, et al. Image matting with local and nonlocal smooth priors [C]//2013 IEEE Conference on Computer Vision and Pattern Recognition. New York: IEEE Press, 2013: 1902-1907.

[13] WANG J, COHEN M F. Optimized color sampling for robust matting [C]//2007 IEEE Conference on Computer Vision and Pattern Recognition, New York: IEEE Press, 2007: 1-8.

[14] HE B, WANG G J, RUAN Z W, et al. Local matting based on sample-pair propagation and iterative refinement [C]//2012 19th IEEE International Conference on Image Processing, New York: IEEE Press, 2012: 285-288.

[15] BAI X, SAPIRO G. Geodesic matting: A framework for fast interactive image and video segmentation and matting [J]. International Journal of Computer Vision, 2009, 82(2): 113-132.

[16] CRIMINISI A, SHARP T, ROTHER C, et al. Geodesic image and video editing [J]. ACM Transactions on Graphics, 2010, 29(5): 1-15.

[17] 姚桂林, 劉紹輝, 李敏, 等. 后處理在數(shù)字摳像中的應(yīng)用與解析[J]. 電子學(xué)報(bào), 2017, 45(3): 719-729.

Design and Implementation of Interactive Mask Erasing Animation Based on Personalized Customization

WANG Hua1, LI Shen-shen1, HE Xiao-yu1, ZHU Fu-bao1, YAO Ni1, XU Ming-liang2

(1. School of Computer and Communication Engineering , Zhengzhou University of Light Industry, Zhengzhou Henan 450001, China; 2. School of Information Engineering, Zhengzhou University, Zhengzhou Henan 450001, China)

Abstract: With the rapid development of virtual reality and mobile internet technologies, many businesses hope to achieve an interactive mask erasing animation through the mobile terminal. However, there are problems with personalized real-time customizations, interactivity and so on. Therefore, we introduce an interactive mask erasing animation method based on personalized customization. Our method includes personalized customization module and interactive mask erasing animation visualization module. The personalized customization module initializes and processes customized data. The interactive mask erasing animation visualization model performs the four tasks of mobile terminal shaking - visual terminal mask erasing - the background data querying and editing. We built a prototype system to test the above method. Simulation results show that it can realize the real-time synchronous erasing dynamic visualization for 2 000 times shaking at mobile terminals.

Keywords: personalized customization; mobile terminals; interactive; mask erasing animation

中圖分類號：TP 391

DOI：10.11996/JG.j.2095-302X.2019030473

文獻(xiàn)標(biāo)識碼：A

文章編號：2095-302X(2019)03-0473-08

收稿日期：2018-11-16；

定稿日期：2018-11-26

基金項(xiàng)目：國家自然科學(xué)基金項(xiàng)目(61602425，61472370，61602421，61672469，61602420，61502433)；鄭州輕工業(yè)學(xué)院博士基金項(xiàng)目(2015BSJJ007)；河南省科技攻關(guān)項(xiàng)目(182102311071)；鄭州輕工業(yè)學(xué)院研究生科技創(chuàng)新基金項(xiàng)目

第一作者：王 華(1982-)，女，河南新鄉(xiāng)人，講師，博士，碩士生導(dǎo)師。主要研究方向?yàn)樘摂M現(xiàn)實(shí)。E-mail：wanghua@zzuli.edu.cn

通信作者：徐明亮(1981-)，男，河南信陽人，教授，博士。主要研究方向?yàn)槿斯ぶ悄?、虛擬現(xiàn)實(shí)。E-mail：iexumingliang@zzu.edu.cn