Sep 25, 2003

來談談凹凸貼圖(Bump mapping), 基本上想要在電腦繪圖上做出有凹凸感覺, 可以更真實的表現出物體的質感, 如何在不增加3D 模型的點面數, 又想表現出凹凸效果, 那就是使用 Bump mapping 的時候了. 其實一些2D 繪圖軟體早就有將圖形凹凸化的效果, 一般就是把圖形灰階化(或灰階反差化, 或使用 heightmap), 平移幾個圖素後, 再跟原始圖形做合成就可以了. 平移點數的多寡決定凹凸的反差量, 灰階亮暗值則決定深淺. 那麼在 3D 繪圖呢? 是不是依樣化葫蘆就可以呢? 理論上是沒錯, 不過在即時繪圖上可能會有速度上的瓶頸, 也因此 nVidia 在 Geforce 系列上有 DOT3 與 Cubemap 的新功能了(ps: TNT 並沒有).
運用 DOT3 與 Cubemap: 首先需要一張 normalmap 貼圖以及 normalize cubemap; 計算模型每個三角面的 TangentSpace (或稱TextureSpace) Matrix, 這個 Matrix 是由 Tangent, Binormal, Normal 構成的, 也就是所謂的 TBN (或稱 STN); 把光源的世界座標轉換為區域座標, 再與 TangentSpace Matrix 計算得到 tangentLight 向量; tangentLight 就是 Cubemap 的 3D 貼圖座標, 把 normalize 與 Cubemap 做 DOT3 的貼圖結合運算就是最後結果了... 好像有點複雜, 不過事實上就是會這麼複雜. 其實還有一些東西要提出來說明的:
a. normalmap: 基本上就是用 RGB 分別表示 XYZ 軸向量值的2D圖形, Red 紅色對應 X 軸, Green 綠色對應 Y 軸, Blue 藍色對應 Z 軸, 顏色值 [0 ~ 255] 表示座標軸值 [-1.0 ~ 1.0], 至於怎麼產生 normalmap? PhotoShop plugin應該合用, 不過要注意圖形原點為左上角或是左下角, 可能有需要上下映射翻轉; Doom3 用更精確的方法建立 normalmap, 就是用高面數的模型來產生, 真厲害.
b. normalize cubemap: 首先了解何謂六面的 cubemap, 就是由立方體的六個(上下左右前後)正方形組成. 正方形的圖形內存放相對應的 normalmap, ex:
正X軸存放的 R=255, G=[0~255], B=[0~255]; 負X軸存放的 R=0, G=[0~255], B=[0~255];
正Y軸存放的 R=[0~255], G=255, B=[0~255]; 負Y軸存放的 R=[0~255], G=0, B=[0~255];
正Z軸存放的 R=[0~255], G=[0~255], B=255; 負Z軸存放的 R=[0~255], G=[0~255], B=0;
c. 三角面的 TangentSpace Matrix 要轉換為頂點的, 方法和法向量計算一樣, 就是把頂點所存在的三角面法向量加總後, 再計算其單位向量(Normalize); Tangent, Binormal 的計算也一樣. 至於 Tangent, Binormal, Normal 要怎麼計算出來呢? 我想這就是最大的麻煩所在了, 高中數學的向量空間有學好的應該不是問題, 忘記的就看書吧. Mathematics for 3D Game Programming & Computer Graphics by Eric Lengyel, 哪裡買? Amazon.
d. 應用在點光源與平行光源: 點光源的世界座標轉換為區域座標比較麻煩, 要一個點光源對應一個模型頂點; 平行光源的世界座標轉換為區域座標就直接用就行了. 可以用 vertex shader (GPU 必須有此功能才行) 來計算這些向量, 不過也可以用 CPU 算, 不透過 GPU 的 vertex shader. 把光源的區域座標乘上 TangentSpace Matrix 就可以得到 tangentLight. 這兩種光源都適用於 diffuse 材質; 不過如果是 specular 材質那麼計算光源的區域座標就有點不同, 也就是要計算出每個頂點的相對於光源的 highlight, 所謂 highlight 就是光源對頂點法向量的反射向量, highlight 與觀察者的內積就是 specular(當然還要加算 shininess). 就先這樣吧, 關於 specular 的部分等研究有心得再說吧.
以下就列出幾個 bumpmap 的範例:

1. Nutty 的 TangentBump (c++ src), 使用 DOT3&Cubemap; 不過 Tangent, Binormal 的計算有小錯誤, 導致凹凸效果有點怪怪的(光源與凹凸陰影顯示錯誤).
2. Paul 的 Bump 課程(c++ src),使用 DOT3&Cubemap; 有完整詳細的教學文件和原始檔, 使用 multipass 來繪製; 先畫 bump mapping, 再畫 diffuse map.
3. Delphi3D 的 TangentBump (delphi src), 使用 DOT3&Cubemap; 算是極品, 程式正確且涵蓋面廣, 雖然是 pascal code, 不過拿來學習應該是也很夠了.
4. Texture Space Bump Mapping by Sim Dietrich, 是投影片, 簡單扼要的說明 Bump mapping 的原理與實用.
5. A Practical and Robust Bump-mapping Technique for Today GPUs by Mark Kilgard, 是詳細文件, 說明 Bump mapping, 以及 OpenGL 所需的相關介紹.
6. Advanced Per-Pixel Lighting and Shadowing (c++ src) by Ron Frazier, 不光光只有Bump mapping, 還包括即時投影算, 平行光源, 點光源, 探照燈, 光線反射 higlight; 相信高級程式師可以在此學到更多技巧.
ps: 其他關於使用 heightmap bump 或是 emboss bump的就不提了, 因為只適用於單一平面, 如果要用在即時 3D 模型上, 那保證運算會複雜到跑不動, 而且效果也不佳; 雖然不需要有支援 DOT3&Cubemap 功能的 3D 卡(ex: TNT系列) 都可以跑, 但是不支援 DOT3&Cubemap 功能的卡應該算是古董了, 該升級啦.