Step1-1 利用課本範例,想要搞懂 translate 及 rotate 在不同順序的差別。
1.到 jsyeh.org/3dcg10 下載 win、data，解壓縮後將 data 放入 win 裡面
2.打開Transformation
glTranslatef (0.9,0,0) ---> glRotatef (角度,0,1,0)=>大小正常的車子轉動並往右邊移動
(由內而外)(邊自轉邊向右邊移動)
glRotate (角度,0,1,0) ---> glTranslatef (0.9,0,0)
=> 大小正常的車子移動到右方去旋轉
(由內而外)(公轉)
Step1-2 示範 OpenGL T-R-T 的效果, 網頁可以畫圖、可以旋轉、可以移動程式碼的順序。
1.到圖學OpenGL教學資源
2.按右下角 ToDraw 可以畫圖，並點程式碼可以調整程式碼的位置
3.myDrawObject(0) 可以畫一個圖案 (身體) / myDrawObject(1) 可以畫第二個圖案 (手臂)
4.按angle=再按空白鍵，會自動改變動畫
如果切換動畫時, 下面的手臂會很誇張的轉動
glPushMatrix();
glRotatef(angle, 0, 0, 1);
myDrawObject(1);
glPopMatrix();
下面的程式, 則是手臂與身體都會一起轉動
glPushMatrix();
glRotatef(angle, 0, 0, 1);
myDrawObject(1);//畫手臂
myDrawObject(0);//畫身體
glPopMatrix();
下面的程式, 身體會轉動, 手臂會留在原地
glPushMatrix();
myDrawObject(1);//畫手臂
glRotatef(angle, 0, 0, 1);
myDrawObject(0);//畫身體
glPopMatrix();
Step 2-1 剛剛的網頁, 繼續加新的功能 glTranslate() 目標是讓手臂正確揮手, 身體不要動。
我們先把手臂砍下來,把軸心放在世界轉盤的中心, 再把整個世界轉動, 得到長在肚臍的手臂在轉動。
最後在上面再加一行移動,把整個轉動的手搬到肩膀掛上去。
1. 把 glTranslatef() 那一行,點它,變紅色,便可以移動左邊的東西
2. 把一個 glTranslatef() 放在 Rotatef() 的下面、手臂的上面
3. 另一個 glTranslatef() 放在 Rotatef() 的上面
glPushMatrix();
myDrawObject(0);//畫身體
glRotatef(angle, 0, 0, 1); //這個旋轉,會轉下面整個東西
glTranslatef(-0.3, -0.19, 0);//往左下方移(讓軸心 放世界的中心)
myDrawObject(1);//畫手臂 (右上方)
glPopMatrix();
把最上面的T擺好、掛到身體的右上角
myDrawObject(0);//畫身體
glPushMatrix();
glTranslatef(0.29, 0.31, 0);//往右上方移(掛到身體的右上角)
glRotatef(angle, 0, 0, 1); //這個旋轉,會轉下面整個東西
glTranslatef(-0.3, -0.19, 0);//往左下方移(讓軸心 放世界的中心)
myDrawObject(1);//畫手臂 (右上方)
glPopMatrix();
Step2-2 講解下週的考試題目
會有一張照片 drawXXX()畫東西，但是直接旋轉時會發生悲劇
所以 (1) 用最下面的T，把旋轉中心放到正中心
(2) 轉動某個角度
(3) 最上面的T，把整個東西掛在對的位置
glPushMatrix();
glTranslatef(-0.5, -0.9, 0); //(3)最上面的T,把整個東西掛在對的位置
glRotatef(-45, 0,0,1); //(2)轉動某個角度
glTranslatef(-0.8, 0.9, 0); //(1)用最下面的T, 把旋轉中心放到正中心
drawHand();
glPopMatrix();
Step2-3 現在開始寫程式
使用剪貼的方式，把準備考試的筆記 T-R-T 加到 GLUT 10行程式碼的範例中
並配合上週的自動旋轉，等一下要把 glTranslatef() 裡面的值設定好
1. File-New-Project, GLUT專案, week12_TRT
2. 把 10行程式碼放到 " 之前的筆記 " / 把 T-R-T 的6行放到 " 今天的筆記 "
3. 再讓它會自動轉 float angle=0;
4. 配上 glRotatef(angle, 0,0,1);
5. 再 angle++
6. glutIdleFunc( display ); (上週的筆記)
#include <GL/glut.h>
float angle=0;
void display()
{
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
glPushMatrix();
///glTranslatef(0, 0, 0);
glRotatef( angle, 0, 0, 1);
///glTransaltef(0, 0, 0);
glutSolidTeapot( 0.2 );///想像它是手臂
glPopMatrix();
glutSwapBuffers();
angle++;
}
int main( int argc, char** argv )
{
glutInit( &argc, argv );
glutInitDisplayMode( GLUT_DOUBLE|GLUT_DEPTH );
glutCreateWindow("week12 TRT");
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
}
Step3-1 做出茶壼超人，有白色的身體，有紅色的小手臂，要利用T-R-T讓小手臂對任意軸轉動
#include <GL/glut.h>
float angle=0;
void display()
{
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
glColor3f(1,1,1);///白色
glutSolidTeapot( 0.3 );///茶壼當身體
glPushMatrix();
glTranslatef(0.2, 0, 0);///(3)掛到右邊 (把整個往右移動)
glRotatef( angle, 0, 0, 1);///(2)旋轉
glTranslatef(0.2, 0, 0); ///(1)把旋轉中心,放到世界中心
glColor3f(1,0,0);///紅色的
glutSolidTeapot( 0.2 );///小茶壼 想像它是手臂
glPopMatrix();
glutSwapBuffers();
angle++;
}
int main( int argc, char** argv )
{
glutInit( &argc, argv );
glutInitDisplayMode( GLUT_DOUBLE|GLUT_DEPTH );
glutCreateWindow("week12 TRT");
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
}
Step3-2 為了寫回家作業，老師開新的專案 week12_TRT_TRT ，裡面將會有上手臂、下手肘。
1. 要有 3D模型 (要有身體、要有上手臂、下手肘)
可以自己用Maya建出來，也可以用網路上找的模型再來裁切
2. 要用 TRT TRT 做出來
void display()
{
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
glColor3f(1,1,1);///白色
glutSolidTeapot( 0.3 );///茶壼當身體
glPushMatrix(); ///右邊的手臂、手肘
glTranslatef(0.2, 0, 0);///(3)掛到右邊 (把整個往右移動)
glRotatef( angle, 0, 0, 1);///(2)旋轉
glTranslatef(0.2, 0, 0); ///(1)把旋轉中心,放到世界中心
glColor3f(1,0,0);///紅色的
glutSolidTeapot( 0.2 );///小茶壼 想像它是手臂
glPushMatrix();
glTranslatef(0.2, 0, 0);///(3)掛到右邊 (把整個往右移動)
glRotatef( angle, 0, 0, 1);///(2)旋轉
glTranslatef(0.2, 0, 0); ///(1)把旋轉中心,放到世界中心
glColor3f(1,0,0);///紅色的
glutSolidTeapot( 0.2 );///小茶壼 想像它是手臂
glPopMatrix();
glPopMatrix();
glutSwapBuffers();
angle++;
}
Step3-3 如果右手臂、右手肘做出來, 其實複製後, 改一下正負號, 可以做出左手邊的手臂、手肘哦
glPushMatrix(); ///右邊的手臂、手肘
glTranslatef(0.2, 0, 0);///(3)掛到右邊 (把整個往右移動)
glRotatef( angle, 0, 0, 1);///(2)旋轉
glTranslatef(0.2, 0, 0); ///(1)把旋轉中心,放到世界中心
glColor3f(1,0,0);///紅色的
glutSolidTeapot( 0.2 );///小茶壼 想像它是手臂
glPushMatrix();
glTranslatef(0.2, 0, 0);///(3)掛到右邊 (把整個往右移動)
glRotatef( angle, 0, 0, 1);///(2)旋轉
glTranslatef(0.2, 0, 0); ///(1)把旋轉中心,放到世界中心
glColor3f(1,0,0);///紅色的
glutSolidTeapot( 0.2 );///小茶壼 想像它是手臂
glPopMatrix();
glPopMatrix();
glPushMatrix(); ///左邊的手臂、手肘
glTranslatef(-0.2, 0, 0);///(3)掛到右邊 (把整個往右移動)
glRotatef( -angle, 0, 0, 1);///(2)旋轉
glTranslatef(-0.2, 0, 0); ///(1)把旋轉中心,放到世界中心
glColor3f(1,0,0);///紅色的
glutSolidTeapot( 0.2 );///小茶壼 想像它是手臂
glPushMatrix();
glTranslatef(-0.2, 0, 0);///(3)掛到右邊 (把整個往右移動)
glRotatef( -angle, 0, 0, 1);///(2)旋轉
glTranslatef(-0.2, 0, 0); ///(1)把旋轉中心,放到世界中心
glColor3f(1,0,0);///紅色的
glutSolidTeapot( 0.2 );///小茶壼 想像它是手臂
glPopMatrix();
glPopMatrix();
Step3-4 複習Git指令，上傳到 GitHub
1. 安裝 Git for Windows，再開啟 Git Bash
2. 要會改變目錄(change directory)
ex: cd desktop 桌面(如果有人的電腦的桌面在奇怪的地方就會進不去)
3. 開啟現在的目錄
4. git clone https://github.com/jsyeh/2022graphics1 可以把在 GitHub 上面的雲端 clone 複製下來。
5. cd 2022graphics1 進入你的(倉庫)目錄 (黃色會說明你在哪裡)
6. git pull --->把雲端拉下來你的硬碟的倉庫
7. 開啟現在的目錄，就可以複製程式
8. git status --->看倉庫的狀況 (多了2個紅色的目錄)
9. git add --->把目錄中紅色的都加到git帳冊
10. git status --->看倉庫的狀況 (多了綠色的一堆東西)
11. 要 git commit -m "add week12" 確認 git帳冊
(不過,如果你之前沒有做過，那要 git config --global user.name jsyeh 還有 git config --global user.email jsyeh@mail.mcu.edu.tw 做第1次設定)
12. git push 推送上雲端
沒有留言:
張貼留言