html5+webgl仿ps羽化笔刷液态动画特效免费下载

html5 canvas基于webgl制作的仿ps羽化笔刷液态动画特效,羽化笔刷跟随鼠标移动绘画,很有梦幻效果。

JS代码

<script id="vertexShader" type="x-shader/x-vertex"> 
  attribute vec4 a_position; 
   
  uniform mat4 u_modelViewMatrix; 
  uniform mat4 u_projectionMatrix; 
   
  void main() { 
    gl_Position = a_position; 
  } 
</script> 
 
<script id="fragmentShader" type="x-shader/x-fragment"> 
  precision highp float; 
   
  uniform vec2 u_resolution; 
  uniform vec2 u_mouse; 
  uniform float u_time; 
  uniform sampler2D u_noise; 
  uniform sampler2D u_buffer; 
  uniform bool u_bufferpass; 
   
   
  #define PI 3.141592653589793 
  #define TAU 6.283185307179586 
   
  vec2 getScreenSpace() { 
    vec2 uv = (gl_FragCoord.xy) / min(u_resolution.y, u_resolution.x); 
     
    return uv; 
  } 
 
  #define pow2(x) (x * x) 
 
  const int samples = 2; 
  const float sigma = float(samples) * 0.25; 
 
  float gaussian(vec2 i) { 
      return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma)))); 
  } 
 
  vec3 blur(sampler2D sp, vec2 uv, vec2 scale) { 
      vec3 col = vec3(0.0); 
      float accum = 0.0; 
      float weight; 
      vec2 offset; 
 
      for (int x = -samples / 2; x < samples / 2; ++x) { 
          for (int y = -samples / 2; y < samples / 2; ++y) { 
              offset = vec2(x, y); 
              weight = gaussian(offset); 
              col += texture2D(sp, uv + scale * offset).rgb * weight; 
              accum += weight; 
          } 
      } 
 
      return col / accum; 
  } 
   
  const float blurStrength = 2.; 
  const float blurMultiplier = 0.998; 
   
  void main() { 
    vec2 uv = getScreenSpace(); 
    vec2 sample = gl_FragCoord.xy / u_resolution; 
     
    vec3 colour = vec3(sin(uv.x)*.5+.5, sin(uv.y)*.5+.5, 1.); 
    float s = texture2D(u_buffer, sample).r; 
     
    vec2 ps = vec2(1.0) / u_resolution.xy; 
     
    if(u_bufferpass) { 
      s = (blur(u_buffer, sample + vec2(.001), ps*blurStrength) * blurMultiplier).r; 
       
      float c = s * .999 + smoothstep(length(ps)*20., .0, length(uv - u_mouse)*.5) * .5; 
      colour = vec3(c); 
    } else { 
      colour = mix(vec3(0.2), colour, sin(s)*.5+.5); 
      colour *= colour*2.; 
    } 
 
    gl_FragColor = vec4(colour,1.0); 
  } 
   
</script> 
 
<script src='js/apxlmx.js'></script> 
<script src="js/index.js"></script>
打赏
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录