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

代码语言：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 <liam@wethecollective.com>
 * @version 0.0.8
 * @created Jan 16, 2019
 */
class WTCGL {

  /**
   * The WTCGL Class constructor. If construction of the webGL context fails 
    * for any reason this will return null.
    * 
    * @TODO make the dimension properties properly optional
    * @TODO provide the ability to allow for programmable buffers
   *
   * @constructor
   * @param {HTMLElement} el The canvas element to use as the root
   * @param {string} vertexShaderSource The vertex shader source
   * @param {string} fragmentShaderSource The fragment shader source
    * @param {number} [width] The width of the webGL context. This will default to the canvas dimensions
    * @param {number} [height] The height of the webGL context. This will default to the canvas dimensions
    * @param {number} [pxratio=1] The pixel aspect ratio of the canvas
    * @param {boolean} [styleElement] A boolean indicating whether to apply a style property to the canvas (resizing the canvas by the inverse of the pixel ratio)
    * @param {boolean} [webgl2] A boolean indicating whether to try to create a webgl2 context instead of a regulart context
   */
  constructor(el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, styleElement, webgl2, params = {}) {
    this.run = this.run.bind(this);

    this._onRun = () => {};

    // Destructure if an object is aprovided instead a series of parameters
    if (el instanceof Object && el.el) {
      ({ el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, webgl2, styleElement } = el);
    }

    // If the HTML element isn't a canvas, return null
    if (!el instanceof HTMLElement || el.nodeName.toLowerCase() !== 'canvas') {
      console.log('Provided element should be a canvas element');
      return null;
    }

    this._el = el;
    // The context should be either webgl2, webgl or experimental-webgl
    if (webgl2 === true) {
      this.isWebgl2 = true;
      this._ctx = this._el.getContext("webgl2", this.webgl_params) || this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
    } else {
      this.isWebgl2 = false;
      this._ctx = this._el.getContext("webgl", Object.assign({}, this.webgl_params, params)) || this._el.getContext("experimental-webgl", Object.assign({}, this.webgl_params, params));
    }

    // Set up the extensions
    this._ctx.getExtension('OES_standard_derivatives');
    this._ctx.getExtension('EXT_shader_texture_lod');
    this._ctx.getExtension('OES_texture_float');
    this._ctx.getExtension('WEBGL_color_buffer_float');
    this._ctx.getExtension('OES_texture_float_linear');
    this._ctx.getExtension('EXT_color_buffer_float');

    // We can't make the context so return an error
    if (!this._ctx) {
      console.log('Browser doesn\'t support WebGL ');
      return null;
    }

    // Create the shaders
    this._vertexShader = WTCGL.createShaderOfType(this._ctx, this._ctx.VERTEX_SHADER, vertexShaderSource);
    this._fragmentShader = WTCGL.createShaderOfType(this._ctx, this._ctx.FRAGMENT_SHADER, fragmentShaderSource);

    // Create the program and link the shaders
    this._program = this._ctx.createProgram();
    this._ctx.attachShader(this._program, this._vertexShader);
    this._ctx.attachShader(this._program, this._fragmentShader);
    this._ctx.linkProgram(this._program);

    // If we can't set up the params, this means the shaders have failed for some reason
    if (!this._ctx.getProgramParameter(this._program, this._ctx.LINK_STATUS)) {
      console.log('Unable to initialize the shader program: ' + this._ctx.getProgramInfoLog(this._program));
      return null;
    }

    // Initialise the vertex buffers
    this.initBuffers([
    -1.0, 1.0, -1.,
    1.0, 1.0, -1.,
    -1.0, -1.0, -1.,
    1.0, -1.0, -1.]);


    // Initialise the frame buffers
    this.frameBuffers = [];

    // The program information object. This is essentially a state machine for the webGL instance
    this._programInfo = {
      attribs: {
        vertexPosition: this._ctx.getAttribLocation(this._program, 'a_position') },

      uniforms: {
        projectionMatrix: this._ctx.getUniformLocation(this._program, 'u_projectionMatrix'),
        modelViewMatrix: this._ctx.getUniformLocation(this._program, 'u_modelViewMatrix'),
        resolution: this._ctx.getUniformLocation(this._program, 'u_resolution'),
        time: this._ctx.getUniformLocation(this._program, 'u_time') } };



    // Tell WebGL to use our program when drawing
    this._ctx.useProgram(this._program);

    this.pxratio = pxratio;

    this.styleElement = styleElement !== true;

    this.resize(width, height);
  }


  /**
   * Public methods
   */

  addFrameBuffer(w, h, tiling = 0, buffertype = 0) {
    // create to render to
    const gl = this._ctx;
    const targetTextureWidth = w * this.pxratio;
    const targetTextureHeight = h * this.pxratio;
    const targetTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, targetTexture);
    {
      // define size and format of level 0
      const level = 0;
      let internalFormat = gl.RGBA;
      const border = 0;
      let format = gl.RGBA;
      let t;
      if (buffertype & WTCGL.TEXTYPE_FLOAT) {
        const e = gl.getExtension('OES_texture_float');
        window.extension = e;
        t = e.FLOAT;
        // internalFormat = gl.RGBA32F;
      } else if (buffertype & WTCGL.TEXTYPE_HALF_FLOAT_OES) {
        // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
        //     gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : 
        //     gl.UNSIGNED_BYTE;
        const e = gl.getExtension('OES_texture_half_float');
        t = this.isWebgl2 ? gl.HALF_FLOAT : e.HALF_FLOAT_OES;
        // format = gl.RGBA;
        if (this.isWebgl2) {
          internalFormat = gl.RGBA16F;
        }
        // internalFormat = gl.RGB32F;
        // format = gl.RGB32F;
        // window.gl = gl
        // t = e.HALF_FLOAT_OES;
      } else {
        t = gl.UNSIGNED_BYTE;
      }
      const type = t;
      const data = null;
      gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
      targetTextureWidth, targetTextureHeight, border,
      format, type, data);
      // gl.generateMipmap(gl.TEXTURE_2D);

      // set the filtering so we don't need mips
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

      // Set the parameters based on the passed type
      if (tiling === WTCGL.IMAGETYPE_TILE) {
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
      } else if (tiling === WTCGL.IMAGETYPE_MIRROR) {
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
      } else if (tiling === WTCGL.IMAGETYPE_REGULAR) {
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      }
    }

    // Create and bind the framebuffer
    const fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

    // attach the texture as the first color attachment
    const attachmentPoint = gl.COLOR_ATTACHMENT0;
    const level = 0;
    gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);

    return {
      w: w * this.pxratio,
      h: h * this.pxratio,
      fb: fb,
      frameTexture: targetTexture };

  }


  /**
   * Resizes the canvas to a specified width and height, respecting the pixel ratio
   *
   * @param  {number} w The width of the canvas
   * @param  {number} h The height of the canvas
   * @return {Void}
   */
  resize(w, h) {
    this.width = w;
    this.height = h;
    this._el.width = w * this.pxratio;
    this._el.height = h * this.pxratio;
    this._size = [w * this.pxratio, h * this.pxratio];
    if (this.styleElement) {
      this._el.style.width = w + 'px';
      this._el.style.height = h + 'px';
    }

    this._ctx.viewportWidth = w * this.pxratio;
    this._ctx.viewportHeight = h * this.pxratio;

    this._ctx.uniform2fv(this._programInfo.uniforms.resolution, this._size);

    this.initBuffers(this._positions);
  }

  /**
   * Initialise a provided vertex buffer
   *
   * @param  {array} positions The vertex positions to initialise
   * @return {Void}
   */
  initBuffers(positions) {
    this._positions = positions;
    this._positionBuffer = this._ctx.createBuffer();

    this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);

    this._ctx.bufferData(this._ctx.ARRAY_BUFFER,
    new Float32Array(positions),
    this._ctx.STATIC_DRAW);
  }

  /**
   * Add a uniform to the program. At this time the following types are supported:
    * - Float - WTCGL.TYPE_FLOAT
    * - Vector 2 - WTCGL.TYPE_V2
    * - Vector 3 - WTCGL.TYPE_V3
    * - Vector 4 - WTCGL.TYPE_V4
   *
   * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
   * @param  {WTCGL.UNIFORM_TYPE} type The unfiform type 
   * @param  {number|array} value The unfiform value. The type depends on the uniform type being created 
   * @return {WebGLUniformLocation} The uniform location for later reference
   */
  addUniform(name, type, value) {
    let uniform = this._programInfo.uniforms[name];
    uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
    switch (type) {
      case WTCGL.TYPE_INT:
        if (!isNaN(value)) this._ctx.uniform1i(uniform, value);
        break;
      case WTCGL.TYPE_FLOAT:
        if (!isNaN(value)) this._ctx.uniform1f(uniform, value);
        break;
      case WTCGL.TYPE_V2:
        if (value instanceof Array && value.length === 2.) this._ctx.uniform2fv(uniform, value);
        break;
      case WTCGL.TYPE_V3:
        if (value instanceof Array && value.length === 3.) this._ctx.uniform3fv(uniform, value);
        break;
      case WTCGL.TYPE_V4:
        if (value instanceof Array && value.length === 4.) this._ctx.uniform4fv(uniform, value);
        break;
      case WTCGL.TYPE_BOOL:
        if (!isNaN(value)) this._ctx.uniform1i(uniform, value);
        break;}

    this._programInfo.uniforms[name] = uniform;
    return uniform;
  }

  /**
   * Adds a texture to the program and links it to a named uniform. Providing the type changes the tiling properties of the texture. Possible values for type:
   * - WTCGL.IMAGETYPE_REGULAR - No tiling, clamp to edges and doesn't need to be power of 2.
   * - WTCGL.IMAGETYPE_TILE - full x and y tiling, needs to be power of 2.
   * - WTCGL.IMAGETYPE_MIRROR - mirror tiling, needs to be power of 2.
   *
   * @public
  * @param  {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
   * @param  {WTCGL.TYPE_IMAGETYPE} type The type of texture to create. This is basically the tiling behaviour of the texture as described above
  * @param  {Image} image The image object to add to the texture
   * @return {WebGLTexture} The texture object
   */
  addTexture(name, type, image, liveUpdate = false) {

    var texture = this._ctx.createTexture();
    this._ctx.pixelStorei(this._ctx.UNPACK_FLIP_Y_WEBGL, true);
    this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);

    // this._ctx.generateMipmap(this._ctx.TEXTURE_2D);

    // Set the parameters based on the passed type
    if (type === WTCGL.IMAGETYPE_MIRROR) {
      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.MIRRORED_REPEAT);
      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.MIRRORED_REPEAT);
    } else if (type === WTCGL.IMAGETYPE_REGULAR) {
      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.CLAMP_TO_EDGE);
      this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.CLAMP_TO_EDGE);
    }

    this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MIN_FILTER, this._ctx.LINEAR);
    // this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MAG_FILTER, this._ctx.LINEAR);

    // Upload the image into the texture.
    this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);

    // add the texture to the array of textures.
    this.pushTexture(name, texture, image, this._ctx.TEXTURE_2D, liveUpdate);


    return texture;
  }

  pushTexture(name, texture, image, target, liveUpdate = false) {
    let textures = this.textures;

    textures.push({ name: name, tex: texture, liveUpdate: liveUpdate, image: image, target: target });

    // Finally set the this.textures (this is just to get around the funnyness of default getters)
    this.textures = textures;
  }

  /**
   * Updates a texture location for a given WebGLTexture with an image
   *
   * @param  {WebGLTexture} texture T.........完整代码请登录后点击上方下载按钮下载查看