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

吳婭妮, 王玉

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

0 引言

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

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

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

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

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

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

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

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

(1)

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

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

(2)

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

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

(3)

(4)

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

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

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

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

(5)

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

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

(6)

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

1.2 基于Web GL的跨平臺(tái)圖形可視化渲染

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

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

基于圖1步驟對(duì)數(shù)字繪畫進(jìn)行虛擬可視化處理,首先創(chuàng)建一個(gè)三維渲染場(chǎng)景空間,同時(shí)對(duì)用戶通過(guò)數(shù)位板輸入的線條進(jìn)行識(shí)別?；谔荻确较虿罘炙惴z測(cè)到線條中的直線特征,識(shí)別線條曲線特征,基于最小二乘法擬合曲線計(jì)算曲線光滑系數(shù),作為參數(shù)對(duì)用戶輸入的繪畫曲線進(jìn)行平滑優(yōu)化。其次,基于Web GL圖像標(biāo)準(zhǔn)執(zhí)行圖形渲染指令,實(shí)現(xiàn)三維場(chǎng)景中圖像的數(shù)字化創(chuàng)作。

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

2 測(cè)試與分析

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

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

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

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

(a) 原始輸入線條

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

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

表1 各方法處理曲線線條的時(shí)間開(kāi)銷 單位:s

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

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

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

圖3 GPU占用量

圖4 CPU占用量

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

3 總結(jié)

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