WebGL实现鼠标圆形焦点和图像悬停变色

change on image hover，用到了WTCGL.js库

webgl, shader, 图像特效

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2089
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

const twodWebGL = new WTCGL(
  document.querySelector('canvas#webgl'), 
  document.querySelector('script#vertexShader').textContent, 
  document.querySelector('script#fragmentShader').textContent,
  window.innerWidth, window.innerHeight, window.devicePixelRatio
);
twodWebGL.startTime = -10000 + Math.random() * 5000;

// twodWebGL.addUniform('xscale', WTCGL.TYPE_FLOAT, 0.5);

window.addEventListener('resize', () => {
  twodWebGL.resize(window.innerWidth, window.innerHeight);
});

// track mouse move
let mousepos = [0,0];
const u_mousepos = twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
window.addEventListener('pointermove', (e) => {
  let ratio = window.innerHeight / window.innerWidth;
  if(window.innerHeight > window.innerWidth) {
    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth;
    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1 * ratio;
  } else {
    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
  }
  twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
});

// Load all our textures. We only initiate the instance once all images are loaded.
const textures = [
  {
    name: 'noise',
    url: '/uploads/1811/noise.png',
    type: WTCGL.IMAGETYPE_TILE,
    img: null
  }
];
const loadImage = function (imageObject) {
  let img = document.createElement('img');
  img.crossOrigin="anonymous";
  
  return new Promise((resolve, reject) => {
    img.addEventListener('load', (e) => {
      imageObject.img = img;
      resolve(imageObject);
    });
    img.addEventListener('error', (e) => {
      reject(e);
    });
    img.src = imageObject.url
  });
}
const loadTextures = function(textures) {
  return new Promise((resolve, reject) => {
    const loadTexture = (pointer) => {
      if(pointer >= textures.length || pointer > 10) {
        resolve(textures);
        return;
      };
      const imageObject = textures[pointer];

loadTextures(textures).then(
  (result) => {
    twodWebGL.initTextures();
    // twodWebGL.render();
    twodWebGL.running = true;
  },
  (error) => {
    console.log('error');
  }
);

编译

CSS

HTML

vec2 diagonalhash2(vec2 p)
  {
    return fract(vec2(sin((p.x + p.y) * 15.543) * 73964.686, sin((p.x + p.y) * 55.8543)*28560.986));
  }
  
  vec3 getColour(float d) {
    vec3 c = vec3(0.15);
    if( d <= .25 ) {
      // #F44336
      c = vec3(0.9568627450980393, 0.2627450980392157, 0.21176470588235294);
    } else if( d <= .5 ) {
      // #1E88E5
      c = vec3(0.11764705882352941, 0.5333333333333333, 0.8980392156862745);
    } else if( d <= .75 ) {
      // #FDD835
      c = vec3(0.9921568627450981, 0.8470588235294118, 0.20784313725490197);
    }
    
    return c;
  }
  
  vec3 pattern(vec2 uv, vec2 m) {
    
    vec2 grid = floor(uv);
    vec2 subuv = fract(uv);
    
    vec2 rand = diagonalhash2(grid);
    vec2 rand2 = diagonalhash2(grid + 100.);
    float shade = 0.;
    float df;
    
    // float s = sin(u_time);
    // float c = cos(u_time);
    // subuv *= mat2(c, -s, s, c);
    
    if( rand.x <= .25 ) {
      df = subuv.x - subuv.y; // tl
    } else if( rand.x <= .5 ) {
      df = 1. - subuv.y - subuv.x;
    } else if( rand.x <= .75 ) {
      df = subuv.y - subuv.x;
    } else if( rand.x <= 1. ) {
      // subuv += .1;
      df = subuv.y - 1. + subuv.x;
    }
    
    shade = sin(df * floor(20. * rand.x * rand.y));
    shade += sin(df * rand.x * rand.y);
    float aa = rand.x * rand.y * .001;
    shade = smoothstep(.0, aa, shade);
    
    float mouseMask = smoothstep(.3, .31, length(m));
    vec3 c1 = mix(getColour(rand.x), getColour(rand2.x), mouseMask);
    vec3 c2 = mix(getColour(rand.y), getColour(rand2.y), mouseMask);
    
    return mix(c1, c2, shade );
  }

void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    gl_FragColor = texture2D(u_noise, uv + diagonalhash2(uv + u_time)) * .2;
    
    vec2 m = u_mouse - uv;
    
    uv.y += sin(u_time) * .2;
    uv.x += u_time * .5;
    
    uv *= 6.;
    
    vec3 colour = pattern(uv, m);

gl_FragColor += vec4(colour,1.0);
  }
  
</script>

change on image hover，用到了WTCGL.js库

webgl, shader, 图像特效

编辑器支持Emmet

快捷键

change on image hover，用到了WTCGL.js库

webgl, shader, 图像特效

使用位移图像实现的WebGL失真（畸变）特效

基于WebGL和ReactMotion实现的一款3D条形图表插件（在线演示）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：