[電腦圖學]Week15 松賢的上課筆記

本週主題: 

(1.)期末作品展示與評分

[電腦圖學]Week15 松賢的上課筆記

本週主題: 

(1.)期末作品示範

(2.)背景貼圖示範
(3.)打光、貼圖切換
(4.)讀檔內插示範

(5.)學期總複習

1.認識貼圖背景

請下載Facebook社團的檔案(Earth.zip, freeglut.zip)解壓縮下載到桌面

接著下載openCV 2.1.0版本

注意，安裝時記得選取給所有電腦使用者的路徑

接下來打開myEarth.cbp，為了要做出貼圖，需要使用以下東西:

這個是只有加一個貼圖的情況。如果要加更多貼圖，GLuint id;的id變數後面可以自己加(id2,id3......)

接著要放背景圖，我們在display函式中修改成如下:
void display()
{   glEnable(GL_DEPTH_TEST); ///要啟動 Detph Test 深度值的測試,3D顯示才正確
    glClear(GL_COLOR_BUFFER_BIT  | GL_DEPTH_BUFFER_BIT);
    glPushMatrix();
        glBegin(GL_POLYGON);///多邊形  開始畫
            glTexCoord2f(0,0); glVertex3f(-1,+1,0);
            glTexCoord2f(1,0); glVertex3f(+1,+1,0);
            glTexCoord2f(1,1); glVertex3f(+1,-1,0);
            glTexCoord2f(0,1); glVertex3f(-1,-1,0);
        glEnd();///結束畫
    glPopMatrix();
    glFlush();
}
像這樣~~

其中，

            glTexCoord2f(0,0); glVertex3f(-1,+1,0);            glTexCoord2f(1,0); glVertex3f(+1,+1,0);
            glTexCoord2f(1,1); glVertex3f(+1,-1,0);
            glTexCoord2f(0,1); glVertex3f(-1,-1,0);

前面代表貼圖座標，後面代表3D頂點

然後按下執行，貼圖就變成2D的了

這個就是我們的背景貼圖

2.套用貼圖到自己的機器人

(這裡老師用的是FB社團內的myGLMSample做示範)

在期末作業，原本的背景通常都是白色底，我們可以運用上一節課教的貼圖，讓機器人變得更生動!

[電腦圖學]Week14 松賢的上課筆記

本週主題: 

(1.)內插公式

(2.)存檔、讀檔
(3.)利用Timer自動內插
(4.)鍵盤+滑鼠

1.內插公式、利用Timer自動內插

請使用Excel表格做出內插公式  [  時間*90000 + (1-時間)*30000  ]

第一欄為時間、第二欄為角度。我們要模擬角度隨著時間增長，會增加數值

接下來我們要把這個技巧套用到我們的機器人程式:(這裡我用自己的專案來實做)

分別賦予各個關節一個按鍵，並做內插的公式，將來選擇單一關節，即可使關節轉動。

2.存檔、讀檔

請善用stdio的fscanf()、fprintf()

3.鍵盤+滑鼠

請修正自己的mouse、motion跟keyboard函式

[電腦圖學]Week13 松賢的上課筆記

本週主題: 

(1.)上週回家作業

(2.)動起來

1.下載自己的作業或老師傳的範例檔

為了要讓模型可以像保時捷一樣旋轉，所以我們讓angle變數+1，所有關節及身體、頭部都可以轉動。

2.計時器glutTimerFunc()

為了要使模型能定時旋轉，我們在main函式中加入glutTimerFunc()函式，這個函式要帶入3個參數，像圖中: glutTimerFunc(0, timer, 0); 第一個0是毫秒(ms)，數字調越大，計時器越慢，模型動的越慢。

3.讓模型的關節回到正確位置(TRT轉動)

因為手有關節，所以我們要延續上禮拜TRT的觀念，把手臂與腳的旋轉中心調到正確位置，調整方法就是上週考試的法則。

舉我的模型為例，要使關節調到正確位置(藍色的圈圈)，必須調整glTranslatef的參數，大家慢慢調吧!!

[電腦圖學]Week12 松賢的上課筆記

本週主題: 

(1.)[小考]3D TRT轉動

(2.)上週範例

(3.)讀圖檔
(4.)設定貼圖
(5.)轉動的地球
(6.)回家作業: 機器人

1.小考練習-TRT轉動考古題(6行)

請看例圖:

請撰寫程式(6行):

glPushMatrix();

glTranslatef(0.4,-1.0,0);  //把手臂掛上右邊座標位置

glRotatef(angle,0,0,1);  //沿Z軸旋轉angle度

glTranslatef(0.2,-0.5,0);  //把左圖紅色圈圈移到座標(0,0,0)位置

drawleg();  //畫手臂

glPopMatrix();

2.openCV 2.1.0顯示圖片

利用CodeBlocks建立一個Console Application專案

自己建立專案名稱後，以C++為撰寫語言。完成後在專案做以下設定:

左邊右箭選取Build Settings

加入cv210 , cxcore210 , highgui210

搜尋路徑的編譯器選OPENCV2.1資料夾下的include資料夾

搜尋路徑的編譯器選OPENCV2.1資料夾下的lib資料夾

請按照上面三個圖片做設定(我會建議重開專案再做下面的事)

完成後，請打上以下程式碼:

#include <opencv/highgui.h>

int main(void)

{

    IplImage* img = cvLoadImage("C:/1.png"); //請用小畫家畫一個圖案，檔名存成one、附檔名為.png

    cvShowImage("a",img); //秀出你的圖案到一個叫做a的視窗

    cvWaitKey(0);//阻斷式鍵盤事件(不要想成病毒..哈哈)

}

執行後，可以看到以下執行結果:

這樣就成功拉~

3.旋轉地球

用CodeBlocks開啟小葉老師傳的地球專案，並執行它。

如果不能執行，請按以下步驟做初始化:

執行後可以看到結果如下:

練習: 請自己試試把球體變成茶壺形狀，向下面這樣:

[電腦圖學]Week11 松賢的上課筆記

本週主題: 

(1.)3D TRT轉動

(2.)矩陣、投影矩陣

(3.)攝影機運鏡
(4.)會動的機器人

1.執行Projection，玩別人的程式(模仿Michael Bay運鏡)

Stpe1:請下載這個連結中的windows,data,glut32.dll三個檔案，並解壓縮執行windows資料夾內的Projection。成功執行後，可以自己調整gluLookAt(0.00,0.00,2.00)，其中x軸就是Michael Bay的運鏡。

windows資料夾內要有右邊紅色框框三個檔案，才可以正確執行

Step2:接下來我們要實作這個運鏡效果。首先，下載facebook電腦圖學的freeglut.zip，解壓縮到桌面，然後用CodeBlocks新增GLUT project。
Step3:我們打開小葉老師做好的專案(04160011)，執行後可以看到一個茶壺

Step4:仔細觀察紅框框，可以了解到函式裡的9個參數，正好比對到茶壺的視角。

2.運鏡效果講解

FOV(field of view效果)

FOV小

FOV大

gluPerspective其他參數講解

對茶壺作透視投影實作:

法一: 加入上圖紅框框內透視投影函數
法二: 或是開啟小葉老師傳的cpp檔，這個比較厲害，執行後茶壺會旋轉!(藍色框框的作用)

結論: 透過紅框框內的效果，可以達成不破圖的效果(其實也是gluPerspective(60, 1, 0.001, 10000);後兩個參數在搞鬼...哈哈)

2.會動的機器人茶壺(茶壺身體、茶壺手臂)

好的，我們要用TRT轉動來做出關節活動。所謂TRT，就是在pushMatrix()跟popMatrix()中加入Translate + Rotate + Translate。
第一個T:將茶壺掛上去
第一個R:旋轉
第二個T:定住旋轉中心

像老師用6個茶壺做出身體跟雙手臂，以後我們期末作品，就是要用這個觀念來讓我們的角色做動作喔!

[電腦圖學]Week10 松賢的上課筆記

本週主題: 

(1.)組合出機器人

(2.)做出可轉動的關節

(3.)錄製動作
(4.)回家作業:機器人

1.下載並執行3D Exploration v1.81

Stpe1:請下載這個連結中的程式，並解壓縮執行它。
至小葉老師網站下載data資料夾，解壓縮到電腦。
利用3D Exploration開啟data資料夾內的soccerball.obj，會顯示預覽如下:

Step2:接著另存新檔 File-> Save As

Step3:注意紅框框處要修改，檔名請自己命名。

Step4:選擇輸出型態:Sample APP

Step5:開啟CodeBlocks並新增一個OpenGL Project

Step6:把一開始的main.c刪掉，並把剛才soccerball.cpp加到專案內。

Step7:專案資料夾內的檔案也要刪除喔!!

Step8:執行後會出現兩行不能通過編譯，就把它加入註解

      

Step9:在執行第二次就會出現一直變大變小的足球，就代表成功了!

2. 讀入3D模型

Stpe1:請按照以下步驟分離出海豚模型(請分出dolph01以及dolph02)

Step2:請到這裡下載檔案，利用CodeBlocks開啟它，並且在display函式上先宣告三個變數:

修改main.cpp中display函式如下:

void display()

{

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glPushMatrix();

        angle++;

        glRotatef(angle, 0,1,0);

        if (!pmodel1) {

        pmodel1 = glmReadOBJ("data/dolphins1.obj");

        if (!pmodel1) exit(0);

        glmUnitize(pmodel1);

        glmFacetNormals(pmodel1);

        glmVertexNormals(pmodel1, 90.0);

        }

        if (!pmodel2) {

        pmodel2 = glmReadOBJ("data/dolphins2.obj");

        if (!pmodel2) exit(0);

        glmUnitize(pmodel2);

        glmFacetNormals(pmodel2);

        glmVertexNormals(pmodel2, 90.0);

        }

    glPushMatrix();

        glTranslatef(0.5,0,0);

        glScalef(0.4,0.4,0.4);

        glmDraw(pmodel1, GLM_SMOOTH | GLM_MATERIAL);

    glPopMatrix();

    glPushMatrix();

        glTranslatef(-0.5,0,0);

        glScalef(0.4,0.4,0.4);

        glmDraw(pmodel2, GLM_SMOOTH | GLM_MATERIAL);

    glPopMatrix();

    glPopMatrix();

    glutSwapBuffers();

}

藍色部分為第一隻海豚dolphin1，紫色部分為第二隻海豚dolphin2。

[電腦圖學]Week09 松賢的上課筆記

本週主題: 

(1.)貼圖

(2.)聲音

(3.)小遊戲

1.下載並執行Nehe的程式(小遊戲)

請下載這個連結中的程式，並解壓縮執行它。

點兩下框框內的.exe檔

接著它會問你要不要全螢幕執行，請選擇"否"。

點擊視窗中的物品來得分

試試好手氣，你得了幾分呢?

2.聲音

步驟一:請新增GLUT專案，然後在main.cpp檔中加入標頭檔 #include<mmsystem.h>

步驟二:接著在main函式中先加入glutMouseFunc(mouse);，並在main函式上加入mouse函式並加入槍聲的音源路徑(請注意路徑的修改)

步驟三:執行後，在視窗中點擊任意部分，電腦即會產生音效。

用鍵盤上的數字鍵來產生DoReMi等等音效(.wav版本)

步驟一:請至網路上下載音檔，並放到freeglut>bin資料夾下，這樣程式才讀的到檔案。

步驟二:新增glutKeyboardFunction(keyboard);函式到glutMouseFunction函式下，並實作keybaord函式

在keyboard函式中，有五個條件式，分別做以下功能:

當按下1鍵，則播放Do的聲音；

當按下2鍵，則播放Re的聲音；

當按下3鍵，則播放Mi的聲音；

當按下4鍵，則播放Fa的聲音；

當按下5鍵，則播放Sol的聲音；

播放音效(.mp3版本)

步驟一:請將CMP3_MCI.h標頭檔以及一個.mp3檔放到GLUT專案資料夾下

步驟二:在GLUT專案中新增標頭檔#include "CMP3_MCI.h"

步驟三:在下一行新增變數CMP3_MCI myMP3;

步驟四:在main函式中加入兩行:

 myMP3.Load("C:\\Users\\user\\Desktop\\04160410/yukai.mp3");///播音樂的路徑

 myMP3.Play();//播放

步驟五:執行後，即會抓到mp3檔案，並播放聲音。