探索 openGL ES 的 fragment shader 程式

 openGL ES 直接利用 fragment shader 就可以點亮函式圖型, 但要注意的是必須將座標值規一化(normalize)至  0 ~1 區間, 參考資料: https://thebookofshaders.com
1. 下載 glslViewer: https://github.com/patriciogonzalezvivo/glslViewer
2. 下載 glfw:   https://www.glfw.org
3. 先解壓縮 glfw-3.2.1.zip, 編譯 glfw-3.2.1, 並安裝相關程式庫(library) 至 linux 作業系統
unzip  glfw-3.2.1.zip
cd  glfw-3.2.1
mkdir build
cd build
sudo su
apt-get update
apt-get install g++ libx11-dev libxi-dev libgl1-mesa-dev libglu1-mesa-dev libxrandr-dev libxext-dev libxcursor-dev libxinerama-dev libxi-dev cmake
cmake ..
make all
make install
5. 進入 glslViewer 去編譯程式, 完成後執行檔會放在 ./bin 目錄內, 將它加入 PATH 環境變數
make
export PATH=./bin:$PATH
6. 編寫一個程式檔(副檔名務必是  .frag), 畫出中心線與 sin, cos 圖, 將它存檔 test.frag:

uniform vec2 u_resolution;

#define pi2   6.283185308  // 常數 2π

#define fc     0.5                    // 直線 y = 0.5

void main() {   

    vec4  color;

    float thick = 1.0/min(u_resolution.x, u_resolution.y);

    vec2  p = gl_FragCoord.xy/u_resolution;

    float f1 = cos(pi2*p.x)/2.0 + 0.5;             // 函式座標值 y = cos

    float f2 = sin(pi2*p.x)/2.0 + 0.5;              // 函式座標值 y = sin

    if( fc-thick < p.y && p.y< fc+thick )          color = vec4(1.0, 1.0, 1.0, 1.0);// 白色

    else if( f1-thick < p.y && p.y< f1+thick ) color = vec4(0.0, 1.0, 0.0, 1.0);// 綠色

    else if( f2-thick < p.y && p.y< f2+thick ) color = vec4(1.0, 0.0, 0.0, 1.0);// 紅色

    else                                                         color=  vec4(0.0, 0.0, 0.0, 1.0);// 黑色

    gl_FragColor = color; // 指定給 fragment shader

}
7. 用 glslViewer 開啟上述檔案, 就可以看到圖線
glslViewer test.frag