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

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

在线预览 源码下载

HTML代码

1. <img id="tiles" src="tiles.jpg">  
2. <img id="xneg" src="xneg.jpg">  
3. <img id="xpos" src="xpos.jpg">  
4. <img id="ypos" src="ypos.jpg">  
5. <img id="zneg" src="zneg.jpg">  
6. <img id="zpos" src="zpos.jpg">  
7.   

JavaScript代码

1. function Water() {   
2.   var vertexShader = '\  
3.     varying vec2 coord;\  
4.     void main() {\  
5.       coord = gl_Vertex.xy * 0.5 + 0.5;\  
6.       gl_Position = vec4(gl_Vertex.xyz, 1.0);\  
7.     }\  
8.   ';   
9.   this.plane = GL.Mesh.plane();   
10.   if (!GL.Texture.canUseFloatingPointTextures()) {   
11.     throw new Error('This demo requires the OES_texture_float extension');   
12.   }   
13.   var filter = GL.Texture.canUseFloatingPointLinearFiltering() ? gl.LINEAR : gl.NEAREST;   
14.   this.textureA = new GL.Texture(256, 256, { type: gl.FLOAT, filter: filter });   
15.   this.textureB = new GL.Texture(256, 256, { type: gl.FLOAT, filter: filter });   
16.   this.dropShader = new GL.Shader(vertexShader, '\  
17.     const float PI = 3.141592653589793;\  
18.     uniform sampler2D texture;\  
19.     uniform vec2 center;\  
20.     uniform float radius;\  
21.     uniform float strength;\  
22.     varying vec2 coord;\  
23.     void main() {\  
24.       /* get vertex info */\  
25.       vec4 info = texture2D(texture, coord);\  
26.       \  
27.       /* add the drop to the height */\  
28.       float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);\