正在翻譯中。

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 影片 貼到一個旋轉中的立方體

文件標籤與貢獻者

 此頁面的貢獻者: oberonfrog, leannechen, fscholz
 最近更新: oberonfrog,