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大于b，返回 1。
如果a<x<b 返回0~1