GPU上的水彩畫風格實時渲染及動畫繪制

王妙一1, 2, 3, 4， 王 斌1, 3 , 4， 雍俊海1, 3, 4

（1. 清華大學軟件學院，北京 100084；2. 清華大學計算機科學與技術系，北京 100084；3. 信息系統安全教育部重點實驗室，北京 100084；4. 清華信息科學與技術國家實驗室，北京 100084）

水彩作為一種藝術形式被廣泛應用于美術、時尚、海報、建筑草圖的繪制等領域，歷史悠久，由于其出色的藝術表現力，受到人們的青睞。然而，使用水彩畫風格制作的動畫數量卻非常少，主要原因是水彩畫的繪制過程復雜，技法變化多，連續兩幅畫面差異較大，動畫制作成本高昂，費時費力。

在非真實感渲染的研究領域里，如何平衡算法的效率與效果，模擬已有的或者創造新的藝術風格，是研究學者們努力的目標。

水彩畫風格渲染的處理方式主要分為兩類：一類是基于物理原理的模擬，另一類是基于經驗主義的圖像特征提取，以及再現（圖像濾鏡）。第1類方法的特點是繪制過程以筆劃為單位，模擬真實的繪畫過程，效果非常好，但缺點是非常耗時；第2類方法的特點是更加快速，適合交互，但繪制效果不如前者逼真。

從制作動畫的角度考慮：使用第1類方法只能進行離線渲染；使用第2類方法速度較快，控制靈活，有希望達到實時渲染的速度，進而可以加入互動環節，將其應用到游戲領域。

怎樣能既擁有實時的渲染速度，又獲得較好的渲染效果，是一個值得研究的問題。

1 相關工作

在非真實感渲染領域，對水彩模擬的相關研究已有十余年的歷史，其中，Curtis等[1]最早提出的水彩風格渲染方法是第1類方法的代表。他們將畫布分為3層：Shallow Water Layer（紙面上一層具有流動能力的水），Pigment Layer（沉積到紙張表面的顏料層），Capillary Layer（紙表面之下可以吸水的一層），通過模擬顏料和水在紙上發生的物理變化過程來實現水彩的模擬，屬于基于物理原理的類型，用戶只要輸入顏料畫在白紙和黑紙上分別呈現的顏色就可以進行繪制，也可以通過類似的手段對二維圖像進行風格化處理，效果十分逼真，但是計算代價高昂。

Laerhoven的方法[2]和Curtis的基本相同，但是他將畫布橫向切割為若干塊，通過分布式計算達到了實時的性能。在算法的本質上是沒有改進的。

Lei和 Chang的方法[3]是出現比較早的屬于圖像濾鏡類的水彩風格化方法。他們使用 Sobel濾波來實現邊緣加深和粗糙的效果，在物體的顏色渲染上，選擇了庫伯卡-芒克模型，通過使用頂點著色器和像素著色器達到實時的性能。然而，邊緣加深的效果比較不自然，產生了類似描邊的效果。物體本身的顏色過渡也太過平滑，感覺和水彩的繪制風格差距過大，這個問題在其他人的一些研究成果中也出現過。

Bousseau等[4]提出了一個比較完善的處理二維圖像和三維模型水彩風格化的方案。他將風格化分為多種可選的效果，用戶根據自己的需要進行選擇，并可以看到實時渲染結果。為了更加直觀地模擬水彩，Bousseau的方法沒有采用庫伯卡-芒克模型。雖然使用該方法的渲染速度可以達到實時，但是得到的渲染結果略顯生硬。在水彩化的過程上，本文使用和它類似的方法。

Luft等在水彩模擬上已有數年的研究，發表了多篇文章[5-7]。他們的實現方法屬于圖像濾鏡這一類型，即對圖像或者三維數據進行抽象、再現。以往，他們將研究重點放在渲染的實時性上，如樹林的抽象渲染[6]，以及植物模型的實時渲染[7]，雖然通過人工指定ID的方法對渲染對象進行分類分層再進行后續處理的方法略為笨拙，但是渲染效果很好。在小型植物的渲染效果中增加的輪廓線雖然并不是水彩的特征，卻使畫面更富藝術表現力。可以說這已經不是單純的水彩，而是一種融合了水彩及其它藝術表現手法的新藝術風格。

Luft等在2008年提出了一種屬于第2類方法的對三維場景進行水彩風格化渲染的方法[5]，該方法在水彩風格中融入了鉛筆畫風格，獲得的渲染結果非常具有藝術表現力，應該說是在第2類方法中難得一見的效果比較好的渲染方法。然而遺憾的是，他們的方法中使用了一些比較耗時的技術如環境遮擋系數的計算等，使得該方法雖然比一般的第1類方法渲染速度更快，但是仍不能達到實時的要求。

本文改進Luft等的方法，提出一種基于GPU的三維場景的水彩畫風格實時渲染的方法，使得制作成本低廉的水彩動畫成為可能。這種方法也可以應用于游戲，及其它數字娛樂產業。

2 水彩的主要特征

水彩的技法變化很多，根據筆和畫紙的干濕程度，以及畫完一筆后隔多長時間再畫第2筆都會產生不同的效果，不同的人畫水彩畫，即使構圖與內容相同，最后所展示的結果也會完全不同，這就是水彩的魅力所在。

前人為我們總結出很多水彩的特征[1,4]，在這里做一下簡單的回顧。

干筆(Dry Brush)：當筆紙都很干燥的時候，因為畫紙凹凸不平，在沿筆劃的方向，紙表面高度上升的部分會沾到顏料，而下降的部分則會留白。

邊緣加深(Edge Darkening)：當筆劃邊緣部分的水分開始蒸發時，中間部分的水會帶著顏料流到邊緣處補充水分，導致邊緣處顏色較深。

邊緣擺動(Wobbling)：水的滲透性導致筆劃的邊緣處不平滑。

紊流(Turbulence Flow)：畫紙變濕后會產生高低起伏的變化，由于水的張力作用，較低的區域會聚集較多水分，相應的也會在那些地方聚集較多的顏料。結果是會產生低頻率的顏料分布不均的現象。

顏料分散(Pigment Dispersion)：由于畫紙本身有一些細紋，凹凸不平，所以和紊流特征類似，會產生高頻率的顏料分布不均的現象，這個特征會表現出一些紙張的紋路特性。

以上是水彩畫的一些主要特征，需要強調的是這些特征不一定會出現，而是要取決于畫家所選擇的繪畫技法。本文的方法也并沒有引入以上所有的特征，而是僅根據效果的需要選擇了其中的邊緣擺動、紊流以及顏料分散這3個特征。除了基本的水彩特征，本文還使用了輪廓線、影線(Hatching Line)等素描風格的表現手法來增強畫面的藝術表現力。

3 基于 GPU的水彩風格實時渲染算法

本文算法整體上將畫布分為3層：

1）細節層：表達場景中的基本色彩信息，包括場景的顏色、紋理，和燈光的顏色；

2）環境層：表現場景中較暗的部分；

3）筆觸層：繪制輪廓線和影線。

其中細節層和環境層是組成水彩風格渲染的主要部分。筆觸層可以被理解為畫家使用鉛筆在繪畫之前所打的底稿（輪廓線的部分），以及在繪畫完成后為增強畫面的立體感而在暗影調處隨意添加的鉛筆線（影線的部分）。由于筆觸層中的影線繪制算法具有隨機性，因此在動畫的渲染中并不包含影線的繪制，在普通場景的渲染中，筆觸層被完整地繪制，以增強畫面的立體感。

分別渲染得到這3層，合并可得最終渲染結果。

3.1 算法整體流程

本文渲染模塊由以下步驟組成，渲染流程的主要組成部分及其與下述步驟的對應關系如圖1所示。

圖1 渲染流程

步驟 1 渲染法向量紋理；

步驟 2 渲染深度值紋理；

步驟 3 獲取模型的原始顏色；

步驟 4 計算環境遮擋系數；

步驟 5 使用shadow mapping方法計算陰影；

步驟 6 獲取光照信息，包括色調、強度，并與陰影信息合成，得到光照信息圖；

步驟 7 將光照信息圖、模型的顏色信息、環境遮擋系數合成，并水彩化，得到細節層；

步驟 8 將光照信息圖與環境遮擋系數合成，加入深藍色以表示場景中的陰暗部分，并水彩化，得到環境層；

步驟 9 從法向量紋理計算繪制影線所需的屏幕空間的方向域，并根據該方向域繪制影線(Hatching line)；

步驟 10 繪制輪廓線(Silhouette)和折線(Crease)；

步驟 11 將影線、輪廓線、折線合成，得到筆觸層；

步驟 12 將細節層、環境層、筆觸層合成得到最終渲染結果。

本文使用 C++與 OpenGL Shader Language(GLSL)進行編程，上述步驟大部分均在GPU上實現，每個步驟由一組或多組著色器(vertex shader / fragment shader)組成。

上述步驟中，步驟1～3對場景的一些基本信息進行可視化，將數據保存在圖像中，方便后續算法的處理；步驟4進行環境遮擋系數的計算，為細節層、環境層以及筆觸層的繪制做準備；步驟5進行陰影的繪制，雖然環境遮擋經常被用來近似表示陰影，但是這種做法只有當場景中只有天光或環境光時才有效，所以單獨進行陰影的計算還是有必要的；步驟6將光照信息進行可視化；步驟7對從前面的步驟得到的數據進行合成，并將其水彩化，得到細節層，合成方法見3.4小節；步驟8同樣將之前計算得到的數據合成、水彩化，得到環境層，合成方法見 3.5小節；步驟 9～11進行筆觸層的繪制；步驟12將細節層、環境層、筆觸層進行簡單合成，得到最終結果。除步驟9外，所有步驟均在GPU上實現。

本文方法使用了與 Luft等人的方法相同的渲染框架，但是在環境遮擋系數的計算、影線的繪制、輪廓線與折線的繪制以及水彩化等幾個步驟中改進或使用了與他們不同的實現方法，而這些方法的使用正是與之相比能夠大幅提高渲染速度的關鍵原因。

3.2 環境遮擋(Ambient Occlusion)計算

環境遮擋經常被用于模擬天光下的陰影。在本文的方法中，環境遮擋有如下幾個用途：

1）在細節層中表現較暗的部分；

2）與光照強度值相乘，作為環境層的繪制基礎；

3）作為筆觸層的繪制基礎。

環境遮擋的傳統計算方法是從物體表面上一點以該點法向量為中心的半球內向外發射若干射線，在有效半徑R內檢測這些射線是否與場景物體相交，相交的射線數目與全部射線的數目之比為環境遮擋系數。這樣做的缺點是耗費的時間與場景復雜度相關，而且在完成環境遮擋系數的計算后，場景的結構不能發生變化，即這種方法只適用于靜態場景。

Luft等在他們的渲染方法中使用了環境遮擋的傳統計算方法，這個環節是使得他們的方法速度不夠快的主要原因之一。我們發現，Bavoil等[10]曾提出一個圖像空間的計算環境遮擋的方法，該算法耗費的時間與場景復雜度無關，只在屏幕空間利用傳入的深度值和法向量值進行采樣計算，估算出近似的環境遮擋系數。該方法速度快，無需預計算，同時也適用于動態場景，因此，本文采用此方法來計算環境遮擋系數A。

3.3 水彩化方法

水彩畫中的很多特征都是由于水的流動性導致顏料密度不均造成的（如紊流、顏料分散），因此同樣顏色的顏料畫在畫紙上會擁有不同的顏色值，我們使用Bousseau等[4]所提出的公式來表示這種顏色的變化。

其中，C表示當前顏色值，C'表示處理后的顏色值，d是一個表示顏料密度的值，范圍為[0，2]，當d為1時，有

T表示一張紋理，輸入不同的紋理可以得到不同的特殊效果，而水彩的某些重要特征也可以通過輸入一些紋理得到。

例如，紊流的效果可以通過輸入Perlin噪聲圖得到（如圖 2(c)所示），顏料分散的效果可以通過輸入高斯噪聲圖得到（如圖2(d)所示）。β是一個調整參數，根據這個值的變化，可以使與T對應的水彩特征更明顯或更含糊。

邊緣擺動效果是由于水的流動性和畫紙的粗糙性，產生的毛刺形狀的邊緣效果。本文使用通過取噪聲圖梯度值，并根據該值的大小對附近相應距離的像素的顏色值進行復制的方法，實現該效果（如圖2(b)所示）。

偽碼如下：

xOffset = dFdx(NoiseMap(x，y));

yOffset = dFdy(NoiseMap(x，y));

finalColor = OriginalImage(x + xOffset / γ,

y + yOffset / γ);

其中， x和y表示當前繪制像素的x坐標和y坐標，NoiseMap (x，y)表示NoiseMap紋理中該點的像素值，NoiseMap是一張含有噪聲信息的灰度圖，經過多次實驗，我們發現使用柏林噪聲圖的效果最好。對該噪聲圖進行x方向和y方向的梯度值計算（dFdx和dFdy）可以得到兩個標量xOffset和yOffset作為計算邊緣擺動效果的偏移量。γ是一個調節參數，通過調節該參數可以得到不同程度的邊緣擺動效果。

圖2 水彩特征模擬

3.4 細節層繪制

細節層表現出的是場景中光線較好的部分，其包含場景物體的顏色信息，以及燈光的顏色信息，是畫面中的主要構成部分。

在水彩畫以及其它風格的藝術創作中，人們往往傾向于使用對比，而忌諱平滑的明暗過渡。因此，本文拋棄了傳統的光照模型，不考慮光照，直接渲染場景中的物體，得到它們最原始的顏色值M，如圖1所示。

接下來，對場景中的每個光源進行光照計算，只考慮光照貢獻值，不考慮材質和紋理，得到光照值L，表示為

光照強度值LI和光照色調值LT在后續處理中會多次用到，其含義如圖1所示。其次，對場景的深度值D和法向量N進行可視化，分別保存在紋理中。

在室外景色的水彩畫創作中，經常會看到用暖黃色表示光照，用藍紫色這樣的冷色表示陰影的例子，這兩種顏色的搭配非常協調，而且也使畫面中其它顏色看起來更加柔和。因此，在準備場景時，如果選擇黃色燈光作為照明，容易得到比較柔和的渲染結果。

將燈光的顏色與物體的顏色繪制到同一張紋理中，同時加入環境遮擋系數的影響，描述這個過程的表達式為

其中，M2為該過程處理后的輸出紋理，同時也是細節層的母圖。由于細節層著重表現場景中較亮的部分，因此將LI設為M2紋理的alpha值。之后，使用3.3小節的水彩化步驟將M2進行處理，即可得到細節層，如圖1所示。

3.5 環境層繪制

環境層用于表現場景中較陰暗的部分。在水彩創作當中我們會看到很多使用藍色、紫色表示陰影的例子，因此在本文的繪制算法中，使用深藍色作為環境層的基調顏色。使用表達式

得到一張只有深藍色的圖像，然后使用3.3小節的水彩化步驟進行處理，即可得到環境層，如圖1所示。

3.6 筆觸層繪制

該層主要由兩部分組成，一部分是物體的輪廓線(Silhouette)、折線(Crease)，另一部分是影線(Hatching Line)。

3.6.1 輪廓線及折線繪制

輪廓線指的是由法向量與視線方向相垂直的點所組成的線，折線指的是在視野范圍內，由法向量不連續的點所組成的線。在本文的方法中，不使用法向量，而使用深度作為數據的輸入。

以深度圖作為輸入，X表示當前像素的值，A、B、C、D、E、F、G、H 分別表示相鄰像素的值，如圖3所示。

圖3 深度圖像素位置示意圖

在式(7)中，IX表示像素X處的輪廓線以及折線的值，根據式(7)，IX 可能是正值，也有可能是負值，在輪廓線處還會出現兩個一正一負的I值相鄰的情況，因此在實際處理中會涉及到一些細節的處理問題，在這里我們不對這些細節進行闡述。

3.6.2 影線繪制

影線分為兩種，一種是單向線，只畫一個方向的線，表示程度較淺，另一種是交叉線，表示程度較深。繪制哪種線由環境遮擋系數A的大小決定。設置兩個閾值k1和k2（k1

為三維物體繪制十字影線需要考慮兩個問題：一、影線的方向；二、如何根據給定的方向域進行影線繪制。

為了能夠快速地計算出繪制影線的方向域，本文采用了一個簡單的方法：將模型上一點的三維空間法向量變換為兩個二維的方向矢量，即得到方向域其中，(x, y, z )為法向量值。采用該方法得到的方向域是在屏幕空間上變換得到的，所以不能保證這兩個方向看起來在三維空間中正交，不過在多數情況下效果還是很好的，如圖4所示。

圖4 對方向域計算結果的影線繪制測試

Jobard等[12]在1997年提出了一個在二維空間上根據給定的方向域繪制線條的方法，受到該方法的啟發，本文采用以下算法進行線條繪制。

將二維空間平均分為若干小格子，每個小格子的寬度為 dsep，每個格子里放置一個種子點，從種子點出發，沿方向域所指定的方向繪制一條直線，當以下3種情況之一發生時，停止繼續畫線：

1）線的長度到達maxLength；

2）線已畫到有效繪制范圍的邊界處；

3）線繪制到的當前點所對應的方向值與起點所對應的方向值差異過大。

在Jobard的方法中，沒有對線條最大長度的限制，但是考慮到在鉛筆素描畫的創作中，線條往往是有長度范圍的，這和人的繪畫習慣有著密切的聯系，因此，在本文的方法中，設置了maxLength作為線條繪制的最大長度。

Jobard的方法里有一個線條繪制的終止條件是：當前點與其它已繪制線條的距離小于 dtest。dtest是一個小于 dsep的數。這種檢測是比較耗時的，在本文的方法中，采取另一種方法避免兩條線過于接近：繪制一條線的同時，將到這條線距離小于dtest范圍內的種子點全部刪除。繪制結果表明該方法是有效的。

最終的線條繪制結果如圖5所示。

全部繪制完畢后，得到筆觸層，如圖1所示。將細節層、環境層和筆觸層簡單相加，便可得到最終結果。

圖5 影線繪制示例（影線的方向域保存在圖像的r，g，b，alpha 4個通道中）

4 案例：靜態場景及動畫場景的繪制

4.1 渲染靜態場景

本文使用上述方法對多個靜態場景進行測試，均達到實時渲染速度(≥18fps)，并得到較好的渲染結果。圖6為一個小木屋場景的渲染結果，該場景三角面片數約為 59K，渲染窗口大小為880×660(pixel)，渲染速度達到 21fps。對另一個三角面片數為45K的客廳場景，渲染窗口大小為1000×600時，渲染速度可以達到18fps。我們使用的顯卡型號為GeForce GTX 260+。Luft等在文章中提到，使用他們的方法渲染一幅800×600(pixel)的圖像需要20至40秒的時間。本文算法繪制效果與Luft等的效果非常接近，在繪制速度上卻有了極大的提高。由于Luft等并未在其文中說明場景的規模和程序的運行環境，無法進行精確對比，其文 2008年才發表，但仍然可以看出本文算法在效率上有很大的優越性。

在本文的測試場景中，雖然小木屋場景比客廳場景更為復雜（面片數更多），但是渲染速度卻更快，這是由于本文的大部分算法使用圖像空間的技術實現，因此整個算法的運行時間受場景的復雜程度影響較小，相對的，受渲染窗口尺寸的影響較大。在實際的應用中，三維場景的復雜程度是沒有限制的，但渲染窗口的大小是有限的（與顯示器的大小有關），因此對場景復雜度不敏感的方法在實踐中適用性更廣。

圖6 靜態場景渲染結果

4.2 實時動畫繪制

由于本文的方法已達到實時渲染的速度，為了驗證將其應用于動畫、游戲及其它數字娛樂產業的可行性，而進行了實時動畫的制作。本文使用Maya建造動畫場景，并建立簡單的動畫腳本分析系統。該系統可控制動畫速度，同時支持物體平移等簡單的腳本指令。

制作了一套小熊動畫的模型，在這套動畫中，攝像機和小熊保持位置不變，畫面背景向左移去，場景中有轉動的風車和飄落的雪花。該場景的面片數約為 520K，我們設置動畫的渲染窗口大小為 920×600(pixel)，并在動畫腳本中設置幀率為 20fps。實際的動畫繪制效果非常流暢，達到了設置的幀率。動畫繪制效果如圖7所示。

由于筆觸層中的影線繪制算法具有較大隨機性，如果引入到動畫的繪制中會產生較為明顯的抖動現象，因此在本文的動畫繪制過程中并未進行影線的繪制。

5 結論及展望

對靜態場景和實時動畫的渲染結果表明本文的水彩畫風格渲染方法可以達到實時的渲染速度，并且獲得比較好的渲染效果，這表明該方法在計算機動畫、游戲等數字娛樂產業領域有較大的應用潛力。此外，由于本文方法的大部分算法使用圖像空間的技術實現，可以利用 GPU進行加速計算，因此，伴隨硬件技術的不斷發展，該方法的運行速度還有很大的提升空間。

圖7 實時動畫繪制

由于本文的處理方法屬于圖像濾鏡類型，因此，在某些水彩特征的呈現上會受到一定的限制。以邊緣加深為例，邊緣加深是一個隨著水分蒸發而產生的效果，和畫面上水分的多少有關系，和同一個顏色的區域是以什么樣的筆劃順序繪制也有關系，如果只是簡單的將同一個色塊的邊緣處進行加深得到的結果是十分不自然的，因此在本文的方法中并沒有加入邊緣加深這個特征。但是對于水彩畫的模擬而言，邊緣加深是一個重要的特征，如何在圖像濾鏡的方法中恰當的模擬這個特征是一個值得研究的問題。

在水彩風格渲染的基礎上增添鉛筆線效果可以使得畫面看起來更加豐富，但是影線的繪制嚴重破壞了時間一致性，這在一個實時系統中是非常令人遺憾的。在非真實感渲染中，如何保持時間一致性是一個非常難的問題。繪制可以保持時間一致性的影線可以作為一個新的課題繼續研究下去。

目前我們的動畫系統只支持一些簡單的動畫指令，將來會加入一些復雜的指令，并引入更多交互操作。

[1]Curtis C J, Anderson S E, Seims J E, et al. Computer generated watercolor[C]//Proceedings of the 24th Annual Conference on Computer Graphics and Interactive Techniques, New York, USA: ACM Press, 1997: 421-430.

[2]Laerhoven T V, Liesenborgs J, Reeth F V. Real-time watercolor painting on a distributed paper model[C]//Proceedings of Computer Graphics International 2004.Crete, 2004: 640-643.

[3]Lei S I E, Chang C F. Real-time rendering of watercolor effects for virtual environments[C]// Advances in Multimedia Information Processing-PCM 2004.Springer-Verlay Berlin Heidelberg, 2004: 474-481.

[4]Bousseau A, Kaplan M, Thollot J, et al. Interactive watercolor rendering with temporal coherence and abstraction[C]//Proceedings of the 4th International Symposium on Non-photorealistic Animation and Rendering. New York: ACM Press, 2006: 141-149.

[5]Luft T, Kobs F, Zinser W, et al. Watercolor illustrations of CAD data[C]//International Symposium on Computational Aesthetics in Graphics, Visualization and Imaging. Lisbon: Eurographics Association, 2008: 57-63.

[6]Luft T, Deussen O. Interactive watercolor animations[C]//Poster Proceedings of Pacific Graphics 2005. Macau, 2005: 7-9.

[7]Luft T, Deussen O. Real-time watercolor illustrations of plants using a blurred depth test[C]//Proceedings of the Fourth International Symposium on Non Photorealistic Animation and Rendering, New York:ACM Press, 2006: 11-20.

[8]Lum E B, Ma K L. Non-photorealistic rendering using watercolor inspired textures and illumination[C]//Proceedings of the 9th Pacific Conference on Computer Graphics and Applications, Washington, DC:IEEE Computer Society, 2001: 322-330.

[9]Landis H. Production-ready global illumination[C]//Course Notes for SIGGRAPH 2002 Course 16,RenderMan in Production. San Antonio, 2002: 87-101.

[10]Bavoil L, Sainz M. Image-space horizon-based ambient occlusion[C]//Engel W. ed. ShaderX7:Advanced Rendering Techniques. Boston, MA:Course Technology, a Part of Cengage Learning,2009: 425-444.

[11]Saito T, Takahashi T. Comprehensible rendering of 3-d shapes[C]//Proceedings of the 17th Annual Conference on Computer Graphics and Interactive Techniques, New York: ACM Press, 1990: 197-206.

[12]Jobard B, Lefer W. Creating evenly-spaced streamlines of arbitrary density[C]//Proceedings of the 8th Eurographics Workshop on Visualization in Scientific Computing. Boulogne-sur-Mer, 1997: 45-55.