HTML5 WebGL带鼠标跟踪的月晕涟漪动画特效

mouse tracking with ripple effects

webgl, moon, wave

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var container = void 0;
var camera = void 0,
    scene = void 0,
    renderer = void 0;
var uniforms = void 0;

var divisor = 1 / 8;
var textureFraction = 1 / 1;

var newmouse = {
    x: 0,
    y: 0
};

var loader = new THREE.TextureLoader();
var texture = void 0,
    rtTexture = void 0,
    rtTexture2 = void 0;
loader.setCrossOrigin("anonymous");
loader.load(
    '/uploads/1805/noise.png',
    function do_something_with_texture(tex) {
        texture = tex;
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        texture.minFilter = THREE.LinearFilter;
        init();
        animate();
    });

function init() {
    container = document.getElementById('container');

camera = new THREE.Camera();
    camera.position.z = 1;

scene = new THREE.Scene();

var geometry = new THREE.PlaneBufferGeometry(2, 2);

rtTexture = new THREE.WebGLRenderTarget(Math.floor(window.innerWidth * textureFraction), Math.floor(window.innerHeight * textureFraction));
    rtTexture2 = new THREE.WebGLRenderTarget(Math.floor(window.innerWidth * textureFraction), Math.floor(window.innerHeight * textureFraction));

uniforms = {
        u_time: {
            type: "f",
            value: 1.0
        },
        u_resolution: {
            type: "v2",
            value: new THREE.Vector2()
        },
        u_noise: {
            type: "t",
            value: texture
        },
        u_buffer: {
            type: "t",
            value: rtTexture.texture
        },
        u_mouse: {
            type: "v2",
            value: new THREE.Vector2()
        },
        u_frame: {
            type: "i",
            value: -1.
        },
        u_renderpass: {
            type: 'b',
            value: false
        }
    };

var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent
    });

material.extensions.derivatives = true;

var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);

container.appendChild(renderer.domElement);

onWindowResize();
    window.addEventListener('resize', onWindowResize, false);

document.addEventListener('pointermove', function(e) {
        var ratio = window.innerHeight / window.innerWidth;
        if (window.innerHeight > window.innerWidth) {
            newmouse.x = (e.pageX - window.innerWidth / 2) / window.innerWidth;
            newmouse.y = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1 * ratio;
        } else {
            newmouse.x = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
            newmouse.y = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
        }

e.preventDefault();
    });
}

function onWindowResize(event) {
    renderer.setSize(window.innerWidth, window.innerHeight);
    uniforms.u_resolution.value.x = renderer.domElement.width;
    uniforms.u_resolution.value.y = renderer.domElement.height;

rtTexture = new THREE.WebGLRenderTarget(window.innerWidth * textureFraction, window.innerHeight * textureFraction);
    rtTexture2 = new THREE.WebGLRenderTarget(window.innerWidth * textureFraction, window.innerHeight * textureFraction);

uniforms.u_frame.value = -1;
}

function animate(delta) {
    requestAnimationFrame(animate);
    render(delta);
}

var capturer = new CCapture({
    verbose: true,
    framerate: 60,
    // motionBlurFrames: 4,
    quality: 90,
    format: 'webm',
    workersPath: 'js/'
});

var capturing = false;

isCapturing = function isCapturing(val) {
    if (val === false && window.capturing === true) {
        capturer.stop();
        capturer.save();
    } else if (val === true && window.capturing === false) {
        capturer.start();
    }
    capturing = val;
};
toggleCapture = function toggleCapture() {
    isCapturing(!capturing);
};

window.addEventListener('keyup', function(e) {
    if (e.keyCode == 68) toggleCapture();
});

var then = 0;

function renderTexture(delta) {
    // let ov = uniforms.u_buff.value;

var odims = uniforms.u_resolution.value.clone();
    uniforms.u_resolution.value.x = window.innerWidth * textureFraction;
    uniforms.u_resolution.value.y = window.innerHeight * textureFraction;

uniforms.u_buffer.value = rtTexture2.texture;

uniforms.u_renderpass.value = true;

//   rtTexture = rtTexture2;
    //   rtTexture2 = buffer;

window.rtTexture = rtTexture;
    renderer.setRenderTarget(rtTexture);
    renderer.render(scene, camera, rtTexture, true);

var buffer = rtTexture;
    rtTexture = rtTexture2;
    rtTexture2 = buffer;

// uniforms.u_buff.value = ov;

uniforms.u_buffer.value = rtTexture.texture;
    uniforms.u_resolution.value = odims;
    uniforms.u_renderpass.value = false;
}

function render(delta) {
    uniforms.u_frame.value++;

uniforms.u_mouse.value.x += (newmouse.x - uniforms.u_mouse.value.x) * divisor;
    uniforms.u_mouse.value.y += (newmouse.y - uniforms.u_mouse.value.y) * divisor;

uniforms.u_time.value = delta * 0.0005;
    renderer.render(scene, camera);
    renderTexture();

if (capturing) {
        capturer.capture(renderer.domElement);
    }
}

编译

CSS

HTML

vec2 hash2(vec2 p)
  {
    vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
    return o;
  }
  
  vec3 hsb2rgb( in vec3 c ){
    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
                             6.0)-3.0)-1.0,
                     0.0,
                     1.0 );
    rgb = rgb*rgb*(3.0-2.0*rgb);
    return c.z * mix( vec3(1.0), rgb, c.y);
  }
  
  vec3 domain(vec2 z){
    return vec3(hsb2rgb(vec3(atan(z.y,z.x)/TAU,1.,1.)));
  }
  vec3 colour(vec2 z) {
      return domain(z);
  }
  
  const float delta = .005;

void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    vec2 sample = gl_FragCoord.xy / u_resolution.xy;
    float ratio = u_resolution.x / u_resolution.y;
    
    vec2 mouse = u_mouse.xy - uv;
    
    vec4 fragcolour = texture2D(u_buffer, sample);
    
    if(u_renderpass) {
      // float shade = 1. - smoothstep(.1, .15, length(mouse));
      float shade = smoothstep(.08 + abs(sin(u_time*10.) * .006), .0, length(mouse));
      // shade -= (smoothstep(.185, .0, length(mouse))-shade)*2.;
      
      vec4 texcol = fragcolour;
      
      float d = shade*2.;
      
      
      float t = texture2D(u_buffer, sample + vec2(0., -delta*ratio)).x;
      float r = texture2D(u_buffer, sample + vec2(delta, 0.)).x;
      float b = texture2D(u_buffer, sample + vec2(0., delta*ratio)).x;
      float l = texture2D(u_buffer, sample + vec2(-delta, 0.)).x;
      
      // fragcolour = (fragcolour + t + r + b + l) / 5.;
      d += -(texcol.y-.5)*2. + (t + r + b + l - 2.);
      d *= .98;
      d *= float(u_frame>=2); // clear the buffer at iFrame < 2
      d = d*.5+.5;
      
      fragcolour = vec4(d, texcol.x, 0, 0);

} else {
      fragcolour = texture2D(u_buffer, sample + fragcolour.rg * .005);
      fragcolour = vec4(fragcolour.x * fragcolour.x);
    }
    
    
    // vec3 fragcolour = colour(uv);

gl_FragColor = fragcolour ;
  }
</script>

mouse tracking with ripple effects

webgl, moon, wave

编辑器支持Emmet

快捷键

mouse tracking with ripple effects

webgl, moon, wave

HTML5 WebGL流体（液体）动画特效制作演示网站和教程

HTML5 WebGL 火山爆发（火山灰）灭世末日景象动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：