計算機圖形學中仿射變換的教學

章夏芬，朱昌明

（上海海事大學 信息工程學院，上海 201306）

計算機圖形學中仿射變換的教學

章夏芬，朱昌明

（上海海事大學 信息工程學院，上海 201306）

針對計算機圖形學中三維立體繪制和變換涉及的數學理論太多、內容抽象、難以理解、難以綜合應用的問題，分析三維仿射變換的數學基礎、難理解的理論點、綜合應用難點，提出淺入深出的理論講解法，用實踐綜合和拓展法相結合的方式啟發學生對綜合變換應用的設計興趣，為計算機圖形學講授仿射變換的教學者提供教學思路和參考。

計算機圖形學；三維仿射變換；淺入深出；綜合拓展

0 引 言

仿射變換(Affine Transformation)及綜合應用，尤其是三維 (Three-Dimension, 簡稱3D)仿射變換是計算機圖形學中最重要的部分，是3D立體重建、科學計算可視化的基礎，廣泛應用于工程設計、醫學圖像、實時繪制、自然景物仿真、計算機動畫、虛擬現實及影視特效等領域中。仿射變換與數學聯系密切，通過操縱矩陣變換實現，理論難度大，教學學時有限，如果處理不好，滿屏幕的數學公式和矩陣，會使學生難以理解，失去興趣，影響教學質量。

受硬件限制，以往計算機圖形學所處理的圖形大都是二維的(Two-Dimension, 簡稱2D)。但隨著計算機圖形學的發展，Microsoft最早推出能捕捉3D坐標信息的Xbox+Kinect，Intel接著推出了RealSense 3D攝像頭。3D圖形繪制越來越普及，3D電影已“飛入尋常百姓家”。計算機圖形學的教學要與時俱進，需要講解3D圖形繪制和變換。

本科生在實驗中能繪制出3D圖形是有成就感的，但對具體操作過程中遇到3D立體級聯變換、消隱及相應的矩陣變換，覺得難理解，影響后續綜合應用。有些學校在本科生的計算機圖形學課程中，只簡單介紹3D知識點[1]。本科生對仿射變換的迷茫主要體現在：①能理解3個基本的仿射變換對應3個矩陣，但難理解3D綜合變換到底由幾個基本仿射變換組成、順序是什么；②能調用OpenGL函數完成單一的基本變換，但沒掌握好原理，無法應用在具體的綜合變換中。

1 淺入深出法

國內外很多大學以Edward Angel撰寫的 《計算機圖形學》[2]為教材，筆者也以此書原版為教材[3]。該教材中，仿射變換是直接從3D基本仿射變換（包括平移、縮放、旋轉）開始，把2D仿射變換作為3D的一種特例，放在課后練習題里。然而，3D基元變換矩陣含4×4個元素，綜合變換對應矩陣的連乘。本科生剛開始接觸，難以把實際空間的變換和相應的矩陣理論對應起來。因此，課堂講解時宜由淺入深、循序漸進，主要表現在以下3方面。

（1）發揮圖形學特長，用圖例說明空間點、矢量、標量對應的物理意義。由線性變換公式引出矩陣運算；先講解“為何2D變換矩陣是3×3矩陣”，為理解3D變換矩陣是4×4矩陣奠定基礎。

（2）顛倒教材中3D和2D仿射變換內容的順序。對教材中略過的2D變換，做出輔助圖示詳細講解；而對教材中詳細展開的3D變換，則只講概要，講解3D與2D變換的不同之處。

（3）擴展仿射變換，進行綜合應用。從空間一個點的變換，擴展到空間的一條線段，再擴展到用線段表達的3D物體，最后進入3D級綜合變換。

1.1 相關數學原理

何援軍在文獻[4]中指出：計算機圖形學和造型依賴于點和向量的數學運算，仿射變換也依賴點和向量的運算。廣義而言，仿射變換涉及歐幾里得空間的3個基本元素：點（points）、矢量（vectors，又稱向量）和標量 （scalars）。在講解點、矢量、標量3個元素繪圖的表達和運算時，無需一開始就深入講解相關數學原理，較難理解的數學原理容易打擊學生的興趣。

在講解點、矢量、標量表達和運算時，并不按線性代數的方式講解，而是發揮圖形學的優勢，輔助圖示說明。讓學生回答PPT上某一個點到底有多長，引出Points在數學和計算機圖形學中的區別：圖形學的Points需要繪制，要知道Points的尺寸和形狀；讓學生回答PPT上的某兩點到底有多遠，引出描述距離Scalars；接著指出Scalars只描述大小、尺寸，無法描述空間位置關系，引出Vectors，強調Vectors的兩個屬性（方向和模長），用圖示意。

接著，用1個學時以圖示輔助講解Vectors的加、減、乘等操作的物理意義，著重講解乘分為點乘（dot product）和叉乘（cross product）。在講解Vector叉乘運算時，引出同一個面的兩個Vectors的叉乘運算結果是Vectors，重復強調Vectors的兩個屬性；提出法矢量（Normal）的概念，為后續3D物體消隱算法中面的法矢量計算奠定基礎。在展示Vectors的點乘運算公式時，指出該運算結果的符號取決于兩個Vectors的夾角。若夾角θ∈[-90°, 90°]，則結果是正值，為后續3D消隱算法中判定面是否可見奠定基礎。

1.2 2D仿射變換

教師演示一個2D的點在笛卡爾坐標系中的變換，向學生提問：如何計算變換前后的坐標位置？引出計算一個點仿射變換的坐標位置計算方法，并用矩陣表示；接著，展示較復雜變換是上述3種仿射變換的綜合；然后，指出“由多個像素點所表達的物體，其中一個點是怎么變換的，該物體上的其他點做相同變換，和同一個變換矩陣做相乘”。

1.2.1 基本2D仿射變換

用動畫圖示，在PPT展示物體的平移變換。該物體中的一個點(x,y)在笛卡爾坐標系統中平移(Tx,Ty)距離后，新位置的坐標值(x’, y’)可由公式表達。結合上文講解的Vectors和Points，從方便計算機編碼的角度出發，增加一個維度（值為0時是Vectors，值為1時是Points），得出2D的仿射變換矩陣是3×3矩陣。把矩陣元素個數為何多出一維，放在2D仿射矩陣中講解，是因為2D的圖示效果比3D更直觀，2D變換矩陣元素少，更易理解。同理，講解2D的縮放和旋轉。

在同一屏幕呈列并比較2D的3個基本仿射變換矩陣，稱之為“三板斧”。類比計算機色彩系統中的RGB“三板斧”，RGB三基色能混合出任意一種顏色。這使學生聯想到：RGB能按一定比例混出新顏色，3種基本變換能按一定規矩級聯出任意一種空間變換。

1.2.2 級聯2D變換

RGB三基色按一定比例混合得任一種顏色，3種基本仿射變換按一定順序級聯變換得到空間任意一種復雜變換。類比體操運動員完成復雜表演時，每個基本動作順序不能交換，空間上的物體從初始狀態變換到最終狀態的每個基本變換序列，順序也不能交換，可用圖示給反例證明。接著，教師展示矩陣級聯相乘中，乘子是不能交換的。最后，講解綜合變換：從兩個矩陣的級聯開始，圖示物體初始狀態變換到最終狀態分解成兩個動作，每個動作都對應一種基本仿射變換矩陣；推廣3個矩陣的級聯變換、 4個矩陣的級聯變換等。

1.3 3D仿射綜合變換

以上詳細講解2D仿射變換，為3D仿射變換奠定基礎，尤其是3D的綜合變換。3D增加了一維（用z表示），3D的平移和縮放，是在2D變換矩陣基礎上添加變量Z。應重點講解3D的旋轉變換與2D不同，講解3D的繞X軸、繞Y軸和繞Z軸旋轉，并講解教材上第200頁的實例，即繞3D空間任意軸旋轉θ°，強調正負方向，如果方向反了，代入級聯矩陣中的角度正負值不同，結果就不同。教材上并沒給出方向定位方法，需要補充定位的依據和圖例，即平面的法矢量和時鐘旋轉方向。圖示一種可行方案，從平面法矢量的正向（右手規則，在幻燈片上以水面上的燈塔示意）往下看水平面，逆時鐘方向為正方向。

1.4 面消隱藏

繪制過程中3D物體由多個面構成，其仿射變換涉及面消隱。用肢體語言展示，前方的面，眼睛能看得見；背后的面，眼睛看不見，進而引出最簡單的凸面體消隱算法——后向面檢測法(Back-face detection)。檢測一個面是否可見有3個步驟：①計算面的法矢量；②計算視線矢量；③兩個向量做點乘，根據正負值決定是否可見。

如何計算面的法矢量？回顧剛講過的矢量點乘和叉乘運算：兩個矢量叉乘的結果，其方向垂直于這兩個矢量構成的面。而獲取兩個矢量，只需要找到給定面的3個點，兩兩做差可得到兩個矢量。這兩個矢量做叉乘，其結果為該面的法矢量。

如何計算視線的方向？回顧剛講過的空間上兩個點做差運算：用眼睛所在的點和眼睛所看的點，做差運算，其結果是視線方向，一定要注意矢量方向。

2 實踐驗證法

通過上述理論講解，學生可基本理解3D變換的原理。但根據筆者的教學經驗，理解原理和獨立編碼、實現3D變換綜合應用存在著距離。因此，秉承淺入深出法，從簡單3D立體仿射變換實驗著手，能使學生只專注原理和步驟。簡單表現在：①輸入數據簡單，3D立體用8個3D點表達；②所用工具簡單，用VC++（或Turboc）作為編碼工具，禁止調用OpenGL庫函數，避免OpenGL的加載；③繪制的結果簡單，僅繪制12條直線段表示3D立體，避免了曲線、渲染等復雜算法和相關繪制。

2.1 3D物體繪制

編碼之前，教師先演示并講解3D物體投影到2D屏幕上的正等測投影法（Axonometric）的由來、推導過程，順便為下一章的投影算法奠定基礎。在推導正等測投影矩陣過程中，詳細展示以下3個動作：①繞Z軸轉 θ°；②繞X軸轉-Φ°；③投影到XOZ平面。在這個展示過程中，給出相應的變換矩陣，再次證明一個基本變換動作對應一個基本矩陣。

以點P(x, y, z)為例，該點乘以投影矩陣，其結果是一個只含x和z坐標值的點。把這個規律寫成函數，其他7個點調用該函數，得出由8個點組成的簡單3D立體在2D屏幕上的投影坐標值。設計由8個點構成的3D立體時，可使其中一條邊比另一條邊高，并對8個頂點標記編號，這會使3D立體變換的前后位置明顯。繪制后的可視效果見圖1（b）。

圖1 3D立體繪制

2.2 3D物體變換

屏幕上繪制的一個物體，怎樣確認它是3D的呢？答案是讓物體運動起來，使用戶不僅能看到該立體的前面，還能看到后面，進而引出物體運動分3類。教師重復給出仿射的3個變換：平移、旋轉和縮放的矩陣，將各個變換編碼成一個函數。

然后，編寫交互方式，用5對鍵盤按鍵對應5種變換：繞X軸旋轉、繞Y軸旋轉、繞Z軸旋轉、縮放、平移。

2.3 3D物體消隱

由12條線6個面構成的3D立體，若所有輪廓線都用實線繪制，則難以辨別哪個面是前面、哪個面是后面。因此，要對面進行隱藏，隱藏面的輪廓線用虛線繪制，可見面的輪廓線用實線繪制。

可通過問題“如何處理虛實面的公共邊”引出解決方案：先用虛線畫不可見面的輪廓線，再用實線畫可見面的輪廓線；通過問題“如何驗證消隱算法是正確的”引出驗證方式：用5對按鍵觸發5種變換，觀察3D立體在變換中的消隱是否正確。如圖2所示，3D立體繞Z軸旋轉一個角度，旋轉之前，由頂點2和6組成的邊是虛線，代表不可見，由頂點1和5組成的是實線，是可見的，見圖2（a）；旋轉一個角度后，2和6的邊是實線，從“不可見”變成“可見”，而1和5組成的邊則反之，見圖2（b）。

圖2 3D立體繞Z軸旋轉的消隱

3 綜合拓展法

按上述方式把仿射變換講完整，需要7個學時，各內容的分布見表1。

表1 仿射變換教學的學時分布

3.1 綜合應用

杭后俊在文獻[5]中提出，計算機圖形學教學的實踐不足，即使有實驗，也是驗證性實驗。蔣先剛在文獻[6]中提出，興趣是最好的老師。因此，需要設計一個接近生活實踐、不重復教材內容、能綜合應用算法的繪制實例。筆者給出旋轉和平移兩種仿射變換的綜合應用——小汽車的行駛（車輪在旋轉而車身在平移）。設置平移和旋轉的參數，使車輪轉動一圈后，整個車身前進的距離等于車輪的周長。為了不被其他因素干擾，只用簡單輪廓線表示車模；為了使車輪旋轉明顯，繪制多條線段表示車軸，如圖3所示。

圖3 仿射變換綜合應用示例

3.2 拓展應用

喬布斯（Steve Jobs）在斯坦福大學演講時說：把知識點串接一起(connecting the dots)。串接在一起后能得到教材上沒有的新應用，能讓學生見識到所學知識在實際場合中的應用。在后續曲線繪制時，讓學生直接在已有作品上更新：畫兩條Bezier曲線表示的彎曲道路，并使車模由參數控制沿曲線前進，而不是沿直線前進。學完分形后繼續更新：在彎曲的道路兩旁，應用分形算法繪制樹木。如此，每學習一次圖形學，都能更新、完善原有的場景和物體，一步一步接近真實世界。這會使計算機圖形學的學習過程，像游戲升級那樣具有挑戰。

上述3D物體僅由有限頂點構成，真實世界的3D物體由更多點構成，但變換的原理是一樣的。建議學生可在后續的畢業設計中進一步完善，繪制出更逼真的3D物體。

最后十分鐘，教師在屏幕上顯示同一個漢字旋轉、縮放、平移后生成的多幅不同圖像，提出問題“不同的圖像，如何證明它們是同一個字”，并說明這些圖像均是原圖乘以變換矩陣所得，是模式識別要解決的問題，但和圖形學密切相關。通過這種關聯方式，進一步拓展學生的思維，為培養其自學能力奠定基礎。

4 教學效果與討論

在筆者10年的計算機圖形學教學中，前6年對仿射變換的講解是按教材章節順序進行的，效果一般。后4年改變方式，以“要解決的問題”和實踐為導向，重組章節順序，用淺入深出法講解，收獲了學生的學習熱情。這是因為由淺入深法，即使差生也能聽懂前半部分，不至于在開始不久后便失去興趣；后半部分較復雜，但有實踐例子相輔，在簡單基礎上，每次僅增加一個新功能，一步步形成復雜的綜合變換，激發學生的挑戰心理。筆者的授課班上，部分學生在后續本科畢業設計時選擇了圖形繪制相關的課題（如3D書法匾額設計、3D書法字匹配點可視化），因為學生通過該門課程的學習有信心完成較難的項目。

仿射變換涉及較多的數學知識，講解時若以數學運算為重，不僅會沖淡計算機圖形學的繪圖目的，而且會使學生產生“前奏部分都聽不太懂，后續怎能學好”的感覺。因此，教師不要一次性把跟仿射變換相關的數字知識講得很透徹、很詳細，而是結合后續要解決的問題多次回顧。實驗驗證前，再次回顧并加入只針對這項運算的詳細講解，以實圖示之。這種回顧貌似在重復相同的原理，但并非簡單重復，而是從不同角度、不同應用講解同一個知識，能加深記憶和理解。在這種教學方式下，本科生反饋：原先只知道點乘、叉乘的公式定義，學了仿射變換后，知道了它們的物理意義，很有成就感。

傅向華在文獻[7]中提出以實驗和項目為主，要求學生撰寫不少于5 000字的實驗報告，其提出的過程性考核，值得提倡。但是，讓本科生撰寫5 000字的實驗報告，容易因耗費過多時間寫長篇報告而使學生厭倦。因此，在仿射變換實驗完成后，筆者僅要求學生撰寫1～2頁的小報告，概要描述完成該實驗是如何實現的，可用偽代碼描述，也可用自然語言描述。

5 結 語

3D仿射變換是計算機圖形學中的難點和重點，除了需要講明白課本上的內容外，更需多展示綜合應用實例，引導學生的學習興趣，鍛煉學生的邏輯思維能力、綜合解決問題能力，尤其是后續的自學能力。

[1] 陳莉. 談計算機圖形學的教學與實驗[J]. 計算機教育, 2014(10): 51-54.

[2] Edward A, Dave S.Interactive computer graphics a top-down approach with OpenGL[M]. 北京: 電子工業出版社, 2012: 146-224.

[3] Edward A, Dave S.Interactive computer graphics: a top-down approach with WebGL[M]. London: Pearson, 2014.

[4] 何援軍. 論計算機圖形學中的若干問題[J]. 上海交通大學學報, 2008(42): 513-517.

[5] 杭后俊. 計算機專業計算機圖形學教學實踐探討[J]. 計算機教育, 2012(17): 76-79.

[6] 蔣先剛, 朱旭生, 丘赟立. 計算機圖形學雙語教學的實踐與研究[J]. 計算機教育, 2013(22): 83-88.

[7] 傅向華, 周虹. 加強能力培養的“計算機圖形學”實驗教學改革[J]. 計算機教育, 2012(23): 94-96.

（編輯：孫怡銘）

1672-5913(2017)02-0136-05

G642

章夏芬，女，講師，研究方向為圖像處理、模式識別，xfzhang@shmtu.edu.cn。