这是一款基于html5的3d水波动画特效，它的效果非常逼真，我们可以按“g”键来让水池中的石头上下浮动，按“l”键添加灯光效果，设计相当完美。同时说明一下，这款3d水波动画是基于webgl渲染技术的，大家可以了解一下webgl。
在线预览 源码下载
html代码
xml/html code复制内容到剪贴板
img id=tiles src=tiles.jpg>   img id=xneg src=xneg.jpg>   img id=xpos src=xpos.jpg>   img id=ypos src=ypos.jpg>   img id=zneg src=zneg.jpg>   img id=zpos src=zpos.jpg>
javascript代码
javascript code复制内容到剪贴板
function water() {      var vertexshader = '\       varying vec2 coord;\       void main() {\         coord = gl_vertex.xy * 0.5 + 0.5;\         gl_position = vec4(gl_vertex.xyz, 1.0);\       }\     ';      this.plane = gl.mesh.plane();      if (!gl.texture.canusefloatingpointtextures()) {        throw new error('this demo requires the oes_texture_float extension');      }      var filter = gl.texture.canusefloatingpointlinearfiltering() ? gl.linear : gl.nearest;      this.texturea = new gl.texture(256, 256, { type: gl.float, filter: filter });      this.textureb = new gl.texture(256, 256, { type: gl.float, filter: filter });      this.dropshader = new gl.shader(vertexshader, '\       const float pi = 3.141592653589793;\       uniform sampler2d texture;\       uniform vec2 center;\       uniform float radius;\       uniform float strength;\       varying vec2 coord;\       void main() {\         /* get vertex info */\         vec4 info = texture2d(texture, coord);\         \         /* add the drop to the height */\         float drop = 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 = new gl.shader(vertexshader, '\       uniform sampler2d texture;\       uniform vec2 delta;\       varying vec2 coord;\       void main() {\         /* get vertex info */\         vec4 info = texture2d(texture, coord);\         \         /* calculate average neighbor height */\         vec2 dx = vec2(delta.x, 0.0);\         vec2 dy = vec2(0.0, delta.y);\         float average = (\           texture2d(texture, coord - dx).r +\           texture2d(texture, coord - dy).r +\           texture2d(texture, coord + dx).r +\           texture2d(texture, coord + dy).r\         ) * 0.25;\         \         /* change the velocity to move toward the average */\         info.g += (average - info.r) * 2.0;\         \         /* attenuate the velocity a little so waves do not last forever */\         info.g *= 0.995;\         \         /* move the vertex along the velocity */\         info.r += info.g;\         \         gl_fragcolor = info;\       }\     ');      this.normalshader = new gl.shader(vertexshader, '\       uniform sampler2d texture;\       uniform vec2 delta;\       varying vec2 coord;\       void main() {\         /* get vertex info */\         vec4 info = texture2d(texture, coord);\         \         /* update the normal */\         vec3 dx = vec3(delta.x, texture2d(texture, vec2(coord.x + delta.x, coord.y)).r - info.r, 0.0);\         vec3 dy = 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 = new gl.shader(vertexshader, '\       uniform sampler2d texture;\       uniform vec3 oldcenter;\       uniform vec3 newcenter;\       uniform float radius;\       varying vec2 coord;\       \       float volumeinsphere(vec3 center) {\         vec3 tocenter = vec3(coord.x * 2.0 - 1.0, 0.0, coord.y * 2.0 - 1.0) - center;\         float t = length(tocenter) / radius;\         float dy = exp(-pow(t * 1.5, 6.0));\         float ymin = min(0.0, center.y - dy);\         float ymax = min(max(0.0, center.y + dy), ymin + 2.0 * dy);\         return (ymax - ymin) * 0.1;\       }\       \       void main() {\         /* get vertex info */\         vec4 info = texture2d(texture, coord);\         \         /* add the old volume */\         info.r += volumeinsphere(oldcenter);\         \         /* subtract the new volume */\         info.r -= volumeinsphere(newcenter);\         \         gl_fragcolor = info;\       }\     ');    }       water.prototype.adddrop = function(x, y, radius, strength) {      var this_ = 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) {      var this_ = this;      this.textureb.drawto(function() {        this_.texturea.bind();        this_.sphereshader.uniforms({          oldcenter: oldcenter,          newcenter: newcenter,          radius: radius        }).draw(this_.plane);      });      this.textureb.swapwith(this.texturea);    };       water.prototype.stepsimulation = function() {      var this_ = 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() {      var this_ = this;      this.textureb.drawto(function() {        this_.texturea.bind();        this_.normalshader.uniforms({          delta: [1 / this_.texturea.width, 1 / this_.texturea.height]        }).draw(this_.plane);      });      this.textureb.swapwith(this.texturea);    };
以上就是本文的全部内容，希望对大家的学习有所帮助。