多角度三维逼真的HTML5水波动画

这是一个基于HTML5的3D水波动画效果。其效果是非常现实的。我们可以按g和关键让石头在池中上下浮动，按l，加上灯光效果的关键，所以设计相当完善。同时，这个3D动画是基于WebGL渲染技术，你可以学到关于WebGL。

在线预览源代码下载

HTML代码

xml代码将内容复制到剪贴板。


Javaｓｃｒｉｐｔ代码

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
函数水（）{
VaR的顶点着色器=
不同vec2坐标；
空（主）{
坐标= gl_vertex.xy * 0.5 + 0.5；
gl_position = vec4（gl_vertex.xyz，1）；◎
}
'；
this.plane = gl.mesh.plane（）；
如果（！gl.texture.canusefloatingpointtextures（））{
把新的错误（这个演示需要oes_texture_float扩展）；
}
VAR过滤= gl.texture.canusefloatingpointlinearfiltering（）gl.linear：gl.nearest；
this.texturea =新GL。纹理（256, 256，{类型：gl.float，过滤器：过滤}）；
this.textureb =新GL。纹理（256, 256，{类型：gl.float，过滤器：过滤}）；
this.dropshader =新（顶点着色器，GL。着色
常量浮点pi = 3.141592653589793；
统一为sampler2D纹理；
均匀vec2中心；
均匀浮动半径；
均匀的浮强度；
不同vec2坐标；
空（主）{
获取顶点信息
vec4信息= Texture2D（纹理坐标）；
◎
将下拉项添加到高度
浮子下降= MAX（0, 1长度（中心* 0.5 + 0.5坐标）/半径）；
下降= 0.5 - COS（下降*）* 0.5；
信息。
◎
gl_fragcolor =信息；
}
'）；
this.updateshader =新（顶点着色器，GL。着色
统一为sampler2D纹理；
均匀vec2三角洲；
不同vec2坐标；
空（主）{
获取顶点信息
vec4信息= Texture2D（纹理坐标）；
◎
平均邻居高度
vec2 DX = vec2（三角洲。x，0）；◎
vec2 dy＝vec2（0，三角洲，Y）；
浮点平均值=（
Texture2D（纹理坐标的DX）。R +
Texture2D（纹理坐标-镝）。R +
Texture2D（纹理坐标+ R + DX）。
Texture2D（纹理坐标+ DY）。R
* 0.25；
◎
改变速度以移动到{平均}
信息=（平均值为r）* 2 ；
◎
使速度减弱一点，使波不会永远持续下去。
信息：g＝0.995；
◎
沿速度移动顶点。
信息。
◎
gl_fragcolor =信息；
}
'）；
this.normalshader =新（顶点着色器，GL。着色
统一为sampler2D纹理；
均匀vec2三角洲；
不同vec2坐标；
空（主）{
获取顶点信息
vec4信息= Texture2D（纹理坐标）；
◎
更新正常
vec3 DX = vec3（三角洲。X，Texture2D（纹理、vec2（坐标x +三角洲。x，坐标y））。R信息。R，0）；
vec3 dy＝vec3（0，Texture2D（纹理、vec2（X，Y坐标，坐标系+三角洲。y））。R信息。R，三角洲，Y）；
info.ba =规范（交叉（dy，dx））。XZ；
◎
gl_fragcolor =信息；
}
'）；
this.sphereshader =新（顶点着色器，GL。着色
统一为sampler2D纹理；
均匀vec3 oldcenter；
均匀vec3 newcenter；
均匀浮动半径；
不同vec2坐标；
◎
浮volumeinsphere（vec3中心）{
vec3距= vec3（坐标x * 2 - 1, 0，坐标Y * 2 - 1）中心；
浮T =长度（中心）/半径；
浮点（= T，1.5，6）；
浮Ymin = min（0，中心。y dy）；
浮YMAX = min（max（0，中心。Y + DY），Ymin + 2 * Dy）；
返回（YMAX - Ymin）* 0.1；
}
◎
空（主）{
获取顶点信息
vec4信息= Texture2D（纹理坐标）；
◎
旧卷添加
信息。R = volumeinsphere（oldcenter）；
◎
新卷*减去
信息。R = volumeinsphere（newcenter）；
◎
gl_fragcolor =信息；
}
'）；
}

water.prototype.adddrop =函数（x，y，半径、强度）{
无功this_ =这；
This.textureB.drawTo（function（）{（）
this_ texturea.bind（）；
this_。dropshader.uniforms（{
中心：{，}，
半径：半径，
强度：强度
}）。画（this_。平面）；
}）；
This.textureB.swapWith（这个。texturea）；
}；

water.prototype.movesphere =功能（oldcenter，newcenter，半径）{
无功this_ =这；
This.textureB.drawTo（function（）{（）
this_ texturea.bind（）；
this_。sphereshader.uniforms（{
OldCenter：oldcenter，
NewCenter：newcenter，
半径：半径
}）。画（this_。平面）；
}）；
This.textureB.swapWith（这个。texturea）；
}；

water.prototype.stepsimulation =函数（）{
无功this_ =这；
This.textureB.drawTo（function（）{（）
this_ texturea.bind（）；
this_。updateshader.uniforms（{
三角洲：{ 1 / this_。texturea.width，1 / this_。texturea高度}。
}）。画（this_。平面）；
}）；
This.textureB.swapWith（这个。texturea）；
}；

water.prototype.updatenormals =函数（）{
无功this_ =这；
This.textureB.drawTo（function（）{（）
this_ texturea.bind（）；
this_。normalshader.uniforms（{
三角洲：{ 1 / this_。texturea.width，1 / this_。texturea高度}。
}）。画（this_。平面）；
}）；
This.textureB.swapWith（这个。texturea）；
}；

以上是本文的全部内容，希望能对大家有所帮助。