基于可編程GPU的光照模型實驗案例設(shè)計

謝伙生，林 晶，陸澤萍

基于可編程GPU的光照模型實驗案例設(shè)計

謝伙生1,2，林 晶1,2，陸澤萍1,2

（1. 福州大學(xué) 數(shù)學(xué)與計算機(jī)科學(xué)學(xué)院，福建 福州 350116；2. 福州大學(xué) 網(wǎng)絡(luò)信息安全與計算機(jī)技術(shù)國家級實驗教學(xué)示范中心，福建 福州 350116）

為了更好地適應(yīng)新工科建設(shè)，培養(yǎng)學(xué)生解決復(fù)雜圖形系統(tǒng)工程問題的能力，探討基于可編程GPU的自頂向下、案例驅(qū)動的計算機(jī)圖形學(xué)實驗教學(xué)框架，設(shè)計了基于可編程GPU復(fù)雜場景光照渲染的實驗案例，總結(jié)了該框架下的案例教學(xué)實施過程與方法。實踐效果表明該方法提升了學(xué)生使用圖形庫開發(fā)圖形工程的實踐能力，對提高學(xué)生的興趣和改善教學(xué)質(zhì)量有明顯的促進(jìn)作用。

計算機(jī)圖形學(xué)；光照模型；可編程GPU；實驗教學(xué)

計算機(jī)圖形學(xué)是研究圖形的計算機(jī)生成、處理和顯示的學(xué)科，并且越來越呈現(xiàn)出多元化和學(xué)科交叉的特點，被廣泛應(yīng)用于工業(yè)設(shè)計、用戶界面、科學(xué)計算可視化、數(shù)字娛樂、虛擬現(xiàn)實等領(lǐng)域[1]。國內(nèi)許多高校將“計算機(jī)圖形學(xué)”列為計算機(jī)及其相關(guān)專業(yè)的核心課程。

“計算機(jī)圖形學(xué)”也是高校一門理論教學(xué)與實踐環(huán)節(jié)緊密聯(lián)系且重要的課程。目前國內(nèi)大部分圖形學(xué)教材都是基于C/C++語言平臺、從底層算法（如繪制線段）開始編寫的，與學(xué)生實際直接接觸的圖形應(yīng)用程序脫節(jié)，教材的理論性強(qiáng)、教學(xué)難度大。另外，教材內(nèi)容少有涉及學(xué)科前沿的研究動態(tài)，不利于開闊學(xué)生的視野、激發(fā)學(xué)生自主學(xué)習(xí)的興趣和意識。近年來，許多高校對計算機(jī)圖形學(xué)的教學(xué)框架、教學(xué)內(nèi)容、教學(xué)方法、融合新技術(shù)的教學(xué)手段進(jìn)行了改革[2-7]。

本文采用基于可編程GPU的自頂向下方法和WebGL技術(shù)，從整體框架[8]（圖形繪制系統(tǒng)的體系結(jié)構(gòu)）導(dǎo)入課程案例，用底層的算法進(jìn)行復(fù)雜場景光照渲染的實驗案例設(shè)計，其內(nèi)容涉及計算機(jī)圖形學(xué)綜合實驗課程的多個知識點。

1 實驗案例關(guān)鍵技術(shù)

1.1 可編程GPU繪制流水線

隨著圖形處理單元（graphics processing unit，GPU）技術(shù)的發(fā)展，迫切需要將基于可編程GPU繪制流水線及面向著色器編程的新型教學(xué)模式引入計算機(jī)圖形學(xué)課程中，以提高計算機(jī)圖形學(xué)課程的教學(xué)質(zhì)量與教學(xué)效果。OpenGL是大多數(shù)傳統(tǒng)圖形學(xué)實驗課使用的標(biāo)準(zhǔn)圖形庫。自O(shè)penGL2.0以來，OpenGL增加了著色器語言，允許程序員編寫自己的著色器來充分利用GPU性能。隨著移動智能設(shè)備和互聯(lián)網(wǎng)的廣泛應(yīng)用，陸續(xù)衍生出OpenGL的變體——OpenGL ES 2.0和WebGL。WebGL是用JavaScript實現(xiàn)的OpenGL ES 2.0，是為在Web瀏覽器上工作而專門開發(fā)的。利用WebGL編寫圖形應(yīng)用程序不需要額外的瀏覽器插件支持，可以通過JavaScript腳本實現(xiàn)Web交互式三維圖形制作程序的設(shè)計與實現(xiàn)，并利用可編程GPU的加速功能進(jìn)行圖形渲染，不僅可以在用戶端瀏覽器上流暢地展示3D模型和場景，也可以在移動設(shè)備上的瀏覽器顯示[9]。

由于GPU具有高并行結(jié)構(gòu)性，所以GPU在處理圖形數(shù)據(jù)和復(fù)雜算法方面擁有比CPU更高的效率，專用于圖形處理?？删幊蘂PU的流水線如圖1所示，其中頂點著色器和片元著色器兩個階段是流水線中的可編程部分。

圖1 可編程GPU繪制流水線

頂點著色器接收的是從CPU端傳送的頂點相關(guān)數(shù)據(jù)（如頂點位置、顏色、法線等），每個頂點數(shù)據(jù)輸入時都會調(diào)用一次頂點著色器，頂點著色器主要完成的工作是坐標(biāo)變換和逐頂點光照計算，并輸出后續(xù)階段需要的數(shù)據(jù)。

片元著色器輸入的是圖元裝配和光柵化階段對頂點信息插值得到的結(jié)果。其中圖元裝配過程是將經(jīng)過頂點著色器處理后輸出的頂點裝配成幾何圖形；光柵化過程是將裝配好的幾何圖形分解成像素大小的片元。片元著色器可以完成很多重要的渲染技術(shù)：逐像素計算顏色和紋理坐標(biāo)、應(yīng)用紋理、霧化計算、逐像素光照、計算法線。這一階段的輸出是一個或者多個顏色值，經(jīng)過混合操作得到最后渲染的顏色值。

1.2 光照原理

當(dāng)物體被光線照射時會反射一部分光，物體因為這些反射光而可見。物體的反射光強(qiáng)與光源位置、物體表面的法向以及物體材質(zhì)有關(guān)。為了使光照計算簡便，也便于學(xué)生理解，以簡單的光照模型為案例。該模型由環(huán)境反射光、漫反射光和鏡面反射光疊加而成，可以表示為

圖2 光照反射模型

2 實驗案例基本環(huán)境和場景構(gòu)建

WebGL應(yīng)用程序包括3種語言：HTML5、JavaScript和OpenGL著色器語言。著色器語言通常以字符串的形式內(nèi)嵌在JavaScript中，所以WebGL程序只需由HTML文件和JavaScript文件組成。HTML5文件用于描述一個文檔或者Web頁面，文件包含標(biāo)簽和數(shù)據(jù)，標(biāo)簽表示諸如文本、圖像和布局信息等各種元素的開始和結(jié)束，如JavaScript程序和著色器都是在結(jié)束標(biāo)簽之間描述的頁面元素。HTML5引入的元素定義了網(wǎng)頁上的繪圖區(qū)域，WebGL就是利用元素在畫布上繪制三維圖形的。

在編寫WebGL應(yīng)用程序前，先構(gòu)建一個較復(fù)雜的場景。該案例場景包含一個二維平面模擬地面、設(shè)置幾個幾何實體用來觀察光照效果，用一個小球來模擬光源。場景的幾何體較多，采用AJAX+JSON方式從文件中加載幾何體[10]，具體加載過程如圖3所示。

圖3 AJAX異步加載文件過程

3 光照模型實現(xiàn)

光照模型的實現(xiàn)就是根據(jù)光照條件重建物體表面的明暗現(xiàn)象，這一過程在三維圖形學(xué)中稱為著色，是由可編程GPU流水線中的著色器來實現(xiàn)的。在實現(xiàn)簡單光照模型前，GPU端要接收數(shù)據(jù)，將其從CPU端發(fā)送到著色器中。

3.1 從CPU端發(fā)送數(shù)據(jù)到GPU端

在WebGL渲染管線中將數(shù)據(jù)從CPU端傳到GPU端，其中attribute、uniform和varying變量是在著色器編程中比較常見的變量類型，通過這3種變量可以進(jìn)行數(shù)據(jù)的傳輸[11]，如圖4所示。

圖4 WebGL渲染管線數(shù)據(jù)的傳輸

varying變量用于將數(shù)據(jù)從頂點著色器傳向片元著色器。只要在頂點著色器和片元著色器中同時聲明同名的varying變量，那么該變量的數(shù)據(jù)就會由這個變量從頂點著色器流向片元著色器。uniform變量服務(wù)于頂點著色器和片元著色器，包含的是“一致”的數(shù)據(jù)，即數(shù)據(jù)在渲染周期內(nèi)保持不變，如光源的位置。attribute變量只能作為頂點著色器中的輸入變量，用來表示頂點的信息，如頂點坐標(biāo)、顏色等。

使用attribute變量傳送數(shù)值，包含以下幾個關(guān)鍵步驟：

（1）在頂點著色器中聲明attribute變量：

attribute vec4 a_Position；

（2）在JavaScript程序中獲取attribute變量存儲地址，并存放在變量a_Position里，gl是WebGL上下文，包含所有WebGL函數(shù)及參數(shù)；getAttribLocation第一個參數(shù)是初始化著色器后得到的程序?qū)ο螅诙€參數(shù)是在頂點著色器中聲明的attribute變量名：

var a_Position=gl.getAttribLocation (gl.program, ‘a(chǎn)_ Position’)；

（3）向attribute變量賦值，vertexAttrib4f的第一個參數(shù)是上一步驟獲取的變量地址，后面4個參數(shù)是要傳送數(shù)據(jù)的4個分量，還有其他同族函數(shù)：

gl.vertexAttrib4f(a_Position, 0.0, 0.0, 0.0, 0.0)。

使用uniform變量傳送數(shù)值與attribute變量類似，包含以下幾個步驟：

（1）聲明變量：

uniform vec4 u_FragColor;

（2）獲取變量地址：

var u_FragColor=gl.getUniformLocation (gl.program, ‘u_FragColor’);

（3）向變量傳送數(shù)據(jù)：

gl.uniform4f (u_FragColor, 1.0, 1.0, 1.0 1.0)。

以上方式一次只能向attribute變量傳送一個頂點的相關(guān)數(shù)據(jù)，而繪制多邊形圖形時需要一次性傳送多個頂點數(shù)據(jù)，因而要利用WebGL提供的緩沖區(qū)對象機(jī)制進(jìn)行傳送。圖5顯示了使用頂點緩沖區(qū)對象傳輸數(shù)據(jù)的5個步驟：（1）創(chuàng)建緩沖區(qū)對象（create-Buffer）；（2）綁定緩沖區(qū)對象（bindBuffer）；（3）將數(shù)據(jù)寫入緩沖區(qū)對象（bufferData）；（4）將緩沖區(qū)對象分配給一個attribute變量（vertexAttriPointer）；（5）開啟attribute變量（enableVertexArray）。其中各步驟所用函數(shù)的具體使用規(guī)范可參見文獻(xiàn)[12]。索引緩沖區(qū)對象（IBO）由前3個步驟創(chuàng)建，根據(jù)緩沖區(qū)中的索引值直接抽取頂點的相關(guān)數(shù)據(jù)。

3.2 光照計算

準(zhǔn)備好光照模型所需的數(shù)據(jù)后，就可以進(jìn)行光照計算?？梢赃x擇在程序的不同地方進(jìn)行計算——CPU中、頂點著色器中或者片元著色器中。

3.2.1 在CPU中實現(xiàn)

在CPU中進(jìn)行光照計算，得到每個頂點的環(huán)境光反射分量、漫反射分量和鏡面反射分量3項之和，將結(jié)果傳送給著色器進(jìn)行渲染處理。這種方式，當(dāng)場景中物體發(fā)生變化時（例如旋轉(zhuǎn)），則光照情況發(fā)生變化，需要在CPU中重新完成所有光照計算，并再一次傳送給著色器。當(dāng)需要處理大量數(shù)據(jù)時，這種方式是低效的。因此，通常選擇在著色器中進(jìn)行光照計算。

圖5 使用緩沖區(qū)對象傳輸數(shù)組的5個步驟

3.2.2 在頂點著色器中實現(xiàn)

將式（1）中必要的數(shù)據(jù)發(fā)送到頂點著色器，對所有頂點保持一致的數(shù)據(jù)用uniform變量來發(fā)送，其余數(shù)據(jù)可以作為頂點屬性用attribute變量發(fā)送。頂點著色器的輸出是光照模型的3個分量之和，通過varying變量傳送給片元著色器，得到逐頂點插值后的顏色值。

uniform vec4 uAmbientProduct；

uniform vec4 uDiffuseProduct；

uniform vec4 uSpecularProduct；

得到環(huán)境光反射分量ambient為：

ambient = uAmbientProduct；

漫反射中需要單位法向量：

vec3 N = normalize (aNormal.xyz);

光源單位方向向量：

vec3 L = normalize (lightPosition-vertexPosition). xyz;

得到漫反射分量diffuse為：

diffuse = max (dot(L, N), 0)*uDiffuseProduct;

同樣，鏡面反射需要觀察者單位方向向量，因為視點位于坐標(biāo)系原點，所以

vec3 E = normalize (vertexPosition);

反射光單位方向為：

vec3 R = reflect (-L, N);

得到鏡面反射分量specular為：

specular = pow (max(dot(R, E), 0.0), uShininess);

最終3個分量和為：

vFinalColor = ambient + diffuse + specular;

vFinalColor.a = 1.0;

3.2.3 在片元著色器中實現(xiàn)

不論是在WebGL應(yīng)用程序代碼中，還是在頂點著色器中執(zhí)行光照計算，光柵化模塊逐頂點插值得到片元顏色；而片元著色器是進(jìn)行逐片元處理過程的程序，基于每個片元進(jìn)行光照計算。片元著色器需要來自光柵化模塊（從頂點著色器傳送過來）的數(shù)據(jù)有：插值后的法向量、光源位置和視點位置，通過varying變量將這3個變量從頂點著色器發(fā)送給片元著色器。除此外，光照計算代碼部分與頂點著色器中的相同。

圖6是在頂點著色器與片元著色器中的光照模型效果圖?？梢钥闯觯毫⒎襟w在圖6（a）基于逐頂點的光照計算下，正面兩個三角形的接縫處十分明顯，而圖6（b）基于片元的光照就避免了這種情況，比較接近真實光照情況。同樣，球體在片元著色器中計算光照，著色更平滑、高亮區(qū)域更集中。

圖6 光照模型的效果

4 交互界面設(shè)計

圖7 光照模型實現(xiàn)的交互界面

5 實驗案例教學(xué)實施

5.1 實驗案例的教學(xué)組織

在基于可編程GPU的自頂向下、案例驅(qū)動的教學(xué)框架下實施了光照模型實驗的案例教學(xué)。本案例課時為8學(xué)時，包括多個知識點：可編程GPU繪制流水線（1學(xué)時）、光照模型介紹（1學(xué)時）、著色器編程之?dāng)?shù)據(jù)傳送模塊（2學(xué)時）、光照實現(xiàn)模塊（3學(xué)時）、交互模塊（1學(xué)時）。在實驗過程中，由于學(xué)生初次學(xué)習(xí)著色器復(fù)雜的編程，且沒有很好的調(diào)試工具，或不能很好地理解著色器概念。所以課上要講解清楚著色器語言的一些基本概念，對關(guān)鍵內(nèi)容需多次強(qiáng)調(diào)。該實驗案例實現(xiàn)的是一個簡單的光照模型，要求學(xué)生在程序的不同地方實現(xiàn)光照計算，并且鼓勵學(xué)生參考教材、互聯(lián)網(wǎng)上資料對其進(jìn)行拓展，設(shè)計更為復(fù)雜的光照模型。

5.2 實驗教學(xué)效果

“計算機(jī)圖形學(xué)”課程在我校已面向本科三年級計算機(jī)類專業(yè)學(xué)生開設(shè)多年，先后選用《交互式計算機(jī)圖形學(xué)：基于OpenGL的自頂向下方法》的第4版（固定流水線）、第5版（可編程流水線、著色器編程）和最新的《交互式計算機(jī)圖形學(xué)：基于WebGL的自頂向下方法》，利用WebGL技術(shù)在瀏覽器上直接實現(xiàn)三維圖形的繪制。WebGL的選擇更好地與國際計算機(jī)圖形學(xué)教育及科研實踐接軌，免去了編程環(huán)境配置的麻煩，也更適合課程的講授。開設(shè)此課程的1個班級50名學(xué)生都很好地完成了該課程的學(xué)習(xí)，取得了非常好的學(xué)習(xí)效果。

6 結(jié)語

基于可編程GPU的光照模型實驗案例可以運行在當(dāng)前大多數(shù)Web瀏覽器上，實際運用在計算機(jī)圖形學(xué)實踐課程的教學(xué)上，取得了較好的教學(xué)效果?；谧皂斚蛳碌膶嶒灲虒W(xué)框架教學(xué)實施，一方面使學(xué)生能直觀地深入理解圖形學(xué)理論的算法原理，了解計算機(jī)圖形軟硬件系統(tǒng)基本架構(gòu)，培養(yǎng)學(xué)生基于現(xiàn)代化GPU的可編程計算思維；另一方面將圖形學(xué)理論與實際圖形工程開發(fā)相結(jié)合，提高了學(xué)生學(xué)習(xí)熱情，提升了學(xué)生使用圖形庫開發(fā)圖形工程、解決復(fù)雜圖形系統(tǒng)工程問題的能力。

[1] 劉永進(jìn). 中國計算機(jī)圖形學(xué)研究進(jìn)展[J]. 科技導(dǎo)報，2016, 34(14): 76–85.

[2] 李丹，袁凌，胡迎松，等.面向游戲開發(fā)的計算機(jī)圖形學(xué)立體化實踐教學(xué)框架研究[J].實驗技術(shù)與管理，2015, 32(7): 202–205.

[3] 黃曉生，曹義親.多模態(tài)學(xué)習(xí)理論在“計算機(jī)圖形學(xué)”實驗教學(xué)中的應(yīng)用[J].實驗技術(shù)與管理，2012, 29(4): 162–165.

[4] 宋春霖，楊金龍，袁運浩.計算機(jī)圖形學(xué)教學(xué)改革與探討[J].教育教學(xué)論壇，2015(49): 152–153.

[5] 趙明.計算機(jī)圖形學(xué)“MOOC+翻轉(zhuǎn)課堂”教學(xué)實踐及效果[J].高教探索，2016(增刊1): 54–55.

[6] 高雪瑤，張春祥.基于翻轉(zhuǎn)課堂的計算機(jī)圖形學(xué)教學(xué)模式研究[J].計算機(jī)教育，2017(1): 113–116.

[7] 趙君嶠，王小平，李光耀，等.面向國際工程教育認(rèn)證的計算機(jī)圖形學(xué)課程設(shè)計及其中外案例分析[J].計算機(jī)應(yīng)用與軟件，2017, 34(10): 143–148.

[8] ANGEL E, SHREINER D.交互式計算機(jī)圖形學(xué)：基于WebGL的自頂向下方法[M].張榮華，姜麗梅，邵緒強(qiáng)，等譯. 7版.北京：電子工業(yè)出版社，2016.

[9] ANGEL E. The Case for Teaching Computer Graphics with WebGL: A 25-Year Perspective[J]. IEEE Computer Graphics & Applications, 2017, 37(2): 106–112.

[10] CANTOR D, JONES B. WebGL編程指南[M].李強(qiáng)，譯.北京：清華大學(xué)出版社，2013.

[11] MATSUDA K, LEA R. WebGL programming guide: Interactive 3D graphics programming with WebGL[M]. Addison- Wesley Professional, 2013.

[12] BAILEY M, CUNNINGHAM S.圖形著色器：理論與實踐[M].劉鵬，譯. 2版.北京：清華大學(xué)出版社，2013.

Design of illumination model experiment case based on programmable GPU

XIE Huosheng1,2, LIN Jing1,2, LU Zeping1,2

(1. College of Mathematics and Computer Science, Fuzhou University, Fuzhou 350116, China; 2. National Experimental Teaching Demonstration Center of Network Information Security and Computer Technology, Fuzhou University, Fuzhou 350116, China)

In order to better adapt to new engineering construction and cultivate students’ ability to solve complex graphic system engineering problems, the top-down and case-driven computer graphics experimental teaching framework based on programmable GPU is discussed and analyzed. The experiment cases of illumination rendering of complex scenes based on programmable GPU are designed, and the implementation process and method of case teaching under the framework are summarized. The practical results show that this method improves students’ practical ability to develop graphic engineering with the graphics library, and has a significant promoting effect on improving students’ interest and teaching quality.

computer graphics; illumination model; programmable GPU; experimental teaching

TP391.4; G642

A

1002-4956(2019)11-0128-05

10.16791/j.cnki.sjg.2019.11.031

2018-12-04

謝伙生（1964—），男，福建寧化，碩士，副教授，主要研究方向為數(shù)據(jù)挖掘、圖形圖像處理。

林晶（1989—），女，福建龍巖，碩士，實驗師，主要研究方向為圖像處理、模式識別。E-mail: 377676261@qq.com