The Book of Shaders 是一部講解片元著色器(Fragment Shader)的線上入門書,副標題自稱是「穿越抽象而複雜的著色器宇宙的一部溫和循序漸進的指南」。它最大的特點:書中每個著色器範例都是活的——程式碼框可以直接編輯,右側畫布即時重新渲染,讀者改一行 vec3 就能立刻看到顏色或形狀的變化。作者為藝術家兼開發者 Patricio Gonzalez Vivo 與資料科學家 Jen Lowe。

The Book of Shaders 顏色章節截圖:頁面頂部列出 14 種語言切換,正文配保羅·克利的色輪手稿插圖,下方是 GLSL 程式碼範例

網站速覽

項目 內容(截至 2026-09-30)
網址 thebookofshaders.com
類型 互動式線上教程(GLSL 片元著色器)
費用 免費
註冊要求 無需註冊
介面語言 14 種語言,含中文版、日本語、한국어、Español 等
開放協作 GitHub 倉庫(2015-03 建立,截至 2026-09-30 約 7.0k stars,仍在維護)

內容結構

全書按難度遞進,主線章節包括:

  • 入門:什麼是著色器、「Hello world」、uniform、在不同環境運行著色器;
  • 演算法繪圖:整形函式、顏色、形狀、矩陣、圖案;
  • 生成式設計:隨機、噪聲、細胞噪聲、碎形布朗運動、碎形;
  • 影像處理:紋理、影像運算、卷積核、濾鏡及其他效果;
  • 模擬:pingpong 緩衝、康威生命遊戲、漣漪、水彩、反應擴散;
  • 3D 圖形:光照、法線貼圖、凹凸貼圖、光線步進(ray marching)、環境貼圖、反射與折射。

附錄提供了離線閱讀、在樹莓派上運行範例、列印成書等替代用法。對從 JavaScript 轉來的讀者,書中還有 Nicolas Barradeau 撰寫的專門導引。

網站背景

兩位作者的背景解釋了這本書的氣質:Vivo 是常駐紐約的藝術家與開發者,帕森斯設計學院 MFA 並在那裡任教;Jen Lowe 是獨立資料科學家,共同創辦了詩意計算學校(School for Poetic Computation)。翻譯由社群貢獻者完成——中文版由 Tong Li 與 Yi Zhang 翻譯,日文、韓文、西班牙文等版本也各有署名貢獻者。

適用場景

  • 創意編程與生成藝術初學者系統入門 shader;
  • 前端/圖形開發者快速查閱噪聲、fBm、光線步進等常用技法;
  • 教師在創意編程課堂上作為配套教材(支援中文介面)。

限制

  • 聚焦片元著色器與 GLSL 入門,不涉及頂點管線、計算著色器或 WebGPU 等現代主題。
  • 範例基於 WebGL 1 時代的 GLSL 語法;移植到 WebGL2/WGSL 需要自行轉換。
  • 部分章節末尾標有「待續」性質的內容缺口,個別語言版本的翻譯進度不一致。
  • 頁面內編輯器適合學習,但沒有錯誤除錯、效能分析等工程化功能。

參考資料