[Shader筆記]基礎光照模型 — 實作篇

“ shader development using Unity” + Unity shader 入門精要筆記

詹閔翔
Eric’s publication
Oct 30, 2020

--

在閱讀這篇文章之前,你需要…

  1. 需要理解Shader的基本結構
  2. 知道向量的基本運算
  3. (建議)理解基礎光照模型背後的原理,可以參考我的上一篇文章

目錄:

漫反射光照模型

  1. 逐頂點漫反射光照模型
  2. 2.逐像素漫反射光照模型

高光反射光照模型

  1. Phong模型
  2. Blinn-Phong模型

漫反射光照模型

前置作業

  1. 設置properties 好讓我們可以直接從外部調整diffuse顏色
  2. 增加一個Tags好讓Unity知道你使用的是哪一個rendering path
  3. 引入Lighting.cginc函式庫
  4. 宣告vertex、fragment函數名稱
  5. 定義兩個結構體a2f、v2f
  6. 重新宣告一次在 properties 中設置的參數

逐頂點漫反射光照模型

vertex shader中需要做的事:(目標 : 計算最終顏色)

  1. 將模型頂點轉換到世界空間
  2. 取得direction light 的顏色跟方向
  3. 取得法向量(需要將法向量從模型空間轉換到世界空間)
  4. 套公式

fragment shaer 中需要做的事:(目標:輸出最終顏色)

  1. 將vertex shader得到的最終顏色輸出

完整code

逐像素漫反射光照模型

左邊為逐頂點漫射shader,右邊為逐像素shader,可以看得出逐像素shader的效果更為平滑

vertex shader中需要做的事:

  1. 將模型頂點轉換到世界空間
  2. 取得法向量(需要將法向量從模型空間轉換到世界空間)

fragment shaer 中需要做的事:

  1. 取得direction light 的顏色跟方向
  2. 套公式
  3. 將vertex shader得到的最終顏色輸出

完整code

半蘭伯特模型

半蘭伯特模型

要做的事跟逐像素漫射模型差不多,唯一的差別只有最後的公式改成半蘭伯特模型。

左邊為逐像素漫射shader,右邊為半蘭伯特shader,可以看得出來暗面的情況改善很多

完整code

高光反射光照模型

Phong模型

vertex shader 要做的事

要做的事大部分都跟上面其實差不多,我們只需要在頂點著色器(vertex shader)中多取得世界座標系的頂點座標就可以了,並且在v2f的結構中多宣告一個參數傳給片元著色器坐計算。

fragment shader要做的事

由於我們是沿用逐頂點漫射模型,因此高光反射一樣是在fragement shader做計算

左邊為單純的diffuse shader,右邊為diffuse shader + specular shader

完整code

Blinn-Phong模型

左邊為單純的diffuse shader,中間為diffuse shader + specular shader,右邊為Blinn-Phong

可以看得出來Blinn-Phong的高光反射範圍更大、更亮,一般通常也都是使用Blinn0-phong比較多

完整code

參考資料:

https://gameinstitute.qq.com/community/detail/125243

--

--

詹閔翔
Eric’s publication

專注於各種可能的技術解決方案,喜歡從技術的角度解決問題,也喜歡接觸各種新科技跟open source專案與時代一起進化,並樂於將所見所聞製作成人人都能輕鬆理解的教學文章分享於網路平台。https://studio-frontend-one.vercel.app/