多视角3D逼真HTML5水波动画

这是一款基于html5的3d水波动画特效，它的效果非常逼真，我们可以按“g”键来让水池中的石头上下浮动，按“l”键添加灯光效果，设计相当完美。同时说明一下，这款3d水波动画是基于webgl渲染技术的，大家可以了解一下webgl。

html代码

xml/html code
复制内容到剪贴板

<imgid=“tiles”src=“tiles.jpg”> <imgid=“xneg”src=“xneg.jpg”> <imgid=“xpos”src=“xpos.jpg”> <imgid=“ypos”src=“ypos.jpg”> <imgid=“zneg”src=“zneg.jpg”> <imgid=“zpos”src=“zpos.jpg”抽泣的意思;>

javascript代码

javascript code
复制内容到剪贴板

functionwater(){ varvertexshader=‘\ varyingvec2coord;\ voidmain(){\ coord=gl_vertex.xy*0.5+0.5;\ gl_position=vec4(gl_vertex.xyz,1.0);\ }\ ‘; this.plane=gl.mesh.plane(); if(!gl.texture.canufloatingpointtextures()){ thrownewerror(‘thisdemorequirestheoes_texture_floatextension’); } varfilter=gl.texture.canufloatingpointlinearfiltering()?gl.linear:gl.nearest; this.texturea=newgl.texture(256,256,{type:gl.float,filter:filter}); this.textureb=newgl.texture(256,256,{type:gl.float,filter:filter}); this.dropshader=newgl.shader(vertexshader,‘\ constfloatpi=3.141592653589793;\ uniformsampler2dtexture;\ uniformvec2center;\ 怎样打电话订票uniformfloatradius;\ uniformfloatstrength;\ varyingvec2coord;\ voidmain(){\ /*getvertexinfo*/\ vec4info=texture2d(texture,coord);\ \ /*addthedroptotheheight*/\ floatdrop=max(0.0,1.0–length(center*0.5+0.5–coord)/radius);\ drop=0.5–cos(drop*pi)*0.5;\ info.r+=drop*strength;\ \ gl_fragcolor=info;\ }\ ‘); this.updateshader=newgl.shader(vertexshader,‘\ uniformsampler2dtexture;\ uniformvec2delta;\ varyingvec2coord;\ voidmain(){\ /*getvertexinfo*/\ vec4info=texture2d(texture,coord);\ \ /*calculateaverageneighborheight*/\ vec2dx=vec2(delta.x,0.0);\ vec2dy=vec2(0.0,delta.y);\ floataverage=(\ texture2d(texture,coord–dx).r+\ texture2d(texture,coord–dy).r+\ texture2d(texture,coord+dx).r+\ texture2d(texture,coord+dy).r\ )*0.25;\ \ /*changethevelocitytomovetowardtheaverage*/\ info.g+=(average–info.r)*2.0;\ \ /*attenuatethevelocityalittlesowavesdonotlastforever*/\ info.g*=0.995;\ \ /*movethevertexalongthevelocity*/\ info.r+=info.g;\ \ gl_fragcolor=info;\ }\ ‘); this.normalshader=newgl.shader(vertexshader,‘\ uniformsampler2dtexture;\ uniformvec2delta;\ varyingvec2coord;\ voidmain(){\ /*getvertexinfo*/\ vec4info=texture2d(texture,coord);\ \ /*updatethenormal*/\ vec3dx=vec3(delta.x,texture2d(texture,vec2(coord.x+delta.x,coord.y)).r–info.r,0.0);\ vec3dy=vec3(0.0,texture2d(texture,vec2(coord.x,coord.y+delta.y)).r–info.r,delta.y);\ info.ba=normalize(cross(dy,dx)).xz;\ \ gl_fragcolor=info;\ }\ ‘); this.sphereshader=newgl.shader(vertexshader,‘\ uniformsampler2dtexture;\ uniformvec3oldcenter;\ uniformvec3newcenter;\ uniformfloatradius;\ varyingvec2coord;\ \ floatvolumeinsphere(vec3center){\ vec3tocenter=vec3(coord.x*2.0–1.0,0.0,coord.y*2.0–1.0)–center;\ floatt=length(tocenter)/radius;\ floatdy=exp(-pow(t*1.5,6.0));\ floatymin=min(0.0,center.y–dy);\ floatymax=min(max(0.0,center.y+dy),ymin+2.0*dy);\ return(ymax–ymin)*0.1;\ juice是什么意思 }\ \ voidmain(){\ /*getvertexinfo*/\ vec4info=texture2d(texture,coord);\ \ /*addtheoldvolume*/\ info.r+=volumeinsphere(oldcenter);\ \ /*subtractthenewvolume*/\ info.r-=volumeinsphere(newcenter);\ \ gl_fragcolor=info;\ }\ ‘); } water.prototype.adddrop=function(x,y,radius,strength){ varthis_=this; this.textureb.drawto(function(){ this_.texturea.bind(); this_.dropshader.uniforms({ center:[x,y], radius:radius, strength:strength }).draw(this_.plane); }); this.textureb.swapwith(this.texturea); }; water.prototype.movesphere=function(oldcenter,newcenter,radius){ varthis_=this; this.textureb.drawto(fun阅读使人ction(){ this_.texturea.bind(); this_.sphereshader.uniforms({ oldcenter:oldcenter, newcenter:newcenter, radius:radius }).draw(this_.plane); }); this.textureb.swapwith(this.texturea); }; water.prototype.stepsimulation=function(){ varthis_=this; this.textureb.drawto(function(){ this_.texturea.bind(); this_.updateshader.uniforms({ delta:[1/this_.texturea.width,1/this_.texturea.height] }).draw(this_.plane); }); this.textureb.swapwith(this.texturea); }; water.prototype.updatenormals=function(){ varthis_=this; this.textureb.drawto(function(){ this_.texturea.bind(); this_.normalshader.uniforms({ delta:[1/this_.texturea.width,1/this_.t跨年朋友圈exturea.height] }).draw(this_.plane); }); this.textureb.swapwith(this.texturea); };

以上就是本文的全部内容，希望对大家的学习有所帮助。