iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
0

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

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

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

目標

  • 認識法線貼圖

法線貼圖

我們先來看看這張圖

from wiki

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

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

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

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

這就是法線貼圖。

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

為什麼它藍藍的?

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

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

https://chart.googleapis.com/chart?cht=tx&chl=noraml%20%3D%20pixel%20*%202%20-%201

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

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

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

Reference


上一篇
半透明效果
下一篇
那張藍藍的圖,法線貼圖(下)
系列文
初見Unity Shader30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言