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

管線

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


OPenGL渲染管線

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

Vertex Shader(頂點著色器)

頂點著色器
  • 如圖,頂點著色器分為輸入和輸出兩部分,負責的功能是把輸入的數(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保存由應用程序傳遞給著色器的只讀常量數(shù)據(jù)好啰。在頂點著色器中轩娶,這些數(shù)據(jù)通常是變換矩陣,光照參數(shù)框往,顏色等鳄抒。由 uniform 修飾符修飾的變量屬于全局變量,該全局性對頂點著色器與片元著色器均可見椰弊,也就是說许溅,這兩個著色器如果被連接到同一個應用程序中,它們共享同一份 uniform 全局變量集秉版。因此如果在這兩個著色器中都聲明了同名的 uniform 變量贤重,要保證這對同名變量完全相同:同名+同類型,因為它們實際是同一個變量清焕。

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

  • 輸出參數(shù)介紹:
    1.可變變量(Varying):varying 變量用于存儲頂點著色器的輸出數(shù)據(jù)滚停,也存儲片元著色器的輸入數(shù)據(jù)。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(片元著色器)

片元著色器

片元著色器的作用是處理由光柵化階段生成的每個片元,最終計算出每個像素的最終顏色勺馆。歸根結底戏售,實際上就是數(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 輸出變量-即內建變量gl_FragColor。

  • 示例代碼

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

// 著色器程序(Shader program)
void main()
{
  // 讀取紋素(紋理的顏色)放到輸出變量gl_FragColor上
  gl_FragColor = texture2D(colorMap,varyTextCoord);
}
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末蛇更,一起剝皮案震驚了整個濱河市瞻赶,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌械荷,老刑警劉巖共耍,帶你破解...
    沈念sama閱讀 212,029評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異吨瞎,居然都是意外死亡痹兜,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,395評論 3 385
  • 文/潘曉璐 我一進店門颤诀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來字旭,“玉大人,你說我怎么就攤上這事崖叫∫糯荆” “怎么了?”我有些...
    開封第一講書人閱讀 157,570評論 0 348
  • 文/不壞的土叔 我叫張陵心傀,是天一觀的道長屈暗。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么养叛? 我笑而不...
    開封第一講書人閱讀 56,535評論 1 284
  • 正文 為了忘掉前任种呐,我火速辦了婚禮,結果婚禮上弃甥,老公的妹妹穿的比我還像新娘爽室。我一直安慰自己,他們只是感情好淆攻,可當我...
    茶點故事閱讀 65,650評論 6 386
  • 文/花漫 我一把揭開白布阔墩。 她就那樣靜靜地躺著,像睡著了一般瓶珊。 火紅的嫁衣襯著肌膚如雪啸箫。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,850評論 1 290
  • 那天艰毒,我揣著相機與錄音筐高,去河邊找鬼。 笑死丑瞧,一個胖子當著我的面吹牛,可吹牛的內容都是我干的蜀肘。 我是一名探鬼主播绊汹,決...
    沈念sama閱讀 39,006評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼扮宠!你這毒婦竟也來了西乖?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,747評論 0 268
  • 序言:老撾萬榮一對情侶失蹤坛增,失蹤者是張志新(化名)和其女友劉穎获雕,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體收捣,經(jīng)...
    沈念sama閱讀 44,207評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡届案,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,536評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了罢艾。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片楣颠。...
    茶點故事閱讀 38,683評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖咐蚯,靈堂內的尸體忽然破棺而出童漩,到底是詐尸還是另有隱情,我是刑警寧澤春锋,帶...
    沈念sama閱讀 34,342評論 4 330
  • 正文 年R本政府宣布矫膨,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏侧馅。R本人自食惡果不足惜直奋,卻給世界環(huán)境...
    茶點故事閱讀 39,964評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望施禾。 院中可真熱鬧脚线,春花似錦、人聲如沸弥搞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,772評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽攀例。三九已至船逮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間粤铭,已是汗流浹背挖胃。 一陣腳步聲響...
    開封第一講書人閱讀 32,004評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留梆惯,地道東北人酱鸭。 一個月前我還...
    沈念sama閱讀 46,401評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像垛吗,于是被迫代替她去往敵國和親凹髓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,566評論 2 349

推薦閱讀更多精彩內容