[百练shader] 常见基础方法效果

后续持续更新其他shader效果(给自己画饼)，您们的点赞、评论是我不断向前的动力

1、用glsl-canvas 开始第一个shader内容

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main(){
    vec2 uv=gl_FragCoord.xy/u_resolution.xy;
    gl_FragColor=vec4(vec2(uv),0.,1.);
}

简单阐述一下

每个像素使用这个 main方法着色

gl_FragCoord.xy 表示当前像素在屏幕上的坐标

u_resolution.xy 表示画布的分辨率

vec2 uv = gl_FragCoord.xy / u_resolution.xy; 得到了归一化的坐标，使得坐标范围在 0 到 1 之间

gl_FragColor 需要传入四个可以理解css中rgba 红绿蓝透明

gl_FragColor = vec4(1.0) 画布为白色 gl_FragColor = vec4(0.0) 画布为黑色

gl_FragColor=vec4(vec2(uv),0.,1.); => gl_FragColor=vec4(uv.x, uv.y,0.,1.);

所以画布上表现的起点是黑色 x=1时是红色 y=1时是绿色

2、ceil 与 floor

// ceil 向上取整 1.5 => 2.0 // floor 向下取整 1.5 => 1.0

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    float strength=1.;
    if(st.x<.49){
        strength=ceil(st.y*5.)/5.;
    }else if(st.x>.51){
        strength=floor(st.y*5.)/5.;
    }
    gl_FragColor=vec4(vec3(strength),1.);
}

3、sin 与 cos

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    float strength = 1.;;
    if(st.y<0.49){
        strength = cos(st.x*2.*PI); // 下方
    }else if (st.y>0.51){
        strength = sin(st.x*2.*PI); // 上方
    }
    gl_FragColor=vec4(vec3(strength),1.);
}

4、tan

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    float strength = 1.;
    st.x -=0.5;
    strength = tan(st.x *2.*PI);
    gl_FragColor=vec4(vec3(strength),1.);
}

5、abs 取绝对值

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    float strength = 1.;;
    if(st.y<0.49){
        strength = sin(st.x*2.*PI); // 下方的
    }else if (st.y>0.51){
        strength = abs(sin(st.x*2.*PI));
    }
    gl_FragColor=vec4(vec3(strength),1.);
}

用sin函数演示

6、distance 两点之间的距离

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    st*=2.;
    float strength=distance(st,vec2(1.));
    gl_FragColor=vec4(vec3(strength),1.);
}

7、fract 取小数 1.5 => 0.5

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    float strength = fract(st.y*5.);
    gl_FragColor=vec4(vec3(strength),1.);
}

8、length

void main(){

    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    float strength=length(st);
    gl_FragColor=vec4(vec3(strength),1.);

}

9、mix 混入

// 公式 mix(x, y, z) x*(1-z) + y*z

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    vec3 color1 =vec3(1.,0.,0.);
    vec3 color2 =vec3(0.,0.,1.);
    vec3 color3 = mix(color1,color2,st.y);
    gl_FragColor=vec4(color3,1.);
}

10、mod 取模

公式mod(x, y) x – y * floor (x/y)

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    float strength = 1.;
     if(st.x<0.49){
        strength = mod(st.y*5.,.5); // 左边
    }else if (st.x>0.51){
        strength = mod(st.y*5.,1.);
    }
    gl_FragColor=vec4(vec3(strength),1.);
}

11、random 随机函数

float random(vec2 st){
  return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);
}
void main(){
  vec2 st=gl_FragCoord.xy/u_resolution.xy;
  gl_FragColor=vec4(vec3(random(st)),1.);
}

12、step

step(x, y) 公式定义 (x >= y) ? 0 : 1.

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    float strength = step(st.x,.5);
    gl_FragColor=vec4(vec3(strength),1.);
}

13、smoothstep

void main(){
    // 公式 smoothstep(a,b,x)
    // 将 x 限制在 0 到 1 之间 
    // i =  (x -a) / (b-a)
    // t =  max(min(i, 1.0), 0.0)
    // return t * t * (3.0 - 2.0 * t);
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    float strength=smoothstep(.2,.8,st.x);
    gl_FragColor=vec4(vec3(strength),1.);
}

代码地址 xzw199509/shader-demo (github.com)

【百练shader】常见基础方法效果