网站验证码出不来,wordpress html5 中文,网站标签管理,网站设计制作电影一#xff1a;前言 过年了 菜鸡杰 在这给CSDN的伙计们拜年了 这一段时间以来 我特别感谢 我的粉丝 正是因为有你们的陪伴 所以我才会很大动力 去写博客#xff0c;所以我就准备了一个特效给粉丝们 现在过年不让放烟花 我就改了个代码 改成烟花特效 送给大家 二:特效描述 这…一前言 过年了 菜鸡杰 在这给CSDN的伙计们拜年了 这一段时间以来 我特别感谢 我的粉丝 正是因为有你们的陪伴 所以我才会很大动力 去写博客所以我就准备了一个特效给粉丝们 现在过年不让放烟花 我就改了个代码 改成烟花特效 送给大家 二:特效描述 这是动态的特效 大家拿走代码自己改改就欧克 三上码 !DOCTYPE html html langen head meta charsetUTF-8link relicon hreflove.ico typeimage/x-icon meta contentwidthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalableno nameviewport title新年快乐/title /headscript srchttp://121.43.33.134/js/jquery.min.js typetext/javascript/script script srchttp://121.43.33.134/js/jquery.fireworks.js typetext/javascript/scriptstyle typetext/css *{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box; } html{ width: 100%; height: 100%; } body{ padding: 0;margin: 0;overflow: hidden;height: 600px;background-color: #FFDEE9;background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);}canvas {padding: 0;margin: 0;} .share_img{ width: 0; height: 0; overflow: hidden; opacity: 0; } .content{ padding: 80px 20px;} .text_wrapper{ display: -webkit-box; display: flex; } .text_wrapper .text{ padding-top: 20px; padding-left: 20px; } .hide{ display: none !important; } p{ margin: 0; } .btn-groups{ padding-right: 20px; text-align: center; } .heart-btn{ display: inline-block; animation: breath 0.8s linear 0s infinite both; -webkit-animation: breath 0.8s linear 0s infinite both; } .btn{ position: relative; display: inline-block; width: 60px; height: 60px; margin: 0 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .btn span{ display: block; width: 100%; height: 100%; line-height: 60px; margin-top: -10px; margin-left: -10px; text-align: center; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .btn-a{ background: #d26ae5; } .btn-b{ background: #c9c9c9; } .btn-a:before{ content: ; position: absolute; display: block; width: 30px; height: 60px; background: #d26ae5; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; } .btn-a:after{ content: ; position: absolute; display: block; width: 60px; height: 30px; background: #d26ae5; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;} .btn-b:before{ content: ; position: absolute; display: block; width: 30px; height: 60px; background: #c9c9c9; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; } .btn-b:after{ content: ; position: absolute; display: block; width: 60px; height: 30px; background: #c9c9c9; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;} .container{ } .container .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); } .container .modal{ width: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%-70%); background: #f3f3f3;} .container .modal p{ margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #353535; text-align: center;} .confirm{ display: block; width: 120px; height: 40px; margin: 0 auto; border: none; font-size: 16px; border-radius: 5px; color: #ffffff; background: #f45cae; } .type_words{color:#fff;font-size:35px;position:absolute;z-index:10000;width:70%;left:15%;bottom:10%} keyframes breath {0% {transform: scale3d(1,1,1);-webkit-transform: scale3d(1,1,1);transform-origin: 50% 50%;}50%{transform: scale3d(1.02,1.02,1.02);-webkit-transform: scale3d(1.02,1.02,1.02);transform-origin: 50% 50%;}100%{transform: scale3d(1,1,1);-webkit-transform: scale3d(1,1,1);transform-origin: 50% 50%;} } /stylescript typetext/javascript $(function() {$(#yes).click(function(event) {modal(新年当然要快乐呀 现在请闭眼(^_^), function() {$(.page_one).addClass(hide);$(.page_two).removeClass(hide);typeWrite();fireworks();});});$(#no).click(function(event) {modal(像你这么好看的人怎么会不快乐呢, A);}); });function A() {modal(are you sure??, B); }function B() {modal(知道为什么吗, C); }function C() {modal(欸 就不告诉你嘞, D); }function D() {modal(自己生闷气吧 哈哈哈, E); }function E() {modal(叫哥哥就告诉你, F); }function F() {modal(好啦 不闹了, G); }function G() {modal(既然 不快乐 那你就点击快乐呀, H); }function H() {modal(我准备了惊喜给你, I); }function I() {modal(点开的时候 请一定要闭上眼, J) }function J() {modal(因为它真的很好看 , function() {typeWrite();fireworks();}); }function fireworks() {$(.page_one).addClass(hide);$(.page_two).removeClass(hide);$(.page_two).fireworks({sound: false,opacity: 0.8,width: 100%,height: 100%}); }function modal(content, callback) {var tpl div classcontainerdiv classmask/divdiv classmodalp content /pbutton typebutton idconfirm classconfirm确定/button/div/div;$(body).append(tpl);$(document).on(click, .confirm, function() {$(.container).remove();callback();}); }var myWords 新年快乐 祝你寿比南山 永远不死 多吃肉肉 天天有钱花 ; var x 0; var speed 150; var current 0; function typeWrite(){$(.type_words).html(myWords.substring(0, x));var timer setTimeout(typeWrite(), speed);if (x myWords.length) {x myWords.length;clearTimeout(timer)} }/script bodydiv classshare_imgimg srchttp://121.43.33.134/images/a8b.png alt/divdiv classpage_onediv classcontent styletext-align: center;div classtext_wrapperimg srchttp://121.43.33.134/images/a8.png altdiv classtext王永杰隔着屏幕来拜年了 你现在快乐吗/div/div/divdiv classbtn-groupsdiv classheart-btndiv idyes classbtn btn-aspan快乐/span/div/divdiv idno classbtn btn-bspan不快乐/span/div/div /div div classpage_two hidecanvas idsakura/canvasdiv classtype_words/div /div !-- sakura shader --script idsakura_point_vsh typex-shader/x_vertexuniform 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 startattribute vec3 aPosition; attribute vec3 aEuler; attribute vec2 aMisc; //x:size, y:fadevarying 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 anglevec4 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)); } /scriptscript idsakura_point_fsh typex-shader/x_fragment#ifdef GL_ES //precision mediump float; precision highp float; #endifuniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius uniform vec3 uFade; //x:start distance, y:half distance, z:near fade startconst 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 degreeconst 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 idfx_common_vsh typex-shader/x_vertexuniform 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); } /scriptscript idbg_fsh typex-shader/x_fragment#ifdef GL_ES //precision mediump float; precision highp float; #endifuniform 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); } /scriptscript idfx_brightbuf_fsh typex-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); } /scriptscript idfx_dirblur_r4_fsh typex-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 idfx_common_fsh typex-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 idpp_final_vsh typex-shader/x_vertexuniform 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); } /scriptscript idpp_final_fsh typex-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/bodyscript// Utilitiesvar 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, // Datedelta: 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 sizesvar 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() {//areapointFlower.area Vector3.create(20.0, 20.0, 20.0);pointFlower.area.x pointFlower.area.y * renderSpec.aspect;pointFlower.fader.x 10.0; //env fade startpointFlower.fader.y pointFlower.area.z; //env fade halfpointFlower.fader.z 0.1; //near fade start//particlesvar 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];//velocitytmpv3.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);//rotationtmpprtcl.setRotation(symmetryrand() * PI2 * 0.5,symmetryrand() * PI2 * 0.5,symmetryrand() * PI2 * 0.5);//positiontmpprtcl.setPosition(symmetryrand() * pointFlower.area.x,symmetryrand() * pointFlower.area.y,symmetryrand() * pointFlower.area.z);//eulertmpprtcl.setEulerAngles(Math.random() * Math.PI * 2.0,Math.random() * Math.PI * 2.0,Math.random() * Math.PI * 2.0);//sizetmpprtcl.setSize(0.9 Math.random() * 0.1);}}function renderPointFlowers() {//updatevar 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 areaif (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]);}// sortpointFlower.particles.sort(function(p0, p1) {return p0.zkey - p1.zkey;});// update datavar 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;}//drawgl.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);// doublerfor (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);}//mainpointFlower.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 utilfunction 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 srcfunction 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;//commonvar cmnvtxsrc document.getElementById(fx_common_vsh).textContent;//backgroundfrgsrc document.getElementById(bg_fsh).textContent;effectLib.sceneBg createEffectProgram(cmnvtxsrc, frgsrc, [uTimes], null);// make brightpixels bufferfrgsrc document.getElementById(fx_brightbuf_fsh).textContent;effectLib.mkBrightBuf createEffectProgram(cmnvtxsrc, frgsrc, null, null);// direction blurfrgsrc document.getElementById(fx_dirblur_r4_fsh).textContent;effectLib.dirBlur createEffectProgram(cmnvtxsrc, frgsrc, [uBlurDir], null);//final compositevtxsrc document.getElementById(pp_final_vsh).textContent;frgsrc document.getElementById(pp_final_fsh).textContent;effectLib.finalComp createEffectProgram(vtxsrc, frgsrc, [uBloom], null);}// backgroundfunction 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 processvar 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 buffbindRT(renderSpec.wHalfRT0, true);useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);drawEffect(effectLib.mkBrightBuf);unuseEffect(effectLib.mkBrightBuf);// make bloomfor (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);}//displaygl.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() {//drawMatrix44.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, equestAnimationFrame);/script audio autoplayautoplay looploop preloadautosrchttp://music.163.com/song/media/outer/url?id488249475.mp3 /audio /body /html再次感谢 你能默默的关注我 再见2021 2022我来了 我希望2022年我一定不要有对象 一定呀