魚鱗☆ﾟ.*･｡電腦圖學 Week05

 魚鱗☆ﾟ.*･｡電腦圖學 Week05

1. OpenCV 安裝☆ﾟ.*･｡

(1)桌面 -> 葉正聖老師上課用軟體 -> -OpenCV-2.1.0-win32-vs2008.exe☆ﾟ.*･｡

(2)小心1：Add OpenCV to ... PATH

(3)小心2：要安裝在預設的 C:\OpenCV2.1 目錄裡

(4)請安裝完後，重開 CodeBlocks

(5)設定 Settings-Compiler 要加入3個設定

    (5-1)Compiler 的 include 目錄

    (5-2)Linker 的 lib 目錄

    (5-3)加入 linker 的3個檔名 cv210、cxcore210、highgui210

2. week05-1_opencv.cpp ~程式讀取圖檔~☆ﾟ.*･｡

(1)CodeBlocks -> File -> New -> Empty File 新增一個新的程式檔

(2)存一張jpg格式的圖檔放在C槽

(3)打程式：

#include <opencv/highgui.h>
int main()
{
    IplImage * img = cvLoadImage("c:/image.jpg");
    cvShowImage("week05", img);
    cvWaitKey(0);
}

(4)執行程式，圖就會出來了

3. 看課本範例☆ﾟ.*･｡

(1)到老師目錄：http://jsyeh.org/3dcg10 ☆ﾟ.*･｡

(2)下載 win32 和 data ☆ﾟ.*･｡

(3)解壓縮windows.zip和data.zip☆ﾟ.*･｡

(4)把data資料夾放入windows資料夾☆ﾟ.*･｡

(5)進入 Texture.exe ☆ﾟ.*･｡

(6)可以更動的部分，考試必考的程式

4. week05_opencv_cvLoadImage ~程式讀取圖檔和畫圖形~☆ﾟ.*･｡

(1)在桌面安裝freeglut☆ﾟ.*･｡

(2)新增glut專案---> week05_opencv_cvLoadImage ☆ﾟ.*･｡

(3)複製貼上11行程式(包含glClear)☆ﾟ.*･｡

#include <GL/glut.h>
void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glutSolidTeapot(0.3);
    glutSwapBuffers();
}
int main(int argc, char*argv[])
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
    glutCreateWindow("week05");
    glutDisplayFunc(display);
    
    glutMainLoop();
}

(4)新增剛剛教OpenCV的讀取圖片的3行程式

#include <GL/glut.h>
#include <opencv/highgui.h>
void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glutSolidTeapot(0.3);
    glutSwapBuffers();
}
int main(int argc, char*argv[])
{
    IplImage * img = cvLoadImage("c:/image.jpg");
    cvShowImage("week05", img);
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
    glutCreateWindow("week05");
    glutDisplayFunc(display);
    glutMainLoop();
}

(5)執行程式，就能看到圖片和茶壺了

5. week05_opencv_opengl_myTexture ~貼圖貼圖形~☆ﾟ.*･｡

(1)新增glut專案---> week05_opencv_opengl_myTexture ☆ﾟ.*･｡

(2)進入網址：https://gist.github.com/jsyeh/5ed01210559721ec71b659b3ffed2dd7

(3)複製 "MyTexture.cpp" 的18行程式並在專案上貼上

#include <opencv/highgui.h> 
#include <opencv/cv.h>
#include <GL/glut.h>
int myTexture(char * filename)
{
    IplImage * img = cvLoadImage(filename); 
    cvCvtColor(img,img, CV_BGR2RGB); 
    glEnable(GL_TEXTURE_2D); 
    GLuint id; ///準備一個 unsigned int 整數, 叫 貼圖ID
    glGenTextures(1, &id);
    glBindTexture(GL_TEXTURE_2D, 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;
}

(4)把剛剛 "week05-1_opencv.cpp" 的程式貼上並修改及新增

#include <opencv/highgui.h> 
#include <opencv/cv.h>
#include <GL/glut.h>
int myTexture(char * filename)
{
    IplImage * img = cvLoadImage(filename); 
    cvCvtColor(img,img, CV_BGR2RGB); 
    glEnable(GL_TEXTURE_2D); 
    GLuint id; 
    glGenTextures(1, &id);
    glBindTexture(GL_TEXTURE_2D, 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;
}
#include <GL/glut.h>
#include <opencv/highgui.h>
void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glutSolidTeapot(0.3);
    glutSwapBuffers();
}
int main(int argc, char*argv[])
{
    IplImage * img = cvLoadImage("c:/image.jpg");
    cvShowImage("week05", img);
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
    glutCreateWindow("week05");
    glutDisplayFunc(display);
    myTexture("c:/image.jpg");
    glutMainLoop();
}

(5)執行程式，就能得到有貼圖的茶壺了

5. week05_opencv_opengl_myTexture_glTexCoord2f ~圖形背後新增圖檔背景~☆ﾟ.*･｡

(1)新增glut專案---> week05_opencv_opengl_myTexture_glTexCoord2f ☆ﾟ.*･｡

(2)把剛剛 "week05_opencv_opengl_myTexture" 的程式貼上

#include <opencv/highgui.h>
#include <opencv/cv.h>
#include <GL/glut.h>
int myTexture(char * filename)
{
    IplImage * img = cvLoadImage(filename); 
    cvCvtColor(img,img, CV_BGR2RGB); 
    glEnable(GL_TEXTURE_2D);
    GLuint id;
    glGenTextures(1, &id);
    glBindTexture(GL_TEXTURE_2D, 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);
    glutSolidTeapot(0.3);
    glutSwapBuffers();
}
int main(int argc, char*argv[])
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
    glutCreateWindow("week05");
    glutDisplayFunc(display);
    myTexture("c:/image.jpg");
    glutMainLoop();
}

(3)加入課本的程式

#include <opencv/highgui.h>

#include <opencv/cv.h>

#include <GL/glut.h>

int myTexture(char * filename)

{

    IplImage * img = cvLoadImage(filename);

    cvCvtColor(img,img, CV_BGR2RGB);

    glEnable(GL_TEXTURE_2D);

    GLuint id;

    glGenTextures(1, &id);

    glBindTexture(GL_TEXTURE_2D, 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);

    glBegin(GL_POLYGON);

        glTexCoord2f(0,0); glVertex2f(-1,-1);

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

        glTexCoord2f(1,1); glVertex2f(+1,+1);

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

    glEnd();

    glutSolidTeapot(0.3);

    glutSwapBuffers();

}

int main(int argc, char*argv[])

{

    glutInit(&argc, argv);

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);

    glutCreateWindow("week05");

    glutDisplayFunc(display);

    myTexture("c:/image.jpg");

    glutMainLoop();

}

(4)執行程式，就能得到有貼圖的茶壺了和顛倒的背景了(？

6. week05_rotating_earth~旋轉的地球~☆ﾟ.*･｡

(1)新增glut專案---> week05_rotating_earth ☆ﾟ.*･｡

(2)把剛剛 "week05_rotating_earth" 的程式貼上

(3)新增並修改程式

#include <opencv/highgui.h>
#include <opencv/cv.h>
#include <GL/glut.h>
GLUquadric * quad =NULL;
 int myTexture(char * filename)
{
    IplImage * img = cvLoadImage(filename);
    cvCvtColor(img,img, CV_BGR2RGB);
    glEnable(GL_TEXTURE_2D);
    GLuint id;
    glGenTextures(1, &id);
    glBindTexture(GL_TEXTURE_2D, 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);
    glEnable(GL_DEPTH_TEST);
    glPushMatrix();
        glRotatef(90, 1, 0, 0);
        glRotatef(angle++, 0, 0, 1);
        gluSphere(quad, 1, 30 ,30);
    glPopMatrix();
    glutSwapBuffers();
}
int main(int argc, char*argv[])
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
    glutCreateWindow("week05");
    glutIdleFunc(display);
    glutDisplayFunc(display);
    myTexture("c:/earth.jpg");
    quad = gluNewQuadric();
    gluQuadricTexture(quad, 1);
    glutMainLoop();
}

(4)執行程式，就能得到會旋轉的地球了

7. 上傳到Github☆ﾟ.*･｡