最近在研究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不能跨域加載圖片本地查看不到效果，上傳到服務器中或者本地的本地搭建的服務器環境也可以。