2024年3月28日 星期四

Bai's-電腦圖學-Week06

#week06

#week06-0_sample


0.freeglut安裝
1.不刪程式 找到程式碼 light

找到程式碼 有兩大塊:宣告,函式

(1)
``
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 };
``
(2)
``
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

貼上11行程式

執行時,因為茶壺為暗色(背光),所以要調整光線位置 psition

因光為黃色,所以茶壺為黃色,本身是白色,受燈光影響



#week06-2_lighting_glNormal3f




































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

調位置-5


旋轉多邊形的茶壺



製作3D圖形

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




week06-1 lighting




week06-2



week06-3








PC

 

打光
改變光線位置
改變光的顏色
整體旋轉
讀取data中的圖形
換一個讀取圖形






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. 出現一個黑黑的背光立體茶壺


6. 然後改橘色部分可以把背光用掉
    const GLfloat light_position[] = { 2.0f, 5.0f, -5.0f, 0.0f };


7.再改橘色部分會有黃光打在茶壺上


## week06-2_lighting_glNormal3f

1. File-New-project, GLUT專案, week06-2_lighting_glNormal3f

2. 把剛剛 week06-1_lighting 的程式碼拿來用

3.加上 四邊形, 有設定 法向量 (橘色部分)

```cpp

    float angle = 0; ///想讓東西轉動

    void display()

    {

         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();

    }

    int main(int argc, char*argv[])

    {
        glutIdleFunc(display);
    }

```


## week06-3_glm_obj_model

1. File-New-project, GLUT專案, week06-3_glm_obj_model

2. 貼11行程式碼

3. 從課本範例學習 source.zip 有3個程式檔: transformation.c    glm.h    gllm.c 解壓縮

4. 要將專案做設定
    
    a. 把 glm.h 放到 桌面\week06-3_glm_obj_model 目錄裡

    b. 把 glm.c 放到 桌面\week06-3_glm_obj_model 目錄裡, 改檔名 glm.cpp

    c. 在 CodeBlocks 的專案裡按右鍵 Add Files, 加入    

    d. 要把 data 資料夾, 放到 桌面\freeglut\bin 目錄裡

5. 用 Notepad++ 開啟 transformation.c 研究他的程式碼, 關鍵字 glm 找到程式碼

    a. #include "glm.h";

    b. GLMmodel* pmodel = NULL;

    c. drawmodel() 的函式

```cpp

    #include <GL/glut.h>

    #include "glm.h" ///5-a

    GLMmodel* pmodel = NULL; ///5-b

    void

    drawmodel(void) ///5-c

    {

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

    }

    void display()
    {
        drawmodel(); ///glutSolidTeapot(0.3);
    }

```

6. 只有黑白是因為 沒打光



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-4

11160933_week06

 #期中考題https://jsyeh.org/gl/


1.open GLUT new file week06-0_sample
for later copy

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 為-5


7.改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_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.貼上GLUT 11行程式碼
3.貼上 剛剛week06-0_smaple找到的程式碼

4.改const GLfloat light_position[] = { 2.0f, 5.0f, -5.0f, 0.0f };
5.可以調整光的顏色


1.下載課本範例https://jsyeh.org/3dcg10/下載window data source



2.window.zip解壓縮

3.data.zip解壓縮

4.source解壓縮


5.開Light Material


##week06-2_lighting_glNormal3f
1.File-New-Project ,Glut 專案,week06-2_lighting_glNormal3f
2.把剛的程式碼week06-1_lighting拿來用
3.加上四邊形,有設定法向量
##week06-3_glm_obj_modle
1.File-New-Project ,Glut 專案,week06-3_glm_obj_modle
2.貼上GLUT 11行程式碼
3.從課本範例學習source.zip有三個程式檔:transformation.c.glm.h glm.c解壓縮
4.要將專案做設定
4.1把 glm.h 放到 桌面\week06-3_glm_obj_modle 目錄裡
4.2把 glm.c 放到 桌面\week06-3_glm_obj_modle 目錄裡,改檔名glm.cpp
4.3在專案裡按右鍵Add Files,加入glm.cpp

5.用Notepad++ 開啟 transformation.c 研究他的程式碼 , 關鍵字 glm 找到程式碼,複製貼上程式碼











week06

 



https://jsyeh.org/gl/

期中模擬考題>可以在考試前多試一試


##第一個程式碼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 今天的程式乾乾淨淨的上傳