html5 canvas飘动火焰动画特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

9 33 12



特效描述:飘动火焰动画。基于canvas绘制微风吹动的火焰燃烧动画特效。ps:本地下载需要在localhost下正常访问。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/three.min.js"></script>
<script src="js/index.js"></script>

3. HTML代码

<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        gl_Position = vec4( position, 1.0 );
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D u_noise;
  #define PI 3.14159265359
  #define TAU 6.283185307179586
  float tri( float x ) { 
    return abs( fract(x) - .5 );
  }
  vec3 tri3( vec3 p ){
    return vec3( 
        tri( p.z + tri( p.y * 1. ) ), 
        tri( p.z + tri( p.x * 1. ) ), 
        tri( p.y + tri( p.x * 1. ) )
    );
  }
  float triNoise3D( vec3 p, float spd , float time){
    float z  = 1.4;
    float rz =  0.;
    vec3  bp =   p;
    for( float i = 0.; i <= 3.; i++ ){
      vec3 dg = tri3( bp * 2. );
      p += ( dg + time * .1 * spd );
      bp *= 1.8;
      z  *= 1.5;
      p  *= 1.2; 
      float t = tri( p.z + tri( p.x + tri( p.y )));
      rz += t / z;
      bp += 0.14;
    }
    return rz;
  }
  void main() {
    float scale = .4;
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    vec3 highlightColour;
    vec3 bodyColour;
    vec3 bgColour = mix(vec3(0., .0, .1), vec3(.6,.45,.1) * .5, uv.y + .1);
    bgColour += (1. - length(uv * 1.5)) * .2;
    vec2 pos = uv / .5;
    float bottom = 0.5*(pos.y+1.0) * sin(u_time);
    vec2 wave = vec2(0.);
    wave.x += bottom*sin(4.0*pos.y-8.0*u_time)*.5;
    pos += .25*wave;
    pos.x += pos.x / (1.0-(pos.y));
    float flameMask = clamp(1.0-length(pos), 0.0, 1.0);
    flameMask = 1.0-pow(1.0-flameMask, 4.);
    bodyColour = mix(vec3(0.5,0.2,0.2), vec3(0.55,0.25,0.0), uv.y + flameMask);
    highlightColour = mix(vec3(1.0,.5,0.0), vec3(1.0,2.0,0.0), uv.y * (1. - flameMask * flameMask));
    vec3 uv3d = scale*0.1*vec3(uv.x, uv.y, 0.0);
    uv3d += vec3(0.0, -u_time*0.04, u_time*0.02);
    float noise = triNoise3D(uv3d * 5. + flameMask * .05, 0., u_time);
    noise = noise * 1.5 - .2;
    vec3 colour;
    float value = flameMask*noise;    
    value += .5*flameMask;
    float flame_edge = flameMask * 0.3*(pos.y+1.0);
    float edge = clamp(value-flame_edge*2., 0.0 , 1.0);
    float hardMask = smoothstep(flame_edge,flame_edge+0.1, value);
    float highlight = 1.0-edge*edge;
    uv3d = vec3(uv.x, uv.y, 0.0) + vec3(0.0, -u_time*0.01, u_time*0.025);
    highlight = pow(highlight, 2.0);
    // colour += glow * 2.;
    colour = highlightColour*(hardMask*highlight);
    colour = mix(bgColour, colour, hardMask);
    colour += bodyColour*flameMask*flameMask;
    gl_FragColor = vec4(colour,1.0);
  }
</script>
<div id="container" touch-action="none"></div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: html5动画导航菜单 html5图片动画 html5文字动画 html5表情动画 html5线条动画 html5飘落动画 html5光标动画 html5悬停动画 加载动画 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到