这是一款基于html5的3d水波动画特效，它的效果非常逼真，水池中的石头在水中沉浮，泛起了一层层水波。同时我们可以拖拽鼠标从不同的视角来浏览水池，3d效果非常不错。另外，我们可以按“g”键来让水池中的石头上下浮动，按“l”键添加灯光效果，设计相当完美。同时说明一下，这款3d水波动画是基于webgl渲染技术的，大家可以了解一下webgl。
在线演示源码下载
html代码
<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代码
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);
};
以上就是逼真的html5 3d水波动画 可多视角浏览代码图文介绍的内容。