認識WebGL

chszs發表於2015-04-30

  WebGL是一個跨平臺、免費的底層3D繪圖API的Web標準,它基於OpenGL ES 2.0標準。WebGL是網頁上渲染三維圖形影象的技術,它本身是HTML5規範的一部分。WebGL通過HTML5 Canvas元素對外暴露DOM程式設計介面。

  WebGL全稱是Web-based Graphics Language,它提供了使用JavaScript與GPU互動的方法。

  讓我們來回顧一下在WebGL誕生之前的情況。在沒有WebGL的日子,我們要在網頁上實現三維圖形的顯示,該怎麼辦?

  當然,首選的是Adobe公司的Flash技術。有了Flash技術,我們可以在網頁上顯示2D/3D影象,以及動畫。但是,瀏覽器是不能直接顯示Flash內容的,於是需要安裝外掛——Flash Player。

  其次就是微軟的Silverlight技術,俗稱“銀光”,銀光技術與Flash技術相似,功能也是同樣的強大,遺憾的是,銀光技術同樣的需要在瀏覽器上安裝外掛。

  除此之外,還有一些非主流的技術,這些技術都不如Flash或者Silverlight,而且同樣的都有需要瀏覽器安裝外掛的缺點,因此就不再一一列舉了。

  WebGL是一個偉大的技術,它使得瀏覽器擺脫了需要外掛的麻煩,可以可以讓網頁渲染直接呼叫顯示卡GPU來搞定,大大加快了網頁顯示的速度,而且程式設計介面使用的是統一、標準、跨平臺的OpenGL介面實現。WebGL技術一出現,就引起了全球的關注,國際主流的IT公司包括Apple、Google、微軟等都紛紛支援WebGL規範,推動了WebGL技術的發展。

  對於很多想要學習WebGL的愛好者來說,最關心的話題莫過於WebGL該怎樣學習,如何才能做到掌握、精通WebGL技術。對於這一點,我總結了一些思路,供大家參考。

  要學習WebGL,需要循序漸進的掌握以下內容:

  0)熟悉最好是精通JavaScript語言

  1)理解模型檢視矩陣,以及怎樣設定場景

  2)掌握渲染和操縱原語

  3)理解著色器,精通著色器的功能

  4)掌握建立虛擬場景的技術

  5)掌握使用基本的物理規則來模擬互動

  6)熟悉使用數學模型來渲染粒子系統、地形以及不規則碎片

  7)掌握Three.js框架

  8)熟悉GLGE和philoGL框架

  9)積累WebGL的除錯技巧和效能優化技巧

  10)熟悉WebGL規範

  WebGL的官方主頁見:http://cn.khronos.org/webgl

  《WebGL程式設計指南》是博文視點推出的、國內第一本描述WebGL技術的專著,對於需要這方面資料的愛好者來說,你們沒有其他選擇,只能看這個。這本書我也沒看,所以也無從點評其內容。不管怎麼樣,作為一個新技術的“佈道者”或者是“指引者”,這本書還是值得買來一讀的。