OpenGL ES 2.0 Tutorial Part 1 - 2

since: 2012/06/07
update: 2012/06/07

reference:
1. OpenGL ES 2.0 for iPhone Tutorial | Ray Wenderlich
2. I touchs: OpenGL ES 2.0 Tutorial Part 1 - 1

Vertex and Fragment Shaders

A. 說明:
     1. 在 OpenGL ES 2.0 中, 要在場景繪製出任何的幾何圖形, 必須要建立二個
         稱為 shader 的微小程式.
         註: shader 常翻譯為著色器, 對 Fragment(像素/片段) shader 而言還算吻合;
               但是對於主要處理頂點位置的 vertex(頂點) shader 就不貼切了.

     2. Shaders 以類似 C 語言的語法被寫成, 稱作 GLSL(OpenGL Shading Language),
         有二種基本類型的 shaders: Vertex shader 與 Fragment shader.

     3. Vertex shader:(頂點著色器)
         在場景中的每個頂點都會呼叫一次 vertex shader 這個小程式. Vertex shader
         的工作是去執行某些計算, 例如: 光源位置, 幾何轉換(位移, 旋轉, 縮放)等,
         最後會算出每個頂點最終的位置, 並且傳遞一些資料給 fragment shader.

     4. Fragment shader:(像素著色器)
         同樣地, 在場景中的每個像素都會呼叫一次 fragment shader 這個小程式.
         Fragment shader 最主要的工作是設定每個像素最終的顏色.

----------------------------------------------------------------------------------

B. 新增 Vertex shader:
    1. Xcode > File > New > File... > iOS > Other >
       Empty > Next > Save As: SimpleVertex.glsl > Create

    2. GLSL 語法顯示:
        點選剛剛新增的 SimpleVertex.glsl 檔案, 然後點選 Xcode 右邊的:
        File inspector, 確認 File Name 後, 將 File Type 選為:
        OpenGL Shading Language source.

        或者:
        點選 SimpleVertex.glsl 檔案, 然後: "Editor" > "Syntax Coloring" > "GLSL"

    3. 開啟 SimpleVertex.glsl 檔案, 修改如下:
// attribute: 變數修飾語之一, 代表會從應用程式傳入(input)的變數.
// vec4: 代表包含有 4 個元素的向量
//
// 頂點的位置
attribute vec4 Position;

// 頂點的原始顏色
attribute vec4 SourceColor;


// varying: 變數修飾語之一, 代表會從 vertex shader(目前這個檔案)
//          傳遞(output)到 fragment shader 的變數
varying vec4 DestinationColor;


// 每一個 shader 都是從 main 函式作為起點的, 就像 C 語言一樣. 
void main(void) {
    // 將頂點的原始顏色(SourceColor)設定給要傳給 fragment shader
    // 的顏色(DestinationColor), OpenGL 會用內插法來計算其值.
    DestinationColor = SourceColor;
   
    // gl_Position: 在 vertex shader 中必須設定的內建輸出變數,
    //                        代表每個頂點最終的位置.
    //
    // 在此設為原始的位置.
    gl_Position = Position;
}

備註: vertex shader 會傳給 fragment shader 每個頂點的顏色值, 而當
          fragment shader 要決定某個像素的顏色時, 會利用內插法來計算. 

----------------------------------------------------------------------------------

C. 新增 Fragment shader:
    1. Xcode > File > New > File... > iOS > Other >
       Empty > Next > Save As: SimpleFragment.glsl > Create

    2. GLSL 語法顯示:
        點選剛剛新增的 SimpleFragment.glsl 檔案, 然後點選 Xcode 右邊的:
        File inspector, 確認 File Name 後, 將 File Type 選為:
        OpenGL Shading Language source.

        或者:
        點選 SimpleFragment.glsl 檔案, 然後: "Editor" > "Syntax Coloring" > "GLSL"

    3. 開啟 SimpleFragment.glsl 檔案, 修改如下:
// varying: 變數修飾語之一, 代表會從 vertex shader
//          傳遞(input)到 fragment shader(目前這個檔案)的變數.
//          而且必須與在 vetex shader 中所定義的變數一致.
//
// lowp: 代表使用最低的精密度(可提升效能). (medp: 中精密度; highp: 高 精密度)
//
varying lowp vec4 DestinationColor;


// 如同 vertex shader, fragment shader 也是從 main 開始.
void main(void) {
    // gl_FragColor: 在 fragment shader 中必須設定的內建輸出變數,
    //               代表每個像素最終的顏色.
    //
    // 在此設為由 fragment shader 傳入的顏色, 再經由 OpenGL 內插(interpolated)求值.
    gl_FragColor = DestinationColor;
}