glsl shader简明教程系列1

glsl shader简明教程系列1 

 

底层的东西我就不说了(自己去百度翻基础教程)  我直接说上层了(片段着色器)

 web编辑器还在开发中 有了编辑器 到时候可以把代码复制上去可以看到效果了  

1  实现图片变灰(需要注意 shader是强类型语言 注意类型一致)

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);



  }

接下来说下圆形mask做法

vec4 drawCircle() {
    float dis = 0.0;
    //uv 代表贴图的uv坐标 默认左下角为00点
    vec2 uv = uv0;
         
         //
        dis = distance( uv, vec2(0.5, 0.5) );
     
     
      vec4 color;
       // 这个变量c就是图片每个像素的 颜色值
        vec4 c = vec4(1,1,1,1)* texture2D(texture,uv);
        //判断如果是半径内 就显示 半径外 就隐藏
        if(dis <= 0.5)
          {
              color = c;
           }
           else{
            // 隐藏不要的部分
             color = vec4(c.rgb,0.); 
          }
  
    return  color; 
}


void main () {
    vec4 color = drawCircle();
      gl_FragColor = color;
}

 如果边缘要弄羽化效果 那就在边缘加点0到1 的透明度过度

smoothstep(a, b, x) 可以用来生成0到1的平滑过渡.

如果x小于a，返回 0。

如果x大于b，返回 1。

如果a<x<b  返回0~1