devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

分享一个樱花漫天飞舞的html效果_html樱花特效代码

作者：花生_TL007 | 2024-05-21 15:53:38

赞

踩

html樱花特效代码

 代码如下

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>樱花漫天飞舞</title>
  6. </head>
  7. <style>
  8.     body {
  9.         padding: 0;
  10.         margin: 0;
  11.         overflow: hidden;
  12.         height: 600px;
  13.         position: relative;
  14.     }
  15.  
  16.     canvas {
  17.         padding: 0;
  18.         margin: 0;
  19.     }
  20.  
  21.     div.btnbg {
  22.         position: fixed;
  23.         left: 0;
  24.         top: 0;
  25.     }
  26.  
  27.     .nihao {
  28.         position: fixed;
  29.         top: 0;
  30.     }
  31.  
  32.     .red {
  33.         color: red;
  34.     }
  35. </style>
  36. <body>
  37. <canvas id="sakura"></canvas>
  38. <script id="sakura_point_vsh" type="x-shader/x_vertex">
  39. uniform mat4 uProjection;
  40. uniform mat4 uModelview;
  41. uniform vec3 uResolution;
  42. uniform vec3 uOffset;
  43. uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
  44. uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
  45. attribute vec3 aPosition;
  46. attribute vec3 aEuler;
  47. attribute vec2 aMisc; //x:size, y:fade
  48. varying vec3 pposition;
  49. varying float psize;
  50. varying float palpha;
  51. varying float pdist;
  52. //varying mat3 rotMat;
  53. varying vec3 normX;
  54. varying vec3 normY;
  55. varying vec3 normZ;
  56. varying vec3 normal;
  57. varying float diffuse;
  58. varying float specular;
  59. varying float rstop;
  60. varying float distancefade;
  61. void main(void) {
  62. // Projection is based on vertical angle
  63. vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
  64. gl_Position = uProjection * pos;
  65. gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;
  66. pposition = pos.xyz;
  67. psize = aMisc.x;
  68. pdist = length(pos.xyz);
  69. palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);
  70. vec3 elrsn = sin(aEuler);
  71. vec3 elrcs = cos(aEuler);
  72. mat3 rotx = mat3(
  73. 1.0, 0.0, 0.0,
  74. 0.0, elrcs.x, elrsn.x,
  75. 0.0, -elrsn.x, elrcs.x
  76. );
  77. mat3 roty = mat3(
  78. elrcs.y, 0.0, -elrsn.y,
  79. 0.0, 1.0, 0.0,
  80. elrsn.y, 0.0, elrcs.y
  81. );
  82. mat3 rotz = mat3(
  83. elrcs.z, elrsn.z, 0.0,
  84. -elrsn.z, elrcs.z, 0.0,
  85. 0.0, 0.0, 1.0
  86. );
  87. mat3 rotmat = rotx * roty * rotz;
  88. normal = rotmat[2];
  89. mat3 trrotm = mat3(
  90. rotmat[0][0], rotmat[1][0], rotmat[2][0],
  91. rotmat[0][1], rotmat[1][1], rotmat[2][1],
  92. rotmat[0][2], rotmat[1][2], rotmat[2][2]
  93. );
  94. normX = trrotm[0];
  95. normY = trrotm[1];
  96. normZ = trrotm[2];
  97. const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);
  98. float tmpdfs = dot(lit, normal);
  99. if(tmpdfs < 0.0) {
  100. normal = -normal;
  101. tmpdfs = dot(lit, normal);
  102. }
  103. diffuse = 0.4 + tmpdfs;
  104. vec3 eyev = normalize(-pos.xyz);
  105. if(dot(eyev, normal) > 0.0) {
  106. vec3 hv = normalize(eyev + lit);
  107. specular = pow(max(dot(hv, normal), 0.0), 20.0);
  108. }
  109. else {
  110. specular = 0.0;
  111. }
  112. rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
  113. rstop = pow(rstop, 0.5);
  114. //-0.69315 = ln(0.5)
  115. distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
  116. }
  117.  
  118. </script>
  119. <script id="sakura_point_fsh" type="x-shader/x_fragment">
  120. #ifdef GL_ES
  121. //precision mediump float;
  122. precision highp float;
  123. #endif
  124. uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
  125. uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
  126. const vec3 fadeCol = vec3(0.08, 0.03, 0.06);
  127. varying vec3 pposition;
  128. varying float psize;
  129. varying float palpha;
  130. varying float pdist;
  131. //varying mat3 rotMat;
  132. varying vec3 normX;
  133. varying vec3 normY;
  134. varying vec3 normZ;
  135. varying vec3 normal;
  136. varying float diffuse;
  137. varying float specular;
  138. varying float rstop;
  139. varying float distancefade;
  140. float ellipse(vec2 p, vec2 o, vec2 r) {
  141. vec2 lp = (p - o) / r;
  142. return length(lp) - 1.0;
  143. }
  144. void main(void) {
  145. vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;
  146. vec3 d = vec3(0.0, 0.0, -1.0);
  147. float nd = normZ.z; //dot(-normZ, d);
  148. if(abs(nd) < 0.0001) discard;
  149. float np = dot(normZ, p);
  150. vec3 tp = p + d * np / nd;
  151. vec2 coord = vec2(dot(normX, tp), dot(normY, tp));
  152. //angle = 15 degree
  153. const float flwrsn = 0.258819045102521;
  154. const float flwrcs = 0.965925826289068;
  155. mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
  156. vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;
  157. float r;
  158. if(flwrp.x < 0.0) {
  159. r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);
  160. }
  161. else {
  162. r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
  163. }
  164. if(r > rstop) discard;
  165. vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);
  166. float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
  167. col *= vec3(1.0, grady, grady);
  168. col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
  169. col = col * diffuse + specular;
  170. col = mix(fadeCol, col, distancefade);
  171. float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
  172. alpha = smoothstep(0.0, 1.0, alpha) * palpha;
  173. gl_FragColor = vec4(col * 0.5, alpha);
  174. }
  175.  
  176.  
  177. </script>
  178. <!-- effects -->
  179. <script id="fx_common_vsh" type="x-shader/x_vertex">
  180. uniform vec3 uResolution;
  181. attribute vec2 aPosition;
  182. varying vec2 texCoord;
  183. varying vec2 screenCoord;
  184. void main(void) {
  185. gl_Position = vec4(aPosition, 0.0, 1.0);
  186. texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
  187. screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
  188. }
  189.  
  190. </script>
  191. <script id="bg_fsh" type="x-shader/x_fragment">
  192. #ifdef GL_ES
  193. //precision mediump float;
  194. precision highp float;
  195. #endif
  196. uniform vec2 uTimes;
  197. varying vec2 texCoord;
  198. varying vec2 screenCoord;
  199. void main(void) {
  200. vec3 col;
  201. float c;
  202. vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
  203. c = exp(-pow(length(tmpv) * 1.8, 2.0));
  204. col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
  205. gl_FragColor = vec4(col * 0.5, 1.0);
  206. }
  207.  
  208. </script>
  209. <script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
  210. #ifdef GL_ES
  211. // precision mediump float;
  212. precision highp float;
  213. #endif
  214. uniform sampler2D uSrc;
  215. uniform vec2 uDelta;
  216. varying vec2 texCoord;
  217. varying vec2 screenCoord;
  218. void main(void) {
  219. vec4 col = texture2D(uSrc, texCoord);
  220. gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
  221. }
  222.  
  223.  
  224. </script>
  225. <script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
  226. #ifdef GL_ES
  227. //precision mediump float;
  228. precision highp float;
  229. #endif
  230. uniform sampler2D uSrc;
  231. uniform vec2 uDelta;
  232. uniform vec4 uBlurDir; //dir(x, y), stride(z, w);
  233. varying vec2 texCoord;
  234. varying vec2 screenCoord;
  235. void main(void) {
  236. vec4 col = texture2D(uSrc, texCoord);
  237. col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
  238. col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
  239. col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
  240. col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
  241. gl_FragColor = col / 5.0;
  242. }
  243.  
  244. </script>
  245. <!-- effect fragment shader template -->
  246. <script id="fx_common_fsh" type="x-shader/x_fragment">
  247. #ifdef GL_ES
  248. //precision mediump float;
  249. precision highp float;
  250. #endif
  251. uniform sampler2D uSrc;
  252. uniform vec2 uDelta;
  253. varying vec2 texCoord;
  254. varying vec2 screenCoord;
  255. void main(void) {
  256. gl_FragColor = texture2D(uSrc, texCoord);
  257. }
  258.  
  259. </script>
  260. <!-- post processing -->
  261. <script id="pp_final_vsh" type="x-shader/x_vertex">
  262. uniform vec3 uResolution;
  263. attribute vec2 aPosition;
  264. varying vec2 texCoord;
  265. varying vec2 screenCoord;
  266. void main(void) {
  267. gl_Position = vec4(aPosition, 0.0, 1.0);
  268. texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
  269. screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
  270. }
  271.  
  272. </script>
  273. <script id="pp_final_fsh" type="x-shader/x_fragment">
  274. #ifdef GL_ES
  275. //precision mediump float;
  276. precision highp float;
  277. #endif
  278. uniform sampler2D uSrc;
  279. uniform sampler2D uBloom;
  280. uniform vec2 uDelta;
  281. varying vec2 texCoord;
  282. varying vec2 screenCoord;
  283. void main(void) {
  284. vec4 srccol = texture2D(uSrc, texCoord) * 2.0;
  285. vec4 bloomcol = texture2D(uBloom, texCoord);
  286. vec4 col;
  287. col = srccol + bloomcol * (vec4(1.0) + srccol);
  288. col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
  289. col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)
  290. gl_FragColor = vec4(col.rgb, 1.0);
  291. gl_FragColor.a = 1.0;
  292. }
  293.  
  294. </script>
  295. </body>
  296. <script>
  297.     var Vector3 = {};
  298.     var Matrix44 = {};
  299.     Vector3.create = function (x, y, z) {
  300.         return {'x': x, 'y': y, 'z': z};
  301.     };
  302.     Vector3.dot = function (v0, v1) {
  303.         return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;
  304.     };
  305.     Vector3.cross = function (v, v0, v1) {
  306.         v.x = v0.y * v1.z - v0.z * v1.y;
  307.         v.y = v0.z * v1.x - v0.x * v1.z;
  308.         v.z = v0.x * v1.y - v0.y * v1.x;
  309.     };
  310.     Vector3.normalize = function (v) {
  311.         var l = v.x * v.x + v.y * v.y + v.z * v.z;
  312.         if (l > 0.00001) {
  313.             l = 1.0 / Math.sqrt(l);
  314.             v.x *= l;
  315.             v.y *= l;
  316.             v.z *= l;
  317.         }
  318.     };
  319.     Vector3.arrayForm = function (v) {
  320.         if (v.array) {
  321.             v.array[0] = v.x;
  322.             v.array[1] = v.y;
  323.             v.array[2] = v.z;
  324.         } else {
  325.             v.array = new Float32Array([v.x, v.y, v.z]);
  326.         }
  327.         return v.array;
  328.     };
  329.     Matrix44.createIdentity = function () {
  330.         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]);
  331.     };
  332.     Matrix44.loadProjection = function (m, aspect, vdeg, near, far) {
  333.         var h = near * Math.tan(vdeg * Math.PI / 180.0 * 0.5) * 2.0;
  334.         var w = h * aspect;
  335.         m[0] = 2.0 * near / w;
  336.         m[1] = 0.0;
  337.         m[2] = 0.0;
  338.         m[3] = 0.0;
  339.         m[4] = 0.0;
  340.         m[5] = 2.0 * near / h;
  341.         m[6] = 0.0;
  342.         m[7] = 0.0;
  343.         m[8] = 0.0;
  344.         m[9] = 0.0;
  345.         m[10] = -(far + near) / (far - near);
  346.         m[11] = -1.0;
  347.         m[12] = 0.0;
  348.         m[13] = 0.0;
  349.         m[14] = -2.0 * far * near / (far - near);
  350.         m[15] = 0.0;
  351.     };
  352.     Matrix44.loadLookAt = function (m, vpos, vlook, vup) {
  353.         var frontv = Vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);
  354.         Vector3.normalize(frontv);
  355.         var sidev = Vector3.create(1.0, 0.0, 0.0);
  356.         Vector3.cross(sidev, vup, frontv);
  357.         Vector3.normalize(sidev);
  358.         var topv = Vector3.create(1.0, 0.0, 0.0);
  359.         Vector3.cross(topv, frontv, sidev);
  360.         Vector3.normalize(topv);
  361.         m[0] = sidev.x;
  362.         m[1] = topv.x;
  363.         m[2] = frontv.x;
  364.         m[3] = 0.0;
  365.         m[4] = sidev.y;
  366.         m[5] = topv.y;
  367.         m[6] = frontv.y;
  368.         m[7] = 0.0;
  369.         m[8] = sidev.z;
  370.         m[9] = topv.z;
  371.         m[10] = frontv.z;
  372.         m[11] = 0.0;
  373.         m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);
  374.         m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);
  375.         m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);
  376.         m[15] = 1.0;
  377.     };
  378.     var timeInfo = {
  379.         'start': 0, 'prev': 0,
  380.         'delta': 0, 'elapsed': 0
  381.     };
  382.     var gl;
  383.     var renderSpec = {
  384.         'width': 0,
  385.         'height': 0,
  386.         'aspect': 1,
  387.         'array': new Float32Array(3),
  388.         'halfWidth': 0,
  389.         'halfHeight': 0,
  390.         'halfArray': new Float32Array(3)
  391.     };
  392.     renderSpec.setSize = function (w, h) {
  393.         renderSpec.width = w;
  394.         renderSpec.height = h;
  395.         renderSpec.aspect = renderSpec.width / renderSpec.height;
  396.         renderSpec.array[0] = renderSpec.width;
  397.         renderSpec.array[1] = renderSpec.height;
  398.         renderSpec.array[2] = renderSpec.aspect;
  399.         renderSpec.halfWidth = Math.floor(w / 2);
  400.         renderSpec.halfHeight = Math.floor(h / 2);
  401.         renderSpec.halfArray[0] = renderSpec.halfWidth;
  402.         renderSpec.halfArray[1] = renderSpec.halfHeight;
  403.         renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;
  404.     };
  405.  
  406.     function deleteRenderTarget(rt) {
  407.         gl.deleteFramebuffer(rt.frameBuffer);
  408.         gl.deleteRenderbuffer(rt.renderBuffer);
  409.         gl.deleteTexture(rt.texture);
  410.     }
  411.  
  412.     function createRenderTarget(w, h) {
  413.         var ret = {
  414.             'width': w,
  415.             'height': h,
  416.             'sizeArray': new Float32Array([w, h, w / h]),
  417.             'dtxArray': new Float32Array([1.0 / w, 1.0 / h])
  418.         };
  419.         ret.frameBuffer = gl.createFramebuffer();
  420.         ret.renderBuffer = gl.createRenderbuffer();
  421.         ret.texture = gl.createTexture();
  422.         gl.bindTexture(gl.TEXTURE_2D, ret.texture);
  423.         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  424.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  425.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  426.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  427.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  428.         gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);
  429.         gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, ret.texture, 0);
  430.         gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);
  431.         gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);
  432.         gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ret.renderBuffer);
  433.         gl.bindTexture(gl.TEXTURE_2D, null);
  434.         gl.bindRenderbuffer(gl.RENDERBUFFER, null);
  435.         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  436.         return ret;
  437.     }
  438.  
  439.     function compileShader(shtype, shsrc) {
  440.         var retsh = gl.createShader(shtype);
  441.         gl.shaderSource(retsh, shsrc);
  442.         gl.compileShader(retsh);
  443.         if (!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {
  444.             var errlog = gl.getShaderInfoLog(retsh);
  445.             gl.deleteShader(retsh);
  446.             console.error(errlog);
  447.             return null;
  448.         }
  449.         return retsh;
  450.     }
  451.  
  452.     function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {
  453.         var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);
  454.         var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);
  455.         if (vsh == null || fsh == null) {
  456.             return null;
  457.         }
  458.         var prog = gl.createProgram();
  459.         gl.attachShader(prog, vsh);
  460.         gl.attachShader(prog, fsh);
  461.         gl.deleteShader(vsh);
  462.         gl.deleteShader(fsh);
  463.         gl.linkProgram(prog);
  464.         if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
  465.             var errlog = gl.getProgramInfoLog(prog);
  466.             console.error(errlog);
  467.             return null;
  468.         }
  469.         if (uniformlist) {
  470.             prog.uniforms = {};
  471.             for (var i = 0; i < uniformlist.length; i++) {
  472.                 prog.uniforms[uniformlist[i]] = gl.getUniformLocation(prog, uniformlist[i]);
  473.             }
  474.         }
  475.         if (attrlist) {
  476.             prog.attributes = {};
  477.             for (var i = 0; i < attrlist.length; i++) {
  478.                 var attr = attrlist[i];
  479.                 prog.attributes[attr] = gl.getAttribLocation(prog, attr);
  480.             }
  481.         }
  482.         return prog;
  483.     }
  484.  
  485.     function useShader(prog) {
  486.         gl.useProgram(prog);
  487.         for (var attr in prog.attributes) {
  488.             gl.enableVertexAttribArray(prog.attributes[attr]);
  489.         }
  490.     }
  491.  
  492.     function unuseShader(prog) {
  493.         for (var attr in prog.attributes) {
  494.             gl.disableVertexAttribArray(prog.attributes[attr]);
  495.         }
  496.         gl.useProgram(null);
  497.     }
  498.  
  499.     var projection = {
  500.         'angle': 60,
  501.         'nearfar': new Float32Array([0.1, 100.0]),
  502.         'matrix': Matrix44.createIdentity()
  503.     };
  504.     var camera = {
  505.         'position': Vector3.create(0, 0, 100),
  506.         'lookat': Vector3.create(0, 0, 0),
  507.         'up': Vector3.create(0, 1, 0),
  508.         'dof': Vector3.create(10.0, 4.0, 8.0),
  509.         'matrix': Matrix44.createIdentity()
  510.     };
  511.     var pointFlower = {};
  512.     var meshFlower = {};
  513.     var sceneStandBy = false;
  514.     var BlossomParticle = function () {
  515.         this.velocity = new Array(3);
  516.         this.rotation = new Array(3);
  517.         this.position = new Array(3);
  518.         this.euler = new Array(3);
  519.         this.size = 1.0;
  520.         this.alpha = 1.0;
  521.         this.zkey = 0.0;
  522.     };
  523.     BlossomParticle.prototype.setVelocity = function (vx, vy, vz) {
  524.         this.velocity[0] = vx;
  525.         this.velocity[1] = vy;
  526.         this.velocity[2] = vz;
  527.     };
  528.     BlossomParticle.prototype.setRotation = function (rx, ry, rz) {
  529.         this.rotation[0] = rx;
  530.         this.rotation[1] = ry;
  531.         this.rotation[2] = rz;
  532.     };
  533.     BlossomParticle.prototype.setPosition = function (nx, ny, nz) {
  534.         this.position[0] = nx;
  535.         this.position[1] = ny;
  536.         this.position[2] = nz;
  537.     };
  538.     BlossomParticle.prototype.setEulerAngles = function (rx, ry, rz) {
  539.         this.euler[0] = rx;
  540.         this.euler[1] = ry;
  541.         this.euler[2] = rz;
  542.     };
  543.     BlossomParticle.prototype.setSize = function (s) {
  544.         this.size = s;
  545.     };
  546.     BlossomParticle.prototype.update = function (dt, et) {
  547.         this.position[0] += this.velocity[0] * dt;
  548.         this.position[1] += this.velocity[1] * dt;
  549.         this.position[2] += this.velocity[2] * dt;
  550.         this.euler[0] += this.rotation[0] * dt;
  551.         this.euler[1] += this.rotation[1] * dt;
  552.         this.euler[2] += this.rotation[2] * dt;
  553.     };
  554.  
  555.     function createPointFlowers() {
  556.         var prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
  557.         renderSpec.pointSize = {'min': prm[0], 'max': prm[1]};
  558.         var vtxsrc = document.getElementById("sakura_point_vsh").textContent;
  559.         var frgsrc = document.getElementById("sakura_point_fsh").textContent;
  560.         pointFlower.program = createShader(
  561.             vtxsrc, frgsrc,
  562.             ['uProjection', 'uModelview', 'uResolution', 'uOffset', 'uDOF', 'uFade'],
  563.             ['aPosition', 'aEuler', 'aMisc']
  564.         );
  565.         useShader(pointFlower.program);
  566.         pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);
  567.         pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);
  568.         pointFlower.numFlowers = 1600;
  569.         pointFlower.particles = new Array(pointFlower.numFlowers);
  570.         pointFlower.dataArray = new Float32Array(pointFlower.numFlowers * (3 + 3 + 2));
  571.         pointFlower.positionArrayOffset = 0;
  572.         pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;
  573.         pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;
  574.         pointFlower.buffer = gl.createBuffer();
  575.         gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
  576.         gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
  577.         gl.bindBuffer(gl.ARRAY_BUFFER, null);
  578.         unuseShader(pointFlower.program);
  579.         for (var i = 0; i < pointFlower.numFlowers; i++) {
  580.             pointFlower.particles[i] = new BlossomParticle();
  581.         }
  582.     }
  583.  
  584.     function initPointFlowers() {
  585.         pointFlower.area = Vector3.create(20.0, 20.0, 20.0);
  586.         pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;
  587.         pointFlower.fader.x = 10.0;
  588.         pointFlower.fader.y = pointFlower.area.z;
  589.         pointFlower.fader.z = 0.1;
  590.         var PI2 = Math.PI * 2.0;
  591.         var tmpv3 = Vector3.create(0, 0, 0);
  592.         var tmpv = 0;
  593.         var symmetryrand = function () {
  594.             return (Math.random() * 2.0 - 1.0);
  595.         };
  596.         for (var i = 0; i < pointFlower.numFlowers; i++) {
  597.             var tmpprtcl = pointFlower.particles[i];
  598.             tmpv3.x = symmetryrand() * 0.3 + 0.8;
  599.             tmpv3.y = symmetryrand() * 0.2 - 1.0;
  600.             tmpv3.z = symmetryrand() * 0.3 + 0.5;
  601.             Vector3.normalize(tmpv3);
  602.             tmpv = 2.0 + Math.random() * 1.0;
  603.             tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);
  604.             tmpprtcl.setRotation(
  605.                 symmetryrand() * PI2 * 0.5,
  606.                 symmetryrand() * PI2 * 0.5,
  607.                 symmetryrand() * PI2 * 0.5
  608.             );
  609.             tmpprtcl.setPosition(
  610.                 symmetryrand() * pointFlower.area.x,
  611.                 symmetryrand() * pointFlower.area.y,
  612.                 symmetryrand() * pointFlower.area.z
  613.             );
  614.             tmpprtcl.setEulerAngles(
  615.                 Math.random() * Math.PI * 2.0,
  616.                 Math.random() * Math.PI * 2.0,
  617.                 Math.random() * Math.PI * 2.0
  618.             );
  619.             tmpprtcl.setSize(0.9 + Math.random() * 0.1);
  620.         }
  621.     }
  622.  
  623.     function renderPointFlowers() {
  624.         var PI2 = Math.PI * 2.0;
  625.         var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];
  626.         var repeatPos = function (prt, cmp, limit) {
  627.             if (Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {
  628.                 if (prt.position[cmp] > 0) {
  629.                     prt.position[cmp] -= limit * 2.0;
  630.                 } else {
  631.                     prt.position[cmp] += limit * 2.0;
  632.                 }
  633.             }
  634.         };
  635.         var repeatEuler = function (prt, cmp) {
  636.             prt.euler[cmp] = prt.euler[cmp] % PI2;
  637.             if (prt.euler[cmp] < 0.0) {
  638.                 prt.euler[cmp] += PI2;
  639.             }
  640.         };
  641.         for (var i = 0; i < pointFlower.numFlowers; i++) {
  642.             var prtcl = pointFlower.particles[i];
  643.             prtcl.update(timeInfo.delta, timeInfo.elapsed);
  644.             repeatPos(prtcl, 0, pointFlower.area.x);
  645.             repeatPos(prtcl, 1, pointFlower.area.y);
  646.             repeatPos(prtcl, 2, pointFlower.area.z);
  647.             repeatEuler(prtcl, 0);
  648.             repeatEuler(prtcl, 1);
  649.             repeatEuler(prtcl, 2);
  650.             prtcl.alpha = 1.0;
  651.             prtcl.zkey = (camera.matrix[2] * prtcl.position[0]
  652.                 + camera.matrix[6] * prtcl.position[1]
  653.                 + camera.matrix[10] * prtcl.position[2]
  654.                 + camera.matrix[14]);
  655.         }
  656.         pointFlower.particles.sort(function (p0, p1) {
  657.             return p0.zkey - p1.zkey;
  658.         });
  659.         var ipos = pointFlower.positionArrayOffset;
  660.         var ieuler = pointFlower.eulerArrayOffset;
  661.         var imisc = pointFlower.miscArrayOffset;
  662.         for (var i = 0; i < pointFlower.numFlowers; i++) {
  663.             var prtcl = pointFlower.particles[i];
  664.             pointFlower.dataArray[ipos] = prtcl.position[0];
  665.             pointFlower.dataArray[ipos + 1] = prtcl.position[1];
  666.             pointFlower.dataArray[ipos + 2] = prtcl.position[2];
  667.             ipos += 3;
  668.             pointFlower.dataArray[ieuler] = prtcl.euler[0];
  669.             pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];
  670.             pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];
  671.             ieuler += 3;
  672.             pointFlower.dataArray[imisc] = prtcl.size;
  673.             pointFlower.dataArray[imisc + 1] = prtcl.alpha;
  674.             imisc += 2;
  675.         }
  676.         gl.enable(gl.BLEND);
  677.         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  678.         var prog = pointFlower.program;
  679.         useShader(prog);
  680.         gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);
  681.         gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);
  682.         gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
  683.         gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));
  684.         gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));
  685.         gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
  686.         gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
  687.         gl.vertexAttribPointer(prog.attributes.aPosition, 3, gl.FLOAT, false, 0, pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT);
  688.         gl.vertexAttribPointer(prog.attributes.aEuler, 3, gl.FLOAT, false, 0, pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT);
  689.         gl.vertexAttribPointer(prog.attributes.aMisc, 2, gl.FLOAT, false, 0, pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT);
  690.         for (var i = 1; i < 2; i++) {
  691.             var zpos = i * -2.0;
  692.             pointFlower.offset[0] = pointFlower.area.x * -1.0;
  693.             pointFlower.offset[1] = pointFlower.area.y * -1.0;
  694.             pointFlower.offset[2] = pointFlower.area.z * zpos;
  695.             gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
  696.             gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
  697.             pointFlower.offset[0] = pointFlower.area.x * -1.0;
  698.             pointFlower.offset[1] = pointFlower.area.y * 1.0;
  699.             pointFlower.offset[2] = pointFlower.area.z * zpos;
  700.             gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
  701.             gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
  702.             pointFlower.offset[0] = pointFlower.area.x * 1.0;
  703.             pointFlower.offset[1] = pointFlower.area.y * -1.0;
  704.             pointFlower.offset[2] = pointFlower.area.z * zpos;
  705.             gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
  706.             gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
  707.             pointFlower.offset[0] = pointFlower.area.x * 1.0;
  708.             pointFlower.offset[1] = pointFlower.area.y * 1.0;
  709.             pointFlower.offset[2] = pointFlower.area.z * zpos;
  710.             gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
  711.             gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
  712.         }
  713.         pointFlower.offset[0] = 0.0;
  714.         pointFlower.offset[1] = 0.0;
  715.         pointFlower.offset[2] = 0.0;
  716.         gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
  717.         gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
  718.         gl.bindBuffer(gl.ARRAY_BUFFER, null);
  719.         unuseShader(prog);
  720.         gl.enable(gl.DEPTH_TEST);
  721.         gl.disable(gl.BLEND);
  722.     }
  723.  
  724.     function createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {
  725.         var ret = {};
  726.         var unifs = ['uResolution', 'uSrc', 'uDelta'];
  727.         if (exunifs) {
  728.             unifs = unifs.concat(exunifs);
  729.         }
  730.         var attrs = ['aPosition'];
  731.         if (exattrs) {
  732.             attrs = attrs.concat(exattrs);
  733.         }
  734.         ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);
  735.         useShader(ret.program);
  736.         ret.dataArray = new Float32Array([
  737.             -1.0, -1.0,
  738.             1.0, -1.0,
  739.             -1.0, 1.0,
  740.             1.0, 1.0
  741.         ]);
  742.         ret.buffer = gl.createBuffer();
  743.         gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);
  744.         gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);
  745.         gl.bindBuffer(gl.ARRAY_BUFFER, null);
  746.         unuseShader(ret.program);
  747.         return ret;
  748.     }
  749.  
  750.     function useEffect(fxobj, srctex) {
  751.         var prog = fxobj.program;
  752.         useShader(prog);
  753.         gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
  754.         if (srctex != null) {
  755.             gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);
  756.             gl.uniform1i(prog.uniforms.uSrc, 0);
  757.             gl.activeTexture(gl.TEXTURE0);
  758.             gl.bindTexture(gl.TEXTURE_2D, srctex.texture);
  759.         }
  760.     }
  761.  
  762.     function drawEffect(fxobj) {
  763.         gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);
  764.         gl.vertexAttribPointer(fxobj.program.attributes.aPosition, 2, gl.FLOAT, false, 0, 0);
  765.         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  766.     }
  767.  
  768.     function unuseEffect(fxobj) {
  769.         unuseShader(fxobj.program);
  770.     }
  771.  
  772.     var effectLib = {};
  773.  
  774.     function createEffectLib() {
  775.         var vtxsrc, frgsrc;
  776.         var cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;
  777.         frgsrc = document.getElementById("bg_fsh").textContent;
  778.         effectLib.sceneBg = createEffectProgram(cmnvtxsrc, frgsrc, ['uTimes'], null);
  779.         frgsrc = document.getElementById("fx_brightbuf_fsh").textContent;
  780.         effectLib.mkBrightBuf = createEffectProgram(cmnvtxsrc, frgsrc, null, null);
  781.         frgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;
  782.         effectLib.dirBlur = createEffectProgram(cmnvtxsrc, frgsrc, ['uBlurDir'], null);
  783.         vtxsrc = document.getElementById("pp_final_vsh").textContent;
  784.         frgsrc = document.getElementById("pp_final_fsh").textContent;
  785.         effectLib.finalComp = createEffectProgram(vtxsrc, frgsrc, ['uBloom'], null);
  786.     }
  787.  
  788.     function createBackground() {
  789.     }
  790.  
  791.     function initBackground() {
  792.     }
  793.  
  794.     function renderBackground() {
  795.         gl.disable(gl.DEPTH_TEST)
  796.         useEffect(effectLib.sceneBg, null);
  797.         gl.uniform2f(effectLib.sceneBg.program.uniforms.uTimes, timeInfo.elapsed, timeInfo.delta);
  798.         drawEffect(effectLib.sceneBg);
  799.         unuseEffect(effectLib.sceneBg);
  800.         gl.enable(gl.DEPTH_TEST);
  801.     }
  802.  
  803.     var postProcess = {};
  804.  
  805.     function createPostProcess() {
  806.     }
  807.  
  808.     function initPostProcess() {
  809.     }
  810.  
  811.     function renderPostProcess() {
  812.         gl.enable(gl.TEXTURE_2D);
  813.         gl.disable(gl.DEPTH_TEST);
  814.         var bindRT = function (rt, isclear) {
  815.             gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);
  816.             gl.viewport(0, 0, rt.width, rt.height);
  817.             if (isclear) {
  818.                 gl.clearColor(0, 0, 0, 0);
  819.                 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  820.             }
  821.         };
  822.         bindRT(renderSpec.wHalfRT0, true);
  823.         useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);
  824.         drawEffect(effectLib.mkBrightBuf);
  825.         unuseEffect(effectLib.mkBrightBuf);
  826.         for (var i = 0; i < 2; i++) {
  827.             var p = 1.5 + 1 * i;
  828.             var s = 2.0 + 1 * i;
  829.             bindRT(renderSpec.wHalfRT1, true);
  830.             useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);
  831.             gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, p, 0.0, s, 0.0);
  832.             drawEffect(effectLib.dirBlur);
  833.             unuseEffect(effectLib.dirBlur);
  834.             bindRT(renderSpec.wHalfRT0, true);
  835.             useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);
  836.             gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, 0.0, p, 0.0, s);
  837.             drawEffect(effectLib.dirBlur);
  838.             unuseEffect(effectLib.dirBlur);
  839.         }
  840.         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  841.         gl.viewport(0, 0, renderSpec.width, renderSpec.height);
  842.         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  843.         useEffect(effectLib.finalComp, renderSpec.mainRT);
  844.         gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);
  845.         gl.activeTexture(gl.TEXTURE1);
  846.         gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);
  847.         drawEffect(effectLib.finalComp);
  848.         unuseEffect(effectLib.finalComp);
  849.         gl.enable(gl.DEPTH_TEST);
  850.     }
  851.  
  852.     var SceneEnv = {};
  853.  
  854.     function createScene() {
  855.         createEffectLib();
  856.         createBackground();
  857.         createPointFlowers();
  858.         createPostProcess();
  859.         sceneStandBy = true;
  860.     }
  861.  
  862.     function initScene() {
  863.         initBackground();
  864.         initPointFlowers();
  865.         initPostProcess();
  866.         camera.position.z = pointFlower.area.z + projection.nearfar[0];
  867.         projection.angle = Math.atan2(pointFlower.area.y, camera.position.z + pointFlower.area.z) * 180.0 / Math.PI * 2.0;
  868.         Matrix44.loadProjection(projection.matrix, renderSpec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);
  869.     }
  870.  
  871.     function renderScene() {
  872.         Matrix44.loadLookAt(camera.matrix, camera.position, camera.lookat, camera.up);
  873.         gl.enable(gl.DEPTH_TEST);
  874.         gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);
  875.         gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);
  876.         gl.clearColor(0.005, 0, 0.05, 0);
  877.         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  878.         renderBackground();
  879.         renderPointFlowers();
  880.         renderPostProcess();
  881.     }
  882.  
  883.     function onResize(e) {
  884.         makeCanvasFullScreen(document.getElementById("sakura"));
  885.         setViewports();
  886.         if (sceneStandBy) {
  887.             initScene();
  888.         }
  889.     }
  890.  
  891.     function setViewports() {
  892.         renderSpec.setSize(gl.canvas.width, gl.canvas.height);
  893.         gl.clearColor(0.2, 0.2, 0.5, 1.0);
  894.         gl.viewport(0, 0, renderSpec.width, renderSpec.height);
  895.         var rtfunc = function (rtname, rtw, rth) {
  896.             var rt = renderSpec[rtname];
  897.             if (rt) deleteRenderTarget(rt);
  898.             renderSpec[rtname] = createRenderTarget(rtw, rth);
  899.         };
  900.         rtfunc('mainRT', renderSpec.width, renderSpec.height);
  901.         rtfunc('wFullRT0', renderSpec.width, renderSpec.height);
  902.         rtfunc('wFullRT1', renderSpec.width, renderSpec.height);
  903.         rtfunc('wHalfRT0', renderSpec.halfWidth, renderSpec.halfHeight);
  904.         rtfunc('wHalfRT1', renderSpec.halfWidth, renderSpec.halfHeight);
  905.     }
  906.  
  907.     function render() {
  908.         renderScene();
  909.     }
  910.  
  911.     var animating = true;
  912.  
  913.     function toggleAnimation(elm) {
  914.         animating ^= true;
  915.         if (animating) animate();
  916.         if (elm) {
  917.             elm.innerHTML = animating ? "Stop" : "Start";
  918.         }
  919.     }
  920.  
  921.     function stepAnimation() {
  922.         if (!animating) animate();
  923.     }
  924.  
  925.     function animate() {
  926.         var curdate = new Date();
  927.         timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;
  928.         timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;
  929.         timeInfo.prev = curdate;
  930.         if (animating) requestAnimationFrame(animate);
  931.         render();
  932.     }
  933.  
  934.     function makeCanvasFullScreen(canvas) {
  935.         var b = document.body;
  936.         var d = document.documentElement;
  937.         fullw = Math.max(b.clientWidth, b.scrollWidth, d.scrollWidth, d.clientWidth);
  938.         fullh = Math.max(b.clientHeight, b.scrollHeight, d.scrollHeight, d.clientHeight);
  939.         canvas.width = fullw;
  940.         canvas.height = fullh;
  941.     }
  942.  
  943.     window.addEventListener('load', function (e) {
  944.         var canvas = document.getElementById("sakura");
  945.         try {
  946.             makeCanvasFullScreen(canvas);
  947.             gl = canvas.getContext('experimental-webgl');
  948.         } catch (e) {
  949.             alert("WebGL not supported." + e);
  950.             console.error(e);
  951.             return;
  952.         }
  953.         window.addEventListener('resize', onResize);
  954.         setViewports();
  955.         createScene();
  956.         initScene();
  957.         timeInfo.start = new Date();
  958.         timeInfo.prev = timeInfo.start;
  959.         animate();
  960.     });
  961.     (function (w, r) {
  962.         w['r' + r] = w['r' + r] || w['webkitR' + r] || w['mozR' + r] || w['msR' + r] || w['oR' + r] || function (c) {
  963.             w.setTimeout(c, 1000 / 60);
  964.         };
  965.     })(window, 'equestAnimationFrame');
  966. </script>
  967. </html>

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

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

  

闽ICP备14008679号