一个基于WebGL的仿真3D水池有逼真的水波纹效果

最近在研究WebGL，看到国外不少高手作的不少超炫的3D效果，无比羡慕。忍不住把效果趴下来研究，下面介绍一个逼真的游泳池中浮动小球的效果。效果很是绚丽，功能强大。示例可切换观察水池的视角，不一样视角考虑到了光线从不一样角度折射和反射的影响，因此波纹效果极其逼真。

先介绍下WebGL

WebGL是一种3D绘图标准，这种绘图技术标准容许把JavaScript和OpenGL ES 2.0结合在一块儿，经过增长OpenGL ES 2.0的一个JavaScript绑定，WebGL能够为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就能够借助系统显卡来在浏览器里更流畅地展现3D场景和模型了，还能建立复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于建立具备复杂3D结构的网站页面，甚至能够用来设计3D网页游戏等等。

啰嗦这这么多先给张效果图

webgl-water

下面是整理好的一个示例，在chrome,firefox浏览器下查看，不支持IE和safari。chrome下效果最佳，另外对显卡和驱动也有要求。

查看示例

下面是示例的下载地址，不过因为WebGl不能跨域加载图片本地查看不到效果，上传到服务器中或者本地的本地搭建的服务器环境也能够。

下载地址