樱花效果
FOR YOU GIRL 以梦为马，不负韶华 LOVE YOU FOREVER
实现代码
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/><title>落花纷飞</title><style>body{padding: 0;margin: 0;overflow: hidden;height: 600px;}canvas{padding: 0;margin: 0;}div.btnbg{position: fixed;left: 0;top: 0;}</style></head><body><canvasid="sakura"></canvas><divclass="btnbg"></div><divstyle="
position: absolute;
top: 30%;
left: 18%;
z-index: 1;
width: 430px;
height: 400px;
font-size: 30px;
color: #ff826c;
font-family: 等线;
"><divstyle="margin-left: 10px;margin-bottom: 20px">FOR YOU：Girl ！</div><divstyle="margin-left: 68px;margin-bottom: 20px">
以梦为马 不负韶华
</div><divstyle="margin-left: 180px;font-size: 24px">LOVE YOU FROEVER</div></div><!-- sakura shader --><scriptid="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;voidmain(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><scriptid="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 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;returnlength(lp)-1.0;}voidmain(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><scriptid="fx_common_vsh"type="x-shader/x_vertex">
uniform vec3 uResolution;
attribute vec2 aPosition;
varying vec2 texCoord;
varying vec2 screenCoord;voidmain(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><scriptid="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;voidmain(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><scriptid="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;voidmain(void){
vec4 col =texture2D(uSrc, texCoord);
gl_FragColor =vec4(col.rgb *2.0-vec3(0.5),1.0);}</script><scriptid="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;voidmain(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><scriptid="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;voidmain(void){
gl_FragColor =texture2D(uSrc, texCoord);}</script><scriptid="pp_final_vsh"type="x-shader/x_vertex">
uniform vec3 uResolution;
attribute vec2 aPosition;
varying vec2 texCoord;
varying vec2 screenCoord;voidmain(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><scriptid="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;voidmain(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>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 =newFloat32Array([v.x, v.y, v.z]);}return v.array;};
Matrix44.createIdentity=function(){returnnewFloat32Array([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,delta:0,elapsed:0,};var gl;var renderSpec ={width:0,height:0,aspect:1,array:newFloat32Array(3),halfWidth:0,halfHeight:0,halfArray:newFloat32Array(3),};
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;};functiondeleteRenderTarget(rt){
gl.deleteFramebuffer(rt.frameBuffer);
gl.deleteRenderbuffer(rt.renderBuffer);
gl.deleteTexture(rt.texture);}functioncreateRenderTarget(w, h){var ret ={width: w,height: h,sizeArray:newFloat32Array([w, h, w / h]),dtxArray:newFloat32Array([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;}functioncompileShader(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);returnnull;}return retsh;}functioncreateShader(vtxsrc, frgsrc, uniformlist, attrlist){var vsh =compileShader(gl.VERTEX_SHADER, vtxsrc);var fsh =compileShader(gl.FRAGMENT_SHADER, frgsrc);if(vsh ==null|| fsh ==null){returnnull;}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);returnnull;}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;}functionuseShader(prog){
gl.useProgram(prog);for(var attr in prog.attributes){
gl.enableVertexAttribArray(prog.attributes[attr]);}}functionunuseShader(prog){for(var attr in prog.attributes){
gl.disableVertexAttribArray(prog.attributes[attr]);}
gl.useProgram(null);}var projection ={angle:60,nearfar:newFloat32Array([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;varBlossomParticle=function(){this.velocity =newArray(3);this.rotation =newArray(3);this.position =newArray(3);this.euler =newArray(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;};functioncreatePointFlowers(){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 =newFloat32Array([0.0,0.0,0.0]);
pointFlower.fader = Vector3.create(0.0,10.0,0.0);
pointFlower.numFlowers =1600;
pointFlower.particles =newArray(pointFlower.numFlowers);
pointFlower.dataArray =newFloat32Array(
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]=newBlossomParticle();}}functioninitPointFlowers(){
pointFlower.area = Vector3.create(20.0,20.0,20.0);
pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;
pointFlower.fader.x =10.0;
pointFlower.fader.y = pointFlower.area.z;
pointFlower.fader.z =0.1;varPI2= Math.PI*2.0;var tmpv3 = Vector3.create(0,0,0);var tmpv =0;varsymmetryrand=function(){return Math.random()*2.0-1.0;};for(var i =0; i < pointFlower.numFlowers; i++){var tmpprtcl = pointFlower.particles[i];
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);
tmpprtcl.setRotation(symmetryrand()*PI2*0.5,symmetryrand()*PI2*0.5,symmetryrand()*PI2*0.5);
tmpprtcl.setPosition(symmetryrand()* pointFlower.area.x,symmetryrand()* pointFlower.area.y,symmetryrand()* pointFlower.area.z
);
tmpprtcl.setEulerAngles(
Math.random()* Math.PI*2.0,
Math.random()* Math.PI*2.0,
Math.random()* Math.PI*2.0);
tmpprtcl.setSize(0.9+ Math.random()*0.1);}}functionrenderPointFlowers(){varPI2= Math.PI*2.0;var limit =[
pointFlower.area.x,
pointFlower.area.y,
pointFlower.area.z,];varrepeatPos=function(prt, cmp, limit){if(Math.abs(prt.position[cmp])- prt.size *0.5> limit){if(prt.position[cmp]>0){
prt.position[cmp]-= limit *2.0;}else{
prt.position[cmp]+= limit *2.0;}}};varrepeatEuler=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;
prtcl.zkey =
camera.matrix[2]* prtcl.position[0]+
camera.matrix[6]* prtcl.position[1]+
camera.matrix[10]* prtcl.position[2]+
camera.matrix[14];}
pointFlower.particles.sort(function(p0, p1){return p0.zkey - p1.zkey;});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;}
gl.enable(gl.BLEND);
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);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);}
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);}functioncreateEffectProgram(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 =newFloat32Array([-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;}functionuseEffect(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);}}functiondrawEffect(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);}functionunuseEffect(fxobj){unuseShader(fxobj.program);}var effectLib ={};functioncreateEffectLib(){var vtxsrc, frgsrc;var cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;
frgsrc = document.getElementById("bg_fsh").textContent;
effectLib.sceneBg =createEffectProgram(
cmnvtxsrc,
frgsrc,["uTimes"],null);
frgsrc = document.getElementById("fx_brightbuf_fsh").textContent;
effectLib.mkBrightBuf =createEffectProgram(
cmnvtxsrc,
frgsrc,null,null);
frgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;
effectLib.dirBlur =createEffectProgram(
cmnvtxsrc,
frgsrc,["uBlurDir"],null);
vtxsrc = document.getElementById("pp_final_vsh").textContent;
frgsrc = document.getElementById("pp_final_fsh").textContent;
effectLib.finalComp =createEffectProgram(
vtxsrc,
frgsrc,["uBloom"],null);}functioncreateBackground(){}functioninitBackground(){}functionrenderBackground(){
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);}var postProcess ={};functioncreatePostProcess(){//console.log("create post process");}functioninitPostProcess(){//console.log("init post process");}functionrenderPostProcess(){
gl.enable(gl.TEXTURE_2D);
gl.disable(gl.DEPTH_TEST);varbindRT=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);}};bindRT(renderSpec.wHalfRT0,true);useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);drawEffect(effectLib.mkBrightBuf);unuseEffect(effectLib.mkBrightBuf);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);}
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 ={};functioncreateScene(){createEffectLib();createBackground();createPointFlowers();createPostProcess();
sceneStandBy =true;}functioninitScene(){initBackground();initPointFlowers();initPostProcess();
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]);}functionrenderScene(){
Matrix44.loadLookAt(
camera.matrix,
camera.position,
camera.lookat,
camera.up
);
gl.enable(gl.DEPTH_TEST);
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();}functiononResize(e){makeCanvasFullScreen(document.getElementById("sakura"));setViewports();if(sceneStandBy){initScene();}}functionsetViewports(){
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);varrtfunc=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);}functionrender(){renderScene();}var animating =true;functiontoggleAnimation(elm){
animating ^=true;if(animating)animate();if(elm){
elm.innerHTML = animating ?"Stop":"Start";}}functionstepAnimation(){if(!animating)animate();}functionanimate(){var curdate =newDate();
timeInfo.elapsed =(curdate - timeInfo.start)/1000.0;
timeInfo.delta =(curdate - timeInfo.prev)/1000.0;
timeInfo.prev = curdate;if(animating)requestAnimationFrame(animate);render();}functionmakeCanvasFullScreen(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 =newDate();
timeInfo.prev = timeInfo.start;animate();});(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></body></html>
本文转载自: https://blog.csdn.net/qq_52108058/article/details/129561730
版权归原作者 微笑伴你而行 所有， 如有侵权，请联系我们删除。
版权归原作者 微笑伴你而行 所有， 如有侵权，请联系我们删除。