YJ week10

貼圖進階

 1.把圖片放到背景

->跟著上週的步驟下載Opencv

->建立GLUT專案,並設定CodeBlocks,把圖檔放在freeglut-bin裡面

->打程式碼(上週的程式碼加上螢光筆的部分)

#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;

}

void display()

{

    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

    glBegin(GL_POLYGON);

        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();

}

int main(int argc,char**argv)

{

    glutInit(&argc,argv);

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);

    glutCreateWindow("week10 texture background");

    glutDisplayFunc(display);

    myTexture("earth.jpg");

   glutMainLoop();

}

2.將貼圖貼在圓球上

#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);

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

    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;

}

void display()

{

    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

    gluQuadricTexture(sphere,1);

    gluSphere(sphere,1,30,30);

    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();

   glutMainLoop();

}

                                                         < 此為從上往下看的視角 >

-> 轉圖片的角度,把它調到適中的位置(上面的程式碼加上螢光筆部分的程式碼)

#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);

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); 

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); 

    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img->width, img->height, 0, GL_RGB, GL_UNSIGNED_BYTE, img->imageData);

return id;

}

void display()

{

    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

    glPushMatrix();

        glRotatef(90,1,0,0);

        gluQuadricTexture(sphere,1);

        gluSphere(sphere,1,30,30);

    glPopMatrix();

    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);

   glutMainLoop();

}

3.讓地球轉動

#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);

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

    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);

    glPopMatrix();

    glutSwapBuffers();

    angle += 0.1; ///旋轉速度,讓角度每次加少一點就可以讓旋轉速度變慢

}

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();

   glutMainLoop();

}

4.鋼彈模型-week10_texture_modle

->opencv安裝

    codeblocks要改設定

->下載老師提供的mygundam.zip

    把mygundam.zip裡的data資料夾放進freeglut-bin資料夾裡

->到http://jsyeh.org/3dcg10/ 下載source.zip

   把source.zip裡的glm.h,glm.c,transformation.c放進week10_texture_modle資料夾裡

   並將glm.c改成glm.cpp (有警告直接按確定)

->開啟GLUT專案

  在最左邊week10_texture_modle的字上面點滑鼠右鍵,有App files點下去,選glm.cpp

->在main.cpp裡打

```cpp

#include <opencv/highgui.h>

int main()

{

    IplImage * img = cvLoadImage("data/Diffuse.jpg");

    cvShowImage("week11",img);

    cvWaitKey(0);

}

```

-> 以上步驟做完按執行會出現

5.把鋼彈的顏色改正,並讓鋼彈變立體

->把freeglut-bin裡的data資料夾的Diffuse.jpg放到小畫家裡面做垂直翻轉,並儲存

接著新增程式碼讓鋼彈變立體並旋轉

#include <opencv/highgui.h> ///使用 OpenCV 2.1 比較簡單, 只要用 High GUI 即可

#include <opencv/cv.h>

#include <GL/glut.h>

#include  "glm.h"

GLMmodel * pmodel =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);

    if(pmodel == NULL){

        pmodel = glmReadOBJ("data/gundam.obj");

        glmUnitize( pmodel );

        glmFacetNormals( pmodel );

        glmVertexNormals( pmodel , 90);

    }

    glutSwapBuffers();

}

int main(int argc , char ** argv)

{

    glutInit( &argc , argv );

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);

    glutCreateWindow("week10 texture background");

    glutDisplayFunc(display);

    glutIdleFunc(display);

    myTexture("data/Diffuse.jpg");

    glEnable(GL_DEPTH_TEST);///變立體

    glutMainLoop();

}

6.鋼彈結合上面地球旋轉,讓鋼彈旋轉

#include <opencv/highgui.h> ///使用 OpenCV 2.1 比較簡單, 只要用 High GUI 即可

#include <opencv/cv.h>

#include <GL/glut.h>

#include  "glm.h"

GLMmodel * pmodel =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);

    if(pmodel == NULL){

        pmodel = glmReadOBJ("data/gundam.obj");

        glmUnitize( pmodel );

        glmFacetNormals( pmodel );

        glmVertexNormals( pmodel , 90);

    }

    glPushMatrix();///旋轉

        glRotatef(angle,0,1,0);

        glmDraw(pmodel,GLM_TEXTURE);

    glPopMatrix();

    glutSwapBuffers();

    angle += 0.1; ///可以改轉動速度

}

int main(int argc , char ** argv)

{

    glutInit( &argc , argv );

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);

    glutCreateWindow("week10 texture background");

    glutDisplayFunc(display);

    glutIdleFunc(display);

    myTexture("data/Diffuse.jpg");

    glEnable(GL_DEPTH_TEST); ///變立體

    glutMainLoop();

}