多视角html桌面,多视角3D逼真HTML5水波动画

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

在线预览 源码下载

HTML代码

XML/HTML Code复制内容到剪贴板

JavaScript代码

JavaScript Code复制内容到剪贴板

functionWater() {

varvertexShader ='\

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()) {

thrownewError('This demo requires the OES_texture_float extension');

}

varfilter = GL.Texture.canUseFloatingPointLinearFiltering() ? 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,'\

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 */\