glsl shader簡明教程系列1 

底層的東西我就不說了(自己去百度翻基礎教程)  我直接說上層了(片段著色器)

 web編輯器還在開發中 有了編輯器 到時候可以把程式碼複製上去可以看到效果了

1  實現圖片變灰

void main () {
// 這個變數c就是圖片每個畫素的 顏色值
vec4 c = vec4(1,1,1,1) * texture2D(texture, uv0);

//下面是變灰演算法 只要明白這個演算法能變灰就行 
float clrbright = (c.r + c.g + c.b) * (1. / 3.);
float gray = (0.6) * clrbright;

//給圖片每個畫素重新賦值顏色值
gl_FragColor = vec4(gray, gray, gray, c.a);
}

2 圖片變亮效果

  vec4 dim(vec4 col, float factor) {
    return vec4(col.r * factor, col.g * factor, col.b * factor, col.a);
  }
 

void main () {
     // 這個變數c就是圖片每個畫素的 顏色值
     vec4 c = vec4(1,1,1,1) * texture2D(texture, uv0);
      // 提高亮度(dim第二個引數 設定1以上提高亮度 1以下降低亮度  這些都是顏色演算法 不用深究明白有什麼作用就行
    vec4 blurred_image = dim(c,1.6);
 //給圖片每個畫素重新賦值顏色值
     gl_FragColor = vec4(blurred_image);



  }

3 圖片變模糊

 #define repeats 5.
  #define num 0.02
 // 隨機值
float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
// 應用貼圖UV
vec4 draw(vec2 uv) {
    return  texture2D(texture,uv).rgba; 
}

void main () {
    // 模糊貼圖(下面都是模糊演算法 不用細看 直接搬過來用就行)
    vec4 blurred_image = vec4(0.);
      // 重複取樣
    for (float i = 0.; i < repeats; i++) { 
      // 第一取樣點
        vec2 q = vec2(cos(degrees((i/repeats)*360.)),sin(degrees((i/repeats)*360.))) * (rand(vec2(i,uv0.x+uv0.y))+num); 
        vec2 uv2 = uv0+(q*num);
        blurred_image += draw(uv2)/2.;
        
        // 第二取樣點
        q = vec2(cos(degrees((i/repeats)*360.)),sin(degrees((i/repeats)*360.))) * (rand(vec2(i+2.,uv0.x+uv0.y+24.))+num); 
        uv2 = uv0+(q*num);
        blurred_image += draw(uv2)/2.;
    }
      // 中和
    blurred_image /= repeats;
    // 給圖片每個畫素重新賦值顏色值
    gl_FragColor = vec4(blurred_image);



  }

接下來說下裁剪的演算法

4&n