2024電腦圖學 Computer Graphics
人智二甲
授課教師: 葉正聖 銘傳大學人工智慧應用學系
每週主題: 程式環境、點線面顏色、移動/旋轉/縮放與矩陣(Matrix)、階層性關節轉動(T-R-T)、做出機器人、打光、貼圖、glu/glut函式、鍵盤、滑鼠、計時器(timer)、讀入3D模型、粒子系統、聲音、特效、投影矩陣、攝影機與運鏡、機器人2.0、期末作品
2024年3月28日 星期四
Bai's-電腦圖學-Week06
week06
期中考題目
練習網址:jsyeh.org/gl/
1. glPushMatrix();//備份矩陣
2. glTranslatef(x,y,z);//移動
3. glRotatef(angle,x,y,z);//轉動
4. glScalef(x,y,z);//縮放
5. glBegin(GL_POLYGON);//開始畫
6. glColor3f(r,g,b);//色彩
7. glTexCoord2f(tx,ty);//貼圖座標
8. glNormal3f(nx,ny,nz);//打光的法向量
9. glVertex2f(x,y);//頂點
10. glEnd();//結束畫
11. glPopMatrix();//還原矩陣
先打開week06-0
複製其中兩段貼到06-1
weeeeeek06 電腦圖學
https://jsyeh.org/gl/
OpenGL圖學期中考-模擬練習
1. glPushMatrix();//備份 (得到10分)
2. glTranslatef(x,y,z);//移動 (得到10分)
3. glRotatef(angle,x,y,z);//轉動 (得到10分)
4. glScalef(x,y,z);//縮放 (得到10分)
5. glBegin(GL_POLYGON);//開始 (得到10分)
6.glColor3f(r,g,b);//色彩 (得到10分)
7. glTexCoord2f(tx,ty);//貼圖座標 (得到10分)
8. glNormal3f(nx,ny,nz);//打光的法向量 (得到10分)
9. glVertex2f(x,y);//頂點 (得到10分)
10. glEnd();//結束
11.glPopMatrix();//還原 (得到10分)
week06-0
BK Week06
# week06
## 期中考題目
題目在這裡:jsyeh.org/gl
## week06-0_sample
0. 下載 freeglut 至桌面, 並解壓縮, 更改 lib 中的檔名
1. File-New-project, GLUT專案, week06-0_sample
2. Ctrl+F "light"找下面的程式碼
```cpp
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 };
```
```cpp
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);
```
## week06-1_lighting
1. File-New-project, GLUT專案, week06-1_lighting
2. 複製11行程式碼
```cpp
#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("week06 lighting");
glutDisplayFunc(display);
glutMainLoop();
}
```
3. 把剛剛 week06-0_sample 複製的8行放在 int main(int argc, char*argv[]) 前面
4. 把 week06-1_lighting 複製的12+2行放在 glutMainLoop() 的前面
5. 出現一個黑黑的背光立體茶壺
1. File-New-project, GLUT專案, week06-3_glm_obj_model
2. 貼11行程式碼
03/28 Keyboard and Mouse
1.期中考題:jsyeh.org/gl
2.新增專案GLUTweek06-0_sample
找宣告、函示
"""宣告
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 };
"""
"""函示
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);
"""
3.week06-1_lighting
新增專案GLUT貼上11行程式碼
""
#include<GL/glut.h>
void display()
{
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
glutSolidTeapot(0.3);
glutSwapBuffers();
}
//這裡放打光的8行宣告
int main(int argc,char*argv[])
{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_DEPTH);
glutCreateWindow("week02_color_teapot");
glutDisplayFunc(display);
//這裡放打光的12+2行程式
glutMainLoop();
}
""
執行時是背光要改光線位置
改const GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };=>const GLfloat light_position[] = { 2.0f, 5.0f, -5.0f, 0.0f };
改const GLfloat light_diffuse[] = { 1.0f, 1.0f, 1.0f, 1.0f };=>const GLfloat light_diffuse[] = { 1.0f, 1.0f, 0.0f, 1.0f };4.https://jsyeh.org/3dcg10/下載soure data win32開Light Material
5.week06-2_lighting_glNormal3f
新增專案GLUT貼上week06-1_lighting,加上四邊形
6.week06-3_glm_obj_model新增專案GLUT,貼上11行,從soure.zip有3個程式檔transformation.c glm.h glm.c解壓縮
在專案設定把glm.h放到桌面\week06-3_glm_obj_model,把glm.c放到\week06-3_glm_obj_model,改檔名glm.cpp,在專案里案右鍵Add Files,加入glm.cpp,把data放到freeglut的bin
7.老師示範week06-411160933_week06
#期中考題https://jsyeh.org/gl/
1.open GLUT new file week06-0_sample
2.open GLUT new file week06-1_lighting
3.貼上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_RGB | GLUT_DOUBLE | GLUT_DEPTH);
glutCreateWindow("week06 lighting");
glutDisplayFunc(display);
glutMainLoop();
}
4.copy const
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 };
5.copy12+2line before main loop
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);
6.茶壺呈現昏暗 改light position 為-57.改diffuse 改變光的顏色8.https://jsyeh.org/3dcg10/
windows light material
data
9. open GLUT new file week06-2_lighting_glNormal3f
copy-1
10.加 float angle = 0;///轉動
glPushMatrix();
glRotatef(angle++, 0, 1, 0); ///y軸
glBegin(GL_POLYGON);
glNormal3f(0, 0, 1);
glVertex2f(-1,-1);
glVertex2f(+1,-1);
glVertex2f(+1,+1);
glVertex2f(-1,+1);
glEnd();
glPopMatrix();
glutIdleFunc(display)
11. open GLUT new file week06-3_glm_obj_model
copy 11lines
download source.zip open transformation glm.h glm.c in notepad
12.put glm.h in桌面\week06-3_glm_obj_model
put glm.c and rename as glm.cpp
13.add file glm.cpp
#include "glm.h"
GLMmodel * pmodel = NULL;
void
drawmodel(void)
{
if (!pmodel) {
pmodel = glmReadOBJ("data/Al.obj");
if (!pmodel) exit(0);
glmUnitize(pmodel);
glmFacetNormals(pmodel);
glmVertexNormals(pmodel, 90.0);
}
glmDraw(pmodel, GLM_SMOOTH | GLM_MATERIAL);
}
drawmodel();取代//glutSolidTeapot( 0.3 );
14.複製data到freeglut bin
15. week06-3_glm_obj_model_light_again 示範16.上傳github -3只留cpp h
電腦圖學week06
##期中考題目
1.期中考題jsyeh.org/gl/
2.模擬練習
#week06-0_smaple
0. 桌面安裝 freeglut,把 lib 的l ibfreeglut.a複製成 libglut32.a
1.File-New-Project ,Glut 專案week06-0_smaple
2.尋找兩大塊程式碼
```cpp
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 };
5.開Light Material
week06
期中模擬考題>可以在考試前多試一試
##第一個程式碼week06-0_sample
Ctrl-F搜尋light 有八行
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 };
MainLoop( )之前的2+12行的程式
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);
##week06-1_lighting
貼上GLUT 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("week056 lighting");
glutDisplayFunc(display);
///等等要放12+2行的程式
glutMainLoop();
}
加上上面的8行跟12+2的程式碼
茶壺會變得有光影
去老師的網站下載https://jsyeh.org/3dcg10/
source data win32
把source data 丟進window並開啟Light&Material
##week06-2_lighting_glNormal3f
把week06-1_lighting的程式拿來用
加上四邊形,有設定法向量
加上上面的程式茶壺就會開始轉動
##week06-3_glm_obj_model
複製11行程式碼
將source裡面的3個城市檔transformation.c glm.h glm.c解壓縮
要將專案做設定
把glm.h拉進桌面week06-3_glm_obj_model 目錄裡面
把glm.c拉進桌面week06-3_glm_obj_model 目錄裡面 並把黨名改成cpp
在專案裡面按右鍵Add Files 加入glm.cpp
要把data資料夾 放到桌面\freeglut\bin目錄裡面
用notepad++打開transformation.c 並搜尋glm
會有三個程式碼
1.
#include "glm.h"
2.
GLMmodel* pmodel = NULL;
3.
void
drawmodel(void)
{
if (!pmodel) {
pmodel = glmReadOBJ("data/porsche.obj");
if (!pmodel) exit(0);
glmUnitize(pmodel);
glmFacetNormals(pmodel);
glmVertexNormals(pmodel, 90.0);
}
glmDraw(pmodel, GLM_SMOOTH | GLM_MATERIAL);
}
##把今天的程式碼上傳到gitgub
把codeblicks關閉 並yes存檔
看檔案總管 只留
開啟github 今天的程式乾乾淨淨的上傳
-
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...
-
1. week16-0_sample (1)安裝freeglut (2)安裝opencv,重開CodeBlocks --> 詳細去看 魚鱗電腦圖學Week05-1 (3) 打開新專案,命名為: week1 6-0_sample 2. 下載課本範例☆゚.*・。 (1)進...


















