最近在研究WebGL,看到國外不少高手作的不少超炫的3D效果,無比羨慕。忍不住把效果趴下來研究,下面介紹一個逼真的游泳池中浮動小球的效果。效果很是絢麗,功能強大。示例可切換觀察水池的視角,不一樣視角考慮到了光線從不一樣角度折射和反射的影響,因此波紋效果極其逼真。html
先介紹下WebGLweb
WebGL是一種3D繪圖標準,這種繪圖技術標準容許把JavaScript和OpenGL ES 2.0結合在一塊兒,經過增長OpenGL ES 2.0的一個JavaScript綁定,WebGL能夠爲HTML5 Canvas提供硬件3D加速渲染,這樣Web開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現3D場景和模型了,還能建立複雜的導航和數據視覺化。顯然,WebGL技術標準免去了開發網頁專用渲染插件的麻煩,可被用於建立具備複雜3D結構的網站頁面,甚至能夠用來設計3D網頁遊戲等等。chrome
囉嗦這這麼多先給張效果圖跨域
webgl-water瀏覽器
下面是整理好的一個示例,在chrome,firefox瀏覽器下查看,不支持IE和safari。chrome下效果最佳,另外對顯卡和驅動也有要求。服務器
查看示例app
下面是示例的下載地址,不過因爲WebGl不能跨域加載圖片本地查看不到效果,上傳到服務器中或者本地的本地搭建的服務器環境也能夠。網站
下載地址webgl