Three.js中的 Global Illumination(一) — 認識 GI
May 22, 2022
推薦大家看一下這篇介紹 GI的文章
沒有 Global Illumination的世界是什麼樣子?
想像你在一個昏暗的小房間,整個房間唯一一道光來自於牆上的小窗戶
在現實世界裡,你能夠透過昏暗的光線依稀看見房間裡的陰暗角落
儘管那些角落沒有被窗戶的光線直接照到,你還是能透過反射的光線看到他們的樣子
但是在沒有 GI的世界裡,除了窗戶正對面的那塊空間以外,其他地方都會是「全黑」
因為沒有 GI等於沒有反射,只有被直射光照到的物體才會「亮」起來
這也是為什麼用了 GI的 3D場景看起來會比較亮
在 Three.js的官方範例裡,提供了一個方法來為 3D場景裡的物體創造 GI的效果:
simple global illumination — three.js webgl
我們可以看到:
中間的 torus knot表面隨著外圍的 6面體不同的面向,呈現出與該面對應的 6種顏色
這是因為我們捕捉到了這些顏色(反射光),並且繪製在 torus knot的表面上
否則 torus knot應該是白色的,不會受到周圍物體顏色的影響
做法簡單來說,就是:
1. 在物體表面設置密密麻麻的照相機,相機鏡頭朝外
2. 拍照以捕捉直射與折射的光線
3. 在照片上滴水,把照片弄得糊一點、均勻一點、甚至只有一種顏色
4. 把這些均勻的相片貼在物體表面、來為物體塗上一層顏色,製造出反射光打到物體上的效果
如果光線本身是有顏色的,效果更明顯!
你會看到物你表面出現有顏色的「光暈」
我會在下一篇文章裡更深入地探討 Three.js的官方範例