Week 08_貼圖 Texture

主題：貼圖 Texture
範例：Texture.exe
實作：Open CV
實作：Open CV + Open GL 貼圖
期中考：10行  Open GL 程式

Vertex
Normal

Tokoyami_world.exe_week08

電腦圖學 Computer Graphics Week8

貼圖 Texture


現在正式進入「貼圖」的部分，這個感覺很複雜的東西看來也是期中前的最後一關了。前置作業跟往常一樣，下載window、data、source跟glut32.gll。這次開啟的是Texture.exe。



這就是今天要講的新課程──貼圖「Texture」。

首先先來介紹今天會用到的新軟體──「openCV」。

先從官網下載程式，再進行安裝......







接著就可以開始今天的練習啦～

首先開啟codeblocks



開啟新專案「console application」





接著開始進行程式碼編撰



但在真正要執行時卻出現了一些錯誤，原來在這麼簡單的程式碼背後有一連串複雜的處理

要正常執行程序，必須先將設定include目錄



接著link各種Lib檔







就是以上這三樣

接著就可以來執行看看囉



欸？

怎麼會這樣？

原來，沒有圖檔當然不給顯現啦

所以只要加入一個圖檔進入bin資料夾內就好啦



成功啦～～

alanhc/張牧之 電腦圖學-week08

1. 貼圖概念 / Concept
2. 貼圖的手把手教學 / Step by step Turtorial

1.Concepts：

glTexCoord2f()

 >小提示：打錯面會顯示不出來

小歷史：

SGI > 早期做圖形的電腦，現在已被其他公司收購
OpenCV  > intel 發起的 圖像處理、電腦視覺、圖形辨識函式庫
ipl (intel performance library)

GL_POLYGON為何會壞掉?

>黃色區域被填滿

2. 貼圖的step by step教學

(1) 下載opencv

(2) 寫helloworld!!!

(3) 綜合OpenCV與OpenGL
(4) 開始貼圖

(1) 下載 [opencv]

(2) 寫Helloworld!!!

新增貝殼(console)專案

但在開始之前...我們必須先了解

使用外部函式庫三步驟

1. include .h file
2. link       .lib檔
3. 執行     bin dll檔
因此我們要先設定一些東西

1. search include 

> opencv<版本>\include

search link

> opencv\lib

2.link cv210.lib、cxcore210.lib、highgui210.lib

3.執行dll

將要的照片丟入freeglut/bin裡

丟入程式[HelloWorld 程式碼]，並且執行

大功告成~~~慶祝~~~

(3) 綜合OpenCV與OpenGL

(1)匯入OpenCV(請參考前面段落2的Helloworld)

(2)10行GLUT程式，並加入OpenCV的Helloworld裡的程式[HelloWorld 程式碼]

(3)執行小慶祝~

(4) 開始貼圖

Quick start > 改寫 [ 小葉程式碼 ]

1.改myInit()裡的

id = myTexture("image.png");

裡面 image.png 改成你在freeglut\bin裡面放的圖片位置

> 裡面的myTexture()函式，是在處理貼圖的程式

參數：檔案的名子

IplImage的ipl就是前面提到的 Intel Performance Library

程式碼就改寫自小葉程式碼 11~17行 及 貼圖檔名

glPushMatrix();///利用matrix可以轉

//glRotatef(0, 1,0,0);

glRotatef(angle, 0,1,0);///自動轉很帥

///gluQuadricTexture(quad, 1);

glutSolidTeapot( 0.5 );

///gluSphere(quad, 1, 30, 30);///glutSolidTeapot(0.3);

glPopMatrix();///

地球會轉，很帥XDDD。茶壺會轉，也很帥XDDD

glm (OpenGL Mathematics)，其實就是一個數學的函式庫

學渣的奮鬥史-7

原來是可愛貓貓阿，我還以為是黑洞呢



分隔線
------------------------------------------------------------------------------------------------------
以下正文

今天的主題是「貼圖」

照慣例的要從老師給的網址

[http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/]

下載3個東西

[win32][glut32.dll][data]

下載OpenCV 2.1.0 的檔案

選第一個網頁中名子最長的exe檔

以下附上連結

[https://sourceforge.net/projects/opencvlibrary/files/opencv-win/2.1/OpenCV-2.1.0-win32-vs2008.exe/download]

安裝時要注意在選擇要勾選

[add opencv to the system PATH for all user]



以上選項

以下是主要程式碼

#include <opencv/highgui.h>

int main()

{
    IplImage*img=cvLoadImage("image.jpg");

    cvShowImage("opencv Window",img);

   cvWaitKey(0);

}

要在codeblock中設定opencv的bin以及include

方法如下

在專案上點擊右鍵

選擇Build Options

進入視窗後

在Search directories中設定Compiler

加入c:\opencv2.1\include

在Search directories中設定Linker

加入c:\opencv2.1\lib

在Linker settings中加入三個要素

cv210

cxcore210

highgui210

設定完成後

再去下載圖檔

名字要設定成image.jpg才能運行程式碼

接著，開第二個專案

這次使用glut的開發環境

要去下載transmissionzero下載

[https://www.transmissionzero.co.uk/files/software/development/GLUT/freeglut-MinGW.zip]

之後在設定環境開發時也需要像上面的專案一樣進行設定

之後就能跑出一張圖片跟一個茶壺的檔案

後來因為上課時間到了的關係

小葉老師有直接給我們完成品的程式碼

以下連結

[https://ppt.cc/fnjUhx]

下課ㄌ

大家ㄅㄅ



小葉老師的英文時間

texture---貼圖

coordinate---座標

謝謝_Week08

今日課程內容:

考試會考會考的:

glPushMatrix();//備份矩陣 10%

glTranslatef(x,y,z);//移動 10%

glRotatef(angle, x,y,z);//旋轉 10%

glScalef(x,y,z);//放大縮小 10%

glBegin(GL_POLYGON);//開始畫 10%

    glColor3r(r,g,b);色彩 10%

    glNormal3f(nx,ny,nz);//打光的法向量 10%

    glTexCoord2f(tx,ty);//貼圖的座標 10%

   ///gl

   ///  texture 貼圖

   ///    Coordinate 座標

   ///      2f

   ///glVertex3f(x,y,z);//頂點 10%

glEnd();//結束畫

glPopMatrix();//還原矩陣 10%

1.使用老師提供的網站(http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/)

1.先下載win32, data, glut32.dll,source 2.將win32, data解壓縮後將所有資料放入windows資料夾
2.開啟"Texture.exe"

3.角度是依據右手定則逆時鐘旋轉

2.開啟opencv2.1

1.到此網站下載open2.1(https://sourceforge.net/projects/opencvlibrary/)

安裝時點選c++

用codeblock開啟，點選貝殼圖示

2.打上程式碼

#include <opencv/highgui.h>

int main()

{

    IplImage * img=cvLoadImage("image.jpg");

    cvShowImage("opencv Window", img);

    cvWaitKey(0);

}

3.會出現幾個問題

1.到右邊點選右鍵點選"Build Options

 

2.設定好之後需更改圖片或是程式檔名，且將圖片放在程式儲存的資料夾內

\

執行畫面

3.利用glut開起貼圖

1.按照慣例開啟glut

2.程式碼

#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("earth.jpg");

    cvShowImage("another window",img);

    cvWaitKey(0);

    glutInit(&argc,argv);

    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);

    glutCreateWindow("week08 texture");

    glutDisplayFunc(display);

    glutMainLoop();

}

3.在glut中使用opencv210也須按照上面步驟解決問題

執行畫面

茶壺跟圖檔會分開顯示

4.更改程式碼使貼圖能旋轉

程式碼

#include <opencv/highgui.h> ///for cvLoadImage() #include <opencv/cv.h> ///for cvCvtColor() #include <GL/glut.h> ///3D glut #include <stdio.h> GLUquadric * quad; GLuint id; float angle=0; void display() { glEnable(GL_DEPTH_TEST); ///要啟動 Detph Test 深度值的測試,3D顯示才正確 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glPushMatrix();///自動轉很帥 glRotatef(90, 1,0,0); glRotatef(angle, 0,0,1);///自動轉很帥 gluQuadricTexture(quad, 1); gluSphere(quad, 1, 30, 30);///glutSolidTeapot(0.3); glPopMatrix();///自動轉很帥 glFlush(); } void timer(int t) { glutTimerFunc(20, timer, 0);/// 1000 msec 50fps:20msec angle+=1;///自動轉很帥 glutPostRedisplay(); } 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 myInit() { quad = gluNewQuadric(); id = myTexture("image.png"); } int main(int argc, char**argv) { glutInit(&argc, argv); glutCreateWindow("3D"); glutDisplayFunc(display); ///顯示 glutTimerFunc(0, timer, 0); myInit(); ///我的 init 初始化 把貼圖準備好 前面OpenCV 2行, 後面 OpenGL 9行 glutMainLoop(); }

執行畫面