2022年4月26日 星期二

Kuo's Graphic_Note_Week10

Step 1 : Using CodeBlocks to set Background

    1-1. Coding


    1-2. Coding


    1-3. Build & Run

Final Code:

#include <GL/glut.h>
#include <opencv/highgui.h>
#include <opencv/cv.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_2C:\Users\vanes\Desktop\2022graphics\week10_texture_background\main.cppD, 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);
    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 ac,char**av){
    glutInit(&ac,av);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
    glutCreateWindow("week10 texture background");
    glutDisplayFunc(display);
    myTexture("earth.jpg");
    glutMainLoop();
}

Step 2 : Using CodeBlocks to Texture an Earth

    2-1. Coding


    2-2. Build & Run


    2-3. Coding


    2-4. Build & Run


   2-5. Coding


    2-6. Build & Run

Final Code:

#include <GL/glut.h>
#include <opencv/highgui.h>
#include <opencv/cv.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); ///gluSphere(sphere,半徑,縱切(經度分割),橫切)緯度分割_);
    glPopMatrix();
    glutSwapBuffers();
    angle++;
}
int main(int ac,char**av){
    glutInit(&ac,av);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
    glutCreateWindow("week10 texture earth");
    glutIdleFunc(display);
    glutDisplayFunc(display);
    myTexture("earth.jpg");
    sphere = gluNewQuadric();
    glEnable(GL_DEPTH_TEST);
    glutMainLoop();
}

Step 3 : Using CodeBlocks to Texture a Gundam

    3-1. Coding


    3-2. Build & Run


Final Code:

#include <GL/glut.h>
#include <opencv/highgui.h>
#include <opencv/cv.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);
    glPushMatrix();
        glRotatef(angle,0,1,0);
        if(pmodel==NULL){
            pmodel=glmReadOBJ("data/Gundam.obj");
            glmUnitize(pmodel);
            glmFacetNormals(pmodel);
            glmVertexNormals(pmodel,90);
        }
        glmDraw(pmodel,GLM_MATERIAL|GLM_TEXTURE);
    glPopMatrix();
    glutSwapBuffers();
    angle++;
}
int main(int ac,char**av){
    glutInit(&ac,av);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
    glutCreateWindow("week10 texture model");
    glutIdleFunc(display);
    glutDisplayFunc(display);
    myTexture("data/Diffuse.jpg");
    glEnable(GL_DEPTH_TEST);
    glutMainLoop();
}










於 沒有留言:
標籤： ,

2022年4月25日 星期一

CY.hsin week_10

1.地圖茶壺 

    #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("week09 texture");

        glutDisplayFunc(display);

        myTexture("earth.jpg");

        glutMainLoop();

    }

於 沒有留言:
標籤： ,

CY.hsin week_09

1. OpenCV

    #include <opencv/highgui.h>

        int main(){

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

    cvShowImage("week09", img); 

    cvWaitKey(0); 

    }

    [設定]

    step01:安裝OpenCV，重開CodeBlocks 

    step02:路徑File-New-EmptyFile，設定檔名

    step03:設定 Setting-Compiler Setting 

               Search directories 的 Compiler 要 Add C:\OpenCV2.1\include

               Search directories 的 Linker 要 Add C:\OpenCV2.1\lib

               Setting-Compiler Setting 裡面 Linker setting 輸入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;
}
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.png");

    glutMainLoop();
}
於 沒有留言:
標籤： ,

Hank Week10

HomeWork 1

Step 1：安裝freeglut & OpenCV 2.1.0

 Step 2：打開一個新 GLUT 專案

 Step 3：將上週的 mytexture.txt 裡面的 mytexture() 函式複製到新 GLUT 專案


 Step 4：將圖片載入出來

程式碼：

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

#include <opencv/cv.h>

#include <GL/glut.h>

int myTexture(char * filename)

{

    IplImage * img = cvLoadImage("anya.jpg"); ///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");


    glutDisplayFunc(display);

    myTexture("anya.jpg");

    glutMainLoop();

}

HomeWork 2

Step 1：修改程式碼,把圖片變成圓的


程式碼：

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

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


    glutDisplayFunc(display);

    myTexture("earthmap.jpg");

    sphere = gluNewQuadric();

    glutMainLoop();

}

HomeWork 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("3.jpg"); ///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);

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


    glutDisplayFunc(display);

    myTexture("3.jpg");

    sphere = gluNewQuadric();


    glutMainLoop();

}

HomeWork 4 把它改成會轉動的地球



程式碼：

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

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


    glutDisplayFunc(display);

    myTexture("01.jpg");

    sphere = gluNewQuadric();

    glEnable(GL_DEPTH_TEST);


    glutMainLoop();

}

於 沒有留言:
標籤： ,

黃昱瑋的筆記week10 轉吧轉吧七彩霓虹燈🌍🤖

1-1.裝freeglut(libglut32.a)、openCV2.1、File New Project GLUT專案，將上次專案程式碼放過來，
記得機檔案裝到(freeglut.bin裡)


1-2.在display()去掉茶壺加上 
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();
2-1.開新專案，複製之前那份
加入四行程式碼
GLUquadric * sphere=NULL;//一個指到二次曲面的指標

gluQuadricTexture(sphere,1);
gluSphere(sphere,1,30,30);

sphere=gluNewQuadric();
2-2增加四行程式碼使球體對x軸旋轉90度
    glPushMatrix();
    glRotatef(90,1,0,0);

    glPopMatrix();

    glEnable(GL_DEPTH_TEST);

2-3
對球體旋轉

float angle=0;

glRotatef(angle,0,-1,0);

angle++;//轉太快可以自己調

glutIdleFunc(display);


3-1
鋼蛋旋轉
用剛才的 earth 進行複製
先增加兩行程式碼
#include "glm.h"記得glm.cpp要add file加入
GLMmodel * pmodel=NULL;


再增加一些程式碼
    glPushMatrix();
        glRotatef(angle,0,1,0);
        if(pmodel==NULL){
            pmodel=glmReadOBJ("data/Gundam.obj");
            glmUnitize(pmodel);
            glmFacetNormals(pmodel);
            glmVertexNormals(pmodel,90);
        }
        glmDraw(pmodel,GLM_MATERIAL|GLM_TEXTURE);
    glPopMatrix();

    myTexture("data/Diffuse.jpg");
    glEnable(GL_DEPTH_TEST);
做完後記得改data/Diffuse.jpg的 檔案使其圖片垂直反轉才能將正確貼圖貼上




於 沒有留言:
標籤： ,

09360503_陳品睿 week10

 1.貼圖&四邊形

    1-1.new一個GLUT project
    
    1-2.貼上上週包括貼圖10行程式碼的程式(紅框處myTexture函式)
    
    1-3.把畫茶壺的程式改成畫四邊形(紅框處glutSolidTeapot( 0.3 )改掉)，注意(0,0)是圖片左上

2.貼圖&球形

    2-1.使用剛剛的程式碼，先宣告一個指向二次曲面的指標(紅框處)，建貼圖設定為半徑為1的              球形(綠框)，新增二次曲面(藍框)，GLU為介在GL及GLUT中間的函式

    2-2.Rotate把地球轉正，用陣列儲存旋轉角度，在mainLoop之前開啟GL深度測試，才會顯示              3D前後關係

    2-3.新增角度變數為float型別，讓他每次更新都++(如果覺得轉太快就+=0.5)，

3.貼圖&Gundam

    3-1.拉入老師給的glm函式，記得把glm.c的副檔名改成.cpp

    3-2.在freeglut/bin中放入myGundam.zip解壓出來的data

    3-3.記得在CodeBlocks專案中Add files...

    3-4.吃模型(obj檔)進來並把旋轉存入矩陣

    3-5.貼皮上去，如果位置不對可以用小畫家修正





於 沒有留言:
標籤： ,

Fei的筆記

 Week 10

1.Texture_background

Step 1. freeglut 安裝好完成前置作業

Step 2. 先去找圖把圖片存在freeglut(老師上課用軟體裡下載)-bin 裡面

Step 3. 完成程式 即會出現地球


#include <opencv/highgui.h>

#include <opencv/cv.h>

#include <GL/glut.h>

int myTexture(char * filename)

{

    IplImage * img = cvLoadImage(filename); ///OpenCV讀圖

    cvCvtColor(img,img,CV_BGR2RGB);///OpenCV轉色彩

    glEnable(GL_TEXTURE_2D);///開啟貼圖功能

    GLuint id;///產生Generate貼圖ID

    glGenTextures(1,&id);///綁定bin 貼圖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 myTexture()

{

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

    cvShowImage("img",img);

    cvWaitKey(0);

}

void display()

{

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);



    //glutSolidTeapot( 0.3 );

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

    glutMainLoop();

}



3.旋轉地球

#include <opencv/highgui.h>///使用OpenCV 2.1

#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轉色彩

    glEnable(GL_TEXTURE_2D);///開啟貼圖功能

    GLuint id;///產生Generate貼圖ID

    glGenTextures(1,&id);///綁定bin 貼圖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+=0.1;///angle++ 會轉太快 跟電腦效能有關

}


int main(int argc, char**argv)

{

    glutInit( &argc, argv );

    glutInitDisplayMode( GLUT_DOUBLE | GLUT_DEPTH );

    glutCreateWindow("week10 texture background");


    glutIdleFunc(display);

    glutDisplayFunc( display );

    myTexture("earthmap.jpg");

    sphere = gluNewQuadric();

    glEnable(GL_DEPTH_TEST);

    glutMainLoop();


}

3.旋轉鋼彈

Step 1.開新的Project GLUT 

Step 2.下載老師的myGundam.zip

Step 3.把myGundam裡的data放進freeglut\bin

Step 4.去下載source(https://jsyeh.org/3dcg10/)

Step 5.把source裡的 glm.h  glm.c(檔案總管要勾選附檔名/改成glm.cpp) 然後丟到桌面儲存好的專案裡


Step 6.把旋轉地球的程式貼到新建立的Project裡，然後把glm.cpp Add File


Step 7.完成程式碼，你就有會轉的鋼彈了喔




於 沒有留言:
標籤： ,

熱血小葉老師的圖學筆記 Week10

 

Week10

電腦圖學 Week09 2022-04-25

  1. 討論: 期中考成績、校長的信/累/快篩/缺貨/APP/降價
  2. 主題: 上週貼圖+貼到四邊形=背景
  3. 主題: 上週貼圖+貼到圓球=會轉的地球
  4. 主題: 上週貼圖+貼到模型=鋼彈模型

step01-0_上課前,講解期中考試的成績、校長的信、快篩相關資訊

step01-1 先做好設定

這節課的主題,是要將上週的貼圖+貼到四邊形,成為背景,所以先安裝 freeglut 及 OpenCV, 再把 myTexture.txt 的程式先貼進程式碼



  1. (在教室)安裝 freeglut (lib/libglut32.a)
  2. (在教室)安裝 OpenCV 2.1.0 vs2008 setup (Add PATH)
  3. (重開 CodeBlocks) File-New-Project, GLUT專案
  4. 把上週的 myTexture.txt 裡面有 myTexture() 做好設定
  5. OpenCV 設定: Setting-Compiler, search directories, Compiler加 C:\OpenCV2.1\include
  6. OpenCV 設定: Setting-Compiler, search directories, Linker加 C:\OpenCV2.1\lib
  7. OpenCV 設定: 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;
}

step01-2

接下來將 OpenCV 的設定設好,包括2個目錄、3段咒語, 程式碼除了 myTexture.txt 的程式外, 再貼上10行的程式。最後, 在 working_dir 工作目錄中 (目前是桌面的freeglut的bin裡) , 放好你的圖,便能看到上週的進度,也就是茶壼表面有地球的貼圖.zip

  1. 做好 OpenCV設定, 把我們的專案, 加上 10行程式
  2. 配合 工作目錄 working_dir (現在在你的桌面的freeglut的bin裡) 裡面放圖檔!!!
  3. 在 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();
}

step01-3

step01-3_這節課的目標,是要把貼圖+貼到四邊形, 變成背景。所以如果 step01-2 可以看到茶壼表面有貼圖, 便可以開始 glBegin(GL_POLYGON) 開始畫, glTexCoord2f(tx,ty) 及 glVertex2f(x,y) 重覆4次,表示四邊形竹旳4個頂點及對應的貼圖座標,最後 glEnd() 結束畫。其中的貼圖座標有點難理解。你要了解Windows 圖左上角0,0



  1. 加上 glBegin(GL_POLYGON);
  2. 加上 glTexCoord2f( tx, ty ); glVertex2f( x, y ); 寫4次
  3. 加上 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();
}

step02-1

想要貼到圓球上。BUT圓球的座標不太會用: cos(), sin() 圓球座標系統。 可以用 OpenGL User 函式來做到



step02-1_有貼圖能力, 想把貼到圓球,變成地球。程式碼有難度,先宣告一個 gluQuadric指標 sphere=NULL; 在 main() 的 glutMainLoop()之前 sphere=gluNewQuadric(); 新增一個二次曲面, 接下來 display()可用 gluQuadricTexture(sphere, 1); 建貼圖 gluSphere(sphere,1,30,30);

  1. OpenGL 的函式, ex. glVertex3f()
  2. OpenGL Utilities (GLU) 的函式, ex. gluSphere()
  3. OpenGL User Tookit (GLUT) 的函式, ex. glutSolidTeapot()

開始寫程式吧!!!!

  1. File-New-Project, GLUT專案, 存成 week10_texture_earth
  2. 宣告指標GLUquadric * sphere=NULL; 有個指標,要給gluSphere()用
  3. 在 main()裡, 將指標設好 sphere = gluNewQuadric();
  4. 在 display()裡, 加入 gluQuadricTexture(sphere, 1);
  5. 在 display()裡, 再加入 gluSpher(sphere, 1, 30, 30);

解釋一下 gluSphere()

  1. gluSphere( sphere, 半徑, 柳丁切經, 層層切緯);
  2. 老師都用 gluSphere(sphere, 1, 30, 30); 反正切一樣細就好

step02-2

step02-2_最後我們把地球轉正囉!! 利用期中考考過的 glPushMatrix()及glPopMatrix()裡面多一行 glRotatef(角度,1,0,0)就可以了。記得 glutMainLoop()之前,要glEnable(GL_DEPTH_TEST)開啟3D深度測試的功能,才會正確畫出3D的前後關係




//前面省略
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();
}

step03-1

讓地球可以轉動起來。我們利用 float angle=0; 有個變數會決定轉動的角度,一開始是0度。在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();
}

step03-2

把模型讀進來: 結合前一個實作的「會旋轉的地球」的程式碼, 再使用week08教過的程式碼,配合對應的貼圖即可。



  1. File-New-Project, GLUT專案, week10_texture_model
  2. 模型放哪裡? 工作執行的目錄 ex. (in C:\Users...\Desktop\freeglut\bin) 把老師的 myGundam.zip 的 data目錄,放進去
  3. 加入我們的程式, glm.h glm.c(改成glm.cpp) 放在你的專案 week10_texture_model 裡 下載自 jsyeh.org/3dcg10 的 source.zip 的 glm.h glm.c (改成 glm.cpp)
  4. 把 glm.cpp 加到專案裡Add Files...
  5. 把 week08 的程式貼過來
  6. 把 myTexture("earth.jpg") 改成 myTexture("data/Diffuse.jpg")
//前面 include glm.h, 宣告模型的指標
#include "glm.h"
GLMmodel * pmodel = NULL;
//中間讀入模型
    glPushMatrix();
        glRotatef(angle, 0,1,0);
        if( pmodel == NULL ){
            pmodel = glmReadOBJ("data/Gundam.obj");
            glmUnitize( pmodel );
            glmFacetNormals( pmodel );
            glmVertexNormals( pmodel, 90 );
        }
        glmDraw( pmodel, GLM_MATERIAL | GLM_TEXTURE);
    glPopMatrix();
//記得在 main() 裡面將貼圖讀進來
    myTexture("data/Diffuse.jpg");
於 沒有留言:
標籤： ,
訂閱： 意見 (Atom)