基于計算機虛擬交互的現(xiàn)代數(shù)字繪畫技術(shù)研究

吳婭妮, 王玉

(1.西安歐亞學院,艾德藝術(shù)設(shè)計學院,陜西,西安 710065;2.西安機電信息技術(shù)研究所,陜西,西安 710065)

0 引言

計算機技術(shù)與互聯(lián)網(wǎng)技術(shù)支持下的數(shù)字繪畫屬于新興交叉學科,為傳統(tǒng)手繪增添了新元素,以動態(tài)數(shù)字化表現(xiàn)形式、虛擬交互特性重新展現(xiàn)了繪畫的魅力,在動漫設(shè)計、影視特效制作、3D游戲開發(fā)等領(lǐng)域被廣泛運用[1],為當代社會經(jīng)濟發(fā)展創(chuàng)造了不可替代的價值。本研究立足于數(shù)字繪畫的線條優(yōu)化與圖形渲染角度,在直線曲線識別方面采用了梯度方向差分法與LSD算法相結(jié)合的直線檢測方式,以“梯度”這一像素參數(shù)為依據(jù)精確地提取線條直線特征,對于識別出的直線設(shè)置較大的光滑度值,對于曲線基于最小二乘法進行擬合并計算設(shè)置準確的光滑度值。在數(shù)字繪畫圖形渲染方面使用Web GL繪圖標準,Web GL直接調(diào)用計算機圖形處理器,對CPU依賴程度低,在釋放了計算機負擔的同時提升其運行速度,從而降低數(shù)字繪畫方法的整體時間復(fù)雜度。最后,在測試環(huán)節(jié)驗證本文方法在數(shù)字繪畫中的性能優(yōu)勢。

1 計算機虛擬交互下數(shù)字繪畫線條優(yōu)化與圖形渲染研究

1.1 數(shù)字繪畫的虛擬線條識別與優(yōu)化

基于直線檢測算法判斷設(shè)計者輸入的線條是否為直線:如果檢測結(jié)果為直線,則設(shè)置較大的光滑度值[2];如果檢測結(jié)果為曲線,則利用最小二乘法擬合曲線,并獲得精準的曲線參數(shù)計算光滑度,優(yōu)化曲線弧度。

(1) 基于梯度方向差分與LSD算法的直線線條檢測

基于投票策略提取線條中的直線特征[3],將輸入線條劃分為八鄰域,梯度方向差分的對象即為分組后的像素點。已知(x,y)為輸入線條上的一個像素點,該點的梯度向量為▽f(x,y),用α(x,y)描述該像素點灰度增長最快速的方向,即梯度方向[4]。直線線條像素點的梯度方向基本一致,因為像素點邊緣方向與梯度方向為垂直關(guān)系,可以通過梯度方向這一信息找到不是直線邊緣的信息完成直線線條的定位[5]。不足的是,梯度方向精度不理想會導(dǎo)致直線確定不精準,ε1表示梯度方向誤差,相同直線線條內(nèi)的像素點梯度方向的最大差值較大為2ε1。針對誤差較大的情況需對梯度方向進行差分。

定義Q{xi,yi}表示隨機的數(shù)字繪畫線條,i表示線條分組中像素點的編號,取值為1,2,3,…,m,最大像素數(shù)量為m。由此得到相鄰2個像素點的梯度方向差分,如式(1):

Δαi=α(xi+1,yi+1)-α(xi,yi)

(1)

式中,i取值為1,2,3,…,m-1。

假設(shè)λβ表示差分閾值,計算得到邊緣組,λmax表示累計的閾值,基于以下步驟執(zhí)行直線線條檢測算法:還原累加器數(shù)值為0;以分組后的線條為基礎(chǔ),求取線條分組Qn,計算邊緣分組中相鄰像素點梯度方向差分Δβi;并且將梯度方向轉(zhuǎn)化至無符號區(qū)域,梯度方向如式(2):

(2)

對比Δβi與λβ,當前者小于后者時,在累加器中加1。當各分組中線條累加器值不小于累計閾值上限時,表明此線條分組存在直線;如果是相反的情況,則表明此線條分組中不包含直線特征,歸零線條分組的像素點。

基于LSD算法精確提取直線線條[6],求取像素水平方向與垂直方向的計算方法如下:

(3)

(4)

以劃分梯度值為1024個等級為目標對梯度值進行升序排序,以最大梯度值點為基準向下搜索遍歷。線條中梯度較小值不參與后續(xù)直線檢測。定義以1個種子節(jié)點像素開始區(qū)域性搜索,擴展出1個像素,該像素被標記為已使用狀態(tài),獲得直線線條區(qū)域時終止擴散[7]。

(2) 最小二乘法擬合曲線

基于最小二乘法對曲線輪廓中數(shù)量不低于6個的擬合點進行橢圓擬合,如式(5):

ax2+bxy+cy2+dx+ey+f=0

(5)

(xi,yi)表示提取的曲線輪廓點,構(gòu)建{xi,yi}和期望橢圓曲線的函數(shù)F(a,b,c,d,e,f)表示代數(shù)距離,但是擬合的輪廓容易變?yōu)殡p曲線或者拋物線,為避免這種情況,使用表達式4ac-b2=1對函數(shù)進行約束,以獲取正規(guī)的橢圓曲線擬合結(jié)果。

基于最小二乘法擬合曲線后,獲得輸入曲線線條的橢圓長半軸h1與短半軸h2,據(jù)此計算輸入繪畫線條光滑系數(shù)[8],如式(6):

(6)

式中,橢圓長軸與短軸的比率為h1/h2,曲線線條的光滑度與比率值成正比,較大光滑度呈現(xiàn)的線條彎度較小,m、t分別表示數(shù)字繪畫界面已經(jīng)存在的線條數(shù)量、用戶輸入的手繪線條數(shù)量,γ和θ表示平衡系數(shù),通過自定義來平衡手繪線條在當前繪畫中的作用。設(shè)置光滑度后,曲線與用戶意圖相近,直線與曲線連接形成完整的數(shù)字繪畫圖形。

1.2 基于Web GL的跨平臺圖形可視化渲染

使用Web GL技術(shù)作為繪圖標準,構(gòu)建HTML 5與Web GL的交互前端[9],在不安裝插件的前提下借助系統(tǒng)顯卡在瀏覽器界面展示三維場景信息與三維模型[10]。

基于Three.js類庫對繪制的圖形進行三維信息渲染:首先,定義類庫渲染器與攝像機,設(shè)置畫布規(guī)格,導(dǎo)入渲染對象、三維元素追加等信息;其次,定義一個場景構(gòu)建圖形渲染的三維空間,為數(shù)字繪圖渲染創(chuàng)造空間;最后,設(shè)置光源信息,如平行光、光源追加至場景等內(nèi)容。

基于圖1步驟對數(shù)字繪畫進行虛擬可視化處理,首先創(chuàng)建一個三維渲染場景空間,同時對用戶通過數(shù)位板輸入的線條進行識別。基于梯度方向差分算法檢測到線條中的直線特征,識別線條曲線特征,基于最小二乘法擬合曲線計算曲線光滑系數(shù),作為參數(shù)對用戶輸入的繪畫曲線進行平滑優(yōu)化。其次,基于Web GL圖像標準執(zhí)行圖形渲染指令,實現(xiàn)三維場景中圖像的數(shù)字化創(chuàng)作。

圖1 數(shù)字繪畫圖形的虛擬可視化處理

2 測試與分析

構(gòu)建計算機虛擬交互的數(shù)字繪畫測試環(huán)境,將WACOM CTL-472數(shù)位板連接至計算機,創(chuàng)建交互式繪圖環(huán)境,使用PTH660型號數(shù)位筆進行繪圖控制。計算機硬件為 Intel(R)Core(TM) i7-7700U@3.6 GHz,RAM 8 GB。使用Web GL技術(shù)作為繪圖標準,構(gòu)建HTML 5與Web GL的交互前端,準備Three.js封裝完成的接口,Photoshop繪圖軟件,由此數(shù)字繪畫場景基本搭建完成。直線檢測算法累計的閾值定義為65,差分閾值設(shè)置為0.07。實驗選取5名用戶作為線條輸入的執(zhí)行者,以獲得多樣且豐富的線條樣本。

另外,為突出本文數(shù)字繪畫方法的優(yōu)越性,將基于Hough算法的數(shù)字繪畫方法(方法1)、基于邊緣提取的數(shù)字繪畫方法(方法2)與本文方法進行比較,測試條件、環(huán)境、對象與本文方法一致。

2.1 數(shù)字繪畫線條優(yōu)化性能分析

圖2為數(shù)字繪畫輸入前與本文優(yōu)化后的線條對比結(jié)果。

(a) 原始輸入線條

由圖2可知,用戶直接輸入的線條雖然具有一定的弧度,但是線條細節(jié)之處存在細小的鋸齒與波動,曲線的平滑度較差,尤其是下方曲線中下弧度與上弧度過渡區(qū)域較為生硬。經(jīng)過本文方法識別優(yōu)化后的繪畫曲線明顯變得平滑,鋸齒基本消失,上下弧度連接處較為自然,也能夠表達出用戶想要呈現(xiàn)的曲線趨勢。

選取5名用戶在計算機界面中分別輸入100條曲線線條,長度越長線條彎曲度越復(fù)雜。統(tǒng)計各方法處理曲線的平均時間開銷如表1所示。

表1 各方法處理曲線線條的時間開銷 單位:s

由表1數(shù)據(jù)可知,本文方法處理不同長度的曲線線條的用時基本一致,時間復(fù)雜度沒有隨著線條彎曲度與復(fù)雜度的提升而顯著增加,并且時間開銷均值最低。相比之下,方法1時間復(fù)雜度較高,每個線條的用時更加趨近于1 s,方法2效率次之。

2.2 圖形可視化渲染的資源占用量分析

為明確各方法在數(shù)字繪畫渲染中對GPU(計算機圖形處理器)和CPU(計算機中央處理器)的占用情況,以100幅待渲染的數(shù)字繪畫手繪稿作為對象進行三維渲染。100幅手繪稿包括動物圖像、植物葉片圖像、書籍圖像、卡通人臉圖像各25幅,考察數(shù)字繪圖方法的光線、紋理、場景方面的渲染能力。3種數(shù)字繪畫方法渲染過程中計算機GPU和CPU的占用情況如圖3、圖4所示。

圖3 GPU占用量

圖4 CPU占用量

結(jié)合圖3、圖4可知,本文方法渲染數(shù)字繪圖的GPU占用量較為平穩(wěn),前期渲染圖形時GPU用量緩慢上升、中后期GPU趨于平穩(wěn),同時CPU占用量相比對比方法顯著降低,中后期本文方法CPU占用量保持在15%～20%。另2種方法對計算機圖形處理器占用量沒有顯著減少,并且保持較高的計算機中央處理器資源占用量。這是因為本文方法將Web GL技術(shù)作為繪圖標準,構(gòu)建HTML 5與Web GL的交互前端,Web GL具有直接調(diào)用計算機GPU的權(quán)限,較少依賴計算機中央處理器而展開圖形渲染處理,只開展一部分原本CPU工作,較大程度減少了CPU負擔,數(shù)字繪圖處理效率顯著提升。2種對比方法基于傳統(tǒng) B/S 模式進行圖像圖形處理,必須安裝對應(yīng)插件或軟件才能實現(xiàn)跨平臺使用,約束性較大、靈活性較差,而本文方法的跨平臺使用特性得到凸顯。

3 總結(jié)

為基于計算機平臺更加高效、精準、低負擔的實現(xiàn)數(shù)字繪畫,提升用戶創(chuàng)作體驗感,本文提出了一種新的數(shù)字繪畫線條優(yōu)化與圖形渲染方案。一方面,利用梯度方向差分與LSD直線檢測法分兩步驟精確提取用戶輸入的線條特征,判斷其為直線或是曲線分別賦予不同數(shù)值的光滑度,實現(xiàn)繪畫線條光滑度的優(yōu)化。另一方面,在Web GL交互前端支撐下進行圖形渲染,減少了繪畫過程對計算機中央處理器的負擔,同時降低了時間復(fù)雜度。此方法最終實現(xiàn)了快速、簡便地個性化繪圖創(chuàng)作效果。