第三章 研究方法與步驟
3.7 單個物體與多個物體的折射
國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
35
3.7 單個物體與多個物體的折射
在已知單個物體的 image space 折射方法之後，接著由兩個物體的折射延伸 到多個物體，我們先對所以物體與眼睛的深度做排序，排序之後我們以離眼睛最 近的物體開始做單一物體的折射運算，如圖為兩個物體，我們先對物體 A 做折 射運算並輸出折射向量與折射點，物體 B 以 depth peeling 分層，如圖 3.31，
圖 3.30: 兩物體間的折射情況。物體 A 跟 B
圖 3.31: (左)物體 A 的 T2 與 P2 ；(右)物體 B 的深度
接著我們對兩物體之間的關係作分析，我們可以依照視點經過物體分成三種 case: 1. 視點向量並無經過物體 A 並直接與未被 A 遮蔽的 B 表面相交；2.視點向 量與 A 表面相交且在經過物體 A 的折射向量不會與 B 表面相交；3.視點向量與 A 表面相交且在經過物體 A 的折射向量與 B 表面相交，如圖 3.32 所示
‧
case1:使用單個物體的 image space 折射即可。
case2 與 case3: 視點向量以物體 A 貼圖輸入的折射向量 T2 與折射向量的出發點 P2 作為判斷，接著以 T2 與物體 B 的深度進行光線高度場相交演算法，若有交點 則為 case3 若無則為 case2，若是 case3，以搜尋到的交點與折射向量繼續進行物 體 B 單一物體的折射運算，若是 case2 則只需繼續記錄原本的折射向量即可。演 算法如下:
If (T2texture(eye ray.xy==1) //以視點讀取貼圖座標深度 等於 1 表示(case1) Final vector = T2&P2
else
D = ray-height-field intersection algorithm(T2, P2,objectB d);
//以 T2,P2 尋找 objectB 的交點
If (D==1)//沒有與 objectB 相交(case2) Final vector = T2&P2
Else (case3)
ObjB_P1 =P2+D*T2;//計算物體 B 與折射向量的交點 ObjB_T2&P2 = one obeect refraction;
Final vector = ObjB_T2&P2;
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
37
有了兩個物體的折射算法，第三個物體的算法即是把前面兩個物體最後輸出 的 T2 與 P2 當成一個有八層折射物體的輸出，然後與第三個物體作兩個物體的 折射計算(圖 3.33)。結果如圖 3.34 所示。
圖 3.32: 加入物體 C 後，物體 A 跟 B 視為同一個物體，輸入 Object A+B 的 P2&T2 計算兩個物體 Object A+B 與 Object C 的兩物體的折射運算
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
38
圖 3.33: 正方體 model 後面有 knot model 的折射結果
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
39
第四章
實驗結果與討論
我們在 windos 7 作業系統下開發以 C++語言編寫，以 OpenGL 為繪圖函式 庫， 使用 opengl shading language 為著色語言，以真實世界的場景，光線追蹤的 結果與一層折射、二層折射、四層折射比較在不同模型的折射情況，此外我們以 OptiX 作為效率的對照組，並且分析我們方法的時間複雜度與光線追蹤法差異。
4.1 真實世界的透明物體與光線追蹤法
我們可以從真實世界的透明圓球去觀察折射的現象，圖 4.1(左)為德國攝影 師 Markus Reugels，利用攝影機拍出了水滴利用折射原理的藝術作品。他利用折 射原理，將水滴與背景圖片完美的結合在一起。另一張圖為美國攝影師 Grayce Pedulla-Dillon，利用裝滿水玻璃杯，配合色彩強烈對比的背景，巧妙了運用折射 效果，以強烈的色彩勾勒出了玻璃杯的曲線。
圖 4.1:: 現實世界的透明物體折射(左) Markus Reugels 攝(右) Pedulla-Dillon 攝
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
40
我們利用 blender 內建的光線追蹤法的結果可以明顯看出圓球折射結果如同 現實世界，上下顛倒左右相反。
圖 4.2: (左) 場景設計 (右) ray tracing 透明球模型
以 glsl 本身所提供的折射函數所計算的一層結果如圖 4.3。可以明顯看出放 大比例不真實。圖 4.4 是二層折射的結果，由於球的折射只需要二層因此可以看 出與光線追蹤的結果極其相似。
圖 4.3: 一層折射 圖 4.4: 二層折射
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
41
4.2 四層深度的透明物體
圖 4.5 為高腳杯模型折射的結果，我們依照一層折射、兩層折射、四層折射 與 ray tracing 做為比較，我們可以發現一層折射並無法清楚的知道物體的形狀，
只能大略的知道表面的凹凸起伏，我們實做出來的兩層折射[Manuel 2007]雖然比 起一層折射的方法更為接近光線追蹤法的結果，卻也無法正確得知彎曲的折射樣 貌(例如杯緣部分的折射形狀)，我們方法所提出來的四層折射最為接近 ray tracing 的結果，我們可以立刻觀察到物體後面的正確的折射，並且折射之後的結果也接 近對照組的結果。
(a) (b)
(d) (e)
圖 4.5: 高腳杯模型(a) 一層折射結果，(b) 兩層折射結果，(c) 四層折射分析，
紅色:兩層，藍色:四層，綠色:全反射，(d) 四層折射結果，(e) ray tracing 的結果
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
42
我們將高腳杯模型四層折射與兩層折射的解果拆開來並放大比較，如圖 4.6 所示，可以發現兩層折射的結果形狀與光線追蹤法的結果明顯的不同，圖 4.7 為 不同貼圖的折射結果。
(a) (b) (c)
圖 4.6: 四次折射處比較(a) [Manuel, 2007]二層折射結果，(b) ray tracing 折射 結果，(c) 我們的方法兩次折射結果
(a) (b) (c)
(d) (e)
圖 4.7: 高腳杯模型(a) 一層折射結果，(b) 兩層折射結果，(c) 四層折射分析，
紅色:兩層，藍色:四層，綠色:全反射，(d) 四層折射結果，(e) ray tracing 的結果
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
43
圖 4.8 為環形模型折射的結果，我們依照一層折射、兩層折射、四層折 射與 ray tracing 做為比較，我們可以發現內圈的部分在二層折射時所產生的 結果並不特別明顯，在我們的方法中可以明顯看到後半部的環形形狀，圖 4.9 為不同貼圖。
(a) (b) (c)
(d) (e)
圖 4.8: 環形模型(a) 一層折射結果，(b) 兩層折射結果，(c) 四層折射分析，紅 色:兩層，藍色:四層，綠色:全反射，(d) 四層折射結果，(e) ray tracing 的結果
我們以不同貼圖再看一次甜甜圈的模型(圖 4.9)，我們可以發現紅色方框為 四次折射產生的地方，綠色方框為全反射產生的地方，兩處的結果接近光線追蹤 法的結果。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
44
(a) (b)
(c) (d)
圖 4.9: 環形模型(a) 一層折射結果，(b) 兩層折射結果，(c) 四層折射結果，(d) ray tracing 的結果
knot 模型的特色在於有許多環形所組成，也因此四次折射較容易產生(圖 4.10~4.12)，我們可以發現一個場景中有三處產生四次折射，因此我們可以很清 楚的觀察到四層折射處物體背後的環狀，且與光線追蹤法相似。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
45
(a) (b) (c)
(d) (e)
圖 4.10: knote 模型(a) 一層折射結果，(b) 兩層折射結果，(c) 四層折射分析，
紅色:兩層，藍色:四層，綠色:全反射，(d) 四層折射結果，(e) ray tracing 的結果
我們將四次折射處放大來看，更清楚地發現[Manuel, 2007]的方法與我們的 差異。
(a) (b) (c)
圖 4.11: knote 模型(a) [Manuel 2007]二層折射在四次折射處的結果，(b) 我們的 方法四次折射結果，(c) ray tracing 折射結果
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
46
(a) (b)
(c) (d)
圖 4.12: knote 模型(a) 一層折射結果，(b) 兩層折射結果，(c) 四層折射結果，
(d) ray tracing 的結果
我們以更多較為複雜的模型所做出來的結果，牛的模型在腳與耳朵部分較容 易出現四次折射(圖 4.13)，模型身體部分表面較為光滑，可以明顯表現折射的形 狀，圖 4.14 我們以較為簡單的環境貼圖實驗，我們可以發現紅色方框為四次折 射產生的地方，其結果接近光線追蹤法的結果。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
47
(a) (b)
(c) (d)
(e)
圖 4.13: 牛模型(a) 一層折射結果，(b) 兩層折射結果，(c) 四層折射分析，
紅色:兩層，藍色:四層，綠色:全反射，(d) 四層折射結果，(e) ray tracing 的 結果
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
48
(a) (b)
(c) (d)
圖 4.14: 牛模型(a) 一層折射結果，(b) 兩層折射結果，(c) 四層折射結果，
(d) ray tracing 的結果
寶特瓶模型特色為表面細節變化明顯(圖 4.15)，經過折射後與光線追蹤法比 對，能看出表面的細節與折射變化，並且與其相似。
(a) (b) (c)
(d) (e)
圖 4.15: bottle 模型 (a) 一層折射結果，(b) 兩層折射結果，(c) 四層折射分析，
紅色:兩層，藍色:四層，綠色:全反射，(d) 四層折射結果，(e) ray tracing 的結果
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
49
模型更為複雜的兔子(圖 4.16)，則容易在長耳朵的地方產生四次折射，此外 由於模型精細度高，表面的凹凸起伏也較為細緻，也因此折射過後的顏色也較為 混亂，女王頭模型也是如此(圖 4.17)。
(a) (b) (c)
(d) (e)
圖 4.16: 兔子模型 (a) 一層折射結果，(b) 兩層折射結果，(c) 四層折射分析，
紅色:兩層，藍色:四層，綠色:全反射，(d) 四層折射結果，(e) ray tracing 的結果
(a) (b) (c)
(d) (e)
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
50
圖 4.17: 女王頭模型(a) 一層折射結果，(b) 兩層折射結果，(c) 四層折射分 析，紅色:兩層，藍色:四層，綠色:全反射，(d) 四層折射結果，(e) ray tracing 的結果
4.3 多個透明物體
多個透明物體的結果如圖 4.18 所示，我們的由簡單的場景設計開始，發現 其折射後的結果近似，更加複雜的場景如圖 4.19,4.20,4.21 所示，觀察結果發現 結果雖然並無百分之一百的相同，但其大致上的方向是正確的。相比於[Wyman 2005]的不透明幾何模型，我們更進一步得到多個物體折射的效果。
圖 4.18:blender 場景設計 render 結果為圖 4.18 的 a
(a) (b) (c)
圖 4.19: 兩個物體折射(a) 圖 4.18 場景的 render (b) 我們方法的 render (c) 只有球 model 的情況
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
51
(a) (b) (c)
(d) (e) (f)
圖 4.20: 兩個物體折射(a) 場景設計 (b) 單一物體折射向量 (c) 兩個物體折 射向量(d) 只由一個物體的結果 (e) 兩個物體的結果(f) ray tracing 的結果
(a) (b) (c)
(d) (e) (f)
‧
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
53
4.5 限制
我們以 image space 的方式實作了多層的折射，雖然效能上優於光線追蹤法，
然而當折射的層數提升，因為資料是以貼圖的方式傳遞，而受限於貼圖的解析度，
我們方法的解析度也因而下降，也容易在斷層與全反射處產生錯誤的結果，如圖 4.22。
雖然一個場景中並不會有太多的折射模型，但隨著越多折射模型的或者太過複雜 的模型加入都會造成效率的降低，此外，我們目前因效能的考慮而對每一個模型 都只做四層的折射，因此會有無法正確顯示的部分。
圖 4.22: (a) 場景設計 (b) blender render (c) 我們的方法
為了提升解析度的問題，我們以 Procedural texture 的技術繪製環境貼圖，我 們發現隨著環境貼圖的解析度提升，其結果中許多的雜訊會消失，換言之越接近 Procedural texture 的結果，如圖 4.23 中紅色圈起的部分。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
54 (a)
(a) (b)
(c) (d)
圖 4.23: (a) 環境貼圖解析度 256*256 (b) 環境貼圖解析度 512*512 (c) 環境 貼圖解析度 1024*1024 (d) 環境貼圖以 Procedural texture 繪製
‧
數可以運用 depth peeling 分解的深度來運算，因此我們採用了 Depth peeling 的方 法將模型分成四層，使得有別於光線追蹤的方法，在計算折射模型時不需在光線‧
慮樣許多步驟一起執行，例如折射的計算有無可能與 depth peeling 同步處理，又 或者多個物體的計算，以多層的場景來處理。‧
2005. real-time relief mapping on arbitrary polygonal surfaces. In Proceedings of the 2005 symposium on Interactive 3D graphics and games (I3D '05). ACM, New York, NY, USA, 155-162.
[2] Chris Wyman. 2005. An approximate image-space approach for interactive refraction. ACM Trans. Graph. 24, 3 (July 2005), 1050-1053.
[3] Chris Wyman. 2005. Interactive image-space refraction of nearby geometry. In Proceedings of the 3rd international conference on Computer graphics and interactive techniques in Australasia and South East Asia (GRAPHITE '05).
ACM, New York, NY, USA, 205-211.
[4] Manuel M. Oliveira and Maicon Brauwers. 2007. real-time refraction through deformable objects. In Proceedings of the 2007 symposium on Interactive 3D graphics and games (I3D '07). ACM, New York, NY, USA, 89-96.
[5] Fernando, R. & Kilgard M. J. (2003). The CG Tutorial: The Definitive Guide to Programmable real-time Graphics. (1st ed.). Addison-Wesley Longman Publishing Co., Inc. Boston, MA, USA. Chapter 7: Environment Mapping Techniques
[6] Stephane Guy and Cyril Soler. 2004. Graphics gems revisited: fast and physically-based rendering of gemstones. In ACM SIGGRAPH 2004 Papers (SIGGRAPH '04), Joe Marks (Ed.). ACM, New York, NY, USA
[7] Arvo, J. (1986). "Backward Ray Tracing." Developments in Ray Tracing. ACM Siggraph Course Notes 12, pp. 259–263, 1986.
[8] Génevaux, O., F. Larue, et al. (2006). Interactive refraction on complex static geometry using spherical harmonics. Proceedings of the 2006 symposium on Interactive 3D graphics and games. Redwood City, California, ACM: 145-152.
‧
mapping. Proceedings of the Fifteenth Eurographics conference on Rendering Techniques. Norrköping, Sweden, Eurographics Association: 111-121.[10] Guy, S. and C. Soler (2004). "Graphics gems revisited: fast and physically-based rendering of gemstones." ACM Trans. Graph. 23(3): 231-238.
[11] Hakura, Z. S. and J. M. Snyder (2001). Realistic Reflections and Refractions on Graphics Hardware with Hybrid Rendering and Layered Environment Maps.
Proceedings of the 12th Eurographics Workshop on Rendering Techniques, Springer-Verlag: 289-300.
[12] Charles de Rousiers, Adrien Bousseau, Kartic Subr, Nicolas Holzschuch, and Ravi Ramamoorthi. 2011. real-time rough refraction. In Symposium on Interactive 3D Graphics and Games (I3D '11). ACM, New York, NY, USA.
[13] Arthur Appel. 1968. Some techniques for shading machine renderings of solids.
In Proceedings of the April 30--May 2, 1968, spring joint computer conference (AFIPS '68 (Spring)). ACM, New York, NY, USA, 37-45.
[14] Abraham Mammen. Transparency and antialiasing algorithms Implemented with the virtual pixel maps technique. IEEE Computer Graphics and Applications, 9(4): 43-55, July 1989
[15] Everitt C.: Interactive order-independent transparency. Tech. rep., NVIDIA Corporation, 2001.
[16] Liu B.-Q., Wei L.-Y., Xu Y.-Q.: Multi-layer depth peeling via fragment sort.
Tech. rep., Microsoft Research Asia, 2006. 2.
[17] Bavoil L., Myers K.: Order independent transparency with dual depth peeling.
[17] Bavoil L., Myers K.: Order independent transparency with dual depth peeling.