WebGL 示例
WebGL 示例 是一系列帶有簡短說明的即時示例，展示了 WebGL 的概念和功能。
示例按主題和難度級別排序，涵蓋 WebGL 渲染上下文、著色器程式設計、紋理、幾何圖形、使用者互動等。
按主題分類的示例
示例按難度遞增的順序排列。但它們並沒有簡單地呈現在一個長列表中，而是另外按主題進行了劃分。有時我們會多次討論同一個主題，例如在需要先從基本級別討論，然後再從中級和高階級別進行討論時。
與在第一個程式中就嘗試處理著色器、幾何圖形和 GPU 記憶體操作不同，這裡的示例以遞增的方式探索 WebGL。我們相信這能帶來更有效的學習體驗，並最終更深入地理解底層概念。
關於示例的說明可以在主要文字和程式碼註釋中找到。你應該閱讀所有註釋，因為更高階的示例可能不會重複解釋之前已說明過的程式碼部分。
瞭解渲染上下文
- 檢測 WebGL
-
此示例演示瞭如何檢測 WebGL 渲染上下文並將結果報告給使用者。
- 使用顏色清除
-
如何用純色清除渲染上下文。
- 點選清除
-
如何將使用者互動與圖形操作結合起來。當用戶點選時，用隨機顏色清除渲染上下文。
- 簡單的顏色動畫
-
一個非常基礎的顏色動畫，透過每秒用不同的隨機顏色清除 WebGL 繪圖緩衝區來實現。
- 顏色蒙版
-
透過應用顏色蒙版修改隨機顏色，從而將顯示的顏色範圍限制為特定的色調。
- 基礎剪裁
-
如何使用剪裁操作繪製矩形和正方形。
- 畫布大小和 WebGL
-
該示例探討了在瀏覽器視窗中，將畫布大小設定為其元素大小（以 CSS 畫素表示）與否的影響。
- 樣板程式碼 1
-
此示例描述了現在將被隱藏的重複程式碼段，以及定義一個 JavaScript 實用函式以簡化 WebGL 初始化。
- 剪裁動畫
-
透過剪裁和清除操作進行一些有趣的動畫。
- 下雨的矩形
-
一個演示使用純色清除、剪裁、動畫和使用者互動的遊戲。
著色器程式設計基礎
其他高階示例
- 影片紋理
-
此示例演示瞭如何將影片檔案用作紋理。