SY-BlingBangBang電腦圖學🎬-Week07

 1.下載課本的範例 https://jsyeh.org/3dcg10/ 👉 [source][data][win32]

    step1: 研究 data 目錄

    step2: 用Notepad++ 研究 soccerball.obg soccerball.mtl

    step3: 解壓縮 windows.zip 👉 下載\windows\Transformation.exe

    step4: 解壓縮 data.zip 👉 下載\windows\data\一堆模型檔

    step5: 啟動 Transformation.exe 右上角，可切換 3D 模型

2. 研究/分析今天的檔案

    step1: OBJ 裡，有3個重要的英文單字縮寫

              👉 v 代表 vertex 頂點

              👉 vn 代表 vertex normal 和打光相關的頂點法向量

              👉 f 代表 面 face (有人會拼成 facet 比較小的面)

              👉 解釋: 3dxMax 習慣叫 triangles 三角形，執行時，快又有效率

    step2: 在 Maya 等動畫軟體哩，習慣用 face (有三角形、四邊形、五邊形...)

              👉 # 代表註解，是給人看的，不是給電腦看的

              👉 其他: usemtl XXX 使用 materail XXX

              👉 其他: g XXX 代表 group XXX 分群組用的

              👉 其他: mtllib  Gandam.mtl 有另外一個案叫 Gandam.mtl 裡面有一堆 mtl

3. 研究 Gundam 的模型

    step1: Gundam.obj 現在要開啟這個檔案

              👉 Gandam.mtl

    step2: Diffuse.jpg 是主要的 materail 材質貼圖

              👉 AO.jpg 是另外一張貼圖，今天不用它

              👉 研究 Gundam.obj 裡面，有 v 頂點 vt 頂點貼圖座標 vn 頂點法向量(打光)

              👉 f 是 face 面，裡面有兩個斜線， v/vt/vn 標註 3個對應的參數

4. 

    step1: 下載 freeglut-MinGW-3.0.0-1.mp.zip 

    step2: 進到資料夾，把檔案 freeglut 拉到桌面

    step3: 點進 freeglut 👉 lib 資料夾

    step4: 複製 libfreeglut.a 並且改名為libglut32.a

    step5: 開啟code blocks

    step6: 再新開專案，week07-1_obj_gundam

              👉 準備檔案，從課本範例的 source

              👉 glm.h 放到專案目錄

              👉 glm.c 放到專案目錄，改名為 glm.cpp

              👉 到專案，在專案名稱上按右鍵，Add File 將glm.cpp 加入專案

              👉 將課本範例的 data 資料夾，複製到 freeglut/bin

    step7: 修程式碼(剪貼上週week06-3_glm_obj_model程式碼)

    step8: 因無法順利執行，需到檔案內容修改

              👉 專案名稱上按右鍵，選最下面的 Properties ，跳出視窗，選第2個 Build                           targets

              👉 把 Execution working dir 工作執行目錄，改成小數點"."

              👉 把 freeglut\bin\freeglut.dll 放到 week07-1_obj_gundam 的目錄

              👉 把 Gundam.obj 和 Gundam.mtl 放到 week07-1_obj_gundam 的目錄

    

    

    

    

    

5. 貼圖

    step1: 安裝 OpenCV-2.1，要加 PATH ，用預設目錄

    step2: 重開 CodeBlocks ，設定貼圖的3個設定 Settings-Compiler

    setp3: 在 Search directories 加入2個目錄

              Compiler 👉 C:\OpenCV2.1\include

              Linker 👉 C:\OpenCV2.1\lib

    step4: 在 Linker setting 裡，加入 👉 cv210

                                                   👉 cxcore210

                                                   👉 highgui210

    step5: 開新專案，專案名稱 "week07-2_obj_gundam_openca_texture"

    step6: 把 glm.cpp、glm.h、freeglut.dll、Gundam.obj、Gundam.mtl 放到專案目錄

    step7: 再把 Diffuse.jpg (老師提供的圖片) 也放進去

    註: 模仿 4. step6、8 的做法

    step8: 貼入 week07-1_obj_gundam 的程式碼

    step9: 加入 myTexture 應對的18行程式碼(在week05-2_texture_teapot_earth有)

              👉

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

}

    step10: 修改程式碼

                main 的 glutMainLoop(); 前👉 myTexture("Diffuse.jpg");

                drawmodel 👉 glmDraw(pmodel, GLM_SMOOTH |                                                  GLM_MATERIAL | GLM_TEXTURE);

                註: 要補 GLM_TEXTURE 貼圖功能，才會有貼圖