Code Talker week07 Texture貼圖

 STEP01

1.至https://jsyeh.org/3dcg10/下載data/win32

2.解壓縮windows資料夾，並把data丟進去

3.開啟Texture.exe，試調整glColor4f並觀察

4.藉由調整四個Vertex3f，了解頂點順序，結果為以左下為始，逆時針終於左上

5.重置後調整glTexCoord2f，理解在3D世界，圖學都用三角形，如openGL，Unity等

STEP02

1.至桌面2022葉正聖老師上課軟體安裝openCV，注意:第二步驟要勾選addPath並要重啟codeblock

2.要寫openCV，需要做幾個設定，在codeblock打開setting

3.到search directories設定，如圖:

放入與縣

4.到Linker settings加入三個名字，如附圖:

5.建資料夾，放入欲顯示的圖片，開啟empty file存檔至資料夾內，打上:

#include <opencv/highgui.h>

int main()

{

    IplImage * img = cvLoadImage("檔名.jpg");

    cvShowImage("week07",img);

    cvWaitKey(0);

}

執行即可顯示。

STEP03

1.開啟一個openGL新專案，至https://gist.github.com/jsyeh複製程式碼:

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

    glutSolidTeapot( 0.3 );

    glutSwapBuffers();

}

int main(int argc, char**argv)

{

    glutInit( &argc, argv );

    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);

    glutCreateWindow("week09 texture");

    glutDisplayFunc(display);

    myTexture("earth.jpg");

    glutMainLoop();

}

2.至google找一張地球圖片取名earth存到freeglut/bin資料夾裡，執行後會看到地球圖片被印在茶壺上，如下圖

STEP04

1.將畫茶壺的程式碼註解掉，然後改成畫多邊形，參考程式碼:

glBegin(GL_POLYGON);

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

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

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

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

    glEnd();

得到結果:

STEP05

1.從https://gist.github.com/jsyeh複製程式碼myEarth.cpp，貼至專案week07-3，將底下myEarth改成Earth以套用自己剛才的圖片

2.執行得到結果如下:

一顆會旋轉的立體地球