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


轉載  https://www.jianshu.com/p/a771639ffbbb

 

管線

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


 


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

Vertex Shader(頂點着色器)

 

  • 如圖,頂點着色器分為輸入和輸出兩部分,負責的功能是把輸入的數據進行矩陣變換位置,計算光照公式生成逐頂點顏⾊,⽣成/變換紋理坐標.並且把位置和紋理坐標這樣的參數發送到片段着色器.

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

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

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

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

  • 輸出參數介紹:


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

  1. gl_Position:在頂點着色器階段至少應輸出位置信息-即內建變量

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

  3. gl_PointSize:點大小。


  • 示例代碼

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

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

Fragment Shader(片元着色器)

 

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

  • 輸入參數介紹:
    1.着色器程序(Shader program): 由 main 申明的一段程序源碼,描述在片元上執行的操作。

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

    3.統一值(Uniforms): 用於片元着色器的常量,如霧化參數,紋理參數等。

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

  • 輸出參數介紹:
    1.gl_FragColor: 在頂點着色器階段只有唯一的 varying 輸出變量-即內建變量gl_FragColor。

  • 示例代碼

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

// 着色器程序(Shader program)
void main()
{
  // 讀取紋素(紋理的顏色)放到輸出變量gl_FragColor上
  gl_FragColor = texture2D(colorMap,varyTextCoord);
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM