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

这是一款基于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;