2021年5月17日 星期一

阿米君の電腦圖學小筆記_Week13

 ☆本週內容☆

貼圖-茶壺貼上鋼彈圖及背景

(注意!!必須先下載好OpenCV2.1)
step01:下載好OpenCV2.1，找到圖片"Diffuse"鋼彈圖，自己找背景圖命名"bg"


step02:圖片拉入week13資料夾，把"freeglut.dull"也複製到資料夾




step03:打開week13專案檔的Notepad++更改路徑


step04:打開week13.cpd檔案的Notepad++更改路徑，按下確定


step05:成功讀出檔案

程式碼:
#include <opencv/highgui.h> ///使用 OpenCV 2.1 比較簡單, 只要用 High GUI 即可
#include <opencv/cv.h>
#include <GL/glut.h>

GLuint id1, id2; ///TODO:增加2個 貼圖ID
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);

    glBindTexture(GL_TEXTURE_2D, id1);
    glutSolidTeapot(0.3);

    glBindTexture(GL_TEXTURE_2D, id2);
    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();
    glutSwapBuffers();
}
int main(int argc, char** argv)
{
    glutInit( &argc, argv );
    glutInitDisplayMode( GLUT_DOUBLE | GLUT_DEPTH );
    glutCreateWindow(" Week13 ");
    glutDisplayFunc(display);

    id1 = myTexture("Diffuse.jpg");///放鋼彈的貼圖
    id2 = myTexture("bg.jpg");///背景
    glEnable(GL_DEPTH_TEST);
    glutMainLoop();
}





貼圖-出現鋼彈
step01:下載source資料夾解壓縮，把glm.c改成glm.cpp

step02:把glm.cpp和glm.h檔案放入week13資料夾

step03:打開week13專案檔，滑鼠右鍵點Add file把flm.cpp加入專案


step04:加入程式碼:1.使用指標、drawmodel1函式讀取鋼彈obj檔
                                 2.改參數glmDraw(....| GLM_TEXTURE);


step05:把gundam.obj檔加入專案資料夾


step06:成功讀出鋼彈影子

程式碼:
#include <opencv/highgui.h> ///使用 OpenCV 2.1 比較簡單, 只要用 High GUI 即可
#include <opencv/cv.h>
#include <GL/glut.h>
#include "glm.h"   ///使用外掛

GLMmodel*pmodel1=NULL;   ///glm模型指標

void drawmodel(void)    ///函式讀取鋼彈
{
    if(!pmodel1)
    {
        pmodel1=glmReadOBJ("Gundam.obj");
        if(!pmodel1)exit(0);
        glmUnitize(pmodel1);
        glmFacetNormals(pmodel1);
        glmVertexNormals(pmodel1, 90.0);
    }
    glmDraw(pmodel1,GLM_SMOOTH | GLM_TEXTURE);   ///參數
}

GLuint id1, id2; ///TODO:增加2個 貼圖ID
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);

    glBindTexture(GL_TEXTURE_2D, id1);     ///注意寫程式時的順序!
    drawmodel();
    glBindTexture(GL_TEXTURE_2D, id2);

       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();
    glutSwapBuffers();
}
int main(int argc, char** argv)
{
    glutInit( &argc, argv );
    glutInitDisplayMode( GLUT_DOUBLE | GLUT_DEPTH );
    glutCreateWindow(" Week13 ");
    glutDisplayFunc(display);

    id1 = myTexture("Diffuse.jpg");  ///放鋼彈的貼圖
    id2 = myTexture("bg.jpg");  ///背景
    glEnable(GL_DEPTH_TEST);
    glutMainLoop();
}


貼圖-準確地貼在鋼彈上

step01:"Diffuse"使用小畫家開啟

step02:根據程式的座標旋轉圖片，選擇"垂直翻轉"


step03:成功貼上


應用-試著讓鋼彈旋轉吧~



程式碼:
#include <opencv/highgui.h> ///使用 OpenCV 2.1 比較簡單, 只要用 High GUI 即可
#include <opencv/cv.h>
#include <GL/glut.h>
#include "glm.h"

GLMmodel*pmodel1=NULL;

void drawmodel(void)
{
    if(!pmodel1)
    {
        pmodel1=glmReadOBJ("Gundam.obj");
        if(!pmodel1)exit(0);
        glmUnitize(pmodel1);
        glmFacetNormals(pmodel1);
        glmVertexNormals(pmodel1, 90.0);
    }
    glmDraw(pmodel1,GLM_SMOOTH | GLM_TEXTURE);
}

GLuint id1, id2; ///TODO:增加2個 貼圖ID
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;  ///設定初始角度為0
void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glBindTexture(GL_TEXTURE_2D, id1);
    glPushMatrix();   ///開始畫鋼彈
        glRotatef(angle,0,1,0);   ///軸心旋轉
        drawmodel();
    glPopMatrix();

    glBindTexture(GL_TEXTURE_2D, id2);
    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();
    glutSwapBuffers();
    angle++;   ///角度不斷增加
}
int main(int argc, char** argv)
{
    glutInit( &argc, argv );
    glutInitDisplayMode( GLUT_DOUBLE | GLUT_DEPTH );
    glutCreateWindow(" Week13 ");
    glutDisplayFunc(display);
    glutIdleFunc(display);   ///有空就畫並++

    id1 = myTexture("Diffuse.jpg");
    id2 = myTexture("bg.jpg");
    glEnable(GL_DEPTH_TEST);
    glutMainLoop();
}



應用-會被背景切到?修正他!

修正辦法:
1.貼圖的Z值調整一下

2.更改"glDisable(GL_DEPTH_TEST);"使用時機
    先"不開"3D深度測試化背景，在"打開"3D深度測試畫模型



★多個OBJ模型,利用T-R-T做出關節轉動★
(以下使用個人模型)

成功畫出你的模組
注意!!模組必須使用Maya劃出模型後把分割部位存取"OBJ"'檔放到你的資料夾中

step01:嘗試讀入多個obj檔案

step02:自己畫時發現模組過大!! 使用"dimensions[ ]"及"glmScale();"調整長寬高

step03:使用"glmDraw();"畫出你的模組


轉動的可動關節

step01:畫出你的第一個手臂上關節，並把你想轉動的點置中，成功以中心點轉動



step02:確定成功之後，再寫一個"glTranslatef();"來放在你要的位置並正確轉動


step03:上關節成功了!輪到下關節，一樣的方法
(注意!確認位置之前要把上關節程式碼註解才不會偏移)


step04:發生問題!!軸心和位置發生偏移(劃出視窗外因此看不見)


why?:
你的模組在劃出時，下關節的數值連著上關節又讀取了一次，所以你必須把它"扣除/加回"放回原來位置(代表你下關節的中心點是上關節的位置，你必須把下關節中心點放回"原點"所以要把上關節的數值"扣除/加回"去)


step05:調整好模組數值位置，成功劃出下關節



最後，試著照同樣方式畫出你的模型 (模組貼皮還未完成~):
於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

Week18期末作業(橘貓的跳舞熊熊)

 期末作業(橘貓的跳舞熊熊) 影片: https://youtu.be/R89tptMaQZw 程式碼: #include <opencv/highgui.h> #include <opencv/cv.h> #include <GL/glut.h...

  • JOJO的電腦圖學_week08
     210412 week08 🔔❤️ 首先先來下載個openCV 記得這個步驟是選擇中間那一項 其他都是預設值即可 下載好長醬 開啟codeblocks＞Setting compiler... 打開長醬 點Search directories＞Compiler Add一個  C...
  • 哇珍妮佛羅培茲week06
     先去github抓上禮拜的畫畫程式碼 改成 他會變成你滑鼠靠近就會傾斜的樣子。 但我們可以再更簡化，並把藍色一條改成白色的方塊~ 大概會像這樣，依然可以用滑鼠旋轉他。 之後我想讓他變成長方形然後旋轉 只需要改兩三個地方(註解付在圖上了) 現在我要讓他多一隻手然後像關節那樣所以我...
  • Week_16 2021.06.07
    1. 複習上週程式碼 2. 用鍵盤控制 1.  開新專案  複製上週程式碼 2. 增加陣列  float angle[20]={} , diff = 2;    ///angle 都是 0的陣列 int angleID = 0;    ///計算現在是第幾個angle void ...