Three.js中的 Global Illumination(一) — 認識 GI

Steven Chen
May 22, 2022

--

Photo by Daniel McCullough on Unsplash

推薦大家看一下這篇介紹 GI的文章

沒有 Global Illumination的世界是什麼樣子?

想像你在一個昏暗的小房間,整個房間唯一一道光來自於牆上的小窗戶

在現實世界裡,你能夠透過昏暗的光線依稀看見房間裡的陰暗角落

儘管那些角落沒有被窗戶的光線直接照到,你還是能透過反射的光線看到他們的樣子

但是在沒有 GI的世界裡,除了窗戶正對面的那塊空間以外,其他地方都會是「全黑」

因為沒有 GI等於沒有反射,只有被直射光照到的物體才會「亮」起來

這也是為什麼用了 GI的 3D場景看起來會比較亮

在 Three.js的官方範例裡,提供了一個方法來為 3D場景裡的物體創造 GI的效果:

simple global illumination — three.js webgl

github

我們可以看到:

中間的 torus knot表面隨著外圍的 6面體不同的面向,呈現出與該面對應的 6種顏色

這是因為我們捕捉到了這些顏色(反射光),並且繪製在 torus knot的表面上

否則 torus knot應該是白色的,不會受到周圍物體顏色的影響

做法簡單來說,就是:

1. 在物體表面設置密密麻麻的照相機,相機鏡頭朝外

2. 拍照以捕捉直射與折射的光線

3. 在照片上滴水,把照片弄得糊一點、均勻一點、甚至只有一種顏色

4. 把這些均勻的相片貼在物體表面、來為物體塗上一層顏色,製造出反射光打到物體上的效果

如果光線本身是有顏色的,效果更明顯!
你會看到物你表面出現有顏色的「光暈」

我會在下一篇文章裡更深入地探討 Three.js的官方範例

--

--