01418341...

01418341 สภาพแวดล้อมการทำ�างานคอมพ�วเตอร�กราฟิ�กส�

การบรรยายคร��งทำ�� 2

ประม!ข ข�นเง�น[email protected]

CULLING

Culling

• ร#ปหล้ายเหล้��ยมม�สองหนา: ดานหนา ก�บ ดานหล้�ง• เวล้าวาดร#ปทำรงสามม�ต� ส%วนมากดานหนาจะห�น

หนามาหาเรา• ฉะน��นโดยมากไม%ม�ความจ�าเป*นตองวาดร#ปเหล้��ยม

ทำ��ห�นหล้�งใส%เรา– ช่%วยใหโปรแกรมเร-วข.�น– ช่%วยทำ�าเอฟิเฟิกต�บางอย%าง เช่%นมองเห-นภาพภายนอก

จากภายในว�ตถุ!• เราสามารถุส��งให OpenGL ไม%วาดร#ปหล้ายเหล้��ยม

ทำ��ห�นหนาทำ��เราไม%ตองการเห-นมาใหได• การเล้0อกไม%วาดร#ปหล้ายเหล้��ยม เราเร�ยกว%า

Culling

glCullFace

• glCullFace(GLenum mode)– ก�าหนดร#ปแบบการ cull ร#ปหล้ายเหล้��ยม– mode ม�ค%าไดสามแบบ

• GL_FRONT = ไม%วาดดานหนา• GL_BACK = ไม%วาดดานหล้�ง• GL_FRONT_AND_BACK = ไม%วาดทำ��งสองดาน

– หามเร�ยกใน glBegin(…) แล้ะ glEnd()– ก%อนการทำ�า culling จะม�ผล้ จะตองส��ง

glEnable(GL_CULL_FACE) เส�ยก%อน– ยกเล้�กการทำ�า culling (วาดหมดทำ!กดาน) โดยการส��ง

glDisable(GL_CULL_FACE)

แล้วอะไรค0อดานหนา อะไรค0อดานหล้�ง?

• โดยปกต� ร#ปหล้ายเหล้��ยมทำ��เรามองแล้วเห-นจ!ดม!ม “เร�ยงก�นตามแนวทำวนเข-มนาฬิ�กา ถุ0อว%าห�น ดาน

” หนา ใหเรา• ถุาเห-นจ!ดม!มเร�ยงก�นตามเข-มนาฬิ�กา ถุ0อว%าห�น

“ ” ดานหล้�ง ให• แต%เราสามารถุเปล้��ยนได ดวย glFrontFace– glFrontFace(GL_CCW) = “ ” ถุ0อว%า ทำวนเข-ม เป*นดาน

หนา– glFrontFace(GL_CW) = “ ” ถุ0อว%า ตามเข-ม เป*นดาน

หนา

ด# demo

ANIMATION WITH GLUT

สรางภาพเคล้0�อนไหวดวย GLUT

• เราสามารถุสรางภาพเคล้0�อนไหวโดยการวาดภาพใหม%เป*นระยะๆ

• กล้%าวค0อ ทำ!กช่%วงเวล้าจ�าก�ด เราจะตองม�การเร�ยก ฟิ4งก�ช่�นทำ��เราใหไปใน glutDisplayFunc ใหม%

– ถุาตองการความเร-วประมาณ 30 เฟิรม/ ว�นาทำ� (ล้0�นไหล้พอใช่ได) ตองม�การเร�ยกฟิ4งก�ช่�นน��ทำ!กๆ 33 ม�ล้ล้�ว�นาทำ�

– ถุาตองการความเร-วประมาณ 60 เฟิรม/ ว�นาทำ� (ล้0�นไหล้มากๆ) ตองม�การเร�ยกฟิ4งก�ช่�นน��ทำ!กๆ 17 ม�ล้ล้�ว�นาทำ�

แล้วจะเร�ยกฟิ4งก�ช่�น display อย%างไร?

• เร�ยกตรงๆ ความจร�งก-ไดอย#% แต%ม�นจะไปซ้ำ��าซ้ำอน ก�บการเร�ยกใน glutMainLoop

• เราสามารถุส��งให glutMainLoop เร�ยกฟิ4งก�ช่�นdisplay ไดดวยค�าส��ง glutPostRedisplay()

• glutPostRedisplay()– บอก GLUT ว%าเราตองการใหม�นเร�ยกฟิ4งก�ช่�นทำ��ใหไปก�บ

glutDisplayFunc ในล้#ปคร��งต%อไป– ถุาเร�ยก glutPostRedisplay หล้ายคร��งก%อนล้#ปต%อไป

ฟิ4งก�ช่�น display จะถุ#กเร�ยกเพ�ยงคร��งเด�ยว

แล้วจะเร�ยก glutPostRedisplay ทำ!กๆ X ม�ล้ล้�ว�นาทำ�ไดอย%างไร?

• glutTimerFunc(unsigned int msecs, void (*func) (int value), value)– เร�ยกฟิ4งก�ช่�น func ทำ��ใหมาเป*น argument ทำ��สองหล้�ง

จากเวล้าผ%านไปได msecs ม�ล้ล้�ว�นาทำ�– func จะไดร�บ value ทำ��ใหมาเป*น argument ทำ�� 3 เป*น

argument– จะเร�ยก func เพ�ยงคร��งเด�ยวเทำ%าน��น– ด�งน��นถุาตองการใหเร�ยกเป*นคาบๆ ใน func จะตองม�

การเร�ยก glutTimerFunc ใหต�วเองใหม%

ต�วอย%าง 1void printInt(int value){

printf("Got an integer: %d\n", value);}

int main(int argc, char **argv){

glutInit(&argc, argv);glutInitDisplayMode(GLUT_RGBA | GLUT_SINGLE);glutCreateWindow("glutTimerFunc Example 01");glutDisplayFunc(display);glutTimerFunc(2000, printInt, 123);glutTimerFunc(3000, printInt, 456);glutTimerFunc(4000, printInt, 789);glutMainLoop();

}

ต�วอย%าง 2void printAndReschedule(int interval){

printf("I'm printing this every %d milliseconds\n", interval);glutTimerFunc(interval, printAndReschedule, interval);

}


glutInit(&argc, argv);glutInitDisplayMode(GLUT_RGBA | GLUT_SINGLE);glutCreateWindow("glutTimerFunc Example 01");glutDisplayFunc(display);glutTimerFunc(0, printAndReschedule, 500);glutTimerFunc(0, printAndReschedule, 1000);glutTimerFunc(0, printAndReschedule, 2000);glutMainLoop();

}

ANIMATION & MVC DESIGN PATTERN

หล้�กการทำ�า animation แบบModel-View-Controller

• เราแบ%งโปรแกรมของเราออกเป*นสามส%วน– Model = ส%วนทำ��จ�ดการก�บขอม#ล้ ในทำ��น��ค0อโมเดล้สามม�ต�หร0อสอง

ม�ต�ทำ��เราตองการแสดง– View = ส%วนทำ��น�าโมเดล้ไปแสดง– Controller = ส%วนทำ��ทำ�าการเปล้��ยนแปล้งโมเดล้ ซ้ำ.�งอาจเป*นผล้มา

จากเวล้าทำ��ผ%านไป หร0อการส��งงานของผ#ใช่• ม�การแบ%งหนาทำ��ก�นช่�ดเจน– Controller ทำ�าหนาทำ��เปล้��ยนแปล้งโมเดล้อย%างเด�ยว ไม%ม�หนาทำ��

แสดง– View ทำ�าหนาทำ��แสดงโมเดล้อย%างเด�ยว ไม%ม�เปล้��ยนแปล้งโมเดล้

เอง

หล้�กการทำ�า animation แบบModel-View-Controller (ต%อ)

• ในโปรแกรมกราฟิฟิ�กส�ทำ��ใช่ GLUT ของเรา– Model = ส%วนทำ��เก-บขอม#ล้ต%างๆ– View = callback ของ glutDisplayFunc– Controller = callback function อ0�นๆ• callback ของ glutTimerFunc• callback ส�าหร�บเวล้าผ#ใช่ใช่ keyboard หร0อ mouse

Animation ล้#กบอล้เดงกระทำบก�าแพง• Model

– ขอม#ล้ของล้#กบอล้– ต�าแหน%งของจ!ดศู#นย�กล้าง

ล้#กบอล้– ความเร-วของล้#กบอล้– ร�ศูม�– ส�

• ขอม#ล้ล้#กบอล้ควรประกาศู ไวเป*น global variable

เพ0�อทำ��จะไดใช่ร%วมก�นไดหล้ายฟิ4งก�ช่�น

struct Ball{double x, y;double vx, vy;double radius;double r, g, b;

};

Ball ball;

Animation ล้#กบอล้เดงกระทำบก�าแพง(ต%อ)

• View– วาดล้#กบอล้เป*นวงกล้มทำ.บดวย OpenGL

void drawBall(Ball &b){

glColor3d(b.r, b.g, b.b);glBegin(GL_TRIANGLE_FAN);glVertex2d(b.x, b.y);for(int i=0;i<CORNERS;i++){

double theta = 2*M_PI*i/CORNERS;double x = b.x + b.radius * cos(theta);double y = b.y + b.radius * sin(theta);glVertex2d(x,y);

}glVertex2d(b.x + b.radius, b.y);glEnd();

}


• View (ต%อ)– ส��งใหวาดล้#กบอล้ใหม%ทำ!กคร��งทำ��ม�การเร�ยกฟิ4งก�ช่�น display

void display(){

glClearColor(0.0, 0.0, 0.0, 0.0);glClear(GL_COLOR_BUFFER_BIT);drawBall(ball);glFlush();

}


...glutDisplayFunc(display);...

}


• Controller– ทำ�าใหล้#กบอล้เปล้��ยนต�าแหน%ง– เช่-คว%าล้#กบอล้ช่นก�าแพงหร0อไม%– ถุาช่น ใหเปล้��ยนทำ�ศูทำางการเคล้0�อนทำ��ของม�นดวยการ

เปล้��ยนความเร-ว• ฟิ4งก�ช่�นทำ��ทำ�าหนาทำ��เป*น controller จะถุ#กเร�ยกเป*น

ช่%วงๆ– ใช่ glutTimerFunc– ตองล้งทำะเบ�ยนต�วเองก�บ glutTimerFunc ใหม%ทำ!กคร��ง

ทำ��ถุ#กเร�ยก– ตองเร�ยก glutPostRedisplay เพ0�อใหความ

เปล้��ยนแปล้งถุ#กแสดงผล้


void updateBall(Ball &b){

b.x += b.vx;b.y += b.vy;if (b.x + b.radius > 1){

b.x = 1 - b.radius;b.vx = -fabs(b.vx);

}if (b.x - b.radius < -1)

/* handle collision with left wall */if (b.y + b.radius > 1)

/* handle collision with top wall */if (b.y - b.radius < -1)

/* handle collision with bottom wall */}









เคล้0�อนทำ��ล้#กบอล้









เช่-คว%าช่นก�บก�าแพงดานขวาหร0อไม%









ถุาช่นใหเปล้��ยนทำ�ศูทำางใหว��งไปดานซ้ำาย









โคดของดานอ0�นๆ ก-คล้ายๆ ก�น


void animate(int param){

updateBall(ball);glutTimerFunc(INTERVAL, animate, 0);glutPostRedisplay();

}


...glutTimerFunc(0, animate, 0);...

}




}



}

เปล้��ยนโมเดล้ของล้#กบอล้ (ทำ�าใหม�นเคล้0�อนทำ��)




}



}

ส��งใหเร�ยกฟิ4งก�ช่�นน��ใหม%อ�กคร��ง หล้�งจากเวล้าผ%านไป

INTERVAL ม�ล้ล้�ว�นาทำ�




}



}

ส��งใหวาดทำ��งฉากใหม%




}



}

ล้งทำะเบ�ยนใหเร�ยก animate เป*นคร��งแรกหล้�ง glutMainLoop

เร��มทำ�างาน (แล้วม�นจะจ�ดการใหม�น ถุ#กเร�ยกคร��งต%อๆ ไปเอง)



glutInit(&argc, argv);glutInitDisplayMode(GLUT_RGBA | GLUT_SINGLE);glutInitWindowSize(600,600);glutCreateWindow("Bouncing Ball");glutReshapeFunc(reshape);glutDisplayFunc(display);glutTimerFunc(0, animate, 0);

ball.x = 0;ball.y = 0;ball.vx = 0.02;ball.vy = 0.03;ball.radius = 0.05;ball.r = 1.0;ball.g = 0.5;ball.b = 0.5;

glutMainLoop();}





glutMainLoop();}

เร��มตน GLUTสรางว�นโดว�ล้งทำะเบ�ยนฟิ4งก�ช่�นฯล้ฯ





glutMainLoop();}

ก�าหนดค%าเร��มตนของล้#กบอล้

ด# demo

DOUBLE BUFFERING

Flickering

• ทำ�าไมภาพม�นกระพร�บๆ ( ภาษาฝร��งเร�ยกว%า flickering)• จอภาพจะแสดงภาพใหม%เป*นช่%วงๆ ( ส%วนมากความถุ��อย#%ทำ�� 60-72

เฮิ�ร�ตซ้ำ�)• เวล้าจอภาพ ม�นจะไปเอาขอม#ล้มาจาก framebuffer• การวาดภาพของเราม�หล้ายข��นตอน– ล้าง framebuffer ใหเป*นส�ด�า– วาดล้#กบอล้ทำ�ล้ะกล้�บ

• เพราะฉะน��นขอม#ล้ใน framebuffer บางเวล้าจ.งไม%ใช่%ภาพทำ�� สมบ#รณ�

• เม0�อเวล้าประจวบเหมาะ จอภาพจะเอาภาพทำ��ไม%สมบ#รณ�ไปแสดงทำ�าใหภาพกระพร�บ

Double Buffering

• แกไขไดโดยการใหม� framebuffer สองอ�น• อ�นหน.�งอย#%หล้�ง อ�นหน.�งอย#%หนา• เวล้าวาดใหวาดใส% framebuffer ทำ��อย#%ขางหล้�ง• เวล้าแสดงใหเอา framebuffer ทำ��อย#%ขางหล้�งไป

แสดง• ภาพทำ��แสดงจ.งเป*นภาพทำ��สมบ#รณ�เสมอ• ไม%เก�ด flickering

การใช่ double buffering ใน GLUT

• ใช่ GLUT_DOUBLE แทำน GLUT_SINGLE ในglutInitDisplayMode

• ใช่ glutSwapBuffers() แทำน glFlush()

Animation ล้#กบอล้เดงกระทำบก�าแพง(แกใหม%)

void display(){glClearColor(0.0, 0.0, 0.0, 0.0);glClear(GL_COLOR_BUFFER_BIT);

drawBall(ball);

glFlush();}


void display(){glClearColor(0.0, 0.0, 0.0, 0.0);glClear(GL_COLOR_BUFFER_BIT);

drawBall(ball);

glutSwapBuffers();}



glutInit(&argc, argv);glutInitDisplayMode(GLUT_RGBA | GLUT_SINGLE);glutInitWindowSize(600,600);...

}



glutInit(&argc, argv);glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE);glutInitWindowSize(600,600);...

}

KEYBOARD INPUT

ร�บอ�นพ!ตจากแป<นพ�มพ�• glutKeyboardFunc(void (*func) (unsigned char

key, int x, int y))– ใหฟิ4งก�ช่�นทำ��ร �บ unsigned char แล้ะ int สองต�ว– key ค0อ ascii code ของป!=มทำ��กด– x แล้ะ y ค0อต�าแหน%งของ mouse

ต�วอย%าง 1

void printKey(unsigned char key, int x, int y){

printf("You type key %d. The mouse is at (%d, %d)\n", key, x, y);}


glutInit(&argc, argv);glutInitDisplayMode(GLUT_RGBA | GLUT_SINGLE);glutCreateWindow("glutKeyboardFunc Example");glutDisplayFunc(display);glutKeyboardFunc(printKey);glutMainLoop();

}

ต�วอย%าง 2

• โปรแกรมล้#กบอล้เดงช่นก�าแพง เวอร�ช่�น 2• ตอนน��ม�ล้#กบอล้ไดหล้ายล้#กแล้ว• กด space bar แล้วม�ล้#กบอล้เพ��ม• กด Esc เป*นการออกจากโปรแกรม

ต�วอย%าง 2void keyboard(unsigned char key, int x, int y){

if (key == ' '){

newRandomBall();glutPostRedisplay();

}else if (key == 27)

exit(0);}

ด# demo

3D LINEAR ALGEBRA

เวกเตอร�สามม�ต�• ล้�าด�บของจ�านวนจร�งสามต�ว

• ส�ญล้�กษณ�: ต�วอ�กษรต�วพ�มพ�เล้-กหนา

• เซ้ำตของเวกเตอร�สามม�ต�

• เวกเตอร�พ�เศูษ

(x;y;z)

u;v;w

R3 = f(x;y;z) : x;y;z 2 Rg

x = (1;0;0); y = (0;1;0); z = (0;0;1); 0 = (0;0;0)

เวกเตอร�สามม�ต� (ต%อ)

• ความหมาย– จ!ดในสามม�ต�– ทำ�ศูทำางในสามม�ต�

x

y

z

x

y

zO

x

y

z

x

y

zO

ปฏิ�บ�ต�การบนเวกเตอร�สามม�ต�• ก�าหนดให

• การบวกแล้ะล้บเวกเตอร�

• การค#ณเวกเตอร�ดวยสเกล้าร�

u = (x1;y1;z1)

v = (x2;y2;z2)

u + v = (x1 + x2; y1 + y2; z1 + z2)

cu = (cx1;cx2;cx3)

ปฏิ�บ�ต�การบนเวกเตอร�สามม�ต� (ต%อ)

• การบวก = เอาทำายต%อห�วx

y

z

Ou

v

u + v

ปฏิ�บ�ต�การบนเวกเตอร�สามม�ต� (ต%อ)

• การค#ณดวยสเกล้าร� = การย0ด/หดx

y

z

O

uc1u

c2u

Linear Combination

• ให เป*นเวกเตอร�ใดๆ แล้ะ ค0อจ�านวนจร�งใดๆ

เราเร�ยก

ว%า linear combination ของ

v1;v2; : : : ;vn

c1;c2; : : : ;cn

c1v1 + c2v2 + :::+ cnvn

v1;v2; : : : ;vn

Linear Combination (ต%อ)

• เวกเตอร�สามม�ต�ทำ!กเวกเตอร�เป*น linear combination ของx, y, แล้ะ z(x;y;z) = x(1;0;0) + y(0;1;0) + z(0;0;1) = xx + yy + zz

Span

• ถุา เป*นเวกเตอร�ใดๆ แล้วเราเร�ยกเซ้ำต

ว%า span ของ

v1;v2; : : : ;vn

f c1v1 + c2v2 + ¢¢¢+ cnvn : c1;c2; : : : ;cn 2 Rg

v1;v2; : : : ;vn

Span (ต%อ)

• Span ของ x, y, แล้ะ z ม�ค%าเทำ%าก�บ• Span ของ x ม�ค%าเทำ%าก�บแกน x• Span ของ y ม�ค%าเทำ%าก�บแกน y• Span ของ z ม�ค%าเทำ%าก�บแกน z• Span ของ x แล้ะ y ม�ค%าเทำ%าก�บระนาบ xy• Span ของ x แล้ะ z ม�ค%าเทำ%าก�บระนาบ xz• Span ของ y แล้ะ z ม�ค%าเทำ%าก�บระนาบ yz

R3

Linear Dependence

• เรากล้%าวว%าเป*นกล้!%มของเวกเตอร�ทำ�� linearly dependent

ถุาม�สเกล้าร� ทำ��ม�ต�วใดต�วหน.�งม�ค%าไม% เทำ%าก�บ 0

ทำ��ทำ�าให

v1;v2; : : : ;vn

c1;c2; : : : ;cn

c1v1 + c2v2 + :::+ cnvn = 0

Linear Independence

• ตรงขามก�บ linear dependence• เรากล้%าวว%า

เป*นกล้!%มของเวกเตอร�ทำ�� linearly independent ถุาค%า ทำ��ทำ�าให

ค0อ เทำ%าน��น

v1;v2; : : : ;vn

c1;c2; : : : ;cn

c1v1 + c2v2 + :::+ cnvn = 0

c1 = c2 = ¢¢¢= cn = 0

Linear Independence (ต%อ)

• x, y, แล้ะ z --- linearly independent

• (1,2,0) แล้ะ (2,4,0) --- linearly dependent เพราะ 2*(1,2,0) – (2,4,0) = (0,0,0)

• (1,0,1), (2,3,0), (2,1.5,1) --- linearly dependent เพราะ (1,0,1) + 0.5*(2,3,0) – (2,1.5,1) = (0,0,0)

• (0,0,0) --- linearly dependent เพราะ c(0,0,0) = (0,0,0) ส�าหร�บค%า c ใดๆ ทำ��ไม%เทำ%าก�บ 0

เสนตรง• ถุา แล้ว span ของ u ค0อเสนตรงทำ��ผ%านจ!ด O

แล้ะ ux

y

z

O

u

u 6= 0

f cu : c2 Rg

v

u

ระนาบ• ถุา u แล้ะ v เป*นเวกเตอร�ทำ�� linearly independent

ก�นแล้วspan ของ u แล้ะ v ค0อระนาบทำ��ผ%านจ!ด O, u, แล้ะ v f c1u + c2v : c1;c2 2 Rg

x

y

z

O

ปร�ภ#ม�เวกเตอร�• ถุา u, v, แล้ะ w เป*นเวกเตอร�ทำ�� linearly

independent ก�นแล้ว span ของ u, v, แล้ะ w เซ้ำตของเวกเตอร�สามม�ต�ทำ� �งหมด

v

u

f c1u + c2v + c3w : c1;c2;c3 2 Rg

x

y

z

O

Basis

• ถุา span ของ u, v, แล้ะ w

ม�ค%าเทำ%าก�บเซ้ำตของเวกเตอร�สามม�ต�ทำ� �งหมด เราเร�ยก u, v, แล้ะ w ว%าเป*น basis ของปร�ภ#ม�เวก

เตอร�สามม�ต�

Basis (ต%อ)

• x, y, แล้ะ z เป*น basis ของปร�ภ#ม�เวกเตอร�สามม�ต�

• (1,1,0), (0,1,1), แล้ะ (1,0,1) ก-เป*น basis

• แต% (1,0,1), (2,3,0), (2,1.5,1) ไม%ใช่% เพราะม�นไม% linearly independent

ผล้ค#ณสเกล้าร�• ผล้ค#ณสเกล้าร� (dot product)

• ขนาดเวกเตอร�

• สมบ�ต�ต%างๆ

u ¢v = x1x2 + y1y2 + z1z2

kuk =p

x21 + y2

1 + z21 = (u ¢u)

12

u ¢v = v ¢u

u ¢(v + w) = u ¢v + u ¢w

u ¢(cv) = c(u ¢v)

ku + vk2 = kuk2 + kvk2 + 2(u ¢v)

kcuk = ckuk

ผล้ค#ณสเกล้าร� (ต%อ)

• สมบ�ต�

เม0�อ ค0อม!มระหว%าง u ก�บ v

• u ก�บ v ต��งฉากก�นก-ต%อเม0�อ

u ¢v = kukkvkcosµ

u

v

u ¢v = 0

เวกเตอร�หน.�งหน%วย• เวกเตอร�ทำ��ม�ขนาดเทำ%าก�บ 1• • ถุา u เป*นเวกเตอร�หน.�งหน%วยแล้ว

ค0อความยาวของ v เม0�อแตกแรง ไปในทำ�ศูของ u

kuk = 1

u ¢v = kvkcosµ

ผล้ค#ณเวกเตอร�• ผล้ค#ณเวกเตอร� (cross product)

• ต��งฉากก�บทำ��ง u แล้ะ v•

u £ v = (y1z2 ¡ y2z1; z1x2 ¡ z2x1; x1y2 ¡ x2y1)

= (y1z2 ¡ y2z1)x + (z1x2 ¡ z2x1)y + (x1y2 ¡ x2y1)z

=

¯¯¯¯¯¯

x y zx1 y1 z1

x2 y2 z2

¯¯¯¯¯¯

u £ v

u £ vku £ vk = kukkvksinµ

ผล้ค#ณเวกเตอร� (ต%อ)

• ทำ�ศูทำางของ ค�ดตามกฎมื�อขวา– เอาม0อขวาช่��ไปตามทำ�ศูของ u ใหฝ=าม0อห�นไปทำาง v– ต��งฉากก�บระนาบทำ��น�ยามโดย u ก�บ v พ! %งออก

ไปฝ4� งทำ��น��วโป<งขวาอย#%

u £ v

u £ v

u

v

u £ v พ! %งเขากระดาษ

v

u

u £ v พ! %งออกกระดาษ

ผล้ค#ณเวกเตอร� (ต%อ)

• สมบ�ต�ต%างๆu £ v = ¡ v £ u

u £ (v + w) = u £ v + u £ w

u £ (rv) = (ru) £ v = r(u £ v)

การแปลง

การแปล้ง (Transformations)

• ต�วอย%าง– “ เล้0�อนไปทำางซ้ำาย 1 ”หน%วย– “ หม!นรอบแกน y 90 ”องศูา– “ ขยายขนาดตามแกน z 2 ”เทำ%า

• เอาไปใช่ทำ��ไหน?– Modeling– Animation– Rendering Pipeline

ต�วอย%าง• สมมต�เราร# ว�ธี�สรางวงกล้มร�ศูม� 1 หน%วย

จ!ดศู#นย�กล้างอย#%ทำ�� (0,0)• อยากไดวงกล้มร�ศูม� 2 หน%วย จ!ดศู#นย�กล้างอย#%ทำ��

เด�ม ขยาย 2 เทำ%า

ต�วอย%าง• อยากไดวงร�แกนเอกยาว 2 หน%วย แกนโทำยาว 1

หน%วย

ขยาย 2 เทำ%าตามแกน x

ต�วอย%าง• อยากไดวงกล้มร�ศูม� 0.5 หน%วย จ!ดศู#นย�กล้างอย#%ทำ��

จ!ด (1,1)

ย%อ 0.5 เทำ%า เล้0�อนแกน x แล้ะ y 1 หน%วย

การแปล้งในสองม�ต�• การแปลงในสองมื�ติ� ค0อ ฟิ4งก�ช่�นทำ��ส%งเวกเตอร�

(หร0อจ!ด) สองม�ต�ไปย�งเวกเตอร�สองม�ต�– ส�ญล�กษณ์�: ต�วอ�กษรภาษาอ�งกฤษต�วใหญ% A, B, C,

D, …– เวลาน�ยามื:

หร0อจะเข�ยนแบบฟิ4งก�ช่�นก-ได

ช่0�อการแปล้ง จ!ดทำ�� (x,y) ถุ#กส%งไปหาA : (x;y) 7! (y;¡ x)

A((x;y)) = (y;¡ x)

ต�วอย%าง

B : (x;y) 7! (x + 2;y + 3)

C : (x;y) 7! (x + y;0)

D : (x;y) 7! (1:5x;3y)

E : (x;y) 7! (x;ex)

F : (x;y) 7! C(D((x;y)) = (1:5x + 3y;0)

การแปล้งเอกล้�กษณ�• การแปลงเอกล�กษณ์� (Identity Transformation)

ค0อ การแปล้งทำ��ส%งจ!ดทำ!กจ!ดไปหาต�วม�นเองI : (x;y) 7! (x;y)

การแปล้งเช่�งเสน• เรากล้%าวว%าการแปล้ง A เป*นการแปลงเชิ�งเส�น

(linear transformation) ถุาม�นสอดคล้องก�บสมบ�ต�ต%อไปน��

ส�าหร�บเวกเตอร� u, v ใดๆ ใน แล้ะค%าคงทำ�� c ใดๆ

R2R2

R2

1. A(u + v) = A(u) + A(v)

2. A(cu) = cA(u)

ต�วอย%าง• การแปล้งเอกล้�กษณ� I เป*นการแปล้งเช่�งเสน

เพราะ

• การแปล้ง ก-เป*นการแปล้งเช่�งเสน

• แต%การแปล้ง ไม%ใช่%การแปล้งเช่�งเสน เพราะ

1. I (u + v) = u + v = I (u) + I (v)

2. I (cu) = cu = cI (u)

A : (x;y) 7! (y;¡ x)

B : (x;y) 7! (x + 2;y+ 3)

B((2;2)) = (4;5) 6= (6;8) = B((1;1)) + B((1;1))

ขอส�งเกต• ถุา A เป*น linear transformation แล้ว

เพราะA(0) = 0

2A(0) = A(2£ 0) = A(0)

การแปล้งเช่�งเสนทำ��ส�าค�ญ 2 ช่น�ด• การย%อขยาย (Scaling)• การหม!น (Rotation)

การย%อขยาย• การย�อขยาย (Scaling) ค0อการแปล้งทำ��อย#%ในร#ป

ม�ความหมายค0อ– ขยายในแนวแกน x เป*นจ�านวน α เทำ%า– ขยายในแนวแกน y เป*นจ�านวน β เทำ%า

S®;¯ : (x;y) 7! (®x;¯y)

ต�วอย%าง• เน0�องจาก

ด�งน��น• • •

S1;1((x;y)) = (1x;1y) = (x;y)S1;1 = I

S2;2((1;3)) = (2;6)

S1;0:5((3;10)) = (3;5)

S1;2

การหม!น• การหม!น (rotation) ในทำ��น��จะตองก�าหนดม!ม θ แล้ะ

เราจะหม!นทำวนเข-มนาฬิ�การอบจ!ด origin ไปเป*น ม!ม θ

• ส�ญล้�กษณ� โดยRµ

Rµ : (x;y) 7! (xcosµ¡ ysinµ;ycosµ+ xsinµ)x

y

µ

ต�วอย%าง• ( หม!น 0 เรเด�ยนเทำ%าก�บไม%หม!นเล้ย)

•

•

I = R0

R ¼6((1;0)) =

³cos

¼6

;sin¼6

´=

³ p3

2;12

´

R ¼4

Linear Transformation แล้ะ Basis

• ให x = (1,0) แล้ะให y = (0,1) เราไดว%าส�าหร�บจ!ด (x,y) ใดๆ

(x,y) = x(1,0) + y(0,1) = xx + yy

• ถุา A เป*น linear transformation เราจะไดว%าA((x;y)) = A(xx + yy)

= A(xx) + A(yy)

= xA(x) + yA(y)

Linear Transformation แล้ะ Basis

• กล้%าวค0อถุาเราร# A(x) แล้ะ A(y) เราก-สามารถุ ค�านวณ A((x,y)) ส�าหร�บเวกเตอร� (x,y) ใดๆ ได

ทำ��งหมด• พ#ดอ�กแบบค0อ linear transformation จะถุ#กน�ยาม

ดวยค%าของม�นทำ�� basis ของ vector space

การแทำนการแปล้งเช่�งเสนดวยเมตร�กซ้ำ�

• สมมต�ว%า A(x) = (a,b) แล้ะ A(y) = (c,d)จะไดว%า

A((x;y)) = x(ax + by) + y(cx + dy)

= (ax + cy)x + (bx + dy)y

= (ax + cy;bx + dy)


• ถุาเข�ยนค#%ล้�าด�บ (x,y) ดวย column vector จะไดว%า

• ฉะน��นการแปล้งเช่�งเสนสองม�ต�ค0อเมตร�กซ้ำ� 2x2

·xy

¸

Aµ·

xy

¸¶=

·ax + cybx + dy

¸

=·a cb d

¸ ·xy

¸


• ส�งเกต

A =·a cb d

¸

A(x)



A =·a cb d

¸

A(y)

ต�วอย%าง• I เป*นการแปล้งเช่�งเสน แล้ะ I(x) = (1,0), I(y)

= (0,1)ด�งน��น

• เน0�องจาก ด�งน��น

I =·1 00 1

¸

เมตร�กซ้ำ�เอกล้�กษณ�

S®;¯ (x) = (®;0);S®;¯ (y) = (0;¯)

S®;¯ =·® 00 ¯

¸

ต�วอย%าง• เน0�องจาก

ด�งน��น

Rµ(x) = (cosµ;sinµ)

Rµ(y) = (¡ sinµ;cosµ)

Rµ =·cosµ ¡ sinµsinµ cosµ

¸

การเล้0�อนแกนขนาน• การเล��อนแกนขนาน (translation) ค0อ การแปล้ง

ทำ��อย#%ในร#ป

ม�ความหมายค0อ ถุา u = (u1, u2) แล้ว เราจะเล้0�อนร#ปไปตามแกน x เทำ%าก�บ u1 หน%วย

แล้ะเล้0�อนร#ปไปตามแกน y เทำ%าก�บ u2 หน%วย

Tu : v 7! v + u

ต�วอย%าง• I เป*นการเล้0�อนแกนขนาน เพราะ I(u) = u + 0

ด�งน��น I = T(0,0) ( เข�ยนง%ายๆ ว%า T0,0)

• T2,3 (0,0) = (2,3) ด�งน��น T2,3 ไม%ใช่%การแปล้งเช่�งเสน

• กล้%าวค0อ ถุา u ไม%ใช่% 0 แล้ว Tu ไม%เป*นการแปล้ง เช่�งเสน เน0�องจาก Tu(0) = u ซ้ำ.�งม�ค%าไม%เทำ%าก�บ

0

ต�วอย%าง•

T1;1

Composition

• Composition ค0อการน�าเอาการแปล้งสองอ�นมารวมใหเป*นอ�นเด�ยวว�ธี�หน.�ง

• ให A ก�บ B เป*นการแปล้ง composition ของม�น ค0อการแปล้ง BA โดยทำ��

กล้%าวค0อเป*นการแปล้งทำ��เก�ดข.�นจากการน�าเวก เตอร�ขอม#ล้เขาไปแปล้งดวย A ก%อนแล้วจ.งแปล้ง

ดวย B

BA : (x;y) 7! B(A((x;y))

• ค0อการหม!น 90 องศูาแล้วเล้0�อนทำางแกนy หน.�งหน%วย

ต�วอย%างT0;1R ¼

2

R ¼2

T0;1T0;1R ¼2

ขอส�งเกต• ถุา A เป*นการแปล้งใดๆ แล้ว IA = AI = A• ระว�ง! โดยทำ��วไปแล้ว• ด#

AB 6= BA

R ¼2T0;1

R ¼2

T0;1

R ¼2T0;1

การแปล้งแอฟิไฟิน�• เรากล้%าวว%าการแปล้ง A เป*นการแปลงแอฟไฟน�

(affine transformation) ถุา

โดยทำ�� Tu เป*นการเล้0�อนแกนขนานแล้ะ B เป*นการแปล้งเช่�งเสน

A = TuB

ต�วอย%าง• I เป*นการแปล้งแอฟิไฟิน�เพราะ I = T0,0I

• เป*นการแปล้งแอฟิไฟิน� (อย%างเห-นไดช่�ด)• ก-เป*นการแปล้งแอฟิไฟิน�เช่�งเด�ยวก�น เพราะ

T0;1R ¼2

R ¼2T0;1

R ¼2T0;1(v) = R ¼

2(v + (0;1))

= R ¼2(v) + R ¼

2((0;1))

= R ¼2(v) + (¡ 1;0)

= T¡ 1;0R ¼2(v)

ขอส�งเกต• ถุา B เป*นการแปล้งเช่�งเสนแล้ว BTu จะเป*นการ

แปล้งแอฟิไฟิน�เสมอ เน0�องจาก

กล้%าวค0อBTu(v) = B(v + u) = B(v) + B(u) = TB (u)B(v)

BTu = TB (u)B

ขอส�งเกต• เราสามารถุพ�ส#จน�ไดทำ�านองเด�ยวก�นว%า ถุาแต%ล้ะต�ว

ของการแปล้ง เป*นการเล้0�อนแกนขนานหร0อการแปล้งเช่�ง

เสนแล้ว การแปล้ง จะเป*นการแปล้งแอฟิไฟิน�

• ด�งน��นการแปล้งแอฟิไฟิน�จ.งเป*นกล้!%มของการแปล้งทำ��รวม– การย%อขยาย– การหม!น– การเล้0�อนแกนขนาน– การแปล้งเช่�งเสนเอาไวทำ� �งหมด

A1;A2; : : : ;An¡ 1;An

AnAn¡ 1 ¢¢¢A2A1

Homogeneous Coordinates

• Homogeneous coordinates เป*นว�ธี�การแทำนจ!ด สองม�ต�ดวยเวกเตอร�สามม�ต�แบบหน.�ง โดยทำ��

เวกเตอร� (x,y,w) หมายถุ.งจ!ด (x/w,y/w) ถุา w ≠ 0

• ต�วอย%าง– (1,2,1) หมายถุ.งจ!ด (1,2)– (2,4,2) หมายถุ.งจ!ด (1,2) เช่%นเด�ยวก�น– (w,2w,w) ก-หมายถุ.งจ!ด (1,2) ส�าหร�บค%า w ใดๆ

การแทำนการแปล้งแอฟิไฟิน�ดวยเมตร�กซ้ำ�

• สมมต�ว%าเราม�การแปล้งแอฟิไฟิน�โดยทำ��

จะไดว%า

A = TuB

B =·a cb d

¸; u =

·ef

¸

Aµ·

xy

¸¶=

·a cb d

¸ ·xy

¸+

·ef

¸

=·ax + cy+ ebx + dy + f

¸


• ให

เม0�อเราค#ณ N ดวย (x,y,1) ซ้ำ.�งเป*นhomogeneous coordiate ของ (x,y) จะไดว%า

N =

2

4a c eb d f0 0 1

3

5

N

2

4xy1

3

5 =

2

4a c eb d f0 0 1

3

5

2

4xy1

3

5 =

2

4ax + cy+ ebx + dy + f

1

3

5

homogeneous coordinate ของA((x;y))


• ฉะน��น affine transform ค0อเมตร�กซ้ำ� 3x3 ทำ��แถุว ล้%างเทำ%าก�บ (0,0,1)



A =

2

4a c eb d f0 0 1

3

5

A(x) ¡ u = B(x)



A =

2

4a c eb d f0 0 1

3

5

A(y) ¡ u = B(y)



A =

2

4a c eb d f0 0 1

3

5

u = A(0)

ต�วอย%าง• • • • ด�งน��น

T0;1R ¼2((0;0)) = (0;1)

T0;1R ¼2((1;0)) ¡ (0;1) = (0;2) ¡ (0;1) = (0;1)

T0;1R ¼2((0;1)) ¡ (0;1) = (¡ 1;1) ¡ (0;1) = (¡ 1;0)

T0;1R ¼2

=

2

40 ¡ 1 01 0 10 0 1

3

5

เมตร�กซ้ำ�ของการแปล้งแอฟิไฟิน�ทำ��ส�าค�ญ

S®;¯ =

2

4® 0 00 ¯ 00 0 1

3

5 Rµ =

2

4cosµ ¡ sinµ 0sinµ cosµ 0

0 0 1

3

5

Tu =

2

41 0 u1

0 1 u2

0 0 1

3

5 I =

2

41 0 00 1 00 0 1

3

5

Composition แล้ะเมตร�กซ้ำ�• Composition ค0อการค#ณเมตร�กซ้ำ�• ต�วอย%าง

T0;1R ¼2

=

2

41 0 00 1 10 0 1

3

5

2

40 ¡ 1 01 0 00 0 1

3

5 =

2

40 ¡ 1 01 0 10 0 1

3

5

การแปล้งผ�นกล้�บ• การแปลงผั�นกล�บ (inverse) ของการแปล้ง A

ค0อการแปล้ง A-1 ทำ��ทำ�าให

• การแปล้งบางต�วไม%ม� inverse เช่%น• การแปล้งแอฟิไฟิน� A จะม� inverse ก-ต%อเม0�อเมตร�

กซ้ำ�ของ A ม� inverse พ#ดอ�กน�ยหน.�งค0อ

AA¡ 1 = A¡ 1A = I

A : (x;y) 7! (x;0)

det(A) 6= 0

การแปล้งผ�นกล้�บของการแปล้งแอฟิไฟิน�ทำ��ส�าค�ญ

¡S®;¯

¢¡ 1=

2

4® 0 00 ¯ 00 0 1

3

5

¡ 1

=

2

4

1® 0 00 1

¯ 00 0 1

3

5 = S 1® ; 1

¯

¡Tu

¢¡ 1=

2

41 0 u1

0 1 u2

0 0 1

3

5

¡ 1

=

2

41 0 ¡ u1

0 1 ¡ u2

0 0 1

3

5 = T¡ u

การแปล้งผ�นกล้�บของการแปล้งแอฟิไฟิน�ทำ��ส�าค�ญ

¡Rµ

¢¡ 1=

2

4cosµ ¡ sinµ 0sinµ cosµ 0

0 0 1

3

5

¡ 1

=

2

4¡ cosµ ¡ sinµ 0sinµ ¡ cosµ 0

0 0 1

3

5

=

2

4cos(¡ µ) ¡ sin(¡ µ) 0sin(¡ µ) cos(¡ µ) 0

0 0 1

3

5 = R¡ µ

01418341...

Documents