2017電腦圖學 Computer Graphics 授課教師: 葉正聖 銘傳大學資訊傳播工程系 每週主題: 程式環境、點線面顏色、移動/旋轉/縮放與矩陣(Matrix)、階層性關節轉動(T-R-T)、做出機器人、打光、貼圖、glu/glut函式、鍵盤、滑鼠、計時器(timer)、讀入3D模型、粒子系統、聲音、特效、投影矩陣、攝影機與運鏡、機器人2.0、期末作品
2017年7月1日 星期六
2017年6月12日 星期一
2017年6月5日 星期一
2017年5月22日 星期一
2017年5月15日 星期一
Week 13 P.L 課堂筆記
One. TRT練習
Concept:
1. 先把旋轉軸移到中心
2. 以Z軸旋轉
3. 移到正確位置
glPushMatrix();
glTranslatef();
glRotatef();
glTranslatef();
drawSth();
glPopMatrix();
Two. 讀圖檔
Step 1. 下載opencv2.1
Step 2. 開啟codeblocks專案Console Application
Step 3. 打程式
Step 4. Add Directory
Three. 設定貼圖
2017年5月8日 星期一
Week 12 P.L 課堂筆記
One. 3D TRT轉動
1. 看作品
gluLookAt(eye X , eye Y , eye Z , center X , center Y , center Z);
2. 解壓縮老師檔案
Two. 投影矩陣
1. 理解 eye / centre / up
up:
Three. 攝影機運鏡
1. 加入perspective程式
Four. 會動機器人
glPushMatrix();
glTranslatef(); ///掛上去
glRotatef();///旋轉
glTranslatef();///定旋轉中心
/*畫手臂*/
glPopMatrix();
2017年5月1日 星期一
Week 11 P.L 課堂筆記
One. 組合出機器人
1. 下載安裝 3D exploration
2. 匯出OpenGL Sample App
File -> save as -> 選cpp OpenGL
3. 選Sample App
4.用codeblocks開啟
a. 新增OpenGL檔案
b.把專案main.cpp改成匯出的car.cpp
擷取後讀取檔案
program:
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
angle++;
glPushMatrix();///第一個大括號
glRotatef(angle, 0,1,0);
if (!pmodel) {
pmodel = glmReadOBJ("data/dolphins1.obj");
if (!pmodel) exit(0);
glmUnitize(pmodel);
glmFacetNormals(pmodel);
glmVertexNormals(pmodel, 90.0);
}
if (!pmode2) {
pmode2 = glmReadOBJ("data/dolphins2.obj");
if (!pmode2) exit(0);
glmUnitize(pmode2);
glmFacetNormals(pmode2);
glmVertexNormals(pmode2, 90.0);
}
glPushMatrix();///start
glTranslatef(-0.5,0,0);
glScalef(0.4,0.4,0.4);
glmDraw(pmodel, GLM_SMOOTH | GLM_MATERIAL);
glPopMatrix();///end
glPushMatrix();///start
glTranslatef(0.5,0,0);
glScalef(0.4,0.4,0.4);
glmDraw(pmode2, GLM_SMOOTH | GLM_MATERIAL);
glPopMatrix();///end
glPopMatrix();///結束大一個大括號
glutSwapBuffers();
2017年4月24日 星期一
Week 10 P.L 課堂筆記
One. 玩遊戲:射擊
Two. 聲音
加入聲音檔:
1. 新增project
2. copy Lesson 32.cpp 至 新的project
Three. 小鋼琴(利用鍵盤)
把音檔放在 (in C:\Users\user\Downloads\freeglut\bin)
Four. 加入音樂
Step 1. 放入CMP3_MCI.h到專案資料夾
Step 2. 加入程式
2017年4月17日 星期一
Week 9 P.L 課堂筆記
One. 模型
到 jsyeh.org/3dcg10 下載 source.zip / windows.zip / data.zip / glut32.dll
(1) 切換模型: 選喜歡的模型
(2) 開啟 soccerball.obj (Notepad++)
a. v開頭: vertex
b. vn開頭: vertex normal
c. vt開頭: vertex texture coordinate
d. f開頭: face
Two. 製作&匯出 3D obj檔
Three.
2017年4月10日 星期一
Week 8 P.L 課堂筆記
One. 練習考試
glPushMatrix(); //備份矩陣
glTranslatef(x,y,z); //移動
glRotatef(angle,x,y,z); //旋轉
glScalef(x,y,z); //放大縮小
glBegin(GL_POLYGON); //開始畫
glColor3f(r,g,b); //顏色
glVertex3f(x,y,z); //頂點
glNormal3f(nx,ny,nz); //打光法向量
glTexCoord3f(tx,ty); //貼圖座標
glEnd(); //結束
glPopMatrix(); //還原矩陣
Two. 旋轉
float angle=0;
static void display(void)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
angle++;
glPushMatrix();
glRotatef(angle,0,1,0);
glutSolidTeapot(0.3);
glPopMatrix();
///1
glPushMatrix();
glTranslatef(0,0.6,0);
glutSolidTeapot(0.3);
glPopMatrix();
///2
glPushMatrix();
glTranslatef(0,-0.6,0);
glutSolidTeapot(0.3);
glPopMatrix();
///3
glutSwapBuffers();
}
glPushMatrix(); //備份矩陣
glTranslatef(x,y,z); //移動
glRotatef(angle,x,y,z); //旋轉
glScalef(x,y,z); //放大縮小
glBegin(GL_POLYGON); //開始畫
glColor3f(r,g,b); //顏色
glVertex3f(x,y,z); //頂點
glNormal3f(nx,ny,nz); //打光法向量
glTexCoord3f(tx,ty); //貼圖座標
glEnd(); //結束
glPopMatrix(); //還原矩陣
Two. 旋轉
float angle=0;
static void display(void)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
angle++;
glPushMatrix();
glRotatef(angle,0,1,0);
glutSolidTeapot(0.3);
glPopMatrix();
///1
glPushMatrix();
glTranslatef(0,0.6,0);
glutSolidTeapot(0.3);
glPopMatrix();
///2
glPushMatrix();
glTranslatef(0,-0.6,0);
glutSolidTeapot(0.3);
glPopMatrix();
///3
glutSwapBuffers();
}
2017年3月27日 星期一
Week 4 P.L 課堂筆記
One. 架設GLUT架構 (Teapot) (review)
(1) 滑鼠動作
void mouse(int botton, int state, int x, int y)
{
printf("%d %d %d %d\n",botton,state,x,y);
}
(2) 換顏色
void mouse(int botton, int state, int x, int y)
{
printf("%d %d %d %d\n",botton,state,x,y);
glColor3f(x /500.0, 1, y / 500.0);
glutPostRedisplay();
}
2. glutMotionFunc(); ///可移動換顏色
void motion(int x, int y)
{
printf("%d %d\n",x,y);
glColor3f(x /500.0, 1, y / 500.0);
glutPostRedisplay();
}
Three. Shape
Using Sine & Cosine to draw a circle
void display()
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glBegin(GL_POLYGON);
for(float angle=0 ; angle < 3.141592 * 2 ; angle+=0.001){
glVertex2f(cos(angle),sin(angle));
}
glEnd();
glutSwapBuffers();
}
void mouse(int botton, int state, int x, int y)
{
printf("%d %d %d %d\n",botton,state,x,y);
}
void motion(int x, int y)
{
printf("%d %d\n",x,y);
glColor3f(x /500.0, 1, y / 500.0);
glutPostRedisplay();
}
Three. Shape
Using Sine & Cosine to draw a circle
void display()
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glBegin(GL_POLYGON);
for(float angle=0 ; angle < 3.141592 * 2 ; angle+=0.001){
glVertex2f(cos(angle),sin(angle));
}
glEnd();
glutSwapBuffers();
}
Week 5 P.L 課堂筆記
One. 移動 (Translate)
#include <GL/glut.h>
float mouseX=0 , mouseY=0;
void display(){
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glPushMatrix();///back up the Matrix.
glTranslatef(mouseX,mouseY,0);
glutSolidTeapot(0.3);
glPopMatrix();
glutSwapBuffers();
}
void motion(int x,int y)
{
mouseX = (x-150)/150.0;
mouseY = -(y-150)/150.0;
glutPostRedisplay();
}
int main(int argc, char **argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
glutCreateWindow("Rotate / Translate / Scale");
glutDisplayFunc(display);
//glutMouseFunc(mouse);
glutMotionFunc(motion);
glutMainLoop();
}
Week 6 P.L 課堂筆記
One. 旋轉 (Rotate)
1. Transformation sample:
旋轉使用左手安培定理
**大拇指為竹籤插進去,四隻手指為攝影機轉動方向。**
"glRotate4f( angle , x axis , y axis , z axis)"
2. 原地轉 v.s 路徑轉:
2017年3月6日 星期一
Week 3 P.L 課堂筆記
1. Review:
1.
2. 精簡化程式:
1.
2. 精簡化程式:
簡化後程式刪減成10行,輸出是空的,接下來新增一行 glutSolidTeapot(0.3);
一個茶壺
[Note]
- glutSwapBuffers(); 為交換
- glutSolidTeapot(0.3); 為畫茶壺
- int main(int argc, char *argv[]) ///兩個參數
- glutInit(&argc, argv); 為初始化
- glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH); double為兩倍,所以buffers
3. 換茶壺顏色
glColor3f(1,0,0); 換顏色
顏色裡面 (~ / 255.0) 要加 .0
4. Demo
site: http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/
extract 'zip'
move 'glut32.dll' to windows
move 'data' to 'windows'
5. Triangle GL
code:
glBegin(GL_TRIANGLES);
glColor3f(1,0,0);
glVertex3f(1,0,0);
glColor3f(0,1,0);
glVertex3f(0,1,0);
glColor3f(0,0,1);
glVertex3f(0,0,1);
訂閱:
文章 (Atom)






















































