*嗚嗚* Week10

 # Week10

今天上課第一件事就是先說明期中考成績，校長的信和疫情相關的討論。

主題一:上週貼圖+貼到四邊形=背景

我們要把上週教的貼圖做點修改，把圖片貼到四邊形，做出背景的效果。

先完成設定:去moodle上安裝freeglut&OpenCV，打開新的GLUT專案，先刪除原先的程式碼，把上週的程式，myTexture.txt裡面的myTexture()先複製貼上

-安裝freeglut，短的改成更短(lib/libglut32.a)

-安裝OpenCV 2.1.0 vs2008(注意要點選Add PATH...)

-重開CodeBlocks

-File/New/Project,打開新的GLUT專案

CodeBlocks OpenCV設定:

-Setting-Compiler/search directories/Compiler: C:\OpenCV2.1\include

-Setting-Compiler/search directories/Linker: C:\OpenCV2.1\lib

-Setting-Compiler/Linker settings

    -cv210

    -cxcore210

    -highgui210

#include <opencv/highgui.h> ///使用 OpenCV 2.1 比較簡單, 只要用 High GUI 即可
#include <opencv/cv.h>
#include <GL/glut.h>
int myTexture(char * filename)
{
    IplImage * img = cvLoadImage(filename); ///OpenCV讀圖
    cvCvtColor(img,img, CV_BGR2RGB); ///OpenCV轉色彩 (需要cv.h)
    glEnable(GL_TEXTURE_2D); ///1. 開啟貼圖功能
    GLuint id; ///準備一個 unsigned int 整數, 叫 貼圖ID
    glGenTextures(1, &id); /// 產生Generate 貼圖ID
    glBindTexture(GL_TEXTURE_2D, id); ///綁定bind 貼圖ID
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); /// 貼圖參數, 超過包裝的範圖T, 就重覆貼圖
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); /// 貼圖參數, 超過包裝的範圖S, 就重覆貼圖
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); /// 貼圖參數, 放大時的內插, 用最近點
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); /// 貼圖參數, 縮小時的內插, 用最近點
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img->width, img->height, 0, GL_RGB, GL_UNSIGNED_BYTE, img->imageData);
    return id;
}

接下來，我們把剛剛複製貼上的myTexture()，再貼上10行程式碼。記得圖片要放在freeglut的bin裡，

就可以執行上週的進度:茶壺表面有地球的貼圖，做個複習。

-在main()裡面加上myTexture("你要秀出的圖檔名稱")//副檔名要確認:要打開顯示副檔名!

int main(int argc,char**argv)
{
    glutInit(&argc,argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("week10 texture background");

    glutDisplayFunc(display);
    myTexture("earth.jpg");

    glutMainLoop();
}
接下來就來做貼到四邊形，變成背景的程式。方法就是把圖貼到四邊形的四個頂點，利用貼圖座標
去完成。
-glBegin(GL_POLYGON);
-glTexCoord2f(tx,ty);glVertex2f(x,y);//做四次，表示四邊形的四個頂點
-glEnd();
void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    ///glutSolidTeapot(0.3);
    glBegin(GL_POLYGON);
    ///圖片的0,0在左上角
        glTexCoord2f( 0, 1 ); glVertex2f( -1, -1 );
        glTexCoord2f( 1, 1 ); glVertex2f( +1, -1 );
        glTexCoord2f( 1, 0 ); glVertex2f( +1, +1 );
        glTexCoord2f( 0, 0 ); glVertex2f( -1, +1 );
    glEnd();
    glutSwapBuffers();
}

主題二:把地球完成(貼圖到圓球上)。利用OpenGL User函式來做到。

-建立一個新的GLUT專案

-宣告指標 GLUquadric * sphere=NULL; 定義一個指標給gluSphere()使用

-在main()的glutMainLoop()之前加上 sphere=gluNewQuadric();

-在display()裡，加上gluQuadricTexture(sphere,1)

-在display()裡，加上gluSpher(sphere,1,30,30);

gluSphere()裡的變數: gluSphere(sphere,半徑,柳丁切經，層層切緯)

我們要把地球做旋轉，讓地球轉正。利用glPushMatrix()和glPopMatrix()裡面多一行glRotatef(

角度,1,0,0)就可以了。

-glutMainLoop()之前，要開啟3D深度測試的功能，才能畫出正確的3D效果(不會破圖): glEnable(GL_DEPTH_TEST)。

void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glPushMatrix();//step02-2
        glRotatef(90, 1,0,0);//step02-2
        gluQuadricTexture(sphere, 1);
        gluSphere(sphere, 1, 30, 30);///glutSolidTeapot(0.3);
    glPopMatrix();//step02-2
    glutSwapBuffers();
}
int main(int argc,char**argv)
{
    glutInit(&argc,argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("week10 texture background");

    glutDisplayFunc(display);
    myTexture("earth.jpg");
    sphere = gluNewQuadric();
    glEnable(GL_DEPTH_TEST);//step02-2

    glutMainLoop();
}

主題三:我們要讓地球轉動起來。

-display()的最後一行angle++或angle+=0.1(速度較慢)

-glRotatef(angle,0,-1,0)/-Y軸轉動

-main()裡面要有glutIdleFunc(display)

#include <opencv/highgui.h> ///使用 OpenCV 2.1 比較簡單, 只要用 High GUI 即可
#include <opencv/cv.h>
#include <GL/glut.h>
GLUquadric * sphere = NULL;///一個指到二次曲面的指標
int myTexture(char * filename)
{
    IplImage * img = cvLoadImage(filename); ///OpenCV讀圖
    cvCvtColor(img,img, CV_BGR2RGB); ///OpenCV轉色彩 (需要cv.h)
    glEnable(GL_TEXTURE_2D); ///1. 開啟貼圖功能
    GLuint id; ///準備一個 unsigned int 整數, 叫 貼圖ID
    glGenTextures(1, &id); /// 產生Generate 貼圖ID
    glBindTexture(GL_TEXTURE_2D, id); ///綁定bind 貼圖ID
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); /// 貼圖參數, 超過包裝的範圖T, 就重覆貼圖
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); /// 貼圖參數, 超過包裝的範圖S, 就重覆貼圖
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); /// 貼圖參數, 放大時的內插, 用最近點
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); /// 貼圖參數, 縮小時的內插, 用最近點
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img->width, img->height, 0, GL_RGB, GL_UNSIGNED_BYTE, img->imageData);
    return id;
}
float angle=0;
void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glPushMatrix();
        glRotatef(angle, 0,-1,0);
        glRotatef(90, 1,0,0);
        gluQuadricTexture(sphere, 1);
        gluSphere(sphere, 1, 30, 30);///glutSolidTeapot(0.3);
    glPopMatrix();
    glutSwapBuffers();
    angle++;
}
int main(int argc,char**argv)
{
    glutInit(&argc,argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("week10 texture background");

    glutIdleFunc(display);
    glutDisplayFunc(display);
    myTexture("earth.jpg");
    sphere = gluNewQuadric();
    glEnable(GL_DEPTH_TEST);

    glutMainLoop();
}

最後，我們要學會如何把模型讀進來。跟前一個實作[旋轉的地球]的程式碼結合。

-建立一個新的GLUT專案

-把老師給的myGundam.zip的data資料夾放進桌面的freeglut/bin裡

-把glm.h&glm.c放進這個專案裡(這兩個檔案下載自 jsyeh.org/3dcg10 的 source.zip裡)，glm.c要記得改成glm.cpp

-把glm.cpp加到專案裡

    -右鍵點選專案title

    -Add Files

-把week08的程式貼上

-把myTexture("earth.jpg")改成myTexture("data/Diffuse.jpg")