1.使用oCam錄製影片
2.並將影片上傳至youtube
期末作品展示:
http://www.youtube.com/watch?v=_k-F4Hl6nmY
2013 電腦圖學 Computer Graphics
授課教師: 葉正聖
銘傳大學資訊傳播工程系
每週主題: 程式環境、點線面顏色、移動/旋轉/縮放與矩陣(Matrix)、階層性關節轉動(T-R-T)、做出機器人、打光、貼圖、glu/glut函式、鍵盤、滑鼠、計時器(timer)、讀入3D模型、粒子系統、聲音、特效、投影矩陣、攝影機與運鏡、機器人2.0、期末作品
2013年6月16日 星期日
2013年6月7日 星期五
第16週課堂
T-R-T觀念講解
鍵盤控制多關節
用Maya將模型取消Combine再輸出成obj檔案,並掛載進程式碼中,
身體部份得存成諸多obj檔案並分批掛載進去程式碼
多關節程式範例
FILE *fout=NULL;
FILE *fin=NULL;
void keyboard(unsigned char key, int x, int y)
{
if(key=='0') index=0;
else if(key=='1') index=1;
else if(key=='2') index=2;
else if(key=='3') index=3;
else if(key=='4') index=4;
else if(key=='5') index=5;
if(key=='a') rot[index]++;
else if(key=='A') rot[index]--;
if(key=='s'){
if(fout==NULL) fout=fopen("motion.txt", "w+");
for(int i=0;i<10;i++){
fprintf(fout, "%.1f\t", rot[i]);
}
fprintf(fout, "\n");
}
if(key=='r'){
if(fin==NULL) fin=fopen("motion.txt", "r");
for(int i=0;i<10;i++){
fscanf(fin, "%f", &rot[i]);
printf("%f ",rot[i]);
}
}
for(int i=0;i<10;i++){
printf("%.1f\t",rot[i]);
}
printf("\n");
glutPostRedisplay();
}
可以做內插的程式碼
float rotOld[10]={0,0,0,0,0,0,0,0,0,0};
float rotNew[10]={0,0,0,0,0,0,0,0,0,0};
FILE *fout=NULL;
FILE *fin=NULL;
void player(int t){
if(t%50==0){
for(int i=0;i<10;i++){
rotOld[i]=rotNew[i];
fscanf(fin, "%f", &rotNew[i]);
printf("%f ",rotNew[i]);
}
}
float a= (t%50)*0.02;
for(int i=0;i<10;i++){
rot[i]=rotNew[i]*a + rotOld[i]*(1-a);
}
glutTimerFunc(20, player, t+1);
glutPostRedisplay();
}
void keyboard(unsigned char key, int x, int y)
{
if(key=='0') index=0;
else if(key=='1') index=1;
else if(key=='2') index=2;
else if(key=='3') index=3;
else if(key=='4') index=4;
else if(key=='5') index=5;
if(key=='a') rot[index]++;
else if(key=='A') rot[index]--;
if(key=='s'){
if(fout==NULL) fout=fopen("motion.txt", "w+");
for(int i=0;i<10;i++){
fprintf(fout, "%.1f\t", rot[i]);
}
fprintf(fout, "\n");
}
if(key=='r'){
if(fin==NULL) fin=fopen("motion.txt", "r");
for(int i=0;i<10;i++){
fscanf(fin, "%f", &rot[i]);
printf("%f ",rot[i]);
}
}
if(key=='p'){
if(fin==NULL) fin=fopen("motion.txt", "r");
for(int i=0;i<10;i++){
fscanf(fin, "%f", &rotNew[i]);
printf("%f ",rotNew[i]);
}
glutTimerFunc(100, player, 0);
}
for(int i=0;i<10;i++){
printf("%.1f\t",rot[i]);
}
printf("\n");
glutPostRedisplay();
}
2013年5月24日 星期五
2013年5月17日 星期五
2013年5月3日 星期五
2013年4月26日 星期五
第十週上課內容
1. 下載 官方範例 http://jsyeh.org/3dcg10
1.1. source.zip
1.2. data.zip
1.3. windows.zip
1.4. glut32.dll
1.5. (A) 跑 Transofrmation 範例, 跑 Material 範例 (右鍵換不同的模型檔)
1.6. (B) 將 data目錄 Al.mtl 及 Al.obj 檔案,按右鍵,選notepad++ 看一下檔案內容
2. 我們想要把官方的範例,自己用 source code 建出來
2.1. Dev C++, 安裝 glut的DevPak 小盒子 (在課程FB裡面)
2.2. Tool-Editor設定,第三個打開(Tab),第四個關掉
2.3. File-New-Project, MultiMedia, glut, 記得另外存在你的(00160011目錄)中哦!
2.4. 把 1.1 下載的 source.zip 裡面,看到很特別/落單的 glm.c 及 glm.h, 放到你的目錄中
2.5. 再把 source.zip 裡面的 transformation.c 也放在你的目錄中
2.6. 在 Dev C++ 的專案裡面,把 2.4 的 glm.c 及 2.5的 transformation.c 都Add新增到你的專案中
2.7. F9執行, 你成功把官方範例,自己由 source code 建出來了
回家作業: 請你用 Maya 做出一個有三角化的模式,匯出 OBJ檔,然後在你的程式中畫出來
http://thefree3dmodels.com/stuff/characters/iron_man/14-1-0-365
http://thefree3dmodels.com/stuff/characters/superman/14-1-0-387
http://en.wikipedia.org/wiki/Autodesk_Maya
1.1. source.zip
1.2. data.zip
1.3. windows.zip
1.4. glut32.dll
1.5. (A) 跑 Transofrmation 範例, 跑 Material 範例 (右鍵換不同的模型檔)
1.6. (B) 將 data目錄 Al.mtl 及 Al.obj 檔案,按右鍵,選notepad++ 看一下檔案內容
2. 我們想要把官方的範例,自己用 source code 建出來
2.1. Dev C++, 安裝 glut的DevPak 小盒子 (在課程FB裡面)
2.2. Tool-Editor設定,第三個打開(Tab),第四個關掉
2.3. File-New-Project, MultiMedia, glut, 記得另外存在你的(00160011目錄)中哦!
2.4. 把 1.1 下載的 source.zip 裡面,看到很特別/落單的 glm.c 及 glm.h, 放到你的目錄中
2.5. 再把 source.zip 裡面的 transformation.c 也放在你的目錄中
2.6. 在 Dev C++ 的專案裡面,把 2.4 的 glm.c 及 2.5的 transformation.c 都Add新增到你的專案中
2.7. F9執行, 你成功把官方範例,自己由 source code 建出來了
3. 我們把我們自己的程式寫出來, 要讀 OBJ檔型的三個步驟
3.1. 宣告 #include "glm.h" (記得在2.4裡把 glm.h 及glm.c 放在你的目錄中)
3.1. 宣告 GLMmodel * pmodel;//一個指標,指到3D OBJ model, 指標不熟沒關係,先會用,用久了就熟了
3.1. 宣告 GLMmodel * pmodel;//一個指標,指到3D OBJ model, 指標不熟沒關係,先會用,用久了就熟了
3.2. 設定 glmReadOBJ("檔名");//把 OBJ檔讀進來
3.2. 設定 glmUnitize(pmodel); //把原來可能很大的模型,縮放到 0~1中間的單位大小(Unit)
3.2. 設定 glmFacetNormals(pmodel);//計算 "小面" 的法向量,以後可以打光
3.2. 設定 glmVertexNormals(pmodel, 90.0);//計算 "頂點" 的法向量,以後可以打光
3.3. 使用 glmDraw(pmodel, GLM_SMOOTH | GLM_MATERIAL);//在display裡面,把它畫出來
3.4. 照下面的圖片裡的簡單程式,完成後按F9執行,即可跑出來 (老師就是故意用圖放程式,不給你程式碼剪貼,讓你練習打程式碼, 啦啦啦! )
3.4. 照下面的圖片裡的簡單程式,完成後按F9執行,即可跑出來 (老師就是故意用圖放程式,不給你程式碼剪貼,讓你練習打程式碼, 啦啦啦! )
4. 有同學有問題, 老師發現4種可能
4.1. 把 Al.obj 打成 A1.obj 或是 AI.obj (英文字母小寫L,數字1,大寫I)
4.2. 目錄的斜線slash / 及反斜線backslash \ 的差別 (說一下 1973年C/UNIX的故事)(vs. BillGate)
4.3.
4.4.
5. 老師把有打光的範例程式放在臉書哦!
http://www.facebook.com/groups/2013graphics/450219138396400/
你們可以下載, 完成下面的課堂作業
課堂作業: 請去網路上找到 3D模型(OBJ)檔,試著畫出來,上傳你的圖
(可以使用 網路 + 3D Exploration 來幫助你轉 3D Model 檔)
(google: 3D exploration download, 記得要加download 這個詞哦)
4.1. 把 Al.obj 打成 A1.obj 或是 AI.obj (英文字母小寫L,數字1,大寫I)
4.2. 目錄的斜線slash / 及反斜線backslash \ 的差別 (說一下 1973年C/UNIX的故事)(vs. BillGate)
4.3.
4.4.
5. 老師把有打光的範例程式放在臉書哦!
http://www.facebook.com/groups/2013graphics/450219138396400/
你們可以下載, 完成下面的課堂作業
課堂作業: 請去網路上找到 3D模型(OBJ)檔,試著畫出來,上傳你的圖
(可以使用 網路 + 3D Exploration 來幫助你轉 3D Model 檔)
(google: 3D exploration download, 記得要加download 這個詞哦)
http://thefree3dmodels.com/stuff/characters/iron_man/14-1-0-365
http://thefree3dmodels.com/stuff/characters/superman/14-1-0-387
http://en.wikipedia.org/wiki/Autodesk_Maya
2013年4月12日 星期五
第八周上課內容
https://docs.google.com/file/d/0ByYbu0zjxrp1THkybHVJbGFaTGs/edit?usp=sharing
先下載你們需要的 葉正聖老師上課軟體.zip
裡面有兩個重要的紙盒子 (可以給 Dev C++ 用的 DevPak 檔)
1. Dev C++ 裝兩個紙盒子 (opencv1.0.DevPak, glut_3.7.6.DevPak)
1.1. 將 Dev C++ 的 Tool-Editor設定,將第3個打開(TAB)第4個關掉 (這樣你的程式排版才會正確)
2. Dev C++ 裡, File-New-Project 選 MultiMedia 的 glut 專案
2.1. 在桌面上新增一個 00160011_hw8 的目錄,把你的程式存在這個目錄中
3. Alt-P 專案屬性, 設定參數Link咒語
3.1. GLUT咒語: -lglut32 -lopengl32 -lglu32 -lgdi32 -lwinmm
3.2. OpenCV咒語: -lcv -lcxcore -lhighgui
(3.3. 賈院長課程中用 OpenCV 2.1 的咒語則是 -lcv210 -lcxcore210 -lhighgui210)
4. 將所有的東西都放在同一個目錄中:
4.1. 準備貼圖所需素材 (EarthMapColor.jpg), 放在程式的目錄中
4.2. 將 C:\Dev-CPP\bin\opencv\*.dll 檔案全部放在你的目錄中 (這樣才能執行OpenCV程式)
5. 最簡單的 OpenCV 程式
先下載你們需要的 葉正聖老師上課軟體.zip
裡面有兩個重要的紙盒子 (可以給 Dev C++ 用的 DevPak 檔)
1. Dev C++ 裝兩個紙盒子 (opencv1.0.DevPak, glut_3.7.6.DevPak)
1.1. 將 Dev C++ 的 Tool-Editor設定,將第3個打開(TAB)第4個關掉 (這樣你的程式排版才會正確)
2. Dev C++ 裡, File-New-Project 選 MultiMedia 的 glut 專案
2.1. 在桌面上新增一個 00160011_hw8 的目錄,把你的程式存在這個目錄中
3. Alt-P 專案屬性, 設定參數Link咒語
3.1. GLUT咒語: -lglut32 -lopengl32 -lglu32 -lgdi32 -lwinmm
3.2. OpenCV咒語: -lcv -lcxcore -lhighgui
(3.3. 賈院長課程中用 OpenCV 2.1 的咒語則是 -lcv210 -lcxcore210 -lhighgui210)
4. 將所有的東西都放在同一個目錄中:
4.1. 準備貼圖所需素材 (EarthMapColor.jpg), 放在程式的目錄中
4.2. 將 C:\Dev-CPP\bin\opencv\*.dll 檔案全部放在你的目錄中 (這樣才能執行OpenCV程式)
5. 最簡單的 OpenCV 程式
6. 我們來拿最簡單的貼圖範例來看看吧
6.1. http://cloudhd.mcu.edu.tw 帳號: share_gl 密碼: share_gl
6.2. 下載 simple_texture.zip
7. 試著做自己的貼圖及茶壼
8. 試著做會轉的地球
2013年3月29日 星期五
2013年3月22日 星期五
第五週上課內容
第五週上課內容:
1. 今天綜合實作-機器貓
2. 一步步練習
3. 加打光、加Keyboard
TODO: 今天目標: 3D會動、打光的Doraemon, 用鍵盤幫忙,組合出來
1. Dev C++, Tool-Editor設定, 第3個打開(Tab),第4個關掉(SmartTab)
2. 在 FB 社團,有檔案 GLUT 3.7.6 DevPak 紙盒, 下載/安裝
3. File-New-Project, 選 MultiMedia-glut專案 (要拿它的設定及打光程式碼來用)
4. 先有藍色 glColor3ub(8,3,253)的圓球 glutSolidSpher(0.8, 40, 40); (即半徑, 橫精細度,直精細度)
可參考FB/Blog裡的圖,做課堂練習
5. 打光的球 (Copy複製範例專案), 全部複製得來的
5.1. Ctrl-F 找 light 這個關鍵字, 找到宣告 lighting 相關陣列的2段
5.1.1. const GLfloat light_ambient[] = {...} 等陣列宣告,4行為一段
5.1.2. const GLfloat material_ambient[] = {...} 等陣列宣告, 4行為一段
5.2. Ctrl-F 找 light 這個關鍵字, 找到設定 lighting 的函式2段
5.2.1. glEnable(...) 等函式,多行為一段
5.2.2. glLightfv(...) 等函式,多行為一段
5.2.3. glMaterialfv(...) 等函式,多行為一段
6. 利用 keyboard 把最適當的角度計算出來
6.1. glutKeyboardFunc(keyboard)
1. Dev C++, Tool-Editor設定, 第3個打開(Tab),第4個關掉(SmartTab)
2. 在 FB 社團,有檔案 GLUT 3.7.6 DevPak 紙盒, 下載/安裝
3. File-New-Project, 選 MultiMedia-glut專案 (要拿它的設定及打光程式碼來用)
4. 先有藍色 glColor3ub(8,3,253)的圓球 glutSolidSpher(0.8, 40, 40); (即半徑, 橫精細度,直精細度)
可參考FB/Blog裡的圖,做課堂練習
5. 打光的球 (Copy複製範例專案), 全部複製得來的
5.1. Ctrl-F 找 light 這個關鍵字, 找到宣告 lighting 相關陣列的2段
5.1.1. const GLfloat light_ambient[] = {...} 等陣列宣告,4行為一段
5.1.2. const GLfloat material_ambient[] = {...} 等陣列宣告, 4行為一段
5.2. Ctrl-F 找 light 這個關鍵字, 找到設定 lighting 的函式2段
5.2.1. glEnable(...) 等函式,多行為一段
5.2.2. glLightfv(...) 等函式,多行為一段
5.2.3. glMaterialfv(...) 等函式,多行為一段
6. 利用 keyboard 把最適當的角度計算出來
6.1. glutKeyboardFunc(keyboard)
課堂練習1: TODO: 今天的小目標, 畫出一個藍色的圓
課堂練習2: TODO: 今天的小目標, 打光
課堂練習3: TODO: 把一個白色的球移到前面一點點
調出小黑視窗,可以查看鍵盤更改的數值
2013年3月15日 星期五
第四週上課內容
第4週上課進度:
1. Demo Winscape 系統, 並介紹助教TA
2. 再教旋轉、移動、矩陣
3. 理論: 轉動-移動-車 vs. 移動-轉動-車
4. T-R-T
TODO:
1. 下載 jsyeh.org/3dcg10
1.1. win32 解壓縮到桌面/windows/執行檔
1.2. data 解壓縮到桌面/windows/data/模型
1.3. glut32.dll 解壓縮到 桌面/windows/glut32.dll
2. 執行 Transformation.exe
2.1. 調整 glTranslatef( 往右移動的量, 0, 0);
2.2. 調整 glRotatef(角度, 0,1,0);
2.3. 調換上面兩行 (按s鍵, 或是在下面按右鍵選 Swap translate/rotate)
課堂練習一
(叮嚀: 使用 Dev C++ 時,記得 Tool-Editor設定,將第3個(Tab)打開,第4個(SmartTab)關掉)
課堂練習二
課堂練習三
回家作業:
2013年3月8日 星期五
第三周上課內容
1. 下載範例 http://jsyeh.org/3dcg10
1.1. win32 下載,解壓縮到 桌面/windows/執行檔
1.2. data 下載, 解壓縮到 桌面/windows/data/模型檔
1.3. glut32.dll 下載, 解壓縮到 桌面/windows/glut32.dll
2. 執行範例 Transformation.exe
2.1. 按綠色字,上下推動
2.2. 右上角方框,按右鍵,可挑選不同的3D模型
課堂練習一: 把圖做旋轉 (沒做 matrix 保護)

課堂練習二: 用 matrix 保護後, 做旋轉、移動、放大縮小
課堂練習三:
回家作業 Homework 03
基本分: 75分, 包含使用glBegin()&glEnd()畫圖形(哪一種都可以), glClearColor(),glClear(),glPushMatrix(),glPopMatrix(),glTranslatef(),glRotatef() 以上都"要"用到
加分:
程式碼中有包含glutKeyboardFunc()等就加分每使用其中一種就加5分(要有功能)
畫得很用心就再加分!
訂閱:
文章 (Atom)




































