基于Three.js实现的太空陨石雨动画特效着色器代码

shader codes for starfall

webgl, three.js, star, fall

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*
  The only thing to see here really is the uniforms sent to 
  the shader. Apart from that all of the magic happens in the HTML view
  under the fragment shader.
  */

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 w = 2048;
var h = 1024;

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/1811/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(window.innerWidth * textureFraction, window.innerHeight * textureFraction);
    rtTexture2 = new THREE.WebGLRenderTarget(window.innerWidth * textureFraction, 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: "v3",
            value: new THREE.Vector3()
        },
        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();
    });
    document.addEventListener('pointerdown', function(e) {
        if (e.button === 0) {
            uniforms.u_mouse.value.z = 1;
        } else if (e.button === 2) {
            uniforms.u_mouse.value.w = 1;
        }
        e.preventDefault();
    });
    document.addEventListener('pointerup', function(e) {
        if (e.button === 0) {
            uniforms.u_mouse.value.z = 0;
        } else if (e.button === 2) {
            uniforms.u_mouse.value.w = 0;
        }
        e.preventDefault();
    });
}

function onWindowResize(event) {
    w = 2048;
    h = 1024;
    w = window.innerWidth;
    h = window.innerHeight;

renderer.setSize(w, h);
    uniforms.u_resolution.value.x = renderer.domElement.width;
    uniforms.u_resolution.value.y = renderer.domElement.height;

uniforms.u_frame.value = 0;

rtTexture = new THREE.WebGLRenderTarget(w * textureFraction, h * textureFraction);
    rtTexture2 = new THREE.WebGLRenderTarget(w * textureFraction, h * textureFraction);
}

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 = w * textureFraction;
    uniforms.u_resolution.value.y = h * 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

const float zoomSpeed = 3.;
  const int layers = 5;
  
  mat2 rotate2d(float _angle){
      return mat2(cos(_angle),sin(_angle),
                  -sin(_angle),cos(_angle));
  }

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);
  }
  
  // The render function is where we render the pattern to be added to the layer
  vec3 render(vec2 uv, float scale) {
    vec2 id = floor(uv);
    vec2 subuv = fract(uv);
    vec2 rand = hash2(id);
    float bokeh = abs(scale) * 1.;
    
    float particle = 0.;
    
    if(length(rand) > 1.3) {
      vec2 pos = subuv-.5;
      float field = length(pos);
      particle = smoothstep(.7, 0., field);
      particle += smoothstep(.2, 0.2 * bokeh, field);
    }
    return vec3(particle*2.);
  }
  
  vec3 renderLayer(int layer, int layers, vec2 uv, inout float opacity) {
    vec2 _uv = uv;
    // Scale
    // Generating a scale value between zero and 1 based on a mod of u_time
    // A frequency of 10 dixided by the layer index (10 / layers * layer)
    float scale = mod((u_time + zoomSpeed / float(layers) * float(layer)) / zoomSpeed, -1.);
    uv *= 20.; // The initial scale. Increasing this makes the cells smaller and the "speed" apepar faster
    uv *= scale*scale; // then modifying the overall scale by the generated amount
    // uv *= 1. + ( ( n*.5 ) * ( length(_uv) ) );
    // uv += .5*float(layer);
    uv = rotate2d(u_time / 10.) * uv; // rotarting
    uv += vec2(25. + sin(u_time*.1)*.2) * float(layer); // ofsetting the UV by an arbitrary amount to make the layer appear different

// render
    vec3 pass = render(uv * multiplier, scale) * .2; // render the pass

// this is the opacity of the layer fading in from the "bottom"
    opacity = 1. + scale;
    float _opacity = opacity;
    
    // pass += n * .5 * mix(vec3(0., .5, 1.5), vec3(1., .5, 0.), opacity);
    
    // This is the opacity of the layer fading out at the top (we want this minimal, hence the smoothstep)
    float endOpacity = smoothstep(0., 0.4, scale * -1.);
    opacity += endOpacity;

return pass * _opacity * endOpacity;
  }

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;
        
    vec4 fragcolour;
    
    if(u_renderpass == true) {
      
      if(u_frame > 5) {
        fragcolour = texture2D(u_buffer, sample) * 6.;
        // fragcolour *= pow(fragcolour, vec4(.5));
        // fragcolour *= fragcolour*.2;
      }
      uv *= rotate2d(u_time*.5);
      
      float opacity = 1.;
      float opacity_sum = 1.;

for(int i = 1; i <= layers; i++) {
        fragcolour += clamp(vec4(renderLayer(i, layers, uv, opacity), 1.) * 5., 0., 5.);
        // fragcolour = mix(fragcolour, vec4(1), vec4(renderLayer(i, layers, uv, opacity), 1.)*.005);
        opacity_sum += opacity;
      }

fragcolour *= 1./opacity_sum;
    } else {
      fragcolour = texture2D(u_buffer, sample) * 5.;
    }
    
    // vec3 fragcolour = colour(uv);

gl_FragColor = fragcolour;
  }
</script>

shader codes for starfall

webgl, three.js, star, fall

编辑器支持Emmet

快捷键

shader codes for starfall

webgl, three.js, star, fall

使用WebGL Three.js着色器代码实现的非规则球体变形背景动画

WebGL Three.js 彩虹液态物质（液体）动画特效的着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：