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

謝伙生，林 晶，陸澤萍

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

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

（1. 福州大學 數學與計算機科學學院，福建 福州 350116；2. 福州大學 網絡信息安全與計算機技術國家級實驗教學示范中心，福建 福州 350116）

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

計算機圖形學；光照模型；可編程GPU；實驗教學

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

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

本文采用基于可編程GPU的自頂向下方法和WebGL技術，從整體框架[8]（圖形繪制系統的體系結構）導入課程案例，用底層的算法進行復雜場景光照渲染的實驗案例設計，其內容涉及計算機圖形學綜合實驗課程的多個知識點。

1 實驗案例關鍵技術

1.1 可編程GPU繪制流水線

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

由于GPU具有高并行結構性，所以GPU在處理圖形數據和復雜算法方面擁有比CPU更高的效率，專用于圖形處理。可編程GPU的流水線如圖1所示，其中頂點著色器和片元著色器兩個階段是流水線中的可編程部分。

圖1 可編程GPU繪制流水線

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

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

1.2 光照原理

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

圖2 光照反射模型

2 實驗案例基本環境和場景構建

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

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

圖3 AJAX異步加載文件過程

3 光照模型實現

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

3.1 從CPU端發送數據到GPU端

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

圖4 WebGL渲染管線數據的傳輸

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

使用attribute變量傳送數值，包含以下幾個關鍵步驟：

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

attribute vec4 a_Position；

（2）在JavaScript程序中獲取attribute變量存儲地址，并存放在變量a_Position里，gl是WebGL上下文，包含所有WebGL函數及參數；getAttribLocation第一個參數是初始化著色器后得到的程序對象，第二個參數是在頂點著色器中聲明的attribute變量名：

var a_Position=gl.getAttribLocation (gl.program, ‘a_ Position’)；

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

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

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

（1）聲明變量：

uniform vec4 u_FragColor;

（2）獲取變量地址：

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

（3）向變量傳送數據：

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

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

3.2 光照計算

準備好光照模型所需的數據后，就可以進行光照計算。可以選擇在程序的不同地方進行計算——CPU中、頂點著色器中或者片元著色器中。

3.2.1 在CPU中實現

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

圖5 使用緩沖區對象傳輸數組的5個步驟

3.2.2 在頂點著色器中實現

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

uniform vec4 uAmbientProduct；

uniform vec4 uDiffuseProduct；

uniform vec4 uSpecularProduct；

得到環境光反射分量ambient為：

ambient = uAmbientProduct；

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

vec3 N = normalize (aNormal.xyz);

光源單位方向向量：

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

得到漫反射分量diffuse為：

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

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

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 在片元著色器中實現

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

圖6是在頂點著色器與片元著色器中的光照模型效果圖。可以看出：立方體在圖6（a）基于逐頂點的光照計算下，正面兩個三角形的接縫處十分明顯，而圖6（b）基于片元的光照就避免了這種情況，比較接近真實光照情況。同樣，球體在片元著色器中計算光照，著色更平滑、高亮區域更集中。

圖6 光照模型的效果

4 交互界面設計

圖7 光照模型實現的交互界面

5 實驗案例教學實施

5.1 實驗案例的教學組織

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

5.2 實驗教學效果

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

6 結語

基于可編程GPU的光照模型實驗案例可以運行在當前大多數Web瀏覽器上，實際運用在計算機圖形學實踐課程的教學上，取得了較好的教學效果。基于自頂向下的實驗教學框架教學實施，一方面使學生能直觀地深入理解圖形學理論的算法原理，了解計算機圖形軟硬件系統基本架構，培養學生基于現代化GPU的可編程計算思維；另一方面將圖形學理論與實際圖形工程開發相結合，提高了學生學習熱情，提升了學生使用圖形庫開發圖形工程、解決復雜圖形系統工程問題的能力。

[1] 劉永進. 中國計算機圖形學研究進展[J]. 科技導報，2016, 34(14): 76–85.

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

[3] 黃曉生，曹義親.多模態學習理論在“計算機圖形學”實驗教學中的應用[J].實驗技術與管理，2012, 29(4): 162–165.

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

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

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

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

[8] ANGEL E, SHREINER D.交互式計算機圖形學：基于WebGL的自頂向下方法[M].張榮華，姜麗梅，邵緒強，等譯. 7版.北京：電子工業出版社，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].李強，譯.北京：清華大學出版社，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版.北京：清華大學出版社，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—），男，福建寧化，碩士，副教授，主要研究方向為數據挖掘、圖形圖像處理。

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