解析頂點著色器和片元著色器

管線

也稱渲染管線,因為 OpenGL ES在渲染處理過程中會順序執(zhí)行一系列操作,這一系列相關(guān)的處理階段就被稱為OpenGL ES 渲染管線。OpenGL ES 渲染過程就如流水線作業(yè)一樣,這樣的實現(xiàn)極大地提高了渲染的效率。如圖就是 OpenGL ES 的管線圖,學(xué)習(xí)OpenGL ES 就是學(xué)習(xí)這張圖中的每一個部分。


OPenGL渲染管線

圖中陰影部分的 Vertex Shader(頂點著色器)Fragment Shader(片元著色器)可編程管線 。可編程管線就是說這個操作可以動態(tài)編程而不必寫死在代碼中??蓜討B(tài)編程實現(xiàn)這一功能一般都是腳本提供的,在OpenGL ES 中也一樣,編寫這樣腳本的能力是由著色語言GLSL提供的。那可編程管線有什么好處呢?方便我們動態(tài)修改渲染過程,而無需重寫編譯代碼,當然也和很多腳本語言一樣,調(diào)試起來不太方便。

Vertex Shader(頂點著色器)

頂點著色器
  • 如圖,頂點著色器分為輸入和輸出兩部分,負責(zé)的功能是把輸入的數(shù)據(jù)進行矩陣變換位置,計算光照公式生成逐頂點顏?,?成/變換紋理坐標.并且把位置和紋理坐標這樣的參數(shù)發(fā)送到片段著色器.

  • 輸入?yún)?shù)介紹:
    1.著色器程序(Shader Program,圖中沒有畫出):由 main 申明的一段程序源碼或可執(zhí)行文件,描述在頂點上執(zhí)行的操作:如坐標變換、計算光照公式產(chǎn)生每個頂點顏色、計算紋理坐標。

    2.屬性(Attribute):由 vertext array 提供的頂點數(shù)據(jù),如空間位置,法向量,紋理坐標以及頂點顏色,屬性可以理解為針對每一個頂點的輸入數(shù)據(jù)。屬性只在頂點著色器中才有,片元著色器中沒有屬性。

    3.統(tǒng)一值(Uniforms): Uniforms保存由應(yīng)用程序傳遞給著色器的只讀常量數(shù)據(jù)。在頂點著色器中,這些數(shù)據(jù)通常是變換矩陣,光照參數(shù),顏色等。由 uniform 修飾符修飾的變量屬于全局變量,該全局性對頂點著色器與片元著色器均可見,也就是說,這兩個著色器如果被連接到同一個應(yīng)用程序中,它們共享同一份 uniform 全局變量集。因此如果在這兩個著色器中都聲明了同名的 uniform 變量,要保證這對同名變量完全相同:同名+同類型,因為它們實際是同一個變量。

    4.采樣器(Samplers): 一種特殊的 uniform,用于呈現(xiàn)紋理。sampler 可用于頂點著色器和片元著色器。

  • 輸出參數(shù)介紹:
    1.可變變量(Varying):varying 變量用于存儲頂點著色器的輸出數(shù)據(jù),也存儲片元著色器的輸入數(shù)據(jù)。varying 變量會在光柵化處理階段被線性插值。頂點著色器如果聲明了 varying 變量,它必須被傳遞到片元著色器中才能進一步傳遞到下一階段,因此頂點著色器中聲明的 varying 變量都應(yīng)在片元著色器中重新聲明為同名同類型的 varying 變量。

    1. gl_Position:在頂點著色器階段至少應(yīng)輸出位置信息-即內(nèi)建變量

    2. gl_FrontFacing:為back-face culling stage階段生成的變量,無論精選是否被禁用,該變量都會生成。

    3. gl_PointSize:點大小。

  • 示例代碼

// 位置屬性
attribute vec4 position;
// 坐標屬性
attribute vec2 textCoordinate; 
// 旋轉(zhuǎn)角度
uniform mat4 rotateMatrix; 
// 輸出變量
varying lowp vec2 varyTextCoord; 

// 著色器程序(Shader Program)
void main()
{
  // 賦值坐標屬性到輸出變量
  varyTextCoord = textCoordinate;
  // 位置乘以旋轉(zhuǎn)矩陣
  vec4 vPos = position;
  vPos = vPos * rotateMatrix; 
  // 賦值位置到內(nèi)建變量gl_Position上,作為輸出信息(必須)
  gl_Position = vPos;
}

Fragment Shader(片元著色器)

片元著色器

片元著色器的作用是處理由光柵化階段生成的每個片元,最終計算出每個像素的最終顏色。歸根結(jié)底,實際上就是數(shù)據(jù)的集合。這個數(shù)據(jù)集合包含每一個像素的各個顏色分量和像素透明度的值。

  • 輸入?yún)?shù)介紹:
    1.著色器程序(Shader program): 由 main 申明的一段程序源碼,描述在片元上執(zhí)行的操作。

    2.可變變量(Varyings): 頂點著色器階段輸出的 varying 變量在光柵化階段被線性插值計算之后輸出到片元著色器中作為它的輸入,即上圖中的 gl_FragCoord,gl_FrontFacing 和 gl_PointCoord。

    3.統(tǒng)一值(Uniforms): 用于片元著色器的常量,如霧化參數(shù),紋理參數(shù)等。

    4.采樣器(Samples): 一種特殊的 uniform,用于呈現(xiàn)紋理。

  • 輸出參數(shù)介紹:
    1.gl_FragColor: 在頂點著色器階段只有唯一的 varying 輸出變量-即內(nèi)建變量gl_FragColor。

  • 示例代碼

// 紋理坐標
varying lowp vec2 varyTextCoord;
// 采樣器
uniform sampler2D colorMp;

// 著色器程序(Shader program)
void main()
{
  // 讀取紋素(紋理的顏色)放到輸出變量gl_FragColor上
  gl_FragColor = texture2D(colorMap,varyTextCoord);
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容