【shader】模糊与区域清晰效果

【shader】模糊与区域清晰效果

背景------ 群里大佬发个有意思的视频 刚好有思路写了demo实现一下

shader基础入门的话可以看看这两位大佬的文章

Three.js 进阶之旅：Shader着色器基础图案-旷野之息神庙铁球 🔮 - 掘金 (juejin.cn)

手把手带你入门 Three.js Shader 系列（一） - 掘金 (juejin.cn)

使用的vscode的glsl-canvas插件展示

实现思路拆分视频中功能

背景 + y轴偏移 +鼠标区域不偏移

接下来就是一步步实现

背景的实现示例（用图片就好，有需要也拿过去吧）

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

float random(vec2 st){
  return fract(sin(dot(st.xy,
  vec2(12.9898,78.233)))
  *43758.5453123);
}

vec3 palette1(float t,vec3 a,vec3 b,vec3 c,vec3 d){
  return a+b*cos(6.28318*(c*t+d)); 
}
vec3 palette(float t){
  vec3 a=vec3(.5,.5,.5);
  vec3 b=vec3(.5,.5,.5);
  vec3 c=vec3(1.,1.,1.);
  vec3 d=vec3(.263,.416,.557);
  return a+b*cos(6.28318*(c*t+d));
}
void main(){
  vec2 uv=gl_FragCoord.xy/u_resolution.xy;

  uv=uv*2.-1.;
  float d=length(uv*2.);
  vec3 col=palette(d*.5);
  d=sin(d*8.)/8.;
  d=abs(d);
  d=.02/d;
  col*=d;
  gl_FragColor=vec4(col,1.);
}

y轴偏移示例

偏移前

偏移后

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    st.y = st.y+sin(st.x*100.+u_time)/50.;// 控制偏移
    float strength = mod((st.y) * 10.0, 1.0);
    gl_FragColor = vec4(vec3(strength), 1.0);
}

鼠标缓冲区的实现

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    vec2 uv = (st - vec2(0.5));

    vec2 mouse = vec2(u_mouse.x / u_resolution.x,u_mouse.y / u_resolution.y);
    mouse = mouse -vec2(0.5);
    float l = distance(uv, mouse);
    vec3 color = vec3(1.);
    float strength = step(0.2,l);
    if(strength > 0.){
        color = vec3(strength); 
    }else{  
        color = vec3(1.,0.,0);
        
    }
    gl_FragColor = vec4(color, 1.0);
}

加点噪声

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;


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

    gl_FragColor=vec4(vec3(random(uv)),1.);
}

混合起来

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
float random(vec2 st){
    return fract(sin(dot(st.xy,
        vec2(12.9898,78.233)))
      *43758.5453123);
}
    

vec3 palette(float t){
    vec3 a=vec3(.5,.5,.5);
    vec3 b=vec3(.5,.5,.5);
    vec3 c=vec3(1.,1.,1.);
    vec3 d=vec3(.263,.416,.557);
    return a+b*cos(6.28318*(c*t+d));
}
void main(){
    vec2 uv=gl_FragCoord.xy/u_resolution.xy;

    vec2 st = (uv - vec2(0.5));
    vec2 mouse = vec2(u_mouse.x / u_resolution.x,u_mouse.y / u_resolution.y);
    mouse = mouse -vec2(0.5);
    float l = distance(st, mouse);
    float lstep = step(0.2,l);
    vec3 col = vec3(0.);
    float mixdata = 0.;
    if(lstep > 0.){
        uv.y = uv.y+sin(uv.x*200.+u_time*10.)/50.;
        mixdata =0.1;
    }else{  
        mixdata =0.0;
    }
    uv=uv*2.-1.;
        float d=length(uv*2.);
        col=palette(d*.5);
        d=sin(d*8.)/8.;
        d=abs(d);
        d=.02/d;
        col*=d;
    vec4 texture1 = vec4(col,1.);
    vec4 texture2 = vec4(vec3(random(uv))/2.,1.);
    vec4 texture3 = mix(texture1,texture2,mixdata);
    gl_FragColor=texture3;
}

文章写的不多 欢迎大家多提点建议