Interactive Computer Graphics: A Top-Down Approach with WebGL（互動式電腦圖學：以 WebGL 為本的由上而下方法）

引用

Angel, E., & Shreiner, D. (2021). Interactive Computer Graphics: A Top-Down Approach with WebGL (8th ed.). Pearson.

章節概要

第8版（2020年9月出版，版權年份2021年）共十三章，另有四個附錄。Pearson 將其描述為一本面向大學部學生、全面融入 WebGL 並強調基於應用的程式設計的電腦圖形學入門教材；書中所有示例都使用 WebGL 和 JavaScript。書名中的「由上而下」是指：學生透過 API 及早編寫完整的三維程式，而圖形管線內部的演算法（裁剪、光柵化、隱藏面消除）直到接近結尾才展開講解。每章以小結與註釋、推薦閱讀和習題結束，程式設計類章節還列出程式碼示例。

第1章：Graphics Systems and Models（圖形系統與模型）

對這一領域的概述：圖形學的應用、圖形系統的組成（畫素與影格緩衝區、CPU 與 GPU、輸入和輸出裝置）、物理影像與合成影像、針孔相機與人類視覺系統，以及合成相機模型。隨後概述程式設計師介面、圖形體系結構、圖形管線的各個階段（頂點處理、裁剪與圖元裝配、光柵化、片段處理）、可程式化管線，以及 OpenGL 各版本與 WebGL 的關係。

第2章：Graphics Programming（圖形程式設計）

第一個程式繪製謝爾賓斯基墊片。圍繞它，本章介紹 WebGL API、圖元與屬性（多邊形、三角剖分、頂點屬性）、RGB 顏色、二維觀察、HTML canvas 與視口，以及一個 WebGL 程式的完整結構：向 GPU 傳送資料、編寫頂點著色器和片段著色器、初始化著色器。本章以三維墊片和對隱藏面消除的初步介紹結束。

第3章：Interaction and Animation（互動與動畫）

動畫（旋轉的正方形、雙緩衝、定時器與 requestAnimationFrame）和互動：輸入裝置、基於事件監聽器的事件驅動程式設計、按鈕、選單、鍵碼和滑塊、位置輸入、視窗事件、手勢與觸控、拾取，以及互動式地建構模型。

第4章：Geometric Objects and Transformations（幾何物件與變換）

本書的數學核心。它從數學視角（向量空間與仿射空間）和電腦科學視角兩方面闡述標量、點和向量，講解座標系、標架和齊次座標，併為一個彩色立方體建模。仿射變換（平移、旋轉、縮放、錯切）、變換的級聯及其在 WebGL 中的使用，進而引出立方體的旋轉、平滑旋轉、四元數和虛擬軌跡球。

第5章：Viewing（觀察）

經典觀察與電腦觀察：正交投影、軸測投影、斜投影和透視投影，用 look-at 函式放置相機，投影規範化與投影矩陣，隱藏面消除與剔除，網格顯示與場景漫遊，以及投影陰影和陰影貼圖。

第6章：Lighting and Shading（光照與著色）

光與物質、光源型別、Phong 光照模型及其修正形式、法向量與反射向量的計算、多邊形著色、用遞迴細分逼近球體、在著色器中實現光照、逐片段光照、非真實感著色，以及關於全域性光照的簡短一節。

第7章：Texture Mapping（紋理對映）

緩衝區與數字影像、對映方法、二維紋理對映及其 WebGL 實現、環境貼圖與反射貼圖，以及凹凸貼圖。

第8章：Working with Framebuffers（使用影格緩衝區）

把影格緩衝區不僅僅當作輸出目標的技術：混合、影像處理、GPU 通用計算、影格緩衝區物件、多遍算繪與緩衝區乒乓、拾取、陰影貼圖和投影紋理。

第9章：Modeling and Hierarchy（建模與層次結構）

幾何體與例項、以機械臂為例的層次模型、樹及其遍歷、動畫、圖形物件、場景圖及其實現。

第10章：Procedural Methods（過程化方法）

演算法模型和基於物理的模型：遵循牛頓力學的粒子系統、其數值求解與約束、基於代理人的模型、點精靈、基於語言的模型、遞迴方法與分形，以及過程噪聲。

第11章：Curves and Surfaces（曲線與曲面）

參數三次多項式曲線、插值、Hermite 曲線與曲面、Bézier 曲線與曲面、B-spline 曲線與曲面及其算繪、猶他茶壺、代數曲面、細分曲線與曲面，以及由資料生成網格。

第12章：From Geometry to Pixels（從幾何到畫素）

由上而下方法的最底層：基本算繪策略、算繪管線、裁剪、直線與多邊形的光柵化、隱藏面消除演算法、硬體實現、反鋸齒以及顯示方面的考慮。

第13章：Advanced Rendering（高階算繪）

超越管線：光線追蹤與一個簡單的光線追蹤器、算繪方程、全域性光照與路徑追蹤、RenderMan、並行算繪、體算繪（等值面、移動立方體與移動四面體、直接體算繪）、網格簡化、基於影像的算繪，以及虛擬現實、增強現實和混合現實。

附錄討論著色器初始化，向量空間、仿射空間和歐幾里得空間，矩陣，以及取樣與鋸齒。

核心概念

第1–3章：系統、程式設計與互動

• 合成相機模型：類比相機來形成影像，把物體、觀察者和光分開處理。
• 可程式化管線：頂點和片段階段執行由應用程式編寫的程式（著色器）的管線。
• 頂點著色器與片段著色器：處理每個頂點和每個片段的 GLSL 程式。
• 事件驅動輸入：透過監聽器響應使用者事件的程式。

第4–6章：幾何、觀察與光照

• 齊次座標：一種四分量表示，使平移、旋轉和縮放都能用矩陣表達。
• 四元數：一種避免萬向節鎖的旋轉代數表示。
• 投影規範化：把任意投影轉換為標準正交投影。
• Phong 光照模型：結合環境反射、漫反射和鏡面反射的模型。

第7–11章：紋理、影格緩衝區與建模

• 紋理對映、環境對映與凹凸對映：利用影像改變顏色、反射或表面的視覺幾何形狀。
• 影格緩衝區物件與多遍算繪：算繪到螢幕外緩衝區並重複利用其結果。
• 場景圖：表示層次模型的樹結構。
• 粒子系統：按照物理定律運動的粒子集合。
• Bézier 曲線與 B-spline 曲線：由控制點定義的光滑曲線和曲面。

第12–13章：實現與高階算繪

• 裁剪與光柵化：去除視野之外的圖元，並把其餘部分轉換為片段。
• 算繪方程：描述光傳輸的積分方程，是全域性光照的基礎。
• 體算繪：顯示三維資料集，包括用移動立方體法提取等值面。

評析

優點

• 一開始就程式設計。 第一個程式出現在第2章，互動和動畫出現在第3章，因此學生在最初幾週就能做出可執行的互動式圖形。出版社強調，這種方法使課程能及早引入吸引人的三維內容。
• 現代的、基於著色器的管線。 全書始終講授可程式化管線，從第一個程式起就使用頂點著色器和片段著色器；WebGL 無需安裝即可在瀏覽器中執行，降低了動手實驗的門檻。
• 幾何講解細緻。 第4章在使用點、向量和標架之前，先從數學和程式設計兩個角度加以闡述，並涵蓋四元數和虛擬軌跡球；附錄補充了線性代數。
• 覆蓋面廣。 影格緩衝區技術、層次建模、過程化方法、曲線與曲面，以及一直講到路徑追蹤、體算繪和 VR 的高階算繪一章，為教師提供了遠超最小課程的選擇。

局限

• 綁定於單一 API。 所有示例都使用 WebGL 和 JavaScript。使用其他 API 或較新的 Web API 的讀者必須自行改寫程式碼，而書中的 API 細節會比原理過時得更快。
• 演算法出現得晚。 想從基本原理理解光柵化和裁剪的學生要等到第12章，光線追蹤則要等到第13章；以演算法為先的課程可能會覺得這種順序不便。
• 高階章節只是概覽。 第13章在一章之內列出了許多主題（從 RenderMan 到混合現實），每個主題都只得到入門性的處理。

在課程中的定位

本書與 Marschner 和 Shirley 的 Fundamentals of Computer Graphics 是本課程中兩本覆蓋面廣的入門教材，二者順序正好相反。Marschner 和 Shirley 從光線追蹤和變換的數學講起，把管線作為兩種方法之一來介紹，不講授特定 API；Angel 和 Shreiner 從 WebGL 程式設計開始，最後才講到內部演算法。課程可以一本作主教材，另一本作為另一角度的講解：動手程式設計用 Angel 和 Shreiner，理論用 Marschner 和 Shirley。Gambetta 的 Computer Graphics from Scratch 是一本從基本原理出發、用虛擬碼建構光線追蹤器和光柵化器的簡短入門書，是本書第12–13章的有益搭配。

讀完本書後，Akenine-Möller 等人的 Real-Time Rendering 是 GPU 算繪技術的綜合參考書，可接續第6–8章；Pharr、Jakob 和 Humphreys 的 Physically Based Rendering 深入探討第13章介紹的光線追蹤和全域性光照。Rogers、Sharp 和 Preece 的 Interaction Design 討論互動式產品的設計與評估，與第3章的事件處理程式碼屬於課程的不同方面。

如何使用本書

本書適合會程式設計、掌握向量和矩陣基礎的大學部學生。WebGL 和 JavaScript 透過示例來介紹；由於 WebGL 程式在網頁瀏覽器中執行，不需要另外安裝圖形庫。

• 核心（一個學期）： 第1–6章，時間允許再加第7章。第2章的墊片程式不要只讀，要親手輸入並修改，因為後面所有示例都建立在它的結構之上。
• 數學： 學習第4章時配合附錄 B 和 C；不要跳過第4章關於標架和齊次座標的內容，第5章依賴於它。
• 選讀： 影格緩衝區與多遍技術讀第8章，層次模型與場景圖讀第9章，粒子與過程化方法讀第10章，曲線與曲面讀第11章。
• 實現及更多： 講解管線內部如何工作的第12章，最好在學生用過管線之後再讀；第13章可作為概覽和專案靈感的來源。

用程式碼完成習題。一個好習慣是：在每個示例中只改動一處（變換順序、光照參數、紋理過濾方式），並在執行前預測結果。