本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • VIP会员
  • html5 canvas烂漫的空中散落的花瓣动画特效
    时间:2019-11-30 15:34 来源:开源之家 作者:开源之家测试提供 下载:86 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:8.17 KB
    • 运行环境:HTML
    • 下载次数:86 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    html5 canvas烂漫的空中散落的花瓣动画特效

    特效描述:html5 canvas 空中散落 花瓣动画特效,请用Google浏览器打开查看,不兼容Firefox浏览器。

    代码结构

    1. 引入JS

    1
    <script src="js/index.js"></script>

    2. HTML代码

    <style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
    </style>
      <canvas id="sakura"></canvas>
    <!-- sakura shader -->
    <script id="sakura_point_vsh" type="x-shader/x_vertex">
    uniform mat4 uProjection;
    uniform mat4 uModelview;
    uniform vec3 uResolution;
    uniform vec3 uOffset;
    uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
    uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
    attribute vec3 aPosition;
    attribute vec3 aEuler;
    attribute vec2 aMisc; //x:size, y:fade
    varying vec3 pposition;
    varying float psize;
    varying float palpha;
    varying float pdist;
    //varying mat3 rotMat;
    varying vec3 normX;
    varying vec3 normY;
    varying vec3 normZ;
    varying vec3 normal;
    varying float diffuse;
    varying float specular;
    varying float rstop;
    varying float distancefade;
    void main(void) {
        // Projection is based on vertical angle
        vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
        gl_Position = uProjection * pos;
        gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;
        pposition = pos.xyz;
        psize = aMisc.x;
        pdist = length(pos.xyz);
        palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);
        vec3 elrsn = sin(aEuler);
        vec3 elrcs = cos(aEuler);
        mat3 rotx = mat3(
            1.0, 0.0, 0.0,
            0.0, elrcs.x, elrsn.x,
            0.0, -elrsn.x, elrcs.x
        );
        mat3 roty = mat3(
            elrcs.y, 0.0, -elrsn.y,
            0.0, 1.0, 0.0,
            elrsn.y, 0.0, elrcs.y
        );
        mat3 rotz = mat3(
            elrcs.z, elrsn.z, 0.0, 
            -elrsn.z, elrcs.z, 0.0,
            0.0, 0.0, 1.0
        );
        mat3 rotmat = rotx * roty * rotz;
        normal = rotmat[2];
        mat3 trrotm = mat3(
            rotmat[0][0], rotmat[1][0], rotmat[2][0],
            rotmat[0][1], rotmat[1][1], rotmat[2][1],
            rotmat[0][2], rotmat[1][2], rotmat[2][2]
        );
        normX = trrotm[0];
        normY = trrotm[1];
        normZ = trrotm[2];
        const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);
        float tmpdfs = dot(lit, normal);
        if(tmpdfs < 0.0) {
            normal = -normal;
            tmpdfs = dot(lit, normal);
        }
        diffuse = 0.4 + tmpdfs;
        vec3 eyev = normalize(-pos.xyz);
        if(dot(eyev, normal) > 0.0) {
            vec3 hv = normalize(eyev + lit);
            specular = pow(max(dot(hv, normal), 0.0), 20.0);
        }
        else {
            specular = 0.0;
        }
        rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
        rstop = pow(rstop, 0.5);
        //-0.69315 = ln(0.5)
        distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
    }
    </script>
    <script id="sakura_point_fsh" type="x-shader/x_fragment">
    #ifdef GL_ES
    //precision mediump float;
    precision highp float;
    #endif
    uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
    uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
    const vec3 fadeCol = vec3(0.08, 0.03, 0.06);
    varying vec3 pposition;
    varying float psize;
    varying float palpha;
    varying float pdist;
    //varying mat3 rotMat;
    varying vec3 normX;
    varying vec3 normY;
    varying vec3 normZ;
    varying vec3 normal;
    varying float diffuse;
    varying float specular;
    varying float rstop;
    varying float distancefade;
    float ellipse(vec2 p, vec2 o, vec2 r) {
        vec2 lp = (p - o) / r;
        return length(lp) - 1.0;
    }
    void main(void) {
        vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;
        vec3 d = vec3(0.0, 0.0, -1.0);
        float nd = normZ.z; //dot(-normZ, d);
        if(abs(nd) < 0.0001) discard;
        float np = dot(normZ, p);
        vec3 tp = p + d * np / nd;
        vec2 coord = vec2(dot(normX, tp), dot(normY, tp));
        //angle = 15 degree
        const float flwrsn = 0.258819045102521;
        const float flwrcs = 0.965925826289068;
        mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
        vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;
        float r;
        if(flwrp.x < 0.0) {
            r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);
        }
        else {
            r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
        }
        if(r > rstop) discard;
        vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);
        float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
        col *= vec3(1.0, grady, grady);
        col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
        col = col * diffuse + specular;
        col = mix(fadeCol, col, distancefade);
        float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
        alpha = smoothstep(0.0, 1.0, alpha) * palpha;
        gl_FragColor = vec4(col * 0.5, alpha);
    }
    </script>
    <!-- effects -->
    <script id="fx_common_vsh" type="x-shader/x_vertex">
    uniform vec3 uResolution;
    attribute vec2 aPosition;
    varying vec2 texCoord;
    varying vec2 screenCoord;
    void main(void) {
        gl_Position = vec4(aPosition, 0.0, 1.0);
        texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
        screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
    }
    </script>
    <script id="bg_fsh" type="x-shader/x_fragment">
    #ifdef GL_ES
    //precision mediump float;
    precision highp float;
    #endif
    uniform vec2 uTimes;
    varying vec2 texCoord;
    varying vec2 screenCoord;
    void main(void) {
        vec3 col;
        float c;
        vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
        c = exp(-pow(length(tmpv) * 1.8, 2.0));
        col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
        gl_FragColor = vec4(col * 0.5, 1.0);
    }
    </script>
    <script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
    #ifdef GL_ES
    //precision mediump float;
    precision highp float;
    #endif
    uniform sampler2D uSrc;
    uniform vec2 uDelta;
    varying vec2 texCoord;
    varying vec2 screenCoord;
    void main(void) {
        vec4 col = texture2D(uSrc, texCoord);
        gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
    }
    </script>
    <script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
    #ifdef GL_ES
    //precision mediump float;
    precision highp float;
    #endif
    uniform sampler2D uSrc;
    uniform vec2 uDelta;
    uniform vec4 uBlurDir; //dir(x, y), stride(z, w)
    varying vec2 texCoord;
    varying vec2 screenCoord;
    void main(void) {
        vec4 col = texture2D(uSrc, texCoord);
        col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
        col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
        col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
        col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
        gl_FragColor = col / 5.0;
    }
    </script>
    <!-- effect fragment shader template -->
    <script id="fx_common_fsh" type="x-shader/x_fragment">
    #ifdef GL_ES
    //precision mediump float;
    precision highp float;
    #endif
    uniform sampler2D uSrc;
    uniform vec2 uDelta;
    varying vec2 texCoord;
    varying vec2 screenCoord;
    void main(void) {
        gl_FragColor = texture2D(uSrc, texCoord);
    }
    </script>
    <!-- post processing -->
    <script id="pp_final_vsh" type="x-shader/x_vertex">
    uniform vec3 uResolution;
    attribute vec2 aPosition;
    varying vec2 texCoord;
    varying vec2 screenCoord;
    void main(void) {
        gl_Position = vec4(aPosition, 0.0, 1.0);
        texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
        screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
    }
    </script>
    <script id="pp_final_fsh" type="x-shader/x_fragment">
    #ifdef GL_ES
    //precision mediump float;
    precision highp float;
    #endif
    uniform sampler2D uSrc;
    uniform sampler2D uBloom;
    uniform vec2 uDelta;
    varying vec2 texCoord;
    varying vec2 screenCoord;
    void main(void) {
        vec4 srccol = texture2D(uSrc, texCoord) * 2.0;
        vec4 bloomcol = texture2D(uBloom, texCoord);
        vec4 col;
        col = srccol + bloomcol * (vec4(1.0) + srccol);
        col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
        col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)
        gl_FragColor = vec4(col.rgb, 1.0);
        gl_FragColor.a = 1.0;
    }

    html5 canvas烂漫的空中散落的花瓣动画特效

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信