webgl实现canvas水珠跟随鼠标动画效果代码-html代码-BFW代码库

webgl实现canvas水珠跟随鼠标动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl实现canvas水珠跟随鼠标动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en"><head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: #555555;
  margin:0;
}

canvas {
  position: fixed;
}
</style>



</head>

<body>
  <canvas id="webgl" width="464" height="359" style="width: 464px; height: 359px;"></canvas>

<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">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform vec2 u_oldmouse;
  uniform float u_time;
  uniform sampler2D u_noise;
  
  uniform int u_frame;
  
  uniform sampler2D u_b_buffer;
  uniform bool u_buffer_pass;
  
  #define PI 3.141592653589793
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  
  float sdSegment( in vec2 p, in vec2 a, in vec2 b ) {
    vec2 pa = p-a, ba = b-a;
    float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
    return length( pa - ba*h );
  }
  
  vec4 render_effect() {
    vec2 uv = getScreenSpace();
    vec2 oldmouse = u_oldmouse.xy;
    vec2 mouse = u_mouse.xy;
    
    return vec4(vec3(smoothstep(.02,.0,sdSegment(uv, oldmouse, mouse))), 1.);
  }
  
  vec4 blurBuffer(vec2 uv) {
    vec3 pixs = vec3(1./u_resolution.xy, 0.)*5.;
    
    vec4 sample = texture2D(u_b_buffer, uv + pixs.zy);
    sample += texture2D(u_b_buffer, uv - pixs.zy);
    sample += texture2D(u_b_buffer, uv + pixs.xz);
    sample += texture2D(u_b_buffer, uv - pixs.xz);
    
    sample *= .25;
    
    return sample;
  }
  
  void main() {
    vec4 tex = texture2D(u_b_buffer, gl_FragCoord.xy/u_resolution.xy);
    tex = blurBuffer(gl_FragCoord.xy/u_resolution.xy);
    if(u_buffer_pass) {
      gl_FragColor = (tex * .9995 + render_effect());
    } else {
      float f = sin(min(10., tex.r));
      f = smoothstep(0., 1., tex.r);
      float tex1 = texture2D(u_b_buffer, gl_FragCoord.xy/u_resolution.xy - 20./u_resolution.xy).r;
      float f1 = sin(min(10., tex1));
      f1 = smoothstep(0., 1., tex1);
      float s = f;
      s = 1. - pow(s, .3);
      s = s*3.;
      float r = smoothstep(0.6, .8, f) - s;
      float g = smoothstep(0.5, .5+fwidth(f), f) - s;
      float b = smoothstep(0.1, .4, f1) - s;
      float sh = clamp(r-b, 0., 1.);
      // sh = smoothstep(0., .8, sh);
      gl_FragColor = vec4(vec3(r-sh*.5), 1.);
    }
  }
  
</script>

      <script >
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;} /**
 * A basic Web GL class. This provides a very basic setup for GLSL shader code.
 * Currently it doesn't support anything except for clip-space 3d, but this was
 * done so that we could start writing fragments right out of the gate. My
 * Intention is to update it with particle and polygonal 3d support later on.
 *
 * @class WTCGL
 * @author Liam Egan &.........完整代码请登录后点击上方下载按钮下载查看