2020年6月3日 星期三

week15

電腦圖學 第15週 2020-06-03
1. 主題: 攝影機與運鏡
2. 實作: gluPerspective(), glFrustum()
3. 實作: gluLookAt()
4. 複習: 上週的FILE讀檔、動作內插
5. 提醒: 16,17週,期末作品

3dcg網址>下載windows、data、glut32.dll>開啟Projection


gluPerspective()

 fovy數值是y方向的視野大小、
aspect是長寬比例、
zNear是z方向近的面、
zFar是z方向遠的面



右鍵glfrustum


glfrustum(左、右、上、下、近、遠)鏡頭為軸心的座標數值


老師做的圖更好理解




實作: gluPerspective(), glFrustum()、glortho()

freeglut設置好>開起一個專案>改寫resize函式


gluPerspective()

改 Frustum to Perspective
觀察程式可以發現範例裡物件位置 x:-2.4, 2.4 y:-1.2, 1.2 z:-6
可以改成如下圖:

發現原本Frustum範例利用了ar的變數,其中ar=aspect ratio:長寬比例
 gluPerspective( 60, ar, 0.001, 1000 );

#最主要的三行程式碼
glMatrixMode(GL_PROJECTION);///矩陣改用投影
glLoadIdentity();///單位矩陣
gluPerspective( 60, ar, 0.001, 1000 );乘上透視投影
##########

*glortho()平行透視

因為平行的透視方法，所以參數需要更改。
單點透視是放射性投影，近到遠是由小到大，平行則是一樣大小的投射


觀察程式可以發現範例裡物件位置落在 x:-2.4, 2.4 y:-1.2, 1.2 z:-6
glOrtho(-1,+1, -1,+1, -1,+1);///預設值,很限制 

 所以依物件中心點再加物件大小改成如下:
















gluLookAt()攝影機的數值

eye攝影機位置center目標點的焦距中心座標(會一直注視目標物)up攝影機轉向角度(如手機直著拍,橫著拍,斜著拍等)

老師程式碼:

#ifdef __APPLE__
#include <GLUT/glut.h>
#else
#include <GL/glut.h>
#endif

#include <stdlib.h>

static int slices = 16;
static int stacks = 16;

/* GLUT callback Handlers */
float eyeX=0, eyeY=0, eyeZ=1; ///TODO3 for gluLookAt()
float centerX=0, centerY=0, centerZ=0;///TODO3 for gluLookAt()
static void resize(int width, int height)
{
    const float ar = (float) width / (float) height;

    glViewport(0, 0, width, height);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    ///glFrustum(-ar, ar, -1.0, 1.0, 2.0, 100.0);
    gluPerspective( 60, ar, 0.001, 1000 );///TODO3
    ///glOrtho(-1,+1, -1,+1, -1,+1);///預設值,很限制
    ///glOrtho(-3.4, +3.4,  -2.2, +2.2, -6.0, +16.0);///TODO2

    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity() ;///TODO3 for gluLookAt()
  gluLookAt(eyeX,eyeY,eyeZ, centerX,centerY,centerZ, 0,1,0);
}

static void display(void)
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glutSolidTeapot(0.3);///TODO3,只放我們的Teapot

    glutSwapBuffers();
}

///key全刪....

static void idle(void)
{
    ///TODO3: 等一下要在這裡做動作....
    glutPostRedisplay();
}

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

/* Program entry point */
void motion(int x,int y)///TODO5
{///我們的windows:640x480
    eyeX = (x-320)/320.0;///TODO5
    eyeY = (x-240)/240.0;///TODO5
    glMatrixMode(GL_MODELVIEW);///TODO5
    glLoadIdentity();///TODO5
    gluLookAt(eyeX,eyeY,eyeZ,centerX,centerY,centerZ,0,1,0);///TODO5
}
int main(int argc, char *argv[])
{
    glutInit(&argc, argv);
    glutInitWindowSize(640,480);
    glutInitWindowPosition(10,10);
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);

    glutCreateWindow("GLUT Shapes");

    glutReshapeFunc(resize);
    glutDisplayFunc(display);
    ///glutKeyboardFunc(key);
    glutIdleFunc(idle);
    glutMotionFunc(motion);///TODO5:用motion控制camera

    glClearColor(1,1,1,1);
    ///glEnable(GL_CULL_FACE);範例有錯會破圖
    ///glDepthFunc(GL_BACK);

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

    glutMainLoop();

    return EXIT_SUCCESS;
}

實作攝影機移動


#ifdef __APPLE__
#include <GLUT/glut.h>
#else
#include <GL/glut.h>
#endif

 #include <stdlib.h>

 static int slices = 16;
static int stacks = 16;

 /* GLUT callback Handlers */
float eyeX=0, eyeY=0, eyeZ=1; ///TODO3 for gluLookAt()
float centerX=0, centerY=0, centerZ=0;///TODO3 for gluLookAt()
static void resize(int width, int height)
{
    const float ar = (float) width / (float) height;

     glViewport(0, 0, width, height);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    ///glFrustum(-ar, ar, -1.0, 1.0, 2.0, 100.0);
    gluPerspective( 60, ar, 0.001, 1000 );///TODO3
    ///glOrtho(-1,+1, -1,+1, -1,+1);///預設值,很限制
    ///glOrtho(-3.4, +3.4,  -2.2, +2.2, -6.0, +16.0);///TODO2

     glMatrixMode(GL_MODELVIEW);
    glLoadIdentity() ;///TODO3 for gluLookAt()
    gluLookAt(eyeX,eyeY,eyeZ, centerX,centerY,centerZ, 0,1,0);
}

 static void display(void)
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

     glutSolidTeapot(0.3);///TODO3,只放我們的Teapot

     glutSwapBuffers();
}

 ///key全刪....

 static void idle(void)
{
    ///TODO3: 等一下要在這裡做動作....
    glutPostRedisplay();
}

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

 /* Program entry point */
void motion(int x, int y)///TODO5
{
    ///我們的window:640x480
    eyeX = (x-320)/320.0;///TODO5
    eyeY = (y-240)/240.0;///TODO5;
    glMatrixMode(GL_MODELVIEW); ///TODO5
    glLoadIdentity() ;///TODO5
    gluLookAt(eyeX,eyeY,eyeZ, centerX,centerY,centerZ, 0,1,0);///TODO5

 }
int main(int argc, char *argv[])
{
    glutInit(&argc, argv);
    glutInitWindowSize(640,480);
    glutInitWindowPosition(10,10);
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);

     glutCreateWindow("GLUT Shapes");

     glutReshapeFunc(resize);
    glutDisplayFunc(display);
    ///glutKeyboardFunc(key);
    glutIdleFunc(idle);
    glutMotionFunc(motion);///TODO5: 用motion來控制camera

     glClearColor(1,1,1,1);

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

     glutMainLoop();

     return EXIT_SUCCESS;
}
老師補充運鏡方法:


複習: 上週的FILE讀檔、動作內插

不要一直存,做一個合理的動作
如下列程式:
///#include最好放在最前面,放中間不好!!!!
#include <GL/glut.h>
#include <stdio.h> ///TODO3: 外掛
///全域變數(global variable)最好放在最前面,放中間不好!!!!
FILE * fout=NULL;///TODO3
FILE * fin=NULL;///TODO4: 宣告檔案指標
int angle[10]={0,0,0,0,0, 0,0,0,0,0};
int angleID=0;///0,1,2,3
int oldX, oldY;

/// C/C++因為函式使用前, 要先宣告or定義, 有時候會順序不對
void display();
void motion(int x, int y);
void mouse(int button, int state, int x, int y);
void keyboard(unsigned char key, int x, int y);
void saveAll();
///可以在程式的最前面, 把全部的函式的外形, 先宣告一次
///(不要寫完整的定義)

void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glColor3f(1,1,1);///白色
    glutSolidTeapot(0.2);///身體

    glPushMatrix();///右側
        glTranslatef(0.2, 0,0 );
        glRotatef(angle[0], 0,0,1);
        glTranslatef(0.2, 0,0 );

        glColor3f(1,0,0);///紅色
        glutSolidTeapot(0.2);///右上手臂

        glPushMatrix();
            glTranslatef(0.2, 0,0);
            glRotatef(angle[1], 0,0,1);
            glTranslatef(0.2, 0,0);

            glColor3f(1,1,0);///黃色
            glutSolidTeapot(0.2);///右下手臂

        glPopMatrix();
    glPopMatrix();///右側

    glPushMatrix();///左側
        glTranslatef(-0.2, 0,0 );
        glRotatef(angle[2], 0,0,1);
        glTranslatef(-0.2, 0,0 );

        glColor3f(0,1,0);///綠色
        glutSolidTeapot(0.2);///左上手臂

        glPushMatrix();
            glTranslatef(-0.2, 0,0);
            glRotatef(angle[3], 0,0,1);
            glTranslatef(-0.2, 0,0);

            glColor3f(0,0,1);///藍色
            glutSolidTeapot(0.2);///左下手臂

        glPopMatrix();
    glPopMatrix();///右側
    glutSwapBuffers();
}

void mouse(int button, int state, int x, int y)
{///TODO2:備份(old)mouse位置
    oldX=x; oldY=y;///TODO2:備份(old)mouse位置
}
///用函式來做事, 漂亮!!!
void saveAll()///TODO3:  (自己寫的函式)全部存檔
{        ///小心!裡面宣告,不會讓外面記起來
    if(fout==NULL) fout=fopen("motion.txt", "w+");///TODO3:開檔
    for(int i=0; i<10; i++){///TODO3: for迴圈,把陣列全用
         printf(      "%d ", angle[i]);///TODO3: 印畫面
        fprintf(fout, "%d ", angle[i]);///TODO3: 寫檔案
    }
     printf(      "\n");///TODO3: 跳行, 畫面不會亂
    fprintf(fout, "\n");///TODO3: 跳行, 畫面不會亂
}
void motion(int x, int y)
{///TODO2:滑動,更新 angleID對應的angle[]
    angle[angleID] += (x-oldX);
    oldX=x;
    ///saveAll();///TODO3: (自己寫的函式)全部存檔
    glutPostRedisplay();///TODO2:重畫畫面
}
void readAll()
{
    if(fin==NULL) fin=fopen("motion.txt", "r");///TODO4 開檔
    for(int i=0; i<10; i++){
        ///scanf(   "%d", &a[i]);
        fscanf(fin, "%d", &angle[i]);///TODO4 讀檔
    }
}
void keyboard(unsigned char key, int x, int y)
{///TODO2: 鍵盤,選angleID
    if(key=='0') angleID=0;
    if(key=='1') angleID=1;
    if(key=='2') angleID=2;
    if(key=='3') angleID=3;
    if(key=='s') saveAll();///作的最後定格位置存起來
    if(key=='r'){
        readAll();///這樣才漂亮!!!!
        glutPostRedisplay();///TODO4 重畫
    }
}
int main(int argc, char**argv)
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("Week14 file");

    glutDisplayFunc(display);
    glutMouseFunc(mouse);///TODO2:備份(old)mouse位置
    glutMotionFunc(motion);///TODO2:滑動,更新 angleID對應的angle[]
    glutKeyboardFunc(keyboard);///TODO2: 鍵盤,選angleID
    glutMainLoop();
}

之後把想要動作的最後定格位置存起來

還要加入Timer(下周再介紹)才可順利做出接續影格

於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)