/*Sakura animation using WebGL. No images are used. The framerate might be slo_抖音樱花飘落卡点特效">
devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

樱花飘落，3D效果，抖音热门樱花飘落html_抖音樱花飘落卡点特效

作者：Monodyee | 2024-05-21 15:54:35

赞

踩

抖音樱花飘落卡点特效

樱花飘落，3D效果，抖音热门樱花飘落html

代码如下（示例）：

<!DOCTYPE html>

<html>
  <head>
    <title>樱花飘落</title>

    <style type="text/css" media="screen">
      /*Sakura animation using WebGL. No images are used. The framerate might be slow or the demo might not play at all in some older systems so you can watch this video: http://www.screenr.com/BFZ8. Let me make it clear that I did not make this and just thought is was very cool and wanted to share it.

*/

      body {
        padding: 0;

        margin: 0;

        overflow: hidden;

        height: 600px;
      }

      canvas {
        padding: 0;

        margin: 0;
      }

      div.btnbg {
        position: fixed;

        left: 0;

        top: 0;

        box-shadow: 0px 0px 15px #ccc;
      }

      div.btnbg:hover {
        text-shadow: 0px 0px 3px #ccc;

        box-shadow: 0px 0px 20px #ccc;
      }
    </style>

    <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;

      }
    </script>

    <script>
      // Utilities

      var Vector3 = {};

      var Matrix44 = {};

      Vector3.create = function (x, y, z) {
        return { x: x, y: y, z: z };
      };

      Vector3.dot = function (v0, v1) {
        return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;
      };

      Vector3.cross = function (v, v0, v1) {
        v.x = v0.y * v1.z - v0.z * v1.y;

        v.y = v0.z * v1.x - v0.x * v1.z;

        v.z = v0.x * v1.y - v0.y * v1.x;
      };

      Vector3.normalize = function (v) {
        var l = v.x * v.x + v.y * v.y + v.z * v.z;

        if (l > 0.00001) {
          l = 1.0 / Math.sqrt(l);

          v.x *= l;

          v.y *= l;

          v.z *= l;
        }
      };

      Vector3.arrayForm = function (v) {
        if (v.array) {
          v.array[0] = v.x;

          v.array[1] = v.y;

          v.array[2] = v.z;
        } else {
          v.array = new Float32Array([v.x, v.y, v.z]);
        }

        return v.array;
      };

      Matrix44.createIdentity = function () {
        return new Float32Array([
          1.0,
          0.0,
          0.0,
          0.0,
          0.0,
          1.0,
          0.0,
          0.0,
          0.0,
          0.0,
          1.0,
          0.0,
          0.0,
          0.0,
          0.0,
          1.0,
        ]);
      };

      Matrix44.loadProjection = function (m, aspect, vdeg, near, far) {
        var h = near * Math.tan(((vdeg * Math.PI) / 180.0) * 0.5) * 2.0;

        var w = h * aspect;

        m[0] = (2.0 * near) / w;

        m[1] = 0.0;

        m[2] = 0.0;

        m[3] = 0.0;

        m[4] = 0.0;

        m[5] = (2.0 * near) / h;

        m[6] = 0.0;

        m[7] = 0.0;

        m[8] = 0.0;

        m[9] = 0.0;

        m[10] = -(far + near) / (far - near);

        m[11] = -1.0;

        m[12] = 0.0;

        m[13] = 0.0;

        m[14] = (-2.0 * far * near) / (far - near);

        m[15] = 0.0;
      };

      Matrix44.loadLookAt = function (m, vpos, vlook, vup) {
        var frontv = Vector3.create(
          vpos.x - vlook.x,
          vpos.y - vlook.y,
          vpos.z - vlook.z
        );

        Vector3.normalize(frontv);

        var sidev = Vector3.create(1.0, 0.0, 0.0);

        Vector3.cross(sidev, vup, frontv);

        Vector3.normalize(sidev);

        var topv = Vector3.create(1.0, 0.0, 0.0);

        Vector3.cross(topv, frontv, sidev);

        Vector3.normalize(topv);

        m[0] = sidev.x;

        m[1] = topv.x;

        m[2] = frontv.x;

        m[3] = 0.0;

        m[4] = sidev.y;

        m[5] = topv.y;

        m[6] = frontv.y;

        m[7] = 0.0;

        m[8] = sidev.z;

        m[9] = topv.z;

        m[10] = frontv.z;

        m[11] = 0.0;

        m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);

        m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);

        m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);

        m[15] = 1.0;
      };

      //

      var timeInfo = {
        start: 0,
        prev: 0, // Date

        delta: 0,
        elapsed: 0, // Number(sec)
      };

      //

      var gl;

      var renderSpec = {
        width: 0,

        height: 0,

        aspect: 1,

        array: new Float32Array(3),

        halfWidth: 0,

        halfHeight: 0,

        halfArray: new Float32Array(3),

        // and some render targets. see setViewport()
      };

      renderSpec.setSize = function (w, h) {
        renderSpec.width = w;

        renderSpec.height = h;

        renderSpec.aspect = renderSpec.width / renderSpec.height;

        renderSpec.array[0] = renderSpec.width;

        renderSpec.array[1] = renderSpec.height;

        renderSpec.array[2] = renderSpec.aspect;

        renderSpec.halfWidth = Math.floor(w / 2);

        renderSpec.halfHeight = Math.floor(h / 2);

        renderSpec.halfArray[0] = renderSpec.halfWidth;

        renderSpec.halfArray[1] = renderSpec.halfHeight;

        renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;
      };

      function deleteRenderTarget(rt) {
        gl.deleteFramebuffer(rt.frameBuffer);

        gl.deleteRenderbuffer(rt.renderBuffer);

        gl.deleteTexture(rt.texture);
      }

      function createRenderTarget(w, h) {
        var ret = {
          width: w,

          height: h,

          sizeArray: new Float32Array([w, h, w / h]),

          dtxArray: new Float32Array([1.0 / w, 1.0 / h]),
        };

        ret.frameBuffer = gl.createFramebuffer();

        ret.renderBuffer = gl.createRenderbuffer();

        ret.texture = gl.createTexture();

        gl.bindTexture(gl.TEXTURE_2D, ret.texture);

        gl.texImage2D(
          gl.TEXTURE_2D,
          0,
          gl.RGBA,
          w,
          h,
          0,
          gl.RGBA,
          gl.UNSIGNED_BYTE,
          null
        );

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

        gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);

        gl.framebufferTexture2D(
          gl.FRAMEBUFFER,
          gl.COLOR_ATTACHMENT0,
          gl.TEXTURE_2D,
          ret.texture,
          0
        );

        gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);

        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);

        gl.framebufferRenderbuffer(
          gl.FRAMEBUFFER,
          gl.DEPTH_ATTACHMENT,
          gl.RENDERBUFFER,
          ret.renderBuffer
        );

        gl.bindTexture(gl.TEXTURE_2D, null);

        gl.bindRenderbuffer(gl.RENDERBUFFER, null);

        gl.bindFramebuffer(gl.FRAMEBUFFER, null);

        return ret;
      }

      function compileShader(shtype, shsrc) {
        var retsh = gl.createShader(shtype);

        gl.shaderSource(retsh, shsrc);

        gl.compileShader(retsh);

        if (!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {
          var errlog = gl.getShaderInfoLog(retsh);

          gl.deleteShader(retsh);

          console.error(errlog);

          return null;
        }

        return retsh;
      }

      function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {
        var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);

        var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);

        if (vsh == null || fsh == null) {
          return null;
        }

        var prog = gl.createProgram();

        gl.attachShader(prog, vsh);

        gl.attachShader(prog, fsh);

        gl.deleteShader(vsh);

        gl.deleteShader(fsh);

        gl.linkProgram(prog);

        if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
          var errlog = gl.getProgramInfoLog(prog);

          console.error(errlog);

          return null;
        }

        if (uniformlist) {
          prog.uniforms = {};

          for (var i = 0; i < uniformlist.length; i++) {
            prog.uniforms[uniformlist[i]] = gl.getUniformLocation(
              prog,
              uniformlist[i]
            );
          }
        }

        if (attrlist) {
          prog.attributes = {};

          for (var i = 0; i < attrlist.length; i++) {
            var attr = attrlist[i];

            prog.attributes[attr] = gl.getAttribLocation(prog, attr);
          }
        }

        return prog;
      }

      function useShader(prog) {
        gl.useProgram(prog);

        for (var attr in prog.attributes) {
          gl.enableVertexAttribArray(prog.attributes[attr]);
        }
      }

      function unuseShader(prog) {
        for (var attr in prog.attributes) {
          gl.disableVertexAttribArray(prog.attributes[attr]);
        }

        gl.useProgram(null);
      }

      /

      var projection = {
        angle: 60,

        nearfar: new Float32Array([0.1, 100.0]),

        matrix: Matrix44.createIdentity(),
      };

      var camera = {
        position: Vector3.create(0, 0, 100),

        lookat: Vector3.create(0, 0, 0),

        up: Vector3.create(0, 1, 0),

        dof: Vector3.create(10.0, 4.0, 8.0),

        matrix: Matrix44.createIdentity(),
      };

      var pointFlower = {};

      var meshFlower = {};

      var sceneStandBy = false;

      var BlossomParticle = function () {
        this.velocity = new Array(3);

        this.rotation = new Array(3);

        this.position = new Array(3);

        this.euler = new Array(3);

        this.size = 1.0;

        this.alpha = 1.0;

        this.zkey = 0.0;
      };

      BlossomParticle.prototype.setVelocity = function (vx, vy, vz) {
        this.velocity[0] = vx;

        this.velocity[1] = vy;

        this.velocity[2] = vz;
      };

      BlossomParticle.prototype.setRotation = function (rx, ry, rz) {
        this.rotation[0] = rx;

        this.rotation[1] = ry;

        this.rotation[2] = rz;
      };

      BlossomParticle.prototype.setPosition = function (nx, ny, nz) {
        this.position[0] = nx;

        this.position[1] = ny;

        this.position[2] = nz;
      };

      BlossomParticle.prototype.setEulerAngles = function (rx, ry, rz) {
        this.euler[0] = rx;

        this.euler[1] = ry;

        this.euler[2] = rz;
      };

      BlossomParticle.prototype.setSize = function (s) {
        this.size = s;
      };

      BlossomParticle.prototype.update = function (dt, et) {
        this.position[0] += this.velocity[0] * dt;

        this.position[1] += this.velocity[1] * dt;

        this.position[2] += this.velocity[2] * dt;

        this.euler[0] += this.rotation[0] * dt;

        this.euler[1] += this.rotation[1] * dt;

        this.euler[2] += this.rotation[2] * dt;
      };

      function createPointFlowers() {
        // get point sizes

        var prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);

        renderSpec.pointSize = { min: prm[0], max: prm[1] };

        var vtxsrc = document.getElementById("sakura_point_vsh").textContent;

        var frgsrc = document.getElementById("sakura_point_fsh").textContent;

        pointFlower.program = createShader(
          vtxsrc,
          frgsrc,

          [
            "uProjection",
            "uModelview",
            "uResolution",
            "uOffset",
            "uDOF",
            "uFade",
          ],

          ["aPosition", "aEuler", "aMisc"]
        );

        useShader(pointFlower.program);

        pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);

        pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);

        // paramerters: velocity[3], rotate[3]

        pointFlower.numFlowers = 1600;

        pointFlower.particles = new Array(pointFlower.numFlowers);

        // vertex attributes {position[3], euler_xyz[3], size[1]}

        pointFlower.dataArray = new Float32Array(
          pointFlower.numFlowers * (3 + 3 + 2)
        );

        pointFlower.positionArrayOffset = 0;

        pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;

        pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;

        pointFlower.buffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);

        gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);

        gl.bindBuffer(gl.ARRAY_BUFFER, null);

        unuseShader(pointFlower.program);

        for (var i = 0; i < pointFlower.numFlowers; i++) {
          pointFlower.particles[i] = new BlossomParticle();
        }
      }

      function initPointFlowers() {
        //area

        pointFlower.area = Vector3.create(20.0, 20.0, 20.0);

        pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;

        pointFlower.fader.x = 10.0; //env fade start

        pointFlower.fader.y = pointFlower.area.z; //env fade half

        pointFlower.fader.z = 0.1; //near fade start

        //particles

        var PI2 = Math.PI * 2.0;

        var tmpv3 = Vector3.create(0, 0, 0);

        var tmpv = 0;

        var symmetryrand = function () {
          return Math.random() * 2.0 - 1.0;
        };

        for (var i = 0; i < pointFlower.numFlowers; i++) {
          var tmpprtcl = pointFlower.particles[i];

          //velocity

          tmpv3.x = symmetryrand() * 0.3 + 0.8;

          tmpv3.y = symmetryrand() * 0.2 - 1.0;

          tmpv3.z = symmetryrand() * 0.3 + 0.5;

          Vector3.normalize(tmpv3);

          tmpv = 2.0 + Math.random() * 1.0;

          tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);

          //rotation

          tmpprtcl.setRotation(
            symmetryrand() * PI2 * 0.5,

            symmetryrand() * PI2 * 0.5,

            symmetryrand() * PI2 * 0.5
          );

          //position

          tmpprtcl.setPosition(
            symmetryrand() * pointFlower.area.x,

            symmetryrand() * pointFlower.area.y,

            symmetryrand() * pointFlower.area.z
          );

          //euler

          tmpprtcl.setEulerAngles(
            Math.random() * Math.PI * 2.0,

            Math.random() * Math.PI * 2.0,

            Math.random() * Math.PI * 2.0
          );

          //size

          tmpprtcl.setSize(0.9 + Math.random() * 0.1);
        }
      }

      function renderPointFlowers() {
        //update

        var PI2 = Math.PI * 2.0;

        var limit = [
          pointFlower.area.x,
          pointFlower.area.y,
          pointFlower.area.z,
        ];

        var repeatPos = function (prt, cmp, limit) {
          if (Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {
            //out of area

            if (prt.position[cmp] > 0) {
              prt.position[cmp] -= limit * 2.0;
            } else {
              prt.position[cmp] += limit * 2.0;
            }
          }
        };

        var repeatEuler = function (prt, cmp) {
          prt.euler[cmp] = prt.euler[cmp] % PI2;

          if (prt.euler[cmp] < 0.0) {
            prt.euler[cmp] += PI2;
          }
        };

        for (var i = 0; i < pointFlower.numFlowers; i++) {
          var prtcl = pointFlower.particles[i];

          prtcl.update(timeInfo.delta, timeInfo.elapsed);

          repeatPos(prtcl, 0, pointFlower.area.x);

          repeatPos(prtcl, 1, pointFlower.area.y);

          repeatPos(prtcl, 2, pointFlower.area.z);

          repeatEuler(prtcl, 0);

          repeatEuler(prtcl, 1);

          repeatEuler(prtcl, 2);

          prtcl.alpha = 1.0; //(pointFlower.area.z - prtcl.position[2]) * 0.5;

          prtcl.zkey =
            camera.matrix[2] * prtcl.position[0] +
            camera.matrix[6] * prtcl.position[1] +
            camera.matrix[10] * prtcl.position[2] +
            camera.matrix[14];
        }

        // sort

        pointFlower.particles.sort(function (p0, p1) {
          return p0.zkey - p1.zkey;
        });

        // update data

        var ipos = pointFlower.positionArrayOffset;

        var ieuler = pointFlower.eulerArrayOffset;

        var imisc = pointFlower.miscArrayOffset;

        for (var i = 0; i < pointFlower.numFlowers; i++) {
          var prtcl = pointFlower.particles[i];

          pointFlower.dataArray[ipos] = prtcl.position[0];

          pointFlower.dataArray[ipos + 1] = prtcl.position[1];

          pointFlower.dataArray[ipos + 2] = prtcl.position[2];

          ipos += 3;

          pointFlower.dataArray[ieuler] = prtcl.euler[0];

          pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];

          pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];

          ieuler += 3;

          pointFlower.dataArray[imisc] = prtcl.size;

          pointFlower.dataArray[imisc + 1] = prtcl.alpha;

          imisc += 2;
        }

        //draw

        gl.enable(gl.BLEND);

        //gl.disable(gl.DEPTH_TEST);

        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

        var prog = pointFlower.program;

        useShader(prog);

        gl.uniformMatrix4fv(
          prog.uniforms.uProjection,
          false,
          projection.matrix
        );

        gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);

        gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);

        gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));

        gl.uniform3fv(
          prog.uniforms.uFade,
          Vector3.arrayForm(pointFlower.fader)
        );

        gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);

        gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);

        gl.vertexAttribPointer(
          prog.attributes.aPosition,
          3,
          gl.FLOAT,
          false,
          0,
          pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT
        );

        gl.vertexAttribPointer(
          prog.attributes.aEuler,
          3,
          gl.FLOAT,
          false,
          0,
          pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT
        );

        gl.vertexAttribPointer(
          prog.attributes.aMisc,
          2,
          gl.FLOAT,
          false,
          0,
          pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT
        );

        // doubler

        for (var i = 1; i < 2; i++) {
          var zpos = i * -2.0;

          pointFlower.offset[0] = pointFlower.area.x * -1.0;

          pointFlower.offset[1] = pointFlower.area.y * -1.0;

          pointFlower.offset[2] = pointFlower.area.z * zpos;

          gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);

          gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);

          pointFlower.offset[0] = pointFlower.area.x * -1.0;

          pointFlower.offset[1] = pointFlower.area.y * 1.0;

          pointFlower.offset[2] = pointFlower.area.z * zpos;

          gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);

          gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);

          pointFlower.offset[0] = pointFlower.area.x * 1.0;

          pointFlower.offset[1] = pointFlower.area.y * -1.0;

          pointFlower.offset[2] = pointFlower.area.z * zpos;

          gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);

          gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);

          pointFlower.offset[0] = pointFlower.area.x * 1.0;

          pointFlower.offset[1] = pointFlower.area.y * 1.0;

          pointFlower.offset[2] = pointFlower.area.z * zpos;

          gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);

          gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
        }

        //main

        pointFlower.offset[0] = 0.0;

        pointFlower.offset[1] = 0.0;

        pointFlower.offset[2] = 0.0;

        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);

        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);

        gl.bindBuffer(gl.ARRAY_BUFFER, null);

        unuseShader(prog);

        gl.enable(gl.DEPTH_TEST);

        gl.disable(gl.BLEND);
      }

      // effects

      //common util

      function createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {
        var ret = {};

        var unifs = ["uResolution", "uSrc", "uDelta"];

        if (exunifs) {
          unifs = unifs.concat(exunifs);
        }

        var attrs = ["aPosition"];

        if (exattrs) {
          attrs = attrs.concat(exattrs);
        }

        ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);

        useShader(ret.program);

        ret.dataArray = new Float32Array([
          -1.0,
          -1.0,

          1.0,
          -1.0,

          -1.0,
          1.0,

          1.0,
          1.0,
        ]);

        ret.buffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);

        gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);

        gl.bindBuffer(gl.ARRAY_BUFFER, null);

        unuseShader(ret.program);

        return ret;
      }

      // basic usage

      // useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize

      // gl.uniform**(...); //additional uniforms

      // drawEffect()

      // unuseEffect(prog)

      // TEXTURE0 makes src

      function useEffect(fxobj, srctex) {
        var prog = fxobj.program;

        useShader(prog);

        gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);

        if (srctex != null) {
          gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);

          gl.uniform1i(prog.uniforms.uSrc, 0);

          gl.activeTexture(gl.TEXTURE0);

          gl.bindTexture(gl.TEXTURE_2D, srctex.texture);
        }
      }

      function drawEffect(fxobj) {
        gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);

        gl.vertexAttribPointer(
          fxobj.program.attributes.aPosition,
          2,
          gl.FLOAT,
          false,
          0,
          0
        );

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
      }

      function unuseEffect(fxobj) {
        unuseShader(fxobj.program);
      }

      var effectLib = {};

      function createEffectLib() {
        var vtxsrc, frgsrc;

        //common

        var cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;

        //background

        frgsrc = document.getElementById("bg_fsh").textContent;

        effectLib.sceneBg = createEffectProgram(
          cmnvtxsrc,
          frgsrc,
          ["uTimes"],
          null
        );

        // make brightpixels buffer

        frgsrc = document.getElementById("fx_brightbuf_fsh").textContent;

        effectLib.mkBrightBuf = createEffectProgram(
          cmnvtxsrc,
          frgsrc,
          null,
          null
        );

        // direction blur

        frgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;

        effectLib.dirBlur = createEffectProgram(
          cmnvtxsrc,
          frgsrc,
          ["uBlurDir"],
          null
        );

        //final composite

        vtxsrc = document.getElementById("pp_final_vsh").textContent;

        frgsrc = document.getElementById("pp_final_fsh").textContent;

        effectLib.finalComp = createEffectProgram(
          vtxsrc,
          frgsrc,
          ["uBloom"],
          null
        );
      }

      // background

      function createBackground() {
        //console.log("create background");
      }

      function initBackground() {
        //console.log("init background");
      }

      function renderBackground() {
        gl.disable(gl.DEPTH_TEST);

        useEffect(effectLib.sceneBg, null);

        gl.uniform2f(
          effectLib.sceneBg.program.uniforms.uTimes,
          timeInfo.elapsed,
          timeInfo.delta
        );

        drawEffect(effectLib.sceneBg);

        unuseEffect(effectLib.sceneBg);

        gl.enable(gl.DEPTH_TEST);
      }

      // post process

      var postProcess = {};

      function createPostProcess() {
        //console.log("create post process");
      }

      function initPostProcess() {
        //console.log("init post process");
      }

      function renderPostProcess() {
        gl.enable(gl.TEXTURE_2D);

        gl.disable(gl.DEPTH_TEST);

        var bindRT = function (rt, isclear) {
          gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);

          gl.viewport(0, 0, rt.width, rt.height);

          if (isclear) {
            gl.clearColor(0, 0, 0, 0);

            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
          }
        };

        //make bright buff

        bindRT(renderSpec.wHalfRT0, true);

        useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);

        drawEffect(effectLib.mkBrightBuf);

        unuseEffect(effectLib.mkBrightBuf);

        // make bloom

        for (var i = 0; i < 2; i++) {
          var p = 1.5 + 1 * i;

          var s = 2.0 + 1 * i;

          bindRT(renderSpec.wHalfRT1, true);

          useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);

          gl.uniform4f(
            effectLib.dirBlur.program.uniforms.uBlurDir,
            p,
            0.0,
            s,
            0.0
          );

          drawEffect(effectLib.dirBlur);

          unuseEffect(effectLib.dirBlur);

          bindRT(renderSpec.wHalfRT0, true);

          useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);

          gl.uniform4f(
            effectLib.dirBlur.program.uniforms.uBlurDir,
            0.0,
            p,
            0.0,
            s
          );

          drawEffect(effectLib.dirBlur);

          unuseEffect(effectLib.dirBlur);
        }

        //display

        gl.bindFramebuffer(gl.FRAMEBUFFER, null);

        gl.viewport(0, 0, renderSpec.width, renderSpec.height);

        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        useEffect(effectLib.finalComp, renderSpec.mainRT);

        gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);

        gl.activeTexture(gl.TEXTURE1);

        gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);

        drawEffect(effectLib.finalComp);

        unuseEffect(effectLib.finalComp);

        gl.enable(gl.DEPTH_TEST);
      }

      /

      var SceneEnv = {};

      function createScene() {
        createEffectLib();

        createBackground();

        createPointFlowers();

        createPostProcess();

        sceneStandBy = true;
      }

      function initScene() {
        initBackground();

        initPointFlowers();

        initPostProcess();

        //camera.position.z = 17.320508;

        camera.position.z = pointFlower.area.z + projection.nearfar[0];

        projection.angle =
          ((Math.atan2(
            pointFlower.area.y,
            camera.position.z + pointFlower.area.z
          ) *
            180.0) /
            Math.PI) *
          2.0;

        Matrix44.loadProjection(
          projection.matrix,
          renderSpec.aspect,
          projection.angle,
          projection.nearfar[0],
          projection.nearfar[1]
        );
      }

      function renderScene() {
        //draw

        Matrix44.loadLookAt(
          camera.matrix,
          camera.position,
          camera.lookat,
          camera.up
        );

        gl.enable(gl.DEPTH_TEST);

        //gl.bindFramebuffer(gl.FRAMEBUFFER, null);

        gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);

        gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);

        gl.clearColor(0.005, 0, 0.05, 0);

        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        renderBackground();

        renderPointFlowers();

        renderPostProcess();
      }

      /

      function onResize(e) {
        makeCanvasFullScreen(document.getElementById("sakura"));

        setViewports();

        if (sceneStandBy) {
          initScene();
        }
      }

      function setViewports() {
        renderSpec.setSize(gl.canvas.width, gl.canvas.height);

        gl.clearColor(0.2, 0.2, 0.5, 1.0);

        gl.viewport(0, 0, renderSpec.width, renderSpec.height);

        var rtfunc = function (rtname, rtw, rth) {
          var rt = renderSpec[rtname];

          if (rt) deleteRenderTarget(rt);

          renderSpec[rtname] = createRenderTarget(rtw, rth);
        };

        rtfunc("mainRT", renderSpec.width, renderSpec.height);

        rtfunc("wFullRT0", renderSpec.width, renderSpec.height);

        rtfunc("wFullRT1", renderSpec.width, renderSpec.height);

        rtfunc("wHalfRT0", renderSpec.halfWidth, renderSpec.halfHeight);

        rtfunc("wHalfRT1", renderSpec.halfWidth, renderSpec.halfHeight);
      }

      function render() {
        renderScene();
      }

      var animating = true;

      function toggleAnimation(elm) {
        animating ^= true;

        if (animating) animate();

        if (elm) {
          elm.innerHTML = animating ? "Stop" : "Start";
        }
      }

      function stepAnimation() {
        if (!animating) animate();
      }

      function animate() {
        var curdate = new Date();

        timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;

        timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;

        timeInfo.prev = curdate;

        if (animating) requestAnimationFrame(animate);

        render();
      }

      function makeCanvasFullScreen(canvas) {
        var b = document.body;

        var d = document.documentElement;

        fullw = Math.max(
          b.clientWidth,
          b.scrollWidth,
          d.scrollWidth,
          d.clientWidth
        );

        fullh = Math.max(
          b.clientHeight,
          b.scrollHeight,
          d.scrollHeight,
          d.clientHeight
        );

        canvas.width = fullw;

        canvas.height = fullh;
      }

      window.addEventListener("load", function (e) {
        var canvas = document.getElementById("sakura");

        try {
          makeCanvasFullScreen(canvas);

          gl = canvas.getContext("experimental-webgl");
        } catch (e) {
          alert("WebGL not supported." + e);

          console.error(e);

          return;
        }

        window.addEventListener("resize", onResize);

        setViewports();

        createScene();

        initScene();

        timeInfo.start = new Date();

        timeInfo.prev = timeInfo.start;

        animate();
      });

      //set window.requestAnimationFrame

      (function (w, r) {
        w["r" + r] =
          w["r" + r] ||
          w["webkitR" + r] ||
          w["mozR" + r] ||
          w["msR" + r] ||
          w["oR" + r] ||
          function (c) {
            w.setTimeout(c, 1000 / 60);
          };
      })(window, "requestAnimationFrame");
    </script>
  </head>

  <body>
    <canvas id="sakura"></canvas>

    <div class="btnbg">
      <button type="button" onclick="toggleAnimation(this)">Stop</button>
    </div>

    <!-- sakura shader -->
  </body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
  • 429
  • 430
  • 431
  • 432
  • 433
  • 434
  • 435
  • 436
  • 437
  • 438
  • 439
  • 440
  • 441
  • 442
  • 443
  • 444
  • 445
  • 446
  • 447
  • 448
  • 449
  • 450
  • 451
  • 452
  • 453
  • 454
  • 455
  • 456
  • 457
  • 458
  • 459
  • 460
  • 461
  • 462
  • 463
  • 464
  • 465
  • 466
  • 467
  • 468
  • 469
  • 470
  • 471
  • 472
  • 473
  • 474
  • 475
  • 476
  • 477
  • 478
  • 479
  • 480
  • 481
  • 482
  • 483
  • 484
  • 485
  • 486
  • 487
  • 488
  • 489
  • 490
  • 491
  • 492
  • 493
  • 494
  • 495
  • 496
  • 497
  • 498
  • 499
  • 500
  • 501
  • 502
  • 503
  • 504
  • 505
  • 506
  • 507
  • 508
  • 509
  • 510
  • 511
  • 512
  • 513
  • 514
  • 515
  • 516
  • 517
  • 518
  • 519
  • 520
  • 521
  • 522
  • 523
  • 524
  • 525
  • 526
  • 527
  • 528
  • 529
  • 530
  • 531
  • 532
  • 533
  • 534
  • 535
  • 536
  • 537
  • 538
  • 539
  • 540
  • 541
  • 542
  • 543
  • 544
  • 545
  • 546
  • 547
  • 548
  • 549
  • 550
  • 551
  • 552
  • 553
  • 554
  • 555
  • 556
  • 557
  • 558
  • 559
  • 560
  • 561
  • 562
  • 563
  • 564
  • 565
  • 566
  • 567
  • 568
  • 569
  • 570
  • 571
  • 572
  • 573
  • 574
  • 575
  • 576
  • 577
  • 578
  • 579
  • 580
  • 581
  • 582
  • 583
  • 584
  • 585
  • 586
  • 587
  • 588
  • 589
  • 590
  • 591
  • 592
  • 593
  • 594
  • 595
  • 596
  • 597
  • 598
  • 599
  • 600
  • 601
  • 602
  • 603
  • 604
  • 605
  • 606
  • 607
  • 608
  • 609
  • 610
  • 611
  • 612
  • 613
  • 614
  • 615
  • 616
  • 617
  • 618
  • 619
  • 620
  • 621
  • 622
  • 623
  • 624
  • 625
  • 626
  • 627
  • 628
  • 629
  • 630
  • 631
  • 632
  • 633
  • 634
  • 635
  • 636
  • 637
  • 638
  • 639
  • 640
  • 641
  • 642
  • 643
  • 644
  • 645
  • 646
  • 647
  • 648
  • 649
  • 650
  • 651
  • 652
  • 653
  • 654
  • 655
  • 656
  • 657
  • 658
  • 659
  • 660
  • 661
  • 662
  • 663
  • 664
  • 665
  • 666
  • 667
  • 668
  • 669
  • 670
  • 671
  • 672
  • 673
  • 674
  • 675
  • 676
  • 677
  • 678
  • 679
  • 680
  • 681
  • 682
  • 683
  • 684
  • 685
  • 686
  • 687
  • 688
  • 689
  • 690
  • 691
  • 692
  • 693
  • 694
  • 695
  • 696
  • 697
  • 698
  • 699
  • 700
  • 701
  • 702
  • 703
  • 704
  • 705
  • 706
  • 707
  • 708
  • 709
  • 710
  • 711
  • 712
  • 713
  • 714
  • 715
  • 716
  • 717
  • 718
  • 719
  • 720
  • 721
  • 722
  • 723
  • 724
  • 725
  • 726
  • 727
  • 728
  • 729
  • 730
  • 731
  • 732
  • 733
  • 734
  • 735
  • 736
  • 737
  • 738
  • 739
  • 740
  • 741
  • 742
  • 743
  • 744
  • 745
  • 746
  • 747
  • 748
  • 749
  • 750
  • 751
  • 752
  • 753
  • 754
  • 755
  • 756
  • 757
  • 758
  • 759
  • 760
  • 761
  • 762
  • 763
  • 764
  • 765
  • 766
  • 767
  • 768
  • 769
  • 770
  • 771
  • 772
  • 773
  • 774
  • 775
  • 776
  • 777
  • 778
  • 779
  • 780
  • 781
  • 782
  • 783
  • 784
  • 785
  • 786
  • 787
  • 788
  • 789
  • 790
  • 791
  • 792
  • 793
  • 794
  • 795
  • 796
  • 797
  • 798
  • 799
  • 800
  • 801
  • 802
  • 803
  • 804
  • 805
  • 806
  • 807
  • 808
  • 809
  • 810
  • 811
  • 812
  • 813
  • 814
  • 815
  • 816
  • 817
  • 818
  • 819
  • 820
  • 821
  • 822
  • 823
  • 824
  • 825
  • 826
  • 827
  • 828
  • 829
  • 830
  • 831
  • 832
  • 833
  • 834
  • 835
  • 836
  • 837
  • 838
  • 839
  • 840
  • 841
  • 842
  • 843
  • 844
  • 845
  • 846
  • 847
  • 848
  • 849
  • 850
  • 851
  • 852
  • 853
  • 854
  • 855
  • 856
  • 857
  • 858
  • 859
  • 860
  • 861
  • 862
  • 863
  • 864
  • 865
  • 866
  • 867
  • 868
  • 869
  • 870
  • 871
  • 872
  • 873
  • 874
  • 875
  • 876
  • 877
  • 878
  • 879
  • 880
  • 881
  • 882
  • 883
  • 884
  • 885
  • 886
  • 887
  • 888
  • 889
  • 890
  • 891
  • 892
  • 893
  • 894
  • 895
  • 896
  • 897
  • 898
  • 899
  • 900
  • 901
  • 902
  • 903
  • 904
  • 905
  • 906
  • 907
  • 908
  • 909
  • 910
  • 911
  • 912
  • 913
  • 914
  • 915
  • 916
  • 917
  • 918
  • 919
  • 920
  • 921
  • 922
  • 923
  • 924
  • 925
  • 926
  • 927
  • 928
  • 929
  • 930
  • 931
  • 932
  • 933
  • 934
  • 935
  • 936
  • 937
  • 938
  • 939
  • 940
  • 941
  • 942
  • 943
  • 944
  • 945
  • 946
  • 947
  • 948
  • 949
  • 950
  • 951
  • 952
  • 953
  • 954
  • 955
  • 956
  • 957
  • 958
  • 959
  • 960
  • 961
  • 962
  • 963
  • 964
  • 965
  • 966
  • 967
  • 968
  • 969
  • 970
  • 971
  • 972
  • 973
  • 974
  • 975
  • 976
  • 977
  • 978
  • 979
  • 980
  • 981
  • 982
  • 983
  • 984
  • 985
  • 986
  • 987
  • 988
  • 989
  • 990
  • 991
  • 992
  • 993
  • 994
  • 995
  • 996
  • 997
  • 998
  • 999
  • 1000
  • 1001
  • 1002
  • 1003
  • 1004
  • 1005
  • 1006
  • 1007
  • 1008
  • 1009
  • 1010
  • 1011
  • 1012
  • 1013
  • 1014
  • 1015
  • 1016
  • 1017
  • 1018
  • 1019
  • 1020
  • 1021
  • 1022
  • 1023
  • 1024
  • 1025
  • 1026
  • 1027
  • 1028
  • 1029
  • 1030
  • 1031
  • 1032
  • 1033
  • 1034
  • 1035
  • 1036
  • 1037
  • 1038
  • 1039
  • 1040
  • 1041
  • 1042
  • 1043
  • 1044
  • 1045
  • 1046
  • 1047
  • 1048
  • 1049
  • 1050
  • 1051
  • 1052
  • 1053
  • 1054
  • 1055
  • 1056
  • 1057
  • 1058
  • 1059
  • 1060
  • 1061
  • 1062
  • 1063
  • 1064
  • 1065
  • 1066
  • 1067
  • 1068
  • 1069
  • 1070
  • 1071
  • 1072
  • 1073
  • 1074
  • 1075
  • 1076
  • 1077
  • 1078
  • 1079
  • 1080
  • 1081
  • 1082
  • 1083
  • 1084
  • 1085
  • 1086
  • 1087
  • 1088
  • 1089
  • 1090
  • 1091
  • 1092
  • 1093
  • 1094
  • 1095
  • 1096
  • 1097
  • 1098
  • 1099
  • 1100
  • 1101
  • 1102
  • 1103
  • 1104
  • 1105
  • 1106
  • 1107
  • 1108
  • 1109
  • 1110
  • 1111
  • 1112
  • 1113
  • 1114
  • 1115
  • 1116
  • 1117
  • 1118
  • 1119
  • 1120
  • 1121
  • 1122
  • 1123
  • 1124
  • 1125
  • 1126
  • 1127
  • 1128
  • 1129
  • 1130
  • 1131
  • 1132
  • 1133
  • 1134
  • 1135
  • 1136
  • 1137
  • 1138
  • 1139
  • 1140
  • 1141
  • 1142
  • 1143
  • 1144
  • 1145
  • 1146
  • 1147
  • 1148
  • 1149
  • 1150
  • 1151
  • 1152
  • 1153
  • 1154
  • 1155
  • 1156
  • 1157
  • 1158
  • 1159
  • 1160
  • 1161
  • 1162
  • 1163
  • 1164
  • 1165
  • 1166
  • 1167
  • 1168
  • 1169
  • 1170
  • 1171
  • 1172
  • 1173
  • 1174
  • 1175
  • 1176
  • 1177
  • 1178
  • 1179
  • 1180
  • 1181
  • 1182
  • 1183
  • 1184
  • 1185
  • 1186
  • 1187
  • 1188
  • 1189
  • 1190
  • 1191
  • 1192
  • 1193
  • 1194
  • 1195
  • 1196
  • 1197
  • 1198
  • 1199
  • 1200
  • 1201
  • 1202
  • 1203
  • 1204
  • 1205
  • 1206
  • 1207
  • 1208
  • 1209
  • 1210
  • 1211
  • 1212
  • 1213
  • 1214
  • 1215
  • 1216
  • 1217
  • 1218
  • 1219
  • 1220
  • 1221
  • 1222
  • 1223
  • 1224
  • 1225
  • 1226
  • 1227
  • 1228
  • 1229
  • 1230
  • 1231
  • 1232
  • 1233
  • 1234
  • 1235
  • 1236
  • 1237
  • 1238
  • 1239
  • 1240
  • 1241
  • 1242
  • 1243
  • 1244
  • 1245
  • 1246
  • 1247
  • 1248
  • 1249
  • 1250
  • 1251
  • 1252
  • 1253
  • 1254
  • 1255
  • 1256
  • 1257
  • 1258
  • 1259
  • 1260
  • 1261
  • 1262
  • 1263
  • 1264
  • 1265
  • 1266
  • 1267
  • 1268
  • 1269
  • 1270
  • 1271
  • 1272
  • 1273
  • 1274
  • 1275
  • 1276
  • 1277
  • 1278
  • 1279
  • 1280
  • 1281
  • 1282
  • 1283
  • 1284
  • 1285
  • 1286
  • 1287
  • 1288
  • 1289
  • 1290
  • 1291
  • 1292
  • 1293
  • 1294
  • 1295
  • 1296
  • 1297
  • 1298
  • 1299
  • 1300
  • 1301
  • 1302
  • 1303
  • 1304
  • 1305
  • 1306
  • 1307
  • 1308
  • 1309
  • 1310
  • 1311
  • 1312
  • 1313
  • 1314
  • 1315
  • 1316
  • 1317
  • 1318
  • 1319
  • 1320
  • 1321
  • 1322
  • 1323
  • 1324
  • 1325
  • 1326
  • 1327
  • 1328
  • 1329
  • 1330
  • 1331
  • 1332
  • 1333
  • 1334
  • 1335
  • 1336
  • 1337
  • 1338
  • 1339
  • 1340
  • 1341
  • 1342
  • 1343
  • 1344
  • 1345
  • 1346
  • 1347
  • 1348
  • 1349
  • 1350
  • 1351
  • 1352
  • 1353
  • 1354
  • 1355
  • 1356
  • 1357
  • 1358
  • 1359
  • 1360
  • 1361
  • 1362
  • 1363
  • 1364
  • 1365
  • 1366
  • 1367
  • 1368
  • 1369
  • 1370
  • 1371
  • 1372
  • 1373
  • 1374
  • 1375
  • 1376
  • 1377
  • 1378
  • 1379
  • 1380
  • 1381
  • 1382
  • 1383
  • 1384
  • 1385
  • 1386
  • 1387
  • 1388
  • 1389
  • 1390
  • 1391
  • 1392
  • 1393
  • 1394
  • 1395
  • 1396
  • 1397
  • 1398
  • 1399
  • 1400
  • 1401
  • 1402
  • 1403
  • 1404
  • 1405
  • 1406
  • 1407
  • 1408
  • 1409
  • 1410
  • 1411
  • 1412
  • 1413
  • 1414
  • 1415
  • 1416
  • 1417
  • 1418
  • 1419
  • 1420
  • 1421
  • 1422
  • 1423
  • 1424
  • 1425
  • 1426
  • 1427
  • 1428
  • 1429
  • 1430
  • 1431
  • 1432
  • 1433
  • 1434
  • 1435
  • 1436
  • 1437
  • 1438
  • 1439
  • 1440
  • 1441
  • 1442
  • 1443
  • 1444
  • 1445
  • 1446
  • 1447
  • 1448
  • 1449
  • 1450
  • 1451
  • 1452
  • 1453
  • 1454
  • 1455
  • 1456
  • 1457
  • 1458
  • 1459
  • 1460
  • 1461
  • 1462
  • 1463
  • 1464
  • 1465
  • 1466
  • 1467
  • 1468
  • 1469
  • 1470
  • 1471
  • 1472
  • 1473
  • 1474
  • 1475
  • 1476
  • 1477
  • 1478
  • 1479
  • 1480
  • 1481
  • 1482
  • 1483
  • 1484
  • 1485
  • 1486
  • 1487
  • 1488
  • 1489
  • 1490
  • 1491
  • 1492
  • 1493
  • 1494
  • 1495
  • 1496
  • 1497
  • 1498
  • 1499
  • 1500
  • 1501
  • 1502
  • 1503
  • 1504
  • 1505
  • 1506
  • 1507
  • 1508
  • 1509
  • 1510
  • 1511
  • 1512
  • 1513
  • 1514
  • 1515
  • 1516
  • 1517
  • 1518
  • 1519
  • 1520
  • 1521
  • 1522
  • 1523
  • 1524
  • 1525
  • 1526
  • 1527
  • 1528
  • 1529
  • 1530
  • 1531
  • 1532
  • 1533
  • 1534
  • 1535
  • 1536
  • 1537
  • 1538
  • 1539
  • 1540
  • 1541
  • 1542
  • 1543
  • 1544
  • 1545
  • 1546
  • 1547
  • 1548
  • 1549
  • 1550
  • 1551
  • 1552
  • 1553
  • 1554
  • 1555
  • 1556
  • 1557
  • 1558
  • 1559
  • 1560
  • 1561
  • 1562
  • 1563
  • 1564
  • 1565
  • 1566
  • 1567
  • 1568
  • 1569
  • 1570
  • 1571
  • 1572
  • 1573
  • 1574
  • 1575
  • 1576
  • 1577
  • 1578
  • 1579
  • 1580
  • 1581
  • 1582
  • 1583
  • 1584
  • 1585
  • 1586
  • 1587
  • 1588
  • 1589
  • 1590
  • 1591
  • 1592
  • 1593
  • 1594
  • 1595
  • 1596
  • 1597
  • 1598
  • 1599
  • 1600
  • 1601
  • 1602
  • 1603
  • 1604
  • 1605
  • 1606
  • 1607
  • 1608
  • 1609
  • 1610
  • 1611
  • 1612
  • 1613
  • 1614
  • 1615
  • 1616
  • 1617
  • 1618
  • 1619
  • 1620
  • 1621
  • 1622
  • 1623
  • 1624
  • 1625
  • 1626
  • 1627
  • 1628
  • 1629
  • 1630
  • 1631
  • 1632
  • 1633
  • 1634
  • 1635
  • 1636
  • 1637
  • 1638
  • 1639
  • 1640
  • 1641
  • 1642
  • 1643
  • 1644
  • 1645
  • 1646
  • 1647
  • 1648
  • 1649
  • 1650
  • 1651
  • 1652
  • 1653
  • 1654
  • 1655
  • 1656
  • 1657
  • 1658
  • 1659
  • 1660
  • 1661
  • 1662
  • 1663
  • 1664
  • 1665
  • 1666
  • 1667
  • 1668
  • 1669
  • 1670
  • 1671
  • 1672
  • 1673
  • 1674
  • 1675
  • 1676
  • 1677
  • 1678
  • 1679
  • 1680
  • 1681
  • 1682
  • 1683
  • 1684
  • 1685
  • 1686
  • 1687
  • 1688
  • 1689
  • 1690
  • 1691
  • 1692
  • 1693
  • 1694
  • 1695
  • 1696
  • 1697
  • 1698
  • 1699
  • 1700
  • 1701
  • 1702
  • 1703
  • 1704
  • 1705
  • 1706
  • 1707
  • 1708
  • 1709
  • 1710
  • 1711
  • 1712
  • 1713
  • 1714
  • 1715
  • 1716
  • 1717
  • 1718
  • 1719
  • 1720
  • 1721
  • 1722
  • 1723
  • 1724
  • 1725
  • 1726
  • 1727
  • 1728
  • 1729
  • 1730
  • 1731
  • 1732
  • 1733
  • 1734
  • 1735
  • 1736
  • 1737
  • 1738
  • 1739
  • 1740
  • 1741
  • 1742
  • 1743
  • 1744
  • 1745
  • 1746
  • 1747
  • 1748
  • 1749
  • 1750
  • 1751
  • 1752
  • 1753
  • 1754
  • 1755
  • 1756
  • 1757
  • 1758
  • 1759
  • 1760
  • 1761
  • 1762
  • 1763
  • 1764
  • 1765
  • 1766
  • 1767
  • 1768
  • 1769
  • 1770
  • 1771
  • 1772
  • 1773
  • 1774
  • 1775
  • 1776
  • 1777
  • 1778
  • 1779
  • 1780
  • 1781
  • 1782
  • 1783
  • 1784
  • 1785
  • 1786
  • 1787
  • 1788
  • 1789
  • 1790
  • 1791
  • 1792
  • 1793
  • 1794
  • 1795
  • 1796
  • 1797
  • 1798
  • 1799
  • 1800
  • 1801
  • 1802
  • 1803
  • 1804
  • 1805
  • 1806
  • 1807
  • 1808
  • 1809
  • 1810
  • 1811
  • 1812
  • 1813
  • 1814
  • 1815
  • 1816
  • 1817
  • 1818
  • 1819
  • 1820
  • 1821
  • 1822
  • 1823
  • 1824
  • 1825
  • 1826
  • 1827
  • 1828
  • 1829
  • 1830
  • 1831
  • 1832
  • 1833
  • 1834
  • 1835
  • 1836
  • 1837
  • 1838
  • 1839
  • 1840
  • 1841
  • 1842
  • 1843
  • 1844
  • 1845
  • 1846
  • 1847
  • 1848
  • 1849
  • 1850
  • 1851
  • 1852
  • 1853
  • 1854
  • 1855
  • 1856
  • 1857
  • 1858
  • 1859
  • 1860
  • 1861
  • 1862
  • 1863
  • 1864
  • 1865
  • 1866
  • 1867
  • 1868
  • 1869
  • 1870
  • 1871
  • 1872
  • 1873
  • 1874
  • 1875
  • 1876
  • 1877
  • 1878
  • 1879
  • 1880
  • 1881
  • 1882
  • 1883
  • 1884
  • 1885
  • 1886
  • 1887
  • 1888
  • 1889
  • 1890
  • 1891
  • 1892
  • 1893
  • 1894
  • 1895
  • 1896
  • 1897
  • 1898
  • 1899
  • 1900
  • 1901
  • 1902
  • 1903
  • 1904
  • 1905
  • 1906
  • 1907
  • 1908
  • 1909
  • 1910
  • 1911
  • 1912
  • 1913
  • 1914
  • 1915
  • 1916
  • 1917
  • 1918
  • 1919
  • 1920
  • 1921
  • 1922
  • 1923
  • 1924
  • 1925
  • 1926
  • 1927
  • 1928
  • 1929
  • 1930
  • 1931
  • 1932
  • 1933
  • 1934
  • 1935
  • 1936
  • 1937
  • 1938
  • 1939
  • 1940
  • 1941
  • 1942
  • 1943
  • 1944
  • 1945
  • 1946
  • 1947
  • 1948
  • 1949
  • 1950
  • 1951
  • 1952
  • 1953
  • 1954
  • 1955
  • 1956
  • 1957
  • 1958
  • 1959
  • 1960
  • 1961
  • 1962
  • 1963
  • 1964
  • 1965

总结

good night
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/603401
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号