WebGL tutorial

WebGL 讓網頁內容可以使用一個基於 OpenGL ES 2.0 的 API 以在 HTML <canvas>中執行 3D 渲染,且瀏覽器無需使用任何 plug-in。WebGL programs 由 JavaScript 撰寫的指令碼以及透過電腦的 Graphics Processing Unit (GPU)上運行的特殊效果程式碼(shader code)組成。WebGL 元件可與其他 HTML 元件混合,並與該頁的其他部分或該頁背景組合使用。

本教學描述如何使用 <canvas> 元件描繪 WebGL 圖像/圖形, 從基礎開始。提供的範例將讓你對於可以用 WebGL 做到什麼有清楚的概念,並提供程式碼片段讓你可以著手建立自己的內容。

開始之前

使用<canvas> 元件不會非常困難,但你需要有對HTML 與 JavaScript 的基礎認識。<canvas> 元件跟 WebGL 在某些舊瀏覽器中不支援,但近來的每個主流瀏覽器都有支援。我們用 JavaScript context object 在 canvas 繪製圖形,這樣圖形就能動態(on the fly)產生。

教學文件

WebGL 新手上路

如何建置 WebGL 環境

加入 2D 內容至 WebGL 環境

如何用 WebGL 渲染簡單平面的形狀

使用 shaders 在 WebGL 上色

示範如何使用 shaders 在圖形上上色

WebGL 產生動畫

示範如何旋轉與移動物件以製作簡單的動畫

建立三維物件

示範如何創造並讓 3D 物件(立方體)有動畫

在物件表面貼上材質

示範如何在物件的表面上貼上材質圖

模擬打光

如何在 WebGL 環境模擬打光效果

讓材質產生動畫

如何移動材質圖,在範例中是將 Ogg 影片 貼到一個旋轉中的立方體