本文大綱

1.6 本文大綱

本篇論文在第一張會先介紹 Java 在 3D 遊戲繪圖上的背景知識及 GUI 所產生的問題及希望解決的目標。第二張會介紹 CWT 的架構與成果。第 三章會詳細介紹本論文如何解決 CWT 在 3D 遊戲 GUI 繪製的問題。第四 章是本論文所做的實驗數據及分析。最後第五章會對本論文的研究做一 個總結，並討論更近一步的發展方向及內容。

第

AWT 的內容主要有元件模式(Component Model)、事件模式(Event Model)及繪圖模式（Painting Model）[7][16]，若應用在 3D 遊戲 GUI 設計上，元件模式提供了相容於 AWT 的各種元件，如下圖所示。

圖 2-2：CWT 元件圖

包含了 Button、Checkbox、Label、List、Choice、Scrollbar 、 TextField 及 Canvas 等八大元件。

而對於兩大加速繪圖函式庫 OpenGL 及 DirectX，CWT 都有個別實作出來，

OpenGL 的部份叫做 CWT-GL[17]，而 DirectX 的部份叫做 CWT-DX[16]。

本論文考慮到 Java 跨平台的特性，因此在選擇使用的函式庫上，使用

一樣是跨平台函式庫 OpenGL 實作的 CWT-GL 作為 3D 遊戲的 GUI 繪圖函 式庫。

2.2 CWT-GL

本節將會介紹 CWT-GL 所使用的 JOGL[9]套件，並說明為何使用它。

OpenGL 的時做套件主要的有三種，GL4Java、JLWGL 及 JOGL，GL4Java 的缺點是自從 2003 年起就沒有在更新，所以沒有支援新的 OpenGL 版本，

而 JLWGL 與 JOGL 相比，JOGL 是由昇陽公司所開發支援，對於問題的回 復速度快，很用心在維護，目前已經納入 Java 的參考標準 JSR-231(Java Specification Request Java Binding for the OpenGL)。

而 OpenGL 是業界 3D 繪圖普遍使用的標準，他跨平台的優勢，及背 後支持的眾多廠商，讓繪圖加速卡不斷加入其功能，再未來隨著 OpenGL 新標準的制定，也會有眾多硬體持續支援。

CWT-GL 就是使用 OpenGL 來時做出 AWT/Swing 相容的繪圖函式庫，

使用其硬體加速功能，並作了一些最佳化，例如避免不必要的測試計算、

單一執行序繪圖、減少狀態改變等[17]。得到一個比 AWT/Swing 效能更 好的繪圖函式庫。 

2.3 OpenGL 繪圖流程

在 3D 世界的繪圖，從物體座標定位到最後在視窗上顯示，是一連串

的座標轉換，以下就會先說明這些座標轉換的過程。

圖 2-3：OpenGL 座標點轉換程序（OpenGL Vertex transformation pipeline）

如圖 2-3 所示，一開始要成像的物體原始座標換轉換成一個一乘四 的矩陣，前三個值是 x、y、z 座標，最後一個 z 座標則是縮係數（scaling factor），此值可用在四個三樹的座標系統中，通常預設值是 1.0。接著 座標點會與 Modelview 矩陣，也就是觀察者與場景中物體的轉換關係矩 陣運算，產生相對與觀察者位置的座標值。接著座邊值會乘上一個投射 矩陣，產生對應的裁減座標（clip coordinates），目的是去掉觀察者 範圍外的資料。裁減座標會在除以縮放係數 w，得到標準化的裝置座標

（Normalized device coordinates）。而最後 3D 的座標經過視埠轉換

（Viewport Transformation）的矩陣運算映射到 2D 的視窗平面上，產 生出最後螢幕上所看到的畫面。

圖 2-4 是以 OpenGL 繪製一個立體的方塊為例，經過 OpenGL 座標轉 換程序，最後會產生出一個畫立體方塊的視窗。

  圖 2-4：視窗經過 OpenGL 座標點轉換程序繪出 3D 方塊

圖 2-5 則用立體方塊這個例子，圖示說明成像的過程。

1. Modelview 矩陣，描述觀察者跟立體方塊間的座標

2. 投射(Projection)，在大多數的 3D 遊戲成像中，是使用透視投 射（Perspective projection），也就是投射的物體與觀察者越 近的部分越大，越遠的部份越小，就像是在真實世界中看物體一 樣。

3. 裁減座標，去除方塊範圍以外不要顯示在視窗上畫面。

4. 視埠轉換，將立體方塊最後的畫面映射到視窗（Window）上面。

  圖 2-5：3D 方塊成像圖解

而這些成像的過程，我們可以看做一個黑盒子，當我們把相關要設 定的參數輸入進去時，就會產生相對應的成像，如圖 2-6。開發者可以 藉由設定不同的成像參數繪製出不同的畫面。

  圖 2-6：3D 方塊繪製參數設定 OpenGL 繪圖流程示意圖

2.4 CWT-GL 的繪圖流程

CWT-GL 也是一樣使用 OpenGL 的座標轉換流程成像，圖 2-7 顯示在 一個視窗上會出一個按鈕（Button）元件。

圖 2-7：視窗經過 OpenGL 座標點轉換程序繪出 CWT 元件  

圖 2-8 則用 CWT 元件 Button 這個例子，圖示說明成像的過程。

1. Modelview 矩陣，描述觀察者跟 Button 間的座標。

2. 投射(Projection)，在 CWT-GL 中所使用的投射方式是正交投射

（Orthographic projection），不管觀察者與物體之間的遠近，

所看到的物體大小是一樣的，元件的大小是交由開發者自己去設 定。

3. 裁減座標，去除 Button 範圍以外不要顯示在視窗上畫面。

4. 視埠轉換，將 2D 的 Button 畫面映射到視窗（Window）上面。

  圖 2-8：CWT 元件成像圖解 

而這些流程我們也可以視作把繪圖參數設定進 OpenGL 流程後繪製 的成像，如圖 2-9 所示。

  圖 2-9：3D 方塊繪製參數設定 OpenGL 繪圖流程示意圖

如果要將 CWT 元件使用在 3D 畫面上，很直覺的會把兩個畫面疊在一 起畫，如圖 2-10，就可以畫出我們想要的畫面。

圖 2-10：3D 方塊混合 2D CWT 元件  

以 OpenGL 的繪圖流程來說，就是把參數全部丟進去，但是這時就會 產生問題，OpenGL 會同時接到同一個參數的不同設定，例如說像投影如

圖，3D 方塊是使用透視投影，而 CWT 是使用透視投影，這時就會產生衝 突，如果是採用透視投影，則 CWT 元件將不會正確的被會出到視窗上，

若使用正交投影，則 3D 方塊的顯示就會錯誤，如圖 2-11、2-12。

  圖 2-11：3D 方塊混合 2D CWT 元件繪製參數設定 OpenGL 繪圖流程示意圖

  圖 2-12：3D 方塊混合 2D CWT 元件成像圖解

本論文為了解決這個問題，設計了一套繪圖流程，使的 CWT 元件能夠正 確的與 3D 繪圖混和使用。

2.5 混合 CWT-GL 與 3D 繪圖的可能方法

在本節中將會提出把 2D 元件與 3D 繪圖一起混合使用的可能方法。

在 2.5.1 節中提出一般電玩遊戲中使用的一個技術叫做公告板

（Billboard）。2.5.2 節中則提出背景繪圖(Off-screen rendering)的 方法。但這兩個方法各有其缺點。

2.5.1 公告板（Billboard）

公告版技術可以想像成有一個人舉著一個公告板要你看到上面的資 訊，所以他必須把它所舉的牌子，一直面向你眼睛所看的那個方向，這

樣你不管走到哪，眼睛怎麼移動，都可以看到公告板正面的內容。

在 OpenGL 中必須要自己實作公告板的技術。使用眼睛（Eye）的位 置矩陣與投影矩陣，還有視埠的位置矩陣去做數學運算後，得到公告板 要放置的位置，並且把要繪製的東西像貼圖（Texture）一樣貼上去。

圖 2-13:使用公告板混合 2D CWT 與 3D 方塊流程示意圖

隨著畫面的進行，這些矩陣也不斷改變，相對的公告板的位置也要不停 的運算，因為運算公告板的函式是沒有使用繪圖加速卡的加速功能，所 以必須全靠中央處理器去運算，因此遊戲的效能就會受到影響而變差。

2.5.2 背景繪圖(Off-screen rendering)

另一個長使用的方法是背景繪圖，這個方法常用在繪製連續動畫時 避免螢幕閃爍，在記憶體先產生一塊空間，將要繪製的內容話到這塊空 間上，在一次輸出貼到螢幕上，這樣畫面上看到的是直接畫好的內容，

而不會看到繪製的過程。

同樣，可以嘗試使用這種技術將 CWT-GL 的元件先繪製在另一塊記憶

體空間中，而 3D 繪圖則有另一塊繪製空間，做獨立的繪圖，當兩塊空 間繪圖完畢時，可以將元件的那塊空間，複製貼到 3D 繪圖的成像上，

在一起輸出到螢幕上，如圖 2-14 所示。

這種方法與公告板比不需要去做位置矩陣的運算，但是要多使用一 塊記憶體空間來做背景繪圖，而且最後還要要做一個複製貼上的動作而 影響效能，這也是目前 AWT/Swing 所使用的方法。

圖 3-14:使用背景繪圖混合 2D CWT 與 3D 方塊流程示意圖

第三章、 系統實作

在第三章中將會詳細說明，如何把 CWT-GL 的元件系統與 3D 繪圖環 境做結合，並畫出正確的畫面。首先在 3.1 節中將會說明如何將 OpenGL 的 3D 繪圖與 CWT-GL 結合在一起，並且改進第二章末節提出的解決方法。

在 3.2 節中列出在系統設計時需要注意的一些議題。

3.1 混合 CWT-GL 與 3D 繪圖的系統設計

要解決混和在設定的問題本論文設計的方法是使用串連的方式，將 3D 繪圖與 CWT 的元件分開在不同的 OpenGL 繪圖流程個別繪製。這種方 式就可以保證一次只有一種參數會設定進去，使 OpenGL 繪圖流程在繪 製時不會產生衝突。如圖 3-11，從左邊開始，空白的視窗經過立體方塊 設定參數進入 OpenGL 繪圖流程，會出在視窗上的立體方塊後，CWT 再將 要繪製 Button 元件的參數傳入 OpenGL 繪圖流程，此時立體方塊已經正 確畫完，CWT 就可以使用它預設的成像方式會出正確的 Button 在視窗上 面。

圖 3-13：3D 圖形混合 2D CWT 元件繪圖流程架構圖  

3.2 混合 CWT-GL 與 3D 繪圖的實作內容議題

在這一節中，將會討論實作系統時要注意的一些議題。在 3.2.1 中，

會說明如何將 2D 元件放置在畫面最頂端。3.2.2 節中，說明要回復的位 置矩陣參數。3.2.3 節提出一般 3D 繪圖中打光的問題。3.2.4 節則提出 混合兩個繪圖流程要注意的裁切問題。

3.2.1 元件置頂

在 3D 的遊戲畫面中，GUI 不行被遊戲畫面遮住，所以 CWT 的元件必 須繪製在畫面的最上層，也就是要 3D 程式繪製在視窗上面後 CWT 才進 行繪製，為了達到這點，在註冊進 OpenGL 繪圖程序時，CWT 要在 3D 程 式註冊後才註冊，但是最底層的視窗也是 CWT 建置的，若直接在 3D 程 式後才註冊 CWT，那會造成連視窗無法繪出的情況發生，所以本論文的

解髮是，CWT 先註冊繪出視窗，接著 3D 程式要註冊時，先移除 CWT 的註 冊，等 3D 程式註冊完後在註冊回去，如圖 3-12，這樣就可以解決 CWT 要在 3D 程式之後繪製的問題。

這裡還要注意一點就是，當 CWT 在繪製時要關掉深度測試，深度測 試就是指當 OpenGL 在繪製流程時，會依據當時物件所在的 z 軸座標來 呈現上下遠近的關係，即使是後畫元件，因為深度測試發現比 3D 程式 物件的 z 座標要小，也會繪製在 3D 物件之後而被遮住，所以當 CWT 在 繪製時要關掉深度測試，以確保 CWT 元件會繪製在最上方不會被遮蔽。

圖 3-14：3D 圖形混合 2D CWT 元件繪圖流程架構圖-關閉深度測試 

3.2.2 位置矩陣參數回復

開發者在繪製 3D 畫面時，會依據需要使用許多 OpenGL 繪圖流程的 參數設定，而輪到要繪製 CWT 時會改用 CWT 的繪圖設定如投影、視點、