01
入門畫布與 Context
Canvas & Context
取得 WebGLRenderingContext、清色、視口設定。
getContextclearColorviewport尚未開始· 12 分鐘翻開章節 →
用八個章節把 WebGLRenderingContext 變成你的畫筆。每一頁都有可編輯的著色器與即時預覽──讀完不只是看懂，是真的會寫。
每一章都是一份能單獨運作的範例與一份可編輯的著色器。讀到哪、寫到哪，progress 會自動存在你的瀏覽器裡。
取得 WebGLRenderingContext、清色、視口設定。
getContextclearColorviewportvertex / fragment shader 的職責、GLSL 語法、編譯與連結。
createShadercompileShaderlinkProgramVBO 結構、vertexAttribPointer 步長 / 偏移、interleaved 資料。
createBufferbufferDatavertexAttribPointermodel / view / projection、column-major、glMatrix 速覽。
uniformMatrix4fvmat4.perspectivemat4.lookAt上傳影像、UV 座標、wrap / filter、mipmap。
createTexturetexImage2DtexParameteriLambert、Blinn-Phong、法線變換與切線空間。
normalMatrixdot(N,L)pow(spec,shin)ELEMENT_ARRAY_BUFFER、drawElements、共用頂點。
ELEMENT_ARRAY_BUFFERdrawElementsUNSIGNED_SHORTFramebuffer Object、render-to-texture、bloom / blur 兩遍渲染。
createFramebufferframebufferTexture2DbindFramebuffer一次 gl.drawArrays() 會啟動底下這條 pipeline。資料由左至右流動，每階段的輸出就是下階段的輸入。理解這張圖，就能讀懂任何 WebGL 範例。
下面是一段完整、可編譯、會跑的 fragment shader。修改裡面的常數、函式、運算子，畫面會在你打字的同時更新。編譯失敗時錯誤訊息會直接出現。
中英對照、簡短定義。讀範例卡關時可以回來查。
官方文件、規範、書籍、工具──能讓你走得更遠的六個方向。
最完整的中文 / 英文雙語 reference，函式簽名一查就有。
WebGL 1.0 / 2.0 規格書原文。鑽研細節時的最終依據。
入門經典；範例步驟極為清楚，適合一邊讀一邊跟著敲。
從零開始、概念釐清非常仔細，許多名詞的最佳對照教材。
抓取單一 frame、檢視每個 draw call 的狀態，除錯神器。
純 fragment shader 的線上 playground 與作品庫，靈感泉源。
WebGL 對應 OpenGL ES 2.0/3.0，是目前最廣泛支援的 3D API。WebGPU 是新一代規範，更接近 Vulkan/Metal 的低階介面，效能與 compute shader 支援更佳，但瀏覽器支援仍在普及中。學會 WebGL 的觀念後再切換到 WebGPU 很順暢。
所有教材免費、開源、可離線使用。第一章只要十二分鐘，畫面就會動起來。