作業三 校園導覽

主題介紹

元智大學校園導覽
這次是要作整個元智大學的校園導覽，所以直接開門見山取了這個名字當主題，我想是最適合不過了。

設計概念

這次主要畫了六個館，都是以之前作業二的一館當雛型，修改完以後再透過translate移動到場景中不同的位子。而移動部份是參考老師放在portal的範例檔，並修改之後達到效果，最後每次移動的時候，改變idle function讓畫面看起來更有走路的感覺，並且搭配空白鍵，改變照相機y軸的高度，呈現有點像CS裡面跳躍的感覺。

操作方式

使用鍵盤的上下左右進行前後左右的移動，按空白可以進行跳躍。

執行成果呈現

影片，主要展示整個場景，跟碰撞偵測。

全景

全景

一館

二館

三館

五館

六館

七館

壘球場

程式設計

這次基本上只有改變投影的方式和照相機位置，其他跟前兩次使用方法差不多。

選擇投影的方式

這次選擇了perspective的投影方式，讓畫面看起來更有人眼看到的效果。

改變照相機的位置

照相機的y軸基本上沒有跳躍的話，維持不變，而如果選擇前進轉彎，x軸會乘上sin角度，z軸會乘上cos角度，讓看起來的效果很像在游走一樣。

心得與討論

因為之前老師上課有課堂練習，所以在游走的部份課堂上就寫好了，所以這次作業主要時間還是花在把六個館建立起來，和把整個場景布置。不過因為一次要畫六個館，所以這次就不像上次畫一館一樣每個細節都很注意，所以只把簡單的代表性特徵畫出來而已。而再碰撞針測的部分，我是記錄每一個館的座標，在移動的時候會在去做檢查，看看是否會超過記錄起來的座標，如果沒超過才走過去。最後這次是在最後一天才大致上完成，所以部落格打的有點簡略，而且本來想要多畫幾棵樹也來不及畫好，另外本來也想要連滑鼠都可以做視角的移動，讓整個操作方式跟CS玩起來的感覺一樣，因為時間的關係，只能等下次作業在完成了。

作業二 元智一館

主題介紹

資工一館 樂高版

這次的作業二跟作業一畫法不太不ㄧ樣，因為要畫出一館的每個面，所以我使用的方法有點像在堆積木、玩樂高的方式，慢慢的堆起來，才會每面都出現，而且有立體3D的感覺，因此我把這次作業定的名字就是，資工一館 樂高版。

設計概念

由於這次作業是要畫出整個一館的3D模型，因此每個面都需要畫出來，所以我跟同學借了相機拍了一館每個面的照片，再一一仔細描繪。

操作說明
可以對著畫面按下滑鼠右鍵，會跑出選擇操作的選單

1.      選擇rotate，可以使用鍵盤上下左右鍵，對模型進行旋轉，按上下鍵是對y軸作旋轉，左右鍵是對x軸作旋轉。

2.      選擇move，可以使用鍵盤上下左右鍵，對模型進行上下左右的移動。

3.      不管選擇哪個模式，按鍵盤的A(a)鍵可以對模型進行放大，按鍵盤的D(d)鍵

可以對模型縮小。

4.      選擇exit，就是直接關閉程式。

執行成果呈現

影片 (因為動太快，錄起來會失焦，所以我很緩慢的做旋轉移動和放大，請見諒)
而最後是想要呈現出，可以透過將模型移動和放大，讓使用者可以看清楚各個想看見的角度

1. 使用平行投影的效果

2. 使用Frustum投影的效果

正面

右面

背面

左面

程式設計

除了作業一寫的三個部分以外，作業二我多了以下幾個方法。

1.      使用 z-buffer algorithm

OpenGL有一個內建的z-buffer演算法，使用之後可以自動測試景深，如果被遮住的地方就完全不會畫出來，如此一來只要把Z軸位置設定好，就可以不用像作業ㄧ每次畫什麼物件還要考慮誰要先畫的問題。

2.      使用Reshape call back function

寫作業一的時候因為還沒學過這個function的用途，所以發現把視窗放大縮小後，整個影像的比例都亂掉了，因此這次寫了reshape call back function，只要視窗一改變，就會自動調整viewport和viewing volume，讓整個影像還是跟著視窗的比例作縮放。

3.      Transformation和Keyboard call back function

為了能讓使用者看到整個3D模型的每個面，我使用剛學到的transformation方法，讓整個物體可以搭配keyboard call back function的輸入，作rotate(旋轉)、translate(移動)和scale(放大縮小)。

4.      Menu function
為了可以調整操作模式，使用 menu function 搭配滑鼠右鍵作呼叫使用。

心得與討論

這次的作業真的比作業一還要麻煩太多了! 光是一根柱子就要畫六個面，當然有些被檔住可以少畫幾個面。為了增加寫作的效率，我幾乎都把所有的座標位置寫在陣列裡面，另外再寫好六個面的Code，之後要畫的時候就複製一下把變數改一下就畫好一根柱子了，而寫在陣列裡面的好處是如果想要修改座標，只要簡單改一下陣列裡面的內容，其他code都不用動到，很好修改。

而描繪的過程，就有點像是小時候玩樂高一樣，先把整個主架構(大矩形)畫出來後，再慢慢的一根柱子，一塊地板的疊上去，必要時後還會再修改原本的架構矩形，有點像是挖洞一樣，挖好之後再繼續把想要的東西疊上去。

至於要選擇哪個投影的方式，是讓我最後最困擾的地方，我一開始都是平行投影的方法來寫，直到這禮拜老師講述 Frustum的方法，呈現出比較像人眼看到的效果，所以我也嘗試了一下發現真的看起來比較像，不過我最後上傳的作業還是以一開始的平行投影為主。

雖然整個寫作業的過程很複雜，花了很多時間，但是其實還蠻好玩的，當一根一根柱子疊出來，整個影像越來越像的時候，超級有成就感的，不過因為這次大部份的時間都花在如何作出逼真立體的模型，所以花在整個顏色調配上的時間就大為減少了，因此就單個面來講，感覺作業ㄧ看起來還是比較真實一點，這是我覺得這次比較可惜的地方。

 

作業一 元智一館

主題介紹

我們的資工一館

在元智生活了三年半，轉眼間已經大三了，身為資工人每天都會待的地方就是元智一館，元智一館可說是我們資工人的家，所以作業一主要是利用一些OpenGL基本繪圖元件來將我們心中的元智一館呈現出來。

設計概念

由於不同的視角所看到的一館呈現會有不同的效果，而其中從五館俯視一館的角度我覺得是最清楚且最能呈現一館風格的角度，所以我從網路找了一張以此種角度作拍攝的照片(下面會呈現)，來當我的參考圖，再根據參考圖作場景描繪。

執行成果呈現

左圖為參考照片，右圖為成果圖

成果放大圖

程式設計

1.      選擇投影的方式

OpenGL的viewing volume一開始預設是 -1到 1之間，要在預設值範圍內畫出場景，每個頂點座標都必須到小數點後幾位才可以達到精確的效果，為了改善這種情況，我選擇了正交投影 ( glOrtho) ，來改變我的viewing volume。

2.      改變照相機的位置

由於我整個場景最左下角是以0為基礎開始描繪，這時候會發生整個影像都會呈現在螢幕右上方的情形，原因是因為OpenGL的照相機位置一開始預設是照在座標( 0.0 , 0.0, -1.0)，所以為了使我的影像最後可以呈現在整個螢幕的正中央，我使用gluLookat來改變照相機的設定。

3.      其餘的程式部份

除了上述兩點以外，其他部份的code我直接參考老師portal的範例1和2來做設定，並把最後呈現的視窗大小(glutInitWindowSize)，改成我的viewing volume的1.5倍大。

寫作方法

為了有效率描繪整個場景，我描繪的順序是先描繪大範圍物體，等整個一館的外觀差不多呈現以後，再做細部的處理。

1.      描繪出整個一館的基本架構

2.      描繪柱子和房子線條

3.      描繪窗戶的基本雛型

4.      描繪出窗戶雛型的第二版

5.      描繪天空和草地

6.      描繪地板、階梯和路燈

7.      為了逼真一點，描繪幾棵樹上去

8.      最後再把所有的窗戶細部畫，大功告成

心得與討論

 

這次的作業起初以為只要直接把物件畫上去就可以呈現出來，所以ㄧ開始是在範圍-1到1之間作描繪，每個頂點都要算到小數點後幾位，光畫ㄧ個矩形可能就要算很久的時間，很沒效率。後來才知道還要設定投影和照相機才可以把整個場景改變，減少我在測量描繪物體座標的時間。

單純的把物體畫出來的效果看起來很不真實，所以在每個polygon的頂點都需要改變顏色，這樣描繪出來的polygon會有漸層，也就是有點陰影的效果。ㄧ開始我用的是glColor3f，所以必須把每個顏色的值，用比例方式縮到0到1之間，使用起來整個很麻煩，後來隔ㄧ週上課才知道還有glColor3ub函式可以用，所以我想用什麼顏色，直接就能把0~255之間的數字代進去，不用在算比例了。

而場景中的樹的部份，ㄧ開始我是直接用三角形去畫，不過看起來也很不真實，後來想到老師上課有使用glutSolidTeapot的內建函式來畫茶壺，翻了一下書，找到glutSolidSphere這個可以內鍵畫出ㄧ顆球的函式，之後再把描繪球的參數改小一點，看起來就有點像樹的效果了! 而因為內建函式描繪出來的圖形ㄧ開始都是設在原點處，所以我在畫出樹以後，利用glTranslatef把它移動到我想要的場景位子，有些長長的樹是運用glScalef來達到縮放的效果。

最後我覺得這次的作業雖然花了很多時間，但是也學到很多東西，而也在整個寫作業過程中思考如何ㄧ步ㄧ步簡化我的code，也能達到很真實的效果，希望能運用在將來的作業上。