2024年4月11日 星期四

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

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

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

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

(3)解壓縮三個檔案☆ﾟ.*･｡

(4)點開data資料夾，找到al.mtl，點右鍵以Notepad++打開

##al.mtl 看到裡面 Ka Kd 對應打光的material☆ﾟ.*･｡

##al.mtl.obj 裡面很多內容

   - # 代表註解

   - 可以再引用另一個 mtl

   - v 代表頂點，後面則是頂點座標

   - f 代表面(face/facet)，後面則是頂點的編號

   - g 代表 group


2. week08-1_glm_gundam ~鋼彈~☆ﾟ.*･｡

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

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

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

(4)把 sourse.zip 裡面的 glm.h和glm.c放到桌面\week08-1_glm_gundam 裡，並把glm.c的附檔名改成.cpp☆ﾟ.*･｡

(5)在專案中右鍵新增glm.cpp☆ﾟ.*･｡

(6)在week08-1_glm_gundam裡，刪掉舊程式，新增11行程式

#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("week08");
    glutDisplayFunc(display);
    
    glutMainLoop();
}

(7)在專案目錄中新增一個data資料夾






(8)把兩個鋼彈模型放入data資料夾中



(9)去CodeBlocks按專案右鍵，進入Properties...



(10)Bulid Targets --> Execution working dir 把裡面的東西改成 . (清除歷史餘毒)




(11)去freeglut資料夾 --> bin --> 複製 freeglut.dll



(12)貼到專案目錄上



(13)貼上上禮拜的三段讀取模型的程式，並且把pmodel程式中的模型改成Gundam

#include <GL/glut.h>
#include "glm.h"
GLMmodel* pmodel = NULL;
void drawmodel(void)
{
    if (!pmodel) {
 pmodel = glmReadOBJ("data/Gundam.obj");
 if (!pmodel) exit(0);
 glmUnitize(pmodel);
 glmFacetNormals(pmodel);
 glmVertexNormals(pmodel, 90.0);
    }
    glmDraw(pmodel, GLM_SMOOTH | GLM_MATERIAL);
}
void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    drawmodel();///glutSolidTeapot(0.3);
    glutSwapBuffers();
}
int main(int argc, char*argv[])
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
    glutCreateWindow("week08");
    glutDisplayFunc(display);
    glutMainLoop();
}

(9)執行程式，鋼彈就出來了



3. week08-2_glm_gundam_opencv_texture ~鋼彈~☆ﾟ.*･｡

(1)安裝 OpenCV --> 詳細去看魚鱗電腦圖學Week05-1

(2)新增glut專案---> week08-2_glm_gundam_opencv_texture，並把上一個程式複製貼上進來☆ﾟ.*･｡

(3)把 gim.cpp、gim.h、freeglut.dll複製貼上至專案目錄中



(4)專案目錄中新增data資料夾，並把鋼彈模型和Diffuse.jpg放進去



(5)去CodeBlocks按專案右鍵，進入Properties... --> Bulid Targets --> Execution working dir 把裡面的東西改成 . (清除歷史餘毒)

(6)進入 https://gist.github.com/jsyeh/5ed01210559721ec71b659b3ffed2dd7 --> 複製MyTexture.cpp 的18行程式並貼在前面，並修改一下

#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); 
    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 "glm.h"
GLMmodel* pmodel = NULL;
void drawmodel(void)
{
    if (!pmodel) {
pmodel = glmReadOBJ("data/Gundam.obj");
 if (!pmodel) exit(0);
 glmUnitize(pmodel);
 glmFacetNormals(pmodel);
 glmVertexNormals(pmodel, 90.0);
    }
    glmDraw(pmodel, GLM_SMOOTH | GLM_MATERIAL| GLM_TEXTURE);
}
void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    drawmodel();///glutSolidTeapot(0.3);
    glutSwapBuffers();
}
int main(int argc, char*argv[])
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
    glutCreateWindow("week08");
    glutDisplayFunc(display);
    myTexture("data/Diffuse.jpg");
    glutMainLoop();
}

(7)重啟CodeBlocks --> 進入CodeBlocks --> Settings --> Compiler

    (7-1)Compiler 的 include 目錄

    (7-2)Linker 的 lib 目錄

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

(8)執行程式，有顏色的鋼彈就出來了


4. week08-3_glm_gundam_opencv_texture_lighting ~鋼彈~☆ﾟ.*･｡

(1)新增glut專案---> week08-3_glm_gundam_opencv_texture_lighting，並把上一個程式複製貼上進來☆ﾟ.*･｡

(2)把上一個程式的專案目錄中 data資料夾、glm.cpp、glm.h、freeglut.dll複製進這個專案目錄，並在CodeBlocks中新增glm.cpp

(3)去CodeBlocks按專案右鍵，進入Properties... --> Bulid Targets --> Execution working dir 把裡面的東西改成 . (清除歷史餘毒)


(4)加入12+2行函數、打光程式和轉動的程式

///先把 week08-1_glm_gundam 的程式貼上來
///等一下, 要再加貼圖的 18行程式
#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); 
    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 "glm.h"
GLMmodel * pmodel = NULL;
void drawmodel(void)
{
    if (!pmodel) {
pmodel = glmReadOBJ("data/Gundam.obj");
 if (!pmodel) exit(0);
 glmUnitize(pmodel);
 glmFacetNormals(pmodel);
 glmVertexNormals(pmodel, 90.0);
    }
    glmDraw(pmodel, GLM_SMOOTH | GLM_TEXTURE);
}
float angle = 0; ///加這行, 讓它轉動
void display()
{
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    glPushMatrix(); ///加這行, 讓它轉動
        glRotatef(angle++, 0, 1, 0); ///加這行, 讓它轉動
        drawmodel(); //glutSolidTeapot( 0.3 );
    glPopMatrix(); ///加這行, 讓它轉動
    glutSwapBuffers();
}
const GLfloat light_ambient[]  = { 0.0f, 0.0f, 0.0f, 1.0f };
const GLfloat light_diffuse[]  = { 1.0f, 1.0f, 1.0f, 1.0f };
const GLfloat light_specular[] = { 1.0f, 1.0f, 1.0f, 1.0f };
const GLfloat light_position[] = { 2.0f, 5.0f, -5.0f, 0.0f };///加這行, 讓它轉動
const GLfloat mat_ambient[]    = { 0.7f, 0.7f, 0.7f, 1.0f };
const GLfloat mat_diffuse[]    = { 0.8f, 0.8f, 0.8f, 1.0f };
const GLfloat mat_specular[]   = { 1.0f, 1.0f, 1.0f, 1.0f };
const GLfloat high_shininess[] = { 100.0f };
int main(int argc, char*argv[])
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
    glutCreateWindow("week08 Gundam");
    glutDisplayFunc(display);
    glutIdleFunc(display); ///加這行, 讓它轉動
    myTexture("data/Diffuse.jpg");
    glEnable(GL_DEPTH_TEST);
    glDepthFunc(GL_LESS);
    glEnable(GL_LIGHT0);
    glEnable(GL_NORMALIZE);
    glEnable(GL_COLOR_MATERIAL);
    glEnable(GL_LIGHTING);
    glLightfv(GL_LIGHT0, GL_AMBIENT,  light_ambient);
    glLightfv(GL_LIGHT0, GL_DIFFUSE,  light_diffuse);
    glLightfv(GL_LIGHT0, GL_SPECULAR, light_specular);
    glLightfv(GL_LIGHT0, GL_POSITION, light_position);
    glMaterialfv(GL_FRONT, GL_AMBIENT,   mat_ambient);
    glMaterialfv(GL_FRONT, GL_DIFFUSE,   mat_diffuse);
    glMaterialfv(GL_FRONT, GL_SPECULAR,  mat_specular);
    glMaterialfv(GL_FRONT, GL_SHININESS, high_shininess);
    glutMainLoop();
}

(5)執行程式，就能得到旋轉的立體鋼彈了

5. 上傳Github



於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)
  • 超級有用的電腦圖學筆記 Week01
     1.今天加入一個Blogger  2.創立一個自己的品牌  3.每周一篇,標籤(學號姓名,WeekXX)  4.第二節學到如何放圖片  5.老師教我們許多截圖法  6.實際在WebGL Water操作3D的球 (https://madebyevan.com/webgl-wate...
  • 吟霖根本我婆
    week16-1_sample_gluLookAt 在resize()函式 加入gluLookAt() 2想再按按鍵時看不同位置 if(key=='?') week16-2_glut_glutReshapeFunc_gluPerspective_gluLookAt...
  • 魚鱗☆ﾟ.*･｡電腦圖學 Week16
      1. week16-0_sample (1)安裝freeglut (2)安裝opencv，重開CodeBlocks  --> 詳細去看 魚鱗電腦圖學Week05-1 (3) 打開新專案，命名為： week1 6-0_sample 2. 下載課本範例☆ﾟ.*･｡ (1)進...