WebGL 簡介、以及目前的瀏覽器

image WebGL 的全名是「Web Graphics Library」,他的官方網站是:http://www.khronos.org/webgl/,同時也有官方的專用微基百科

他是由 OpenGL 的管理組織 Khronos Group,基於 OpenGL ES 2.0 所規範、跨平台的網頁 3D 呈現的標準。目前除了 Microsoft (Internet Explorer) 以外的幾家主要瀏覽器公司,大多都是 WebGL Working Group 的成員,包括了 Apple (Safari)、Google (Chrome)、Mozilla (Firefox) 和 Opera (Opera)。

使用 WebGL 的好處,在於如果網頁瀏覽器有支援的話,就可以在不需要額外安裝 plug-in 的情形下,使用 JavaScript 和 OpenGL ES 2.0 的語法,來編寫出 3D 的 web 應用程式,同時也可以使用顯示卡來做顯示的硬體加速。而在網頁呈現的編排部分,WebGL 是會把最後結果,畫在 Canvas 這個 HTML5 的元素上;也由於他是使用 Canvas 這個元素,所以他基本上也是整合進整個 DOM (Document Object Model) 的架構的∼

所以,基本上要寫 WebGL 的程式,程式開發者必需要熟悉 HTML、JavaScript 以及 OpenGL ES 2.0(包含 GLSL),才能夠編寫出使用 WebGL 的 Web App。

而目前 WebGL 還在草案階段,大部分的網頁瀏覽器現行版本,都也還不能直接支援 WebGL。如果想要取得可以支援 WebGL 的瀏覽器的話,目前有幾個選擇:

  1. FireFox 3.7 Alpha 版
    • 目前最新的版本是 Minefield Alpha4 Pre-release,官方網頁是 http://www.mozilla.org/projects/minefield/
    • 下載請到 Firefox Nightly Builds 網頁選擇不同平台的版本。
    • 下載、安裝後,預設還是不能支援 WebGL 的,請依以下方法進行設定:
      1. 請在網址列輸入「about:config」,進到設訂頁面
      2. 透過 filter 的功能,找到「webgl.enabled_for_all_sites」,並將他的值改為「true」
  2. Chromium 瀏覽器
    • Google Chrome 的 Open Source 開發版,網頁是 http://dev.chromium.org/
    • 可到其 buildbot 的網站內,取得各版本的最新版本。
    • 預設不支援 WebGL,需要在執行時加上「–enable-webgl」、「–no-sandbox」這兩個參數
      • 執行範例:「chrome.exe –enable-webgl –no-sandbox
      • 注意,必須關閉鎖有的 Chromium 瀏覽器後,再重新執行
  3. MacOS X 10.6 的 Safari 4
    • 僅適用於 MacOS X 10.6
    • 下載、並安裝 nightly build 的 webkit
    • 預設並不支援 WebGL,需開啟 Terminal,並輸入「defaults write com.apple.Safari WebKitWebGLEnabled -bool YES」來開啟對 WebGL 的支援。

而在瀏覽器都安裝好、設訂完成後,就可以到 WebGL wiki 的 Demo Repository,隨便找幾個範例看看是不是能正常執行了∼

4 thoughts on “WebGL 簡介、以及目前的瀏覽器”

  1. Chorme 目前已經可以在一般 dev 版中的 sandbox 環境下執行 WebGL 了∼所以只需要下載 dev 版(http://www.google.com/chrome/eula.html?extra=devchannel),並在執行時加上 –enable-webgl 就可以了!參考:Chrome Dev 分支更新至 5.0.366.2 WebGL 支持沙盒中运行http://www.cnbeta.com/articles/107723.htm

  2. Google把我引領到這裡來了。冒昧請教一個事情:
    拿到一個STL或者其他3D模型的文檔,怎麼能把它在瀏覽器裡做3D展現呢?我想能支持自由旋轉/縮放,以及根據不同材質做渲染。

    謝謝!

  3. to Frank
    如果自己不懂 WebGL / OpenGL 的話,建議去找現成的 Web 3D Engine 來用。
    例如:http://threejs.org/

發佈回覆給「heresy」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。