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

Ashfall scene with three.js，很棒的着色器特效！

webgl, shader, ashfall

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* Most 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 loader = new THREE.TextureLoader();
var texture = void 0;
loader.setCrossOrigin("anonymous");
loader.load(
    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/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);

uniforms = {
        u_time: {
            type: "f",
            value: 1.0
        },
        u_resolution: {
            type: "v2",
            value: new THREE.Vector2()
        },
        u_noise: {
            type: "t",
            value: texture
        },
        u_mouse: {
            type: "v2",
            value: new THREE.Vector2()
        }
    };

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;
        uniforms.u_mouse.value.x = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
        uniforms.u_mouse.value.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;
}

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 render(delta) {

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

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

编译

CSS

HTML

const float zoomSpeed = 10.;
  const int layers = 10;

const int octaves = 5;

vec2 hash2(vec2 p)
  {
    vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
    return o;
  }
  
  mat2 rotate2d(float _angle){
      return mat2(cos(_angle),sin(_angle),
                  -sin(_angle),cos(_angle));
  }
  
  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);
  }
  
  float hash(vec2 p)
  {
    float o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).x;
    return o;
  }
  float noise(vec2 uv) {
    vec2 id = floor(uv);
    vec2 subuv = fract(uv);
    vec2 u = subuv * subuv * (3. - 2. * subuv);
    float a = hash(id);
    float b = hash(id + vec2(1., 0.));
    float c = hash(id + vec2(0., 1.));
    float d = hash(id + vec2(1., 1.));
    return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
  }
  float fbm(in vec2 uv) {
    float s = .0;
    float m = .0;
    float a = .5;
    for(int i = 0; i < octaves; i++) {
      s += a * noise(uv);
      m += a;
      a *= .5;
      uv *= 2.;
    }
    return s / m;
  }
  
  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, vec3 colour) {
    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(.3, 0., field);
      particle += smoothstep(.4 * bokeh, 0.34 * bokeh, field);
    }
    return vec3(particle*2.);
  }
  
  vec3 renderLayer(int layer, int layers, vec2 uv, inout float opacity, vec3 colour) {
    // 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 += .5*float(layer);
    uv = rotate2d(u_time / 10.) * uv; // rotarting
    uv += vec2(25. + sin(u_time*.1)) * float(layer); // ofsetting the UV by an arbitrary amount to make the layer appear different

// render
    vec3 pass = render(uv * multiplier, scale, colour) * .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);

if(u_resolution.y < u_resolution.x) {
        uv /= u_resolution.y;
      } else {
        uv /= u_resolution.x;
      }

// uv.y += cos(u_time * .1) * .5;
      // uv.x += sin(u_time * .1) * .5;
    
      // float n = fbm(uv * 3. - 2.);
      float n = fbm((uv + sin(u_time*.1)) * 2. - 2.);

vec3 colour = vec3(0.);
      // colour = n * mix(vec3(0., .5, 1.5), vec3(1., .5, -.1), n);
      colour = n * mix(vec3(0., .5, 1.5)*1.5, clamp(vec3(1., .5, .25)*2., 0., 1.), n);
      n = 1. - n;
      // colour -= n*n*n*n*.4;
      // colour += smoothstep(.8, 2.5, sin(n*n*n*8.))*.4;

float opacity = 1.;
      float opacity_sum = 1.;

for(int i = 1; i <= layers; i++) {
        colour += renderLayer(i, layers, uv, opacity, colour);
        opacity_sum += opacity;
      }

colour /= opacity_sum;

gl_FragColor = vec4(1. - clamp(colour * 20., 0., 1.),1.0);
  }
</script>

Ashfall scene with three.js，很棒的着色器特效！

webgl, shader, ashfall

编辑器支持Emmet

快捷键

Ashfall scene with three.js，很棒的着色器特效！

webgl, shader, ashfall

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

HTML5 WebGL 2050地球世界末日3D景象模拟

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：