如果模型要做得越逼真、越精細，在早期學習的時候，會把模型的細節一個一個的做出來，到最後會看到一個模型可能有十幾萬、甚至上百萬個三角形。

我們都知道三角形越多等於要花更多時間繪製，也代表會很耗能。

這時「法線貼圖(Normal mapping)」可以同時解決視覺效果以及耗能的問題。

目標

• 認識法線貼圖

法線貼圖

我們先來看看這張圖

from wiki

最左邊與最右邊看上去沒甚麼差別，左邊的模型用了400萬個三角形，右邊卻只用了500個三角形以及本篇要介紹的技術，法線貼圖。

既然叫做法線貼圖，必然與模型表面的法線有關係。

看過以下這張藍藍的圖嗎?

當你在網路上或是從美術人員拿到新的模型資料的時候，除了模型的紋理貼圖外，也會看到一張看起來是另外一張一模一樣的貼圖，但是全部都是藍色的。

這就是法線貼圖。

再來，回顧一下前幾篇的範例。範例中所實作的Blinn-Phong Shading，我們也是利用法線來製造出模型對於光的位置、強度所要呈現的陰影以及高光。法線貼圖也是一樣的，只是這次光不是要作用在「頂點」算出來的法線上，而是由「紋理貼圖」上已經「紀錄」的法線在達成效果。

為什麼它藍藍的?

前面沒有特別講解，我們使用的法線，三軸的分量(x, y, z)的範圍只有在[-1, 1]，這是因為我們只需要法線的方向，故單位向量。

若要將這些法線紀錄在一張圖片上，則需要對法線進行一些變換，我們知道RGB的範圍是[0, 1]，所以轉換公式為：

然後法線大多垂直於表面，例如一個完全垂直於表面的法向量為：
(0, 0, 1)

利用上面的公式進行轉換後，圖上的像素顏色為(0, 0, 1)，結果為藍色。

同時看著法線貼圖也可以明白到，貼圖中那些偏紅色或綠色的地方為模型的陰影部分。

Reference

• 法線貼圖wiki
• LearnOpenGL
• candycat1992/Unity_Shaders_Book