2019電腦圖學A: Week15

顯示具有 Week15 標籤的文章。顯示所有文章

2019年6月10日星期一

耀鑫的筆記Week15

1.首先先到小葉老師的網站把[data][win32] glut32.dll並照著之前的步驟把該解壓縮的解壓縮，然後把Projection.exe把開來檢查看看。
2.下載freeglut並把它照之前的步驟解壓縮，然後把原本的程式碼刪掉換成以下程式碼即可得到一個沒有顏色的模型:

#include <GL/glut.h>

#include "glm.h" ///for glmReadOBJ(), glmDraw(), glmUnitized()....

GLMmodel * pmodel=NULL;///NOW

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

}

void display(void)

{

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    drawmodel();

    glutSwapBuffers();

}

int main(int argc, char**argv)

{

    glutInit(&argc, argv);

    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);

    glutInitWindowSize(500,500);

    glutCreateWindow("week15");

    glutDisplayFunc(display);

    glutMainLoop();

}

3.然後將程式碼加上藍色的部分，讓模型的顏色顯示出來

#include <GL/glut.h>

#include "glm.h" ///for glmReadOBJ(), glmDraw(), glmUnitized()....

GLMmodel * pmodel=NULL;///NOW

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

}

void display(void)

{

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

drawmodel();

glutSwapBuffers();

}

int main(int argc, char**argv)

{

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);

glutInitWindowSize(500,500);

glutCreateWindow("week15");

glutDisplayFunc(display);

GLfloat light_pos[] = { 0.0, 0.0, -1.0, 0.0 };///NOW2 打光的位置

glEnable(GL_DEPTH_TEST);///NOW2 有立體的功能

glEnable(GL_LIGHT0); ///NOW2 打光後變立體的彩色的

glEnable(GL_LIGHTING); ///NOW2 打光後變立體的彩色的

glLightfv(GL_LIGHT0, GL_POSITION, light_pos);///NOW2 打光的位置

glutMainLoop();

}

4.模型的顏色設定好之後接下來是旋轉

#include <GL/glut.h>

#include "glm.h" ///for glmReadOBJ(), glmDraw(), glmUnitized()....

GLMmodel * pmodel=NULL;///NOW

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

}

void display(void)

{

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

drawmodel();

glutSwapBuffers();

}

#include <math.h>

float eyeX=1, eyeY=0, eyeZ=0;

void timer(int t)///NOW3

{

glutTimerFunc(33, timer, t+1);///NOW3

float angle=t/180.0*3.1415926;///NOW3 算出一個角度

eyeX=cos(angle); eyeZ=sin(angle);///NOW3

glMatrixMode(GL_PROJECTION);///NOW4

glLoadIdentity();///NOW4

glOrtho(-1,+1, -1,+1, -10,+10);///NOW4 可以看到範圍比較大的投影法

glMatrixMode(GL_MODELVIEW);///NOW3

glLoadIdentity();///NOW3

gluLookAt(eyeX, eyeY, eyeZ, ///NOW3 LookAt的 eye

0.0, 0.8, 0.0, ///NOW3 LookAt的 center

0, 1, 0);///NOW3 LookAt的 up

glutPostRedisplay();///NOW3 Re-display

}

int main(int argc, char**argv)

{

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);

glutInitWindowSize(500,500);

glutCreateWindow("week15");

glutDisplayFunc(display);

glutTimerFunc(33, timer, 0);///NOW3

GLfloat light_pos[] = { 0.0, 0.0, -1.0, 0.0 };///NOW2 打光的位置

glEnable(GL_DEPTH_TEST);///NOW2 有立體的功能

glEnable(GL_LIGHT0); ///NOW2 打光後變立體的彩色的

glEnable(GL_LIGHTING); ///NOW2 打光後變立體的彩色的

glLightfv(GL_LIGHT0, GL_POSITION, light_pos);///NOW2 打光的位置

glutMainLoop();

}

5.最後調整攝影機視角

#include <GL/glut.h>
#include "glm.h" ///for glmReadOBJ(), glmDraw(), glmUnitized()....
GLMmodel * pmodel=NULL;///NOW
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);
}
void display(void)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
drawmodel();
glutSwapBuffers();
}
#include <math.h>
float eyeX=1, eyeY=0, eyeZ=0;
void timer(int t)///NOW3
{
glutTimerFunc(33, timer, t+1);///NOW3
float angle=t/180.0*3.1415926;///NOW3 算出一個角度
eyeX=cos(angle); eyeZ=sin(angle);///NOW3

glMatrixMode(GL_PROJECTION);///NOW4
glLoadIdentity();///NOW4

gluPerspective(60, 1, 0.001, 1000);///NOW5

///glOrtho(-1,+1, -1,+1, -10,+10);///NOW4 可以看到範圍比較大的投影法

glMatrixMode(GL_MODELVIEW);///NOW3
glLoadIdentity();///NOW3
gluLookAt(eyeX, eyeY, eyeZ, ///NOW3 LookAt的 eye
0.0, 0.6, 0.0, ///NOW3 LookAt的 center
0, 1, 0);///NOW3 LookAt的 up

glutPostRedisplay();///NOW3 Re-display
}
int main(int argc, char**argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
glutInitWindowSize(500,500);
glutCreateWindow("week15");

glutDisplayFunc(display);
glutTimerFunc(33, timer, 0);///NOW3

GLfloat light_pos[] = { 0.0, 0.0, 1.0, 0.0 };///NOW2 打光的位置
glEnable(GL_DEPTH_TEST);///NOW2 有立體的功能
glEnable(GL_LIGHT0); ///NOW2 打光後變立體的彩色的
glEnable(GL_LIGHTING); ///NOW2 打光後變立體的彩色的
glLightfv(GL_LIGHT0, GL_POSITION, light_pos);///NOW2 打光的位置

glutMainLoop();
}

2019年6月9日星期日

學渣的奮鬥史-最終回

附上睡過頭沒上到課的我
醒來後
朋友傳給我的第一句話

還好老師有錄影片

從影片中可以知道今天的重點是關於運鏡的使用方法及掌握

第一部分(投影矩陣)

照慣例的要從老師給的網址

[http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/]

下載3個東西

[win32][glut32.dll][data]

在其中打開projection

在轉移矩陣跟備份矩陣後面所寫的函式內容會跟以前有所不同

分別換成了GL_PROJECTION以及GL_MODELVIEW

在下載回來的WINDOWS程式中

打開projection後能發現能發現有幾個數值能夠調整

分別是[fovy][aspect][][]

fovy是調整視野

aspect是調整寬、高比例

在垂直投影法gluPerspective(視野角度，寬跟高的比例，zNear，zFar)

第二部分(用codeblock做出projection的效果)

顯示3D模型的方法

用之前上課的函式將3D模型帶入

程式碼如下

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

}

void display(void)顯示出模型檔案

{

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

drawmodel();

glutSwapBuffers();

}

注意!!!模型需打光，沒有打光模型就會變白色

要有打光效果需注意是否有以下兩行程式碼

glEnable(GL_DEPTH_TEST);///讓模型變立體
glEnable(GL_LIGHT0);///打光後讓立體的模型有顏色
GLfloat light_pos[] = { 0.0, 0.0, -1.0, 0.0 };

glEnable(GL_LIGHTING);///打光後讓立體的模型有顏色

glLightfv(GL_LIGHT0, GL_POSITION, light_pos);///打光的位置

第三部分(攝影機運鏡)

利用gluLookAt函式調整參數達到運鏡的效果

利用三角函數調整運行的軌跡

讓鏡頭可以成圓形的運行軌跡

下課

沒上到課好後悔阿QQ

Perspective 素描

2019年6月8日星期六

神のノト - Week15

{\__/}

( • - •)

/ > ❤️

------------------------------------------------------------------------------------------------------------

今天課題!

「攝影機與運鏡」

「投影矩陣」

--------------------------------------------------------------------------------------------------------------------------

➤先準備好模擬器~

1. http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/

2. data.zip / windows.zip / glut32.dll download

3. windows / data | windows / glut32.dll

--------------------------------------------------------------------------------------------------------------------------

➤今天上課主軸 "Projection" (投影)

➣有分三種投影方式 1. Ortho 正交投影

2. Frustum 四角椎投影 (是圖學的函式) (效果類似透視投影)

3. Perspective 透視投影

➣運鏡用到的函式 gluLookAt( x1,y1,z1(eye) , x2,y2,z2(center) , x3,y3,z3(up) ) ;

解釋參數：

eye→ ( x , y , z ) → 攝影機的座標

center → ( x , y , z ) → 聚焦的點

up → ( x , y , z ) → 指定攝影機 y 軸(上方) 的向量

--------------------------------------------------------------------------------------------------------------------------

➤試著打出Projection效果的程式

➣ 前置作業：

→ 回到 http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/

→ 下載 source.zip

需要source檔案裡面的 "glm.c"、"glm.h"、"projection.c"

➣ 測試projection的程式碼
→打開 glut 專案

→將專案資料夾中，放入source內的 "glm.c"、"glm.h"、"projection.c"

→將 glm.c 檔名改為 glm.cpp

→新增檔案進專案內

→將projection.c 的程式碼，開始notepad++複製程式碼

→將程式碼取代原專案內 main.cpp 的程式碼

→發現錯誤，freeglut\bin內，沒有找到data資料夾中的al.obj檔案

→將data資料夾 (模型的obj檔案) 丟入freeglut\bin中即可！

--------------------------------------------------------------------------------------------------------------------------

➤做出自己想要的運鏡，配合projection內的程式碼

1. 先讀入模型

2. 打光，讓模型變成立體 (開啟打光Enable，設定好光線的向量(位置) Position)

3.加入timer，讓模型轉起來，和LookAt函式，調整好eye和center來聚焦在頭部

4.搭配投影方式，正確投影出模型旋轉的樣子 (正交投影)

Q. 破圖原因？

A. glOrtho( left , right ,bottom, top , near , far ) 指定正交投影的投影範圍

如果不再投影範圍內，會破圖

5.測試不同投影 (透視投影)

gluPerspective ( fovy視野 , aspect長寬比例 , zNear , zFar )

→fovy 調視野能見角度

→ aspect 調視窗的長:寬比例

→ 如果視窗拉大拉小，aspect比例沒調好，模型會變形

Class Computer Graphics

The End .. Q^Q

Final Project -------> Coming Soon ..

2019年5月31日星期五

PJ週記 - Week15之攝影機與運鏡

（＊）前置作業

先到http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/

下載[data][win32][glut32.dll]

把資料用成下圖

然後一樣到https://www.transmissionzero.co.uk/software/freeglut-devel/

下載Download freeglut 3.0.0 for MinGW

把freeglut資料夾丟桌面丟桌面丟桌面

複製lib裡面的freeglut.a＞＞複製貼上＞＞改成libglut32.a

（一）先畫出模型

１.先用CodeBlocks開啟一個GLUT專案

２.上面下載的data資料夾丟freeglut＞bin

３.將source裡的glm.h、glm.c、projection.c移進專案資料夾

４.將glm.c 改成 glm.cpp

如下圖

然後將CodeBlocks中的main.cpp程式碼

全數改成下列程式碼

#include <GL/glut.h>

#include "glm.h" ///for glmReadOBJ()....

GLMmodel * pmodel=NULL;///NOW

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

}

void display(void)

{

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

drawmodel();

glutSwapBuffers();

}

int main(int argc, char**argv)

{

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);

glutInitWindowSize(500,500);

glutCreateWindow("week15");

glutDisplayFunc(display);

glutMainLoop();

}

就會出現模型的樣子！！

會缺法顏色、樣子及立體感

就是因為少了打光！！！

（二）打光

在int main主函式中

glutDisplayFunc後面加上

GLfloat light_pos[] = { 0.0, 0.0, -1.0, 0.0 }; ///打光的位置

glEnable(GL_DEPTH_TEST);///有立體的功能

glEnable(GL_LIGHT0); ///打光後變立體的彩色的

glEnable(GL_LIGHTING); ///打光後變立體的彩色的

glLightfv(GL_LIGHT0, GL_POSITION, light_pos); ///打光的位置

就會出現有顏色的背影了

（三）有色彩旋轉中的人影

（四）有色彩旋轉中打光過的人影

（五）有色彩旋轉中打光過拉近的人影

Tokoyami_world.exe_week15

攝影機、運鏡

今天是最後一堂課程──運鏡

首先......應該都知道了吧，跟平常一樣，做完平常都會做的前置作業，接著就可以開始今天的課程了，首先把模型匯入......

DannyLo筆記 Week15

本周主題:攝影機運鏡，投影

投影

1.開啟Projection程式

Eye----> 眼睛位置 (也就是相機位置)

Center---->相機所拍的正中心要在哪

Up---->相機 "自身" 的轉動

------------------------------------------------------------程式--------------------------------------------------------

1.打開source資料夾，把三個丟到專案資料夾中

2.把glm.c改成glm.cpp

3.在codeblock的專案中右鍵 ADD file 把glm.cpp加進來

4.然後把data 模型資料夾放到 freeglut的bin資料夾中

5.然後把projection中的程式碼取代掉main.cpp中的程式

Step01-1 做出白白的人沒有打光所以只有模型

Step01-2 打光

Step01-3 旋轉運鏡 (破圖)

Step01-4 旋轉運鏡 (改center 往上移可把鏡調高)

Step01-5 旋轉運鏡(更改鏡頭)

訂閱：文章 (Atom)

2019年6月10日 星期一

耀鑫的筆記Week15

2019年6月9日 星期日

學渣的奮鬥史-最終回

2019年6月8日 星期六

神のノト - Week15

今天課題!

「攝影機與運鏡」

「投影矩陣」

➤先準備好模擬器~

➤今天上課主軸 "Projection" (投影)

➤試著打出Projection效果的程式

➤做出自己想要的運鏡，配合projection內的程式碼

Class Computer Graphics

The End .. Q^Q

Final Project -------> Coming Soon ..

2019年5月31日 星期五

PJ週記 - Week15之攝影機與運鏡

（＊）前置作業

（一）先畫出模型

１.先用CodeBlocks開啟一個GLUT專案

３.將source裡的glm.h、glm.c、projection.c移進專案資料夾

（二）打光

（三）有色彩旋轉中的人影

（四）有色彩旋轉中打光過的人影

（五）有色彩旋轉中打光過拉近的人影

Tokoyami_world.exe_week15

DannyLo筆記 Week15

本周主題:攝影機運鏡，投影

投影

2019年6月10日星期一

2019年6月9日星期日

2019年6月8日星期六

2019年5月31日星期五