3.2 著色器與渲染管線

前面一節(jié)已經(jīng)通過一個旋轉(zhuǎn)三角形的案例為讀者簡單介紹了如何使用OpenGL ES 3.0進(jìn)行3D場景的開發(fā)，相信讀者對OpenGL ES 3.0應(yīng)用的開發(fā)已經(jīng)有了初步的了解。但要想真正地掌握OpenGL ES 3.0，則首先要掌握著色器和渲染管線相關(guān)的知識，本節(jié)將向讀者介紹這方面的內(nèi)容。

3.2.1 OpenGL ES 2.0的渲染管線

學(xué)習(xí)OpenGL ES 3.0的渲染管線之前，應(yīng)該首先了解一下OpenGL ES 2.0的渲染管線，這對于進(jìn)一步深入了解OpenGL ES 3.0的渲染管線是很有裨益的，本小節(jié)將對此內(nèi)容進(jìn)行介紹。

渲染管線有時也稱為渲染流水線，一般是由顯示芯片（GPU）內(nèi)部處理圖形信號的并行處理單元組成。這些并行處理單元兩兩之間是相互獨(dú)立的，在不同型號的硬件上獨(dú)立處理單元的數(shù)量也有很大的差異。一般越高端型號的硬件，其中獨(dú)立處理單元的數(shù)量也就越多。

從另一個角度看，OpenGL ES中的渲染管線實(shí)質(zhì)上指的是一系列繪制過程。這些過程輸入的是待渲染3D物體的相關(guān)描述信息數(shù)據(jù)，經(jīng)過渲染管線，輸出的是一幀想要的圖像。OpenGL ES 2.0的渲染管線如圖3-16所示。

1．基本處理

該階段設(shè)定3D空間中物體的頂點(diǎn)坐標(biāo)、頂點(diǎn)對應(yīng)的顏色、頂點(diǎn)的紋理坐標(biāo)等屬性，并且指定繪制方式，如點(diǎn)繪制、線段繪制或者三角形繪制等。

2．頂點(diǎn)緩沖對象

這部分功能在應(yīng)用程序中是可選的，對于某些在整個場景中頂點(diǎn)的基本數(shù)據(jù)不變的情況。可以在初始化階段將頂點(diǎn)數(shù)據(jù)經(jīng)過基本處理后送入頂點(diǎn)緩沖對象，在繪制每一幀想要的圖像時就省去了頂點(diǎn)數(shù)據(jù)IO的麻煩，直接從頂點(diǎn)緩沖對象中獲取頂點(diǎn)數(shù)據(jù)即可。相比于每次繪制時單獨(dú)將頂點(diǎn)數(shù)據(jù)送入GPU的方式，可以在一定程度上節(jié)省GPU的IO帶寬，提高渲染效率。

3．頂點(diǎn)著色器

頂點(diǎn)著色器是一個可編程的處理單元，功能為執(zhí)行頂點(diǎn)的變換、光照、材質(zhì)的應(yīng)用與計(jì)算等頂點(diǎn)的相關(guān)操作，其每頂點(diǎn)執(zhí)行一次。其工作過程為首先將原始的頂點(diǎn)幾何信息及其他屬性傳送到頂點(diǎn)著色器中，經(jīng)過自己開發(fā)的頂點(diǎn)著色器處理后產(chǎn)生紋理坐標(biāo)、顏色、點(diǎn)位置等后繼流程需要的各項(xiàng)頂點(diǎn)屬性信息，然后將其傳遞給圖元裝配階段。

頂點(diǎn)著色器替代了原有固定管線的頂點(diǎn)變換、光照計(jì)算，開發(fā)人員可以根據(jù)自己的需求自行開發(fā)頂點(diǎn)變換、光照等功能，大大增加了程序的靈活性。但凡事有利皆有弊，增加靈活性的同時也增加了開發(fā)的難度。頂點(diǎn)著色器的工作原理如圖3-17所示。

? 頂點(diǎn)著色器輸入主要為待處理頂點(diǎn)相應(yīng)的attribute（屬性）變量、uniform（一致）變量、采樣器以及臨時變量，輸出主要為經(jīng)過頂點(diǎn)著色器后生成的varying（易變）變量及一些內(nèi)建輸出變量。

? attribute變量指的是3D物體中每個頂點(diǎn)各自不同的信息所屬的變量，一般頂點(diǎn)的位置、顏色、法向量等每個頂點(diǎn)各自不同的信息都是以attribute變量的方式傳入頂點(diǎn)著色器的。

? uniform變量指的是對于同一組頂點(diǎn)組成的單個3D物體中所有頂點(diǎn)都相同的量，一般為場景中當(dāng)前的光源位置、當(dāng)前的攝像機(jī)位置、投影系列矩陣等。

? varying變量（易變變量）是從頂點(diǎn)著色器計(jì)算產(chǎn)生并傳遞到片元著色器的數(shù)據(jù)變量。頂點(diǎn)著色器可以使用易變變量來傳遞需要插值到片元的顏色、法向量、紋理坐標(biāo)等任意值。

? 內(nèi)建輸出變量gl_Position、gl_FrontFacing和gl_PointSize等。gl_Position是經(jīng)過變換矩陣變換、投影后頂點(diǎn)的最終位置，gl_FrontFacing指的是片元所在面的朝向，gl_PointSize指的是點(diǎn)的大小。

需要特別注意的是，易變變量在頂點(diǎn)著色器賦值后并不是直接將賦的值送入到后繼的片元著色器中，而是在光柵化階段由管線根據(jù)片元所屬圖元各個頂點(diǎn)對應(yīng)的頂點(diǎn)著色器對此易變變量的賦值情況及片元與各頂點(diǎn)的位置關(guān)系插值產(chǎn)生，圖3-18說明了這個問題。

4．圖元裝配

這個階段主要有兩個任務(wù)，一個是圖元組裝，另一個是圖元處理。所謂圖元組裝是指頂點(diǎn)數(shù)據(jù)根據(jù)設(shè)置的繪制方式被結(jié)合成完整的圖元。例如，點(diǎn)繪制方式下每個圖元僅需要一個單獨(dú)的頂點(diǎn)，此方式下每個頂點(diǎn)為一個圖元；線段繪制方式每個圖元則需要兩個頂點(diǎn)，此方式下每兩個頂點(diǎn)構(gòu)成一個圖元；三角形繪制方式下需要3個頂點(diǎn)構(gòu)成一個圖元。

圖元處理最重要的工作是剪裁，其任務(wù)是消除位于半空間（half-space）之外的部分幾何圖元，這個半空間是由一個剪裁平面所定義的。例如，點(diǎn)剪裁就是簡單地接受或者拒絕頂點(diǎn)，線段或多邊形剪裁可能需要增加額外的頂點(diǎn)，具體取決于直線或者多邊形與剪裁平面之間的位置關(guān)系，如圖3-19所示。

之所以要進(jìn)行剪裁是因?yàn)殡S著觀察位置、角度的不同，并不總能看到（這里可以簡單地理解為顯示到設(shè)備屏幕上）特定3D物體某個圖元的全部。例如，當(dāng)觀察一個正四面體并離某個三角形面很近時，可能只能看到此面的一部分，這時在屏幕上顯示的就不再是三角形了，而是經(jīng)過裁剪后形成的多邊形，如圖3-20所示。

剪裁時，若圖元完全位于視景體以及自定義剪裁平面的內(nèi)部，則將圖元傳遞到后面的步驟進(jìn)行處理；如果其完全位于視景體或者自定義剪裁平面的外部，則丟棄該圖元；如果其有一部分位于內(nèi)部，另一部分位于外部，則需要剪裁該圖元。

5．光柵化

雖然虛擬3D世界中的幾何信息是三維的，但由于目前用于顯示的設(shè)備都是二維的。因此，在真正執(zhí)行光柵化工作之前，首先需要將虛擬3D世界中的物體投影到視平面上。需要注意的是，由于觀察位置的不同，同一個3D場景中的物體投影到視平面可能會產(chǎn)生不同的效果，如圖3-21所示。

另外，由于虛擬3D世界當(dāng)中物體的幾何信息一般采用連續(xù)的數(shù)學(xué)量來表示，因此投影的平面結(jié)果也是用連續(xù)數(shù)學(xué)量表示的。但目前的顯示設(shè)備屏幕都是離散化的（由一個一個的像素組成），因此還需要將投影的結(jié)果離散化。將其分解為一個一個離散化的小單元，這些小單元一般稱為片元，具體效果如圖3-22所示。

其實(shí)每個片元都對應(yīng)于幀緩沖中的一個像素，之所以不直接稱為像素是因?yàn)?D空間中的物體是可以相互遮擋的。而一個3D場景最終顯示到屏幕上雖然是一個整體，但每個3D物體的每個圖元是獨(dú)立處理的。這就可能出現(xiàn)這樣的情況，系統(tǒng)先處理的是位于離觀察點(diǎn)較遠(yuǎn)的圖元，其光柵化成為了一組片元，暫時送入幀緩沖的對應(yīng)位置。

但后面繼續(xù)處理離觀察點(diǎn)較近的圖元時也光柵化出了一組片元，兩組片元中有對應(yīng)到幀緩沖中同一個位置的，這時距離近的片元將覆蓋距離遠(yuǎn)的片元（如何覆蓋的檢測是在深度檢測階段完成）。因此，某片元就不一定能成為最終屏幕上的像素，稱為像素就不準(zhǔn)確了，可以將其理解為候選像素。

6．片元著色器

片元著色器是用于處理片元值及其相關(guān)數(shù)據(jù)的可編程單元，其可以執(zhí)行紋理的采樣、顏色的匯總、計(jì)算霧顏色等操作，每片元執(zhí)行一次。片元著色器主要功能為通過重復(fù)執(zhí)行（每片元一次），將3D物體中的圖元光柵化后產(chǎn)生的每個片元的顏色等屬性計(jì)算出來送入后繼階段，如剪裁測試、深度測試及模板測試等。

從渲染管線的圖中可以看出，可編程片元著色器替代了老版本中固定管線紋理采樣、顏色求和、霧以及Alpha測試等階段。與頂點(diǎn)著色器類似，被其替代的功能系統(tǒng)將不再提供，需要完全由開發(fā)人員用著色器語言編程完成。這在提高了靈活性的同時也增加了開發(fā)的難度，尤其是對于初學(xué)者，其基本工作原理如圖3-23所示。

? Varying0～n指的是從頂點(diǎn)著色器傳遞到片元著色器的易變變量，如前面所介紹，由系統(tǒng)在頂點(diǎn)著色器后的光柵化階段自動插值產(chǎn)生。其個數(shù)是不一定的，取決于具體的需要。

? gl_FragColor內(nèi)建變量指的是片元的最終顏色。一般在片元著色器的最后都需要對gl_FragColor進(jìn)行賦值。

7．剪裁測試

如果程序中啟用了剪裁測試，OpenGL ES會檢查每個片元在幀緩沖中對應(yīng)的位置，若對應(yīng)位置在剪裁窗口中則將此片元送入下一階段，否則丟棄此片元。

8．深度測試和模板測試

? 深度測試是指將輸入片元的深度值與幀緩沖區(qū)中存儲的對應(yīng)位置片元的深度值進(jìn)行比較，若輸入片元的深度值小則將輸入片元送入下一階段準(zhǔn)備覆蓋幀緩沖中的原片元或與幀緩沖中的原片元混合，否則丟棄輸入片元。

? 模板測試的主要功能為將繪制區(qū)域限定在一定的范圍內(nèi)，一般用在湖面倒影、鏡像等場合，后面的章節(jié)會詳細(xì)介紹。

9．顏色緩沖混合

若程序中開啟了Alpha混合，則根據(jù)混合因子將上一階段送來的片元與幀緩沖中對應(yīng)位置的片元進(jìn)行Alpha混合；否則送入的片元將覆蓋幀緩沖中對應(yīng)位置的片元。

10．抖動

抖動是一種簡單的操作，其允許只使用少量的顏色模擬出更寬的顏色顯示范圍，從而使顏色視覺效果更加豐富。例如，可以使用白色以及黑色模擬出一種過渡的灰色。

但使用抖動也是有缺點(diǎn)的，那就是會損失一部分分辨率，因此，對于現(xiàn)在主流的原生顏色就很豐富的顯示設(shè)備一般是不需要啟用抖動的。

11．幀緩沖

OpenGL ES中的物體繪制并不是直接在屏幕上進(jìn)行的，而是預(yù)先在幀緩沖區(qū)中進(jìn)行繪制，每繪制完一幀再將繪制的結(jié)果交換到屏幕上。因此，在每次繪制新的一幀時都需要清除緩沖區(qū)中的相關(guān)數(shù)據(jù)，否則有可能產(chǎn)生不正確的繪制效果。

同時需要了解的是，為了應(yīng)對不同方面的需要，幀緩沖是由一套組件組成的，主要包括顏色緩沖、深度緩沖以及模板緩沖，各組件的具體用途如下所列。

? 顏色緩沖用于存儲每個片元的顏色值，每個顏色值包括RGBA（紅、綠、藍(lán)、透明度）4個色彩通道，應(yīng)用程序運(yùn)行時在屏幕上看到的就是顏色緩沖中的內(nèi)容。

? 深度緩沖用來存儲每個片元的深度值，所謂深度值是指以特定的內(nèi)部格式表示的從片元處到觀察點(diǎn)（攝像機(jī)）的距離。在啟用深度測試的情況下，新片元想進(jìn)入幀緩沖時需要將自己的深度值與幀緩沖中對應(yīng)位置片元的深度值進(jìn)行比較，若結(jié)果為小于才有可能進(jìn)入緩沖，否則被丟棄。

? 模板緩沖用來存儲每個片元的模板值，供模板測試使用。模板測試是幾種測試中最為靈活和復(fù)雜的一種，后面將用專門的章節(jié)進(jìn)行介紹。

3.2.2 OpenGL ES 3.0的渲染管線

OpenGL ES 2.0采用的是可編程的渲染管線，編程人員可以插入一些特殊操作，方便高效地完成OpenGL ES 1.x固定渲染管線難以完成的任務(wù)。而OpenGL ES 3.0采用的也是可編程渲染管線，只是OpenGL ES 3.0增加了一些新特性。

通過增加的新特性，能夠讓移動平臺的游戲畫面更加逼真、細(xì)膩，提高設(shè)備3D渲染的性能，OpenGL ES 3.0可編程渲染管線如圖3-24所示。

從圖3-24中可以看出，總體上OpenGL ES 3.0可編程渲染管線與OpenGL ES 2.0的基本相同，但其實(shí)頂點(diǎn)著色器與片元著色器內(nèi)部還是有不少區(qū)別的，詳細(xì)內(nèi)容如下。

1．頂點(diǎn)著色器

此處的頂點(diǎn)著色器與OpenGL ES 2.0的頂點(diǎn)著色器相同，也是一個可編程的處理單元，其功能也是執(zhí)行頂點(diǎn)的變換、光照、材質(zhì)的應(yīng)用與計(jì)算等頂點(diǎn)的相關(guān)操作，每頂點(diǎn)執(zhí)行一次。其工作過程也是首先將原始的頂點(diǎn)幾何信息及其他屬性傳送到頂點(diǎn)著色器中，經(jīng)過自己開發(fā)的頂點(diǎn)著色器處理后產(chǎn)生紋理坐標(biāo)、顏色、點(diǎn)位置等后繼流程需要的各項(xiàng)頂點(diǎn)屬性信息，然后將其傳遞給圖元裝配階段。

通過可編程的頂點(diǎn)著色器，開發(fā)人員可以根據(jù)自己的需求自行開發(fā)頂點(diǎn)變換、光照等功能，下面給出頂點(diǎn)著色器的工作原理圖，如圖3-25所示。

? 頂點(diǎn)著色器的輸入主要為待處理頂點(diǎn)相應(yīng)的in變量、uniform（一致）變量、采樣器以及臨時變量，輸出主要為經(jīng)過頂點(diǎn)著色器后生成的out變量及一些內(nèi)建輸出變量。

? 頂點(diǎn)著色器中的in變量指的是3D物體中每個頂點(diǎn)各自不同的信息所屬的變量，一般頂點(diǎn)的位置、顏色、法向量等每個頂點(diǎn)各自不同的信息都是以in變量的方式傳入頂點(diǎn)著色器的。例如，前一節(jié)“初識OpenGL ES 3.0應(yīng)用程序”中頂點(diǎn)著色器里的aPosition（頂點(diǎn)位置）和aColor（頂點(diǎn)顏色）變量等。

? uniform變量指的是對于同一組頂點(diǎn)組成的單個3D物體中所有頂點(diǎn)都相同的量，一般為場景中當(dāng)前的光源位置、當(dāng)前的攝像機(jī)位置、投影系列矩陣等。例如，前一節(jié)“初識OpenGL ES 3.0應(yīng)用程序”案例中頂點(diǎn)著色器里的uMVPMatrix（總變換矩陣）變量等。

? 頂點(diǎn)著色器中的out變量是從頂點(diǎn)著色器計(jì)算產(chǎn)生并用于傳遞到片元著色器的數(shù)據(jù)變量。頂點(diǎn)著色器可以使用out變量來傳遞需要插值或不需要插值到片元的顏色、法向量、紋理坐標(biāo)等任意值。例如，3.1.2節(jié)“初始OpenGL ES 3.0應(yīng)用程序”中由頂點(diǎn)著色器傳入片元著色器中的vColor變量。

? 內(nèi)建輸出變量gl_Position、gl_PointSize以及內(nèi)建輸入變量gl_VertexID、gl_InstanceID等。gl_Position是經(jīng)過變換矩陣變換、投影后的頂點(diǎn)的最終位置，gl_PointSize指的是點(diǎn)的大小。gl_VertexID用來記錄頂點(diǎn)的整數(shù)索引。gl_InstanceID是指實(shí)例ID，只在頂點(diǎn)著色器中使用，對于指定的每一組圖元，該ID相應(yīng)遞增。

out變量在頂點(diǎn)著色器賦值后并不是直接將賦的值傳遞到后繼的片元著色器對應(yīng)的in變量中，在此存在兩種情況：

? 如果out限定符之前含有smooth限定符或者不含有任何限定符，則傳遞到后繼片元著色器對應(yīng)的in變量的值，是在光柵化階段由管線根據(jù)片元所屬圖元各個頂點(diǎn)對應(yīng)的頂點(diǎn)著色器對此out變量的賦值情況及片元與各頂點(diǎn)的位置關(guān)系插值產(chǎn)生，圖3-26所示說明了這個問題。

? 如果out限定符之前含有flat限定符，則傳遞到后繼片元著色器對應(yīng)的in變量的值不是在光柵化階段插值產(chǎn)生的，而是由圖元的最后一個頂點(diǎn)對應(yīng)的頂點(diǎn)著色器對此out變量所賦的值決定的，此種情況下圖元中每個片元的值均相同。

2．片元著色器

與OpenGL ES 2.0相同，OpenGL ES 3.0的片元著色器同樣是用于處理片元值及其相關(guān)數(shù)據(jù)的可編程單元，其可以執(zhí)行紋理的采樣、顏色的匯總、計(jì)算霧顏色等操作，每片元執(zhí)行一次。

與OpenGL ES 2.0不同的是，片元著色器內(nèi)的varying變量變成了in變量，并且內(nèi)建輸出變量gl_FragColor不存在了。其基本原理圖如圖3-27所示。

? in0～in（n）指的是從頂點(diǎn)著色器傳遞到片元著色器的變量，如前面所介紹，由系統(tǒng)在頂點(diǎn)著色器后的光柵化階段自動產(chǎn)生，其個數(shù)是不一定的，取決于具體的需要。例如，3.1.2節(jié)“初識OpenGL ES 3.0應(yīng)用程序”中片元著色器里的vColor變量。

? out變量一般指的是由片元著色器寫入計(jì)算完成的片元顏色值的變量，一般在片元著色器的最后，都需要對其進(jìn)行賦值，最后將其送入渲染管線的后繼階段進(jìn)行處理。例如，3.1.2節(jié)“初識OpenGL ES 3.0應(yīng)用程序”中片元著色器里創(chuàng)建的fragColor變量。

3.2.3 OpenGL ES中立體物體的構(gòu)建

前面的幾個小節(jié)向讀者介紹了不同版本OpenGL ES的渲染管線，同時也給出了一個非常簡單的旋轉(zhuǎn)三角形案例。但到目前為止，讀者可能還是不太清楚虛擬3D世界中的立體物體是如何搭建出來的。其實(shí)這與現(xiàn)實(shí)世界搭建建筑物并沒有本質(zhì)區(qū)別，請讀者考察圖3-28和圖3-29中國家大劇院遠(yuǎn)景和近景的照片。

從兩幅照片中可以對比出，現(xiàn)實(shí)世界的某些建筑物遠(yuǎn)看是平滑的曲面，其實(shí)近看是由一個一個的小平面組成的。3D虛擬世界中也是如此，任何立體物體都是由多個小平面搭建而成的。這些小平面切分得越小，越細(xì)致，搭建出來的物體就越平滑。

當(dāng)然OpenGL ES的虛擬世界與現(xiàn)實(shí)世界還是有區(qū)別的，現(xiàn)實(shí)世界中可以用任意形狀的多邊形來搭建建筑物，例如圖3-28中的國家大劇院就是用四邊形搭建的，而OpenGL ES中僅允許采用三角形來搭建物體。其實(shí)這從構(gòu)造能力上來說并沒有區(qū)別，因?yàn)槿魏味噙呅味伎梢圆鸱譃槎鄠€三角形，只需開發(fā)時稍微注意一下即可。

圖3-30更加具體地說明了，在OpenGL ES中如何采用三角形來構(gòu)建立體物體。

了解了OpenGL ES中立體物體的搭建方式后，下面就需要了解OpenGL ES中的坐標(biāo)系統(tǒng)了。OpenGL ES中采用的是三維笛卡爾坐標(biāo)系，如圖3-31所示。

從圖3-31中可以看出，OpenGL ES中采用的是左手標(biāo)架坐標(biāo)系。一般來說，初始情況下y軸平行于屏幕的豎邊，x軸平行于屏幕的橫邊，z軸垂直于屏幕平面。