WebGL波浪图像悬停显示（TWGL）

下载代码

html

css

分享到微信朋友圈

html

<script id="vs" type="f">
  attribute vec2 position;
  attribute vec2 texcoord;

uniform mat3 u_matrix;

varying vec2 v_texcoord;
  varying vec2 v_pos;

void main() {
    gl_Position = vec4(u_matrix * vec3(position, 1), 1);
    v_pos = position;
    v_texcoord = texcoord;
  }
</script>

<script id="fs" type="f">
  precision mediump float;
  
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }

float snoise(vec2 v) {
    const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
                        0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
                        -0.577350269189626,  // -1.0 + 2.0 * C.x
                        0.024390243902439); // 1.0 / 41.0
    vec2 i  = floor(v + dot(v, C.yy) );
    vec2 x0 = v -   i + dot(i, C.xx);
    vec2 i1;
    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
    vec4 x12 = x0.xyxy + C.xxzz;
    x12.xy -= i1;
    i = mod289(i); // Avoid truncation effects in permutation
    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
        + i.x + vec3(0.0, i1.x, 1.0 ));

vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
    m = m*m ;
    m = m*m ;
    vec3 x = 2.0 * fract(p * C.www) - 1.0;
    vec3 h = abs(x) - 0.5;
    vec3 ox = floor(x + 0.5);
    vec3 a0 = x - ox;
    m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
    vec3 g;
    g.x  = a0.x  * x0.x  + h.x  * x0.y;
    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
    return 130.0 * dot(m, g);
}
  
  #define LAYERS 50
	#define DEPTH .25
	#define WIDTH .3
	#define SPEED .6
  
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D u_darkImage;

varying vec2 v_texcoord;
  varying vec2 v_pos;

void main() {
    
    vec2 pos = vec2(gl_FragCoord/75.0);

float DF = 0.0;

// Add a random position
    float a = 0.0;
    vec2 vel = vec2(u_time*.1);
    DF += snoise(pos+vel)*.25+.25;

// Add a random position
    a = snoise(pos*vec2(cos(u_time*0.25),sin(u_time*0.1))*0.1);
    vel = vec2(cos(a),sin(a));
    DF += snoise(pos+vel)*.25+.25;
    
    float range = 200.0 - 75.0 * smoothstep(.5,.75,fract(DF));
    
    float dist = distance(u_mouse, gl_FragCoord.xy);
    float mixAmount = clamp((dist - 10.0) / range, 0., 1.);
    
    vec4 img1 = texture2D(u_darkImage, v_texcoord);
    
    vec3 lum = vec3(0.299, 0.587, 0.114);
    vec4 bandw = vec4( vec3(dot( img1.rgb, lum)), img1.a - 0.9);

gl_FragColor = mix(img1 * 1.5, bandw, mixAmount);
  }
</script>

css

JavaScript

class Ting {
  constructor() {
    this.canvas = document.getElementById("canvas");

this.setup = this.setup.bind(this);
    this.render = this.render.bind(this);
    this.onMouseMove = this.onMouseMove.bind(this);

this.setup();
    this.addEvents();
  }

addEvents() {
    window.addEventListener("mousemove", this.onMouseMove);
    // window.addEventListener('touchmove', this.onMouseMove)
  }

setup() {
    this.mousePerspective = {
      _x: 0,
      _y: 0,
      x: 0,
      y: 0,
      origin: {
        x: 0,
        y: 0 },

updatePosition: function (e) {
        var e = event || window.event;
        this.x = e.clientX - this.origin.x;
        this.y = (e.clientY - this.origin.y) * -1;
      },
      setOrigin: function (e) {
        this.origin.x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
        this.origin.y = e.offsetTop + Math.floor(e.offsetHeight / 2);
      } };

this.mouseCanvas = { x: -500, y: -500, _x: -500, _y: -500 };

this.gl = this.canvas.getContext("webgl", { premultipliedAlpha: false });
    this.rect = this.canvas.getBoundingClientRect();

// compile shaders, link program, lookup location
    this.programInfo = twgl.createProgramInfo(this.gl, ["vs", "fs"]);
    this.bufferInfo = twgl.primitives.createXYQuadBufferInfo(this.gl);

this.mousePerspective.setOrigin(this.canvas);

this.imageSize = { width: 1, height: 1 }; // replaced after loading
    this.texture = twgl.createTextures(
    this.gl,
    {
      darkTexture: {
        src:
        "http://www.jq22.com/tp/6370695285702246118614599.png" } },

(err, textures, sources) => {
      // Textures Loaded

if (err) {
        console.error(err);
      }

this.imageSize = sources.darkTexture;
      this.darkTexture = textures.darkTexture;

this.render();
    });

}

render(time) {
    twgl.resizeCanvasToDisplaySize(this.gl.canvas);

this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);

this.gl.clearColor(0, 0, 0, 0);
    this.gl.clear(this.gl.COLOR_BUFFER_BIT);

this.gl.useProgram(this.programInfo.program);

// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
    twgl.setBuffersAndAttributes(this.gl, this.programInfo, this.bufferInfo);

const canvasAspect =
    this.gl.canvas.clientWidth / this.gl.canvas.clientHeight;
    const imageAspect = this.imageSize.width / this.imageSize.height;
    const mat = this.scaling(imageAspect / canvasAspect, -1);

// calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
    twgl.setUniforms(this.programInfo, {
      u_matrix: mat,
      u_darkImage: this.darkTexture,
      u_mouse: [this.mouseCanvas.x, this.mouseCanvas.y],
      u_time: time * 0.001 });

this.mouseCanvas.x = this.lerp(
    this.mouseCanvas.x,
    this.mouseCanvas._x,
    0.1);

this.mouseCanvas.y = this.lerp(
    this.mouseCanvas.y,
    this.mouseCanvas._y,
    0.1);

this.mousePerspective.x = this.lerp(
    this.mousePerspective.x,
    this.mousePerspective._x,
    0.1);

this.mousePerspective.y = this.lerp(
    this.mousePerspective.y,
    this.mousePerspective._y,
    0.1);

this.canvas.style.transform = `rotateX(${
    this.mousePerspective._x
    }deg) rotateY(${this.mousePerspective._y}deg)`;

// calls gl.drawArrays or gl.drawElements
    twgl.drawBufferInfo(this.gl, this.bufferInfo);

requestAnimationFrame(this.render);
  }

onMouseMove(e) {
    this.mousePerspective.updatePosition(e);
    this.mouseCanvas._x =
    (e.clientX - this.rect.left) * this.canvas.width / this.rect.width;
    this.mouseCanvas._y =
    this.canvas.height -
    (e.clientY - this.rect.top) * this.canvas.height / this.rect.height;
    this.mousePerspective._x = (
    this.mousePerspective.y /
    this.canvas.offsetHeight /
    2).
    toFixed(2);
    this.mousePerspective._y = (
    this.mousePerspective.x /
    this.canvas.offsetWidth /
    2).
    toFixed(2);
  }

/**
     * Creates a 2D scaling matrix
     * @param {number} sx amount to scale in x
     * @param {number} sy amount to scale in y
     * @return {Matrix3} a scale matrix that scales by sx and sy.
     */
  scaling(sx, sy) {
    return [sx, 0, 0, 0, sy, 0, 0, 0, 1];
  }

lerp(start, end, amt) {
    return (1 - amt) * start + amt * end;
  }

destroy() {
    // TODO: clean
  }}

new Ting();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg