WebGL教學


幾年前,Java應用程式(小程式和JOGL的組合) ? 被用於通過解決在GPU(圖形處理單元)來處理網路上的三維圖形。作為小程式需要一個JVM執行,它變得很難依靠Java小程式。幾年後,人們就開始停止使用Java小程式了。

由Adobe (Flash, AIR)的Stage3D API提供了GPU硬體加速架構。使用這些技術,程式員可以對Web瀏覽器以及對iOS和Android平台上開發2D和3D功能的應用程式。由於Flash是專有軟體,它不是用來作為網路標準。

OpenGL

OpenGL(開放式圖形庫)是跨語言,對於2D和3D圖形的跨平台API。它是命令的集合。OpenGL4.5是OpenGL的最新版本。下表列出了一組相關的OpenGL技術。

API
採用的技術
OpenGL ES 它是從庫中的2D和3D圖形在嵌入式系統上 - 包括控制台,手機,電器,和車輛。OpenGL ES3.1是它的最新版本。它是由Khronos Group維護,官方網站:www.khronos.org
JOGL 這是Java對OpenGL結合。 JOGL4.5是其最新的版本,它是由 jogamp.org維護
WebGL 這是JavaScript和OpenGL結合。 WebGL 1.0是其最新的版本,其 khronos group 由維護
OpenGLSL OpenGL著色語言。它是一種程式設計語言,目前需要在OpenGL2.0及更高版本。它是OpenGL4.4核心規範的一部分。它是專為嵌入式系統,如手機和平板電腦量身客製化的API。
註 - 在WebGL我們使用GLSL來寫著色器。

WebGL是什麼東西?

WebGL(Web圖形庫)是Web上的3D圖形的新標準,它是專用於繪製2D圖形和互動式3D圖形的目的。它是從OpenGL ES 2.0庫,用於手機和其他移動裝置的低階3D的API衍生。 WebGL提供ES2.0(嵌入式系統)類似的功能並在現代3D圖形硬體上表現優異。

它可以與HTML5使用一個JavaScript的API。 HTML5有幾個功能,支援3D圖形,如2D畫布,WebGL,SVG,CSS3D變換和SMIL。
WebGL程式碼編寫在HTML5的<canvas>標籤內。它是一種規範,允許網際網路瀏覽器使用的計算機存取圖形處理單元(GPU)。

誰開發WebGL?

一個名叫Vladimir Vukicevic 的美國塞爾維亞軟體工程師做了基礎工作,並領導建立WebGL。
  • 2007年,Vladimir開始致力於為HTML文件Canvas元素定義OpenGL原型。
  • 2011年3月,克羅諾斯集團(Kronos Group)建立WebGL。

支援的瀏覽器

下表顯示了支援WebGL的瀏覽器的列表 -
瀏覽器名稱
版本 支援
Internet Explorer(IE) 11及以上
完全支援
Google Chrome 39及以上
完全支援
Safari 8
完全支援
Firefox 36及以上 部分支援
Opera 27及以上 部分支援

移動瀏覽器

瀏覽器名稱 版本 支援
Chrome for Android 42 部分支援
Android browser 40 部分支援
IOS Safari 8.3 完全支援
Opera Mini 8 不支援
Blackberry Browser 10 完全支援
IE mobile 10 部分支援

WebGL的優勢

下面是使用WebGL的優勢 -
  • JavaScript程式設計 ? WebGL的應用程式是用JavaScript編寫的。使用這些應用程式,你可以直接用HTML文件的其他元素來進行互動。也可以使用其他JavaScript庫(如JQuery)和HTML技術,以豐富WebGL應用程式。

  • 越來越多的移動瀏覽器支援 ? WebGL的還支援移動瀏覽器,如:iOS的Safari瀏覽器,Android瀏覽器和Chrome的Android。

  • 開源 ? WebGL是一個開源的工具。您可以存取庫中的原始碼,並了解它是如何工作以及它是如何開發的。

  • 無需編譯 ? JavaScript是一種半程式設計和半HTML元件。為了執行這個指令碼,沒有必要對檔案進行編譯。相反,您可以直接開啟使用任何瀏覽器的檔案,並馬上可以檢視結果。因為WebGL應用程式是使用JavaScript開發的,所以沒有必要編譯WebGL應用程式。

  • 自動記憶體管理 ? JavaScript支援自動記憶體管理。沒有必要對儲存器手工分配。 WebGL繼承了JavaScript的這個特性。

  • Easy to set up ? 由於WebGL是整合在HTML 5中,所以沒有必要做額外的設定。要編寫一個WebGL的應用程式,所需要的是一個文字編輯器和網路瀏覽器。

開發環境設定

沒有必要為WebGL設定一個不同的環境。支援WebGL瀏覽器有自己的內建設定的WebGL。