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,隨便找幾個範例看看是不是能正常執行了~

廣告

對「WebGL 簡介、以及目前的瀏覽器」的想法

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

w

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.