WebGL 教程
本教程從基礎開始，介紹如何使用 <canvas> 元素繪製 WebGL 圖形。提供的示例應能讓您清晰地瞭解 WebGL 的功能，並提供程式碼片段，幫助您開始建立自己的內容。
WebGL 使 Web 內容能夠使用基於 OpenGL ES 2.0 的 API，在支援它的瀏覽器中，在 HTML <canvas> 中執行 3D 渲染，而無需使用外掛。WebGL 程式由用 JavaScript 編寫的控制程式碼和在計算機圖形處理單元 (GPU) 上執行的特效程式碼（著色器程式碼）組成。WebGL 元素可以與其他 HTML 元素混合，並與其他頁面部分或頁面背景合成。
開始之前
使用 <canvas> 元素並不難，但您需要對 HTML 和 JavaScript 有基本瞭解。<canvas> 元素和 WebGL 在一些舊瀏覽器中不支援，但在所有主要瀏覽器的最新版本中都支援。為了在畫布上繪製圖形，我們使用一個 JavaScript 上下文物件，該物件可以即時建立圖形。
本教程內容
- WebGL 入門
-
如何設定 WebGL 上下文。
- 向 WebGL 上下文新增 2D 內容
-
如何使用 WebGL 渲染簡單的平面形狀。
- 使用著色器在 WebGL 中應用顏色
-
演示如何使用著色器為形狀新增顏色。
- 使用 WebGL 動畫物件
-
展示如何透過旋轉和移動物件來建立簡單的動畫。
- 使用 WebGL 建立 3D 物件
-
展示如何建立和動畫化一個 3D 物件（在此例中是一個立方體）。
- 在 WebGL 中使用紋理
-
演示如何將紋理對映到物件的面上。
- WebGL 中的光照
-
如何在您的 WebGL 上下文中模擬光照效果。
- 在 WebGL 中動畫紋理
-
展示如何動畫化紋理；在此例中，透過將 Ogg 影片對映到旋轉立方體的面上。