[WebGL] three.js 學習筆記 #2 - 初見PBR

發表於 分類於 ， Disqus：

red pbr

初淺地研究，嘗試自行撰寫 Physically Based Rendering shader。目前 javascript 用的還不是很習慣，非同步與事件順序常常會轉不過來，但 WebGL 作為一個練習寫 shader 的環境來說還是相對方便的。

主要資料

PBR shadering 是近年來逐漸熱門的材質與光照處理技術，比起 Phong model 有了更多物理根據，也更加真實。

這次練習的 PBR shadering 實作是根據 Epic 團隊在 UE4 上分享的技術講座：

Real Shading in Unreal Engine 4
by Brian Karis, Epic Games

而這篇文章又大量引用了另一篇迪士尼的技術文章，沿用了不少數學模型。

Physically-Based Shading at Disney
by Brent Burley, Walt Disney Animation Studios

基本的理解

PBR 將所有的光線反射分成 Diffuse 與 Specular，其中 Specular 更有著數種 BRDF 模型可以選擇，各有優缺點。

依照來源，光線又分成有特定光源的直接光照，以及來自環境的間接光照，故綜合起來 PBR 的 light model 可以分成四個部分：

  • Direct Diffuse
  • Direct Specular
  • Indirect Diffuse
  • Indirect Specular

而材質上，主要有 roughness 及 metallic，分別代表粗糙度以及金屬性質，皆會影響 Diffuse 與 Specular 的顏色及比例強度。

Direct Diffuse

Direct Diffuse 是物體外型呈現的基本陰影，Epic 文章中採用了 Burley Diffuse 模型：

Burley Diffuse 光照(日本語)

Direct Specular

Direct Specular 是來自特定光源的高光反射，一般來說會採用 BRDF 理論，但又會視情況在細部上選擇不同的模型。這裡我找到了一篇列出不少模型方程式的文章：

Specular BRDF Reference

Indirect Diffuse & Specular

Indirect lighting 是指環境上接收了主光源後，二次反射的結果。可以想像一下 “太陽-月亮-水面月影” 三者關係，其中水面月影便是 Indirect lighting 的結果。

Indirect lighting 的兩個項目會影響材質呈現上的細節，雖然只是細節，卻是令 PBR 材質特別真實的靈魂所在。

基本的原理，是將周圍環境預先處理成 CubeMap，而對於要物體上的一點，這張 CubeMap 上的每個像素都相當於一個微弱的小型光源，而將整個 CubeMap 的發光結果全部映照到物體上，就是 Indirect Lighting 演算法的目標。

為了加速這演算過程，Epic 團隊用數張貼圖來代表 precompute 資料以及近似，來得到時間成本上合理的結果，Epic 原文不易理解的部分可以參考這篇文章輔助：

Indirect Lighting for PBR

PBR 中間步驟與結果

Diffuse

Diffuse

Specular

Specular

Indirect Diffuse

還沒有找到相關貼圖，所以這邊目前被我跳過了。

Indirect Specular

Indirect Specular

加總後的結果

Combine

恩…覺得還有待加強…

其他參考連結