บทที่ โปรแกรมกราฟิก - kmuttstaff.kmutt.ac.th/~isurnich/ftp/cmm...

48
1 บทที2 โปรแกรมกราฟิก สารบัญ บทที2 โปรแกรมกราฟิก 1 โปรแกรมกราฟิก 5 ประเก็น Sierpinski 5 การทาโปรแกรม 2 มิติ 6 ระบบพิกัด 9 API ของ OpenGL 10 ฟังก์ชันต่างๆของกราฟิก 10 กราฟิกสถาปัตยกรรมแนวท่อและเครื่องทางานที่มีการเปลี่ยนสถานะ 11 ฟังก์ชันเชื่อมต่อประสาน OpenGL 12 วัตถุพื้นฐานและคุณลักษณะของมัน 12 คุณลักษณะของรูปหลายเหลี่ยม 15 ชนิดของรูปหลายเหลี่ยมใน OpenGL 16 การสร้างวัตถุทรงกลม 17 ข้อความ 18 เส้นโค้ง 20 คุณสมบัติ 20 สี 21 สีแบบ RGB 23 สีดัชนี 24 การกาหนดคุณสมบัติของสี 25 มุมมอง 26 มุมมองแบบตั้งฉาก 26 มุมมอง 2 มิติ 28 รูปแบบของเมตริกซ์ 28 ฟังก์ชันควบคุม 29 การโต้ตอบในระบบวินโดว์ 29 อัตราส่วนหน้าจอและช่องมุมมอง 29 main(), display() และ myinit() 30 โครงสร้างของโปรแกรม 31 โปรแกรมปะเก็น 31 วัตถุหลายเหลี่ยมและฟังก์ชันการก่อกาเนิด 32 ปะเก็น 3 มิติ 34 การใช้จุดในปะเก็น 3 มิติ 34 การใช้รูปหลายเหลี่ยมใน 3 มิติ 35 การกาจัดผิวหลบ 36 การพล็อตด้วยฟังก์ชันที่เป็นนัย 38

Upload: others

Post on 15-Jan-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

1

บทท 2 โปรแกรมกราฟก

สารบญ บทท 2 โปรแกรมกราฟก 1

โปรแกรมกราฟก 5

ประเกน Sierpinski 5

การท าโปรแกรม 2 มต 6

ระบบพกด 9

API ของ OpenGL 10

ฟงกชนตางๆของกราฟก 10

กราฟกสถาปตยกรรมแนวทอและเครองท างานทมการเปลยนสถานะ 11

ฟงกชนเชอมตอประสาน OpenGL 12

วตถพนฐานและคณลกษณะของมน 12

คณลกษณะของรปหลายเหลยม 15

ชนดของรปหลายเหลยมใน OpenGL 16

การสรางวตถทรงกลม 17

ขอความ 18

เสนโคง 20

คณสมบต 20

ส 21

สแบบ RGB 23

สดชน 24

การก าหนดคณสมบตของส 25

มมมอง 26

มมมองแบบตงฉาก 26

มมมอง 2 มต 28

รปแบบของเมตรกซ 28

ฟงกชนควบคม 29

การโตตอบในระบบวนโดว 29

อตราสวนหนาจอและชองมมมอง 29

main(), display() และ myinit() 30

โครงสรางของโปรแกรม 31

โปรแกรมปะเกน 31

วตถหลายเหลยมและฟงกชนการกอก าเนด 32

ปะเกน 3 มต 34

การใชจดในปะเกน 3 มต 34

การใชรปหลายเหลยมใน 3 มต 35

การก าจดผวหลบ 36

การพลอตดวยฟงกชนทเปนนย 38

Page 2: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

2

วธการมาชชงสแควร 38

การวางแผนฟงกชนโดยปรยาย 43

สรปและบนทก 44

ค าแนะน า 45

แบบฝกหด 46

Page 3: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

3

สารบญภาพ

รป 2.1 การสรางประเกน Sierpinski .............................................................................................................................................................................. 5

รป 2.2 ปะเกน Sierpinski ทถกสรางดวยจดสม 5,000 จด ........................................................................................................................................... 9

รป 2.3 ภาพการแปลยนจากปรภมโลกไปเปนปรภมราสเตอร ....................................................................................................................................... 9

รป 2.4 ระบบกราฟกเปรยบเสมอนกลองด า ซงเปนหวใจส าคญของคอมพวเตอรกราฟก ..........................................................................................11

รป 2.5 ผงการจดการคลงโปรแกรมของ OpenGL ......................................................................................................................................................12

รป 2.6 สถาปตยกรรมของกระบวนการของ OpenGL ................................................................................................................................................13

รป 2.7 จดและลกษณะของสวนของเสนตรง ...............................................................................................................................................................14

รป 2.8 วตถโพลกอนทไดรบการเตมเตม .....................................................................................................................................................................14

รป 2.9 วธการแสดงโพลกอน .......................................................................................................................................................................................15

รป 2.10 รปแบบของโพลกอน .....................................................................................................................................................................................15

รป 2.11 การทดสอบวตถทมผวนน ..............................................................................................................................................................................15

รป 2.13 วตถนน ...........................................................................................................................................................................................................16

รป 2.14 ประเภทของโพลกอน .....................................................................................................................................................................................16

รป 2.15 แถบสามเหลยม, แถบสเหลยม และสามเหลยมใบพด ...................................................................................................................................16

รป 2.16 ทรงกลมถกอางองโดยแถบสเหลยม...............................................................................................................................................................17

รป 2.17 การเขยน (ตวอกษรตนแบบ) ..........................................................................................................................................................................19

รป 2.18 องคประกอบของจดภาพ ................................................................................................................................................................................19

รป 2.19 แสดงค าตอบของจดภาพ ................................................................................................................................................................................20

รป 2.20 คณลกษณะตางๆ ............................................................................................................................................................................................21

รป 2.21 คณสมบตตางๆทเปนไปไดของอกขระแบบสโตรก ......................................................................................................................................21

รป 2.22 การไลส ..........................................................................................................................................................................................................22

รป 2.23 วงสมาตรฐานทงสองแบบ ..............................................................................................................................................................................22

รป 2.24 ลกษณะพกดลกบาศกส ..................................................................................................................................................................................23

รป 2.25 หนวยความจ ากนชนกรอบแสดงผลส าหรบ สแดง เขยว น าเงน ...................................................................................................................23

รป 2.26 ตารางคาสดชนเทยบสแบบ RGB ...................................................................................................................................................................25

รป 2.27 ลกษณะสดชน ................................................................................................................................................................................................25

รป 2.28 มมมองจากการเคลอนยายกลองไปมาตามแนวระนาบ ..................................................................................................................................26

รป 2.29 กราฟกแบบตงฉาก โปรเจกต กบ โปรเจกต ระนาบ z=0 ............................................................................................................................27

รป 2.30 กลองคาเรมตนและปรมาตรมมมองออโตกราฟก ..........................................................................................................................................27

รป 2.31 การฉายภาพแบบกราฟกสตงฉาก ...................................................................................................................................................................27

รป 2.32 ปรมาตรมมมอง ..............................................................................................................................................................................................28

รป 2.33 มมมอง 2 มต ..................................................................................................................................................................................................28

รป 2.34 ลกษณะการแสดงผลเมอจอแสดงผลไมเหมอนกน ........................................................................................................................................30

รป 2.35 รปแบบของชองมมมอง .................................................................................................................................................................................30

รป 2.36 ดานของสามเหลยม ........................................................................................................................................................................................32

รป 2.37 สามเหลยมทไดจากการแบงยอย ....................................................................................................................................................................34

Page 4: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

4

รป 2.38 โครงสรางพรามด ...........................................................................................................................................................................................34

รป 2.39 ประเกน Sierpinski สามมต ...........................................................................................................................................................................35

รป 2.40 รปสามเหลยมทแบงออกเปนสวนยอย ...........................................................................................................................................................35

รป 2.41 การยายพนทผวทหลบซอน ............................................................................................................................................................................36

รป 2.42 ประเกนสามมต หลงจากท าฟงกชนกอก าเนด 5 ชน (มมมองดานบน) .........................................................................................................37

รป 2.43 เซลลรปสเหลยมผนผา ...................................................................................................................................................................................39

รป 2.44 การท าสญลกษณทจดยอดของลกบาศก .........................................................................................................................................................39

รป 2.45 การไขวเซลลทเสนรอบขอบ ..........................................................................................................................................................................40

รป 2.46 การแทรกจดตดทง 2 ของเซลลขอบ ..............................................................................................................................................................41

รป 2.47 ตวอยางทมลกษณะเฉพาะทมการท าสญลกษณทจดยอด ...............................................................................................................................41

รป 2.48 ตวอยางทมการท าสญลกษณทจดยอดบนเสนรอบขอบ .................................................................................................................................41

รป 2.49 ลกษณะทคลมเครอ .........................................................................................................................................................................................42

รป 2.50 ตวอยางของรปทรงแตกตางกนดวยการตดปาย .............................................................................................................................................42

รป 2.51 แผนกของกอน ...............................................................................................................................................................................................43

รป 2.52 กรณทเสนตดสวนวาดเสน .............................................................................................................................................................................43

รป 2.53 รปไขของ Cassini ..........................................................................................................................................................................................44

รป 2.54 แปลงสขอมลของ honolulu .........................................................................................................................................................................44

รป 2.55 รนของเกลดหมะ koch ..................................................................................................................................................................................46

รป 2.56 เขาวงกต ..........................................................................................................................................................................................................47

รป 2.57 เมช ..................................................................................................................................................................................................................48

Page 5: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

5

โปรแกรมกราฟก

วธของเราในการเขาถงคอมพวเตอรกราฟกนนคอเนนการใชโปรแกรมเปนหลก ดงนนเราตองการใหคณเรมใชโปรแกรมคอมพวเตอรกราฟกใหไดโดยเรวทสด สดทายนเราอยากจะขอแนะน าโปรมแกรมประยกตเชอมตอประสาน (Application programmer’s interface : API) ซง API ตวนเพยงพอทจะชวยคณในการใชโปรแกรมหลากหลายทนาสนใจทมองเหนปญหาไดทงแบบ 2 มต และ 3 มต และเพอใหคณคนเคยกบแนวทางหรอขนตอนพนฐานของกราฟก

เราจะพจารณากราฟก 2 มตเหมอนเปนกรณพเศษของกราฟก 3 มต การมองดวยมมมองแบบนจะท าใหเราเรมการท ากราฟกไดงายขนถงแมวาในบทเรยนนจะไมคอยไดพดถงแนวคด 3 มตเทาไหรนก รหส 2 มตของเราจะเขาไปด าเนนการโดยทไมตองเขาไปเปลยนแปลงหรอแกไขในระบบ 3 มตแตอยางใด

การพฒนาของเราใชปญหางายๆ แตมสารประโยชนอยางมาก เชนประเกน Sierpinski มนแสดงใหเหนวาเราสรางสงทนาสนใจและภาพทซบซอนใหกบคนมากมายไดเหนโดยการใชเพยงแคฟงกชนกราฟกในมอเทานน เราใช OpenGL เสมอน API ของเรา และแนวความคดของเรากวางไกลเพยงพอทจะรวบรวมระบบททนสมยทสดตางๆ ไวรวมกนได ฟงกชนการท างานของบทเรยนน มมากพอทจะสอนใหคณเขยนโปรแกรม 2 มต และ 3 มตไดโดยทไมตองการการโตตอบของผใช

ประเกน Sierpinski

เราใชปญหางายๆ คอภาพลายเสนของปะเกน Sierpinski ซงเปนสดสวนทนาสนใจและมประวตยาวนาน และมสงทนาสนใจ เชน สวนประกอบของรปทรงเรขาคณต ปะเกน Sierpinski นนเปนวตถทก าหนดแบบสมและยอนกลบได แตอยางไรกตามมนกมขอจ ากดคอไมไดท าการสมทงหมด เราเรมกนทรน 2 มต และ 3 มต ททเราจะเหนในหวขอท 2.11 ตอไปเหมอนกน

สมมตวาเราเรมดวยจด 3 จดในพนท ตราบใดกตามทจดเหลานไมวางอยในเสนเดยวกน มนจะเปนตวก าหนดจดทแตกตางและก าหนดจดทรวมกนของสามเหลยม เราสมมตวา ระนาบนเปน z = 0 และจด 3 จดนนมระบบพกด1 เปน (𝑥1, 𝑦1,0), (𝑥2, 𝑦2 , 0) และ (𝑥3, 𝑦3 ,0)

การด าเนนการกอสรางจะเปนดงตอไปน :

รป 2.1 การสรางประเกน Sierpinski

1. เลอกจดเรมตน (x, y, z) ทสมอยภายในสามเหลยม 2. เลอกหนงในสามจดทสม 3. หาทตงอยจดกงกลางระหวางจดเรมตนและสมเลอกจดสงสด 4. แสดงใหเหนจดใหมนโดยท าเครองหมายลงไปทตงตามทปรากฏหนาจอ เชน วาดวงกลมขนาดเลก 5. แทนทจด ท (x, y, z) ดวยจดใหมน 6. ยอนกลบไปสขนตอนท 2

1 ในบทท 4 เราจะอธบายแนวคดหลก (Concept) ของระบบพกดวาเปนมากกวาสวนอางองของเฟรม

Page 6: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

6

ดงนน เวลาทเราสรางจดใหมแตละจด เราจะน าไปแสดงไวในอปกรณแสดงผล หรอจอภาพ ขนตอนน จะแสดงใหเหนเปนตวอยางในรปท 2.1 ซง P0 เปนสถานทแรก สวน P1 และ P2 เปนสองสถานทแรก ทถกสรางขนโดยค าสงล าดบวธของเรา

กอนทเราจะพฒนาโปรแกรม คณอาจจะลองคดออกมาวาภาพผลลพธจะออกมาเปนรปอะไร

รปแบบทเปนไปไดส าหรบโปรแกรมกราฟกของเราคอ :

void main() { initialize_the_system();

for(some_number_of_points)

{

pt=generate_a_point();

display_the_point(pt);

}

cleanup();

}

ถงแมวาโปรแกรม OpenGL สดทายของเราจะมโครงสรางทแตกตางเลกนอย แตมนกท าไดงายๆ เราท าการพฒนาโปรแกรมเปนล าดบขนไปเรอยๆ ขนตอนแรกเรามงเนนไปทแกนหรอตวหลก คอการสรางและการแสดงจดตางๆ มสองค าถามทเราตองใหค าตอบคอ เราจะแสดงจดตางๆ เหลานลงในพนทไดอยางไร ? และเราควรจะใช 2 มต 3 มต หรอน าเสนอในรปแบบอนๆ ?

การท าโปรแกรม 2 มต

ถงแมวาเราใชปากกาพลอตเตอรในการท า API ส าหรบโปรแกรม 2 มต เชน ปะเกน Sierpinski โดยเฉพาะได แตมนกมขอจ ากดส าหรบเรา เราแทนทดวยการเลอกเรมใช ในรปแบบโลก 3 มตกอน โดยค านงถงระบบ 2 มต เชน หนงในภาพทเราสรางขนมาเปนกรณพเศษในทางคณตศาสตร เรามองดภาพระนาบ 2 มต เปนพนทยอยอกอนหนงบนพนทของ 3 มต ดงนน จงกลาวไดวา ---ทงตามจรงและทฤษฎ --- เกยวกบโลก 3 มตทใหญกวา จะคงไวส าหรบรป 2 มตทงายกวา

เราแสดงจดในระนาบ 𝑧 = 0 เปน 𝒑 = (𝑥, 𝑦, 0) ในโลก 3 มต หรอ 𝒑 = (𝑥, 𝑦) ในระนาบ 2 มต ระบบกราฟก 3 มตอยาง OpenGL จะชวยใหเราใชเปนตวอยางแทนได ไมวาผใชจะเลอกรปแบบไหนกตาม เราใชมนแสดงเปนตวแทนของจดไดในหลายวธ แตทงายทสดคอการคดจด 3 มต เปนจดทถกน าเสนอโดยจดทรปเพลท (triplet) 𝒑 = (𝑥, 𝑦, 𝑧) หรอเมตรกซคอลมน

𝒑 = [ 𝑥𝑦𝑧 ]

ส าหรบตอนน เราไมสนใจค าถามทวา พกดของ 𝒑 เปนตวแทนของอะไร

เราใชค าวาจดยอด (vertex) และจด (point) ในลกษณะทแตกตางกนใน OpenGL จดยอด คอ ต าแหนงหนงในพนท เราใชพนท 2, 3 และ 4 มต ในคอมพวเตอรกราฟก เราใชจดยอดเพอก าหนดหรอแสดงถงเรขาคณตพนฐานทถกน ามาใชโดยระบบกราฟกตางๆ ของเรา เรขาคณตพนฐานทงายทสดคอ จดหนงจดในพนททถกระบไวโดยจดยอดสองจดยอด ก าหนดการแบงออกของเสนเปนวตถพนฐานทสอง สามจดยอดใชตรวจสอบไดทงรปสามเหลยมหรอวงกลม; สจดยอดก าหนดใหเปนรปสเหลยม และอนๆ

OpenGL มหลากหลายรปแบบส าหรบการท างานในหลายๆ ฟงกชน OpenGL มหลายรปแบบส าหรบการท างานหลากหลายรปแบบ ท าใหผใชเลอกสงทดทสดไดและเหมาะสมส าหรบปญหาของผใชมากทสด ส าหรบฟงกชนจดยอด เราเขยนไดในรปแบบฟอรมทวไป

glVertex*()

เครองหมาย * มความหมายไดทง 2 หรอ 3 ตวอกษรของรปแบบ nt หรอ ntv ทซง n แสดงถงจ านวนของมต (2, 3 หรอ 4); t แสดงถงชนดของขอมล เชน ขอมลชนดจ านวนเตม (i), ขอมลชนดเลขทศนยม (f) หรอขอมลชนดเลขทศนยมอยางละเอยด (d) และ v ถาถกน าเสนอเมอใด จะแสดงวาตวแปรตางๆ ถกก าหนดผานตวชจดถงอารเรย (array) มากกวาผานอารกวเมนต (argument) เราจะใชรปแบบใดกไดทดทสดส าหรบเรา ละออกจากรายละเอยดรปแบบอนๆ ไปทคมออางองของ OpenGL [Ope04b] ไมวาผใช จะเลอกใชรปแบบใด การแสดงผลออกมากเหมอนกน

Page 7: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

7

เชนเดยวกนกบพนราบทเราสรางปะเกนดไดเปนทงแบบ 2 มตหรอเปนหวงอวกาศยอย (subspace) ซอนอยในพนท 3 มต ทตรงกนกบระนาบ z = 0 ในบทท 4 เราจะเหนวาการแสดงพนฐานเปน 4 มต อยางไรกตามเรายงไมจ าเปนตองกงวลเกยวกบขอเทจจรงน

ใน OpenGL เรามกจะใช OpenGL ชนดขนพนฐาน เชน GLfloat และ GLint มากกวาประเภท C เชน float และ int ประเภทเหลานถกก าหนดอยในไฟลหวขอของ OpenGL --- ตวอยางเชน

#define GLfloat float

อยางไรกตามการใชชนดของ OpenGL นนยดหยนเพมเตมเขาไปในททเราตองการจะเปลยนได ตวอยางเชน เราตองการเปลยน floats เปน doubles โดยไมตองออกจากโปรแกรมทใชอย ณ ปจจบน

ถาผใชตองการท างานใน 2 มตดวยจ านวนเตมตางๆ ใหกลบไปทฟงกชนจดสงสด จากนนรปแบบ

glVertex2i(Glint xi, Glint yi)

จะเหมาะสมทสด และ

glVertex3f(GLfloat x, GLfloat y, GLfloat z)

จะระบหนงต าแหนงในพนท 3 มต โดยการใชตวเลขทศนยมความเทยงหนงเทา สดทายถาหากเราตองการใชอารเรยในการเกบขอมลจดยอด 3 มต ดงน

GLfloat vertex[3]

จากนนเราใช

glVertex3fv(vertex)

จดยอดตางๆนนใชสรางวตถพนฐานเรขาคณตได และตวเลขทแตกตางของจดยอดแตละจดจะตองตงอยบนพนฐานของจดนนๆ ดวย เรารวมหลายๆ จดยอดตามทเราตองการระหวาง glBegin() และ glEnd() อารกวเมนตของ glBegin() ใชระบประเภทของเรขาคณตทเราตองการใหจดยอดของเราก าหนด ดงนนสวนของเสนตรงจะมวธการสรางไดดงน

glBegin(GL_LINES);

glVertex3f(x1,y1,z1);

glVertex3f(x2,y2,z2);

glEnd();

เราใชขอมลเดยวกนเพอก าหนดคของจดโดยใชแบบดงน

glBegin(GL_POINTS);

glVertex3f(x1,y1,z1);

glVertex3f(x2,y2,z2);

glEnd();

ตอนน เรามองเหนถงหวใจของโปรแกรมปะเกน Sierpinski ของเรา สมมตวาเราเลอกทจะสรางจดของเราทงหมดภายในตาราง 50 × 50

โดยทมมลางซายมอ คอ (0,0)

อนดบแรก เราตองพจารณาวาเราตองการแสดงขอมลทางเรขาคณตในโปรแกรมของเราอยางไร เราใชพนฐานการน าเสนอทงายทสดในการแยกตวแปร ของ x, y และ z (ในรปแบบ 3 มต) เนองจากเราก าลงท างานบนระนาบ z=0 ในโปรแกรมน ดงนนเราใชรปแบบของการอางถงจดยอดดวยฟงกชน glVertex() ไดดงตอไปน

glVertex3f(x,y,0);

หรออกแบบคอ

glVertex2f(x,y);

เรายงก าหนดชนดขอมลใหมไดดวยถอยแถลง

typedef GLfloat point2[2];

Page 8: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

8

และอาจจะใช2

point2 p;

glVertex2fv(p);

โดยทวไปแลว เราวธทงายทสดในการก าหนดอารเรย เพอทจะคงจดตางๆ ไวโดยการใชรปแบบ glVertex3fv() หรอ glVertex2fv()

กลบไปทปะเกน Sierpinski เราสราง display() ในการสรางการแสดงจ านวน 5,000 จด ในแตละครงทถกเรยก เราถอวาล าดบหรออารเรยของจดสงสดสามเหลยมถกก าหนดขนในหนาจอ

void display()

{

GLfloat vertices[3][3]={{0.0,0.0,0.0}, {25.0,50.0,0.0}, {50.0,0.0,0.0}};

/* an arbitrary triangle in the plane z=0 */

GLfloat p[3]={7.5,5.0,0.0};

/* or set to any desired initial point inside the triangle */

int rand(); /* standard random-number generator */

g1Begin(GL_P0INTS);

for(ink k=0;k<5000;k++)

{

/* pick a random vertex from 0,1,2 */

int j=rand()%3;

/* compute new location */

p[0]=(p[0] + vertices[j][0])/2;

p[1]=(p[1] + vertices[j][1])/2;

/* display new point */

glVertex3fv(p);

}

glEnd();

glFlush();

}

จ าไววา เนองจากทกจดอยในระนาบ 𝑧 = 0 เราใชจด 2 มตได โดยการเปลยนเพยงสามบรรทดของรหสโปรแกรมใน display() ดงน

Glfloat vertices [3][2]={{0.0,0.0},{25.0,50.0},{50.0,0.0}};

GLfloat p[2] {7.5,5.0};

glVertex2fv(p);

rand() คอฟงกชนมาตรฐานในการสรางตวเลขสมทกอใหเกดจ านวนเตมใหมๆ ทกครงทถกเรยกใช เราใชตวควบคมโมดลส (ฟงกชนทางคณตศาสตรในการหารจ านวนเตมเพอเอาเศษ) ในการเปลยนแปลงจ านวนเตมเหลานออกเปน 3 จ านวน คอ 0, 1, และ 2 ส าหรบตวเลขนอยๆ ของการทวนซ านน โดยปกตแลวการสรางตวเลขสมใดๆ กตาม ควรจะตองท างานอยางนอยใหไดเทากบการสรางตวเลขสมนนๆ

การเรยกใช glF1ush() นนตองแนใจวา จดเหลานนแสดงผลออกมาทางหนาจอเรวทสด และถาหากออกมาแลว โปรแกรมจะตองท างานไดอยางถกตอง แตอาจจะสงเกตเหนความหนวง (delay) ของเครอขายหรอสภาพแวดลอม เรายงไมมโปรแกรมทเสรจสมบรณ รปท 2.2 จะแสดงใหเหนถงผลลพธทเราคาดหวงไว

จ าไววา เนองจาก จด 3 จดทไมไดอยบนเสนเดยวกนเหลาน ก าหนดอยบนระนาบ ใหเราเรมตนดวยจด 3 จด คอ (𝑥1, 𝑦1, 0), (𝑥2, 𝑦2, 0) และ (𝑥3, 𝑦3, 0) พรอมดวยจดเรมตนในระนาบเดยวกนแลว จากนนเพมโคดโปรแกรมหรอรหสเขาไป

p[2] =(p[2]+vertices[J][2])/2.0;

ภายในรหสโปรแกรม ปะเกนจะถกสรางบนระนาบทก าหนดไว ซงก าหนดโดยจดพนฐาน 3 จด

2 เนองจาก OpenGL ไมใชการเนนวตถเปนหลก เราจงท าในสงทเราตองการจรงๆ ไมได ซงเปนการก าหนดจดวตถดวยการตอบสนองของผควบคมมากเกนไป (ดแบบฝกหดท 2.21)

Page 9: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

9

รป 2.2 ปะเกน Sierpinski ทถกสรางดวยจดสม 5,000 จด

เราไดท าการเขยนสวนหลกของโปรแกรม แตเราจะยงตองกงวลเกยวกบปญหาทอาจเกดขนดงตอไปน :

1. เราก าลงวาดสอะไร 2. ภาพของเราจะไปปรากฏทไหนของหนาจอ 3. ภาพจะใหญขนาดไหน 4. เราจะสรางรปบนพนทจอหนาตางยงไง 5. พนทวาดรปของเราทจะไปปรากฏในจอภาพจะไปสนสดไดแคไหน 6. ภาพทจะไปปรากฏบนจอภาพนานแคไหน

ค าตอบส าหรบค าถามเหลานเปนสงส าคญ ถงแมวาแรกเรมพวกมนจะไปปรากฏอยรอบนอกและเราไมไดใหความส าคญอะไร เราจะเหนไดวารหสพนฐานทเราพฒนาเพอตอบค าถามเหลานได และควบคมการวางและการปรากฏของภาพทเราสราง จะตองไมเปลยนขามโปรแกรม ดงนน

ความพยายามทเราจะขยายตอจะท าตอในภายหลง

ระบบพกด

ณ จดนอาจจะงงเกยวกบการแปลคาของ x, y และ z ในจดสงสดตางๆ ของพวกมนจะไปอยในหนวยไหน ฟต เมตร หรอไมครอน และตนก าเนดทแทจรงอยทไหน ซงแตละกรณนนค าตอบทงายทสดคอ แลวแตคณ

แตเดมนนระบบกราฟกจะตองมผใชในการระบขอมลทงหมด เชน ต าแหนงของจดตางๆ ตรงไปยงหนวยแสดงผล อาจกลาวไดวาในแอปพลเคชนระดบสง เราจะพดถงเกยวกบจดในหนวยของ จดภาพ หรอเซนตเมตร จากมมของจอแสดงผล วธการนยงมปญหาทเหนไดชด หนงในนนคอ ความไมเปนเหตเปนผลในการใชระยะหางบนจอคอมพวเตอร เพอบรรยายปรากฏการณทหนวยวดในธรรมชาต ซงอาจเปนปแสง (เชนการน าเสนอขอมลทางดาราศาสตร) หรอไมครอน (ส าหรบการออกแบบวงจรอนทเกรต) หนงในการกาวหนาหลกๆ ของระบบซอฟตแวรกราฟกเกดขน เมอระบบกราฟกตางๆ ยอมใหผใชท างานในระบบประสานใดกไดทเขาตองการ ระบบประสานงานของผใชกลายเปนระบบประสานงานระดบโลกหรอระบบโปรแกรมประสานงาน ภายในขอจ ากดเลกๆ นอยๆ ของจดทศนยมในคอมพวเตอรของเราเพอทจะใชตวเลขใดๆ กไดทเหมาะสมกบโปรแกรมของเรา

รป 2.3 ภาพการแปลยนจากปรภมโลกไปเปนปรภมราสเตอร

Page 10: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

1

0

หนวยทปรากฏในหนาจอแรกเรมเรยกวา ตวเชอมหรอตวประสานอปกรณกลไกทางวตถ หรอตวประสานส าหรบอปกรณการปรบใหเปนจดภาพ (raster) เชน CRT เราใชพกดวนโดว (window coordinates) หรอพกดของฉาก (screen coordinates)3 ตวพกดของฉากจะเปนตวสงในบางรปแบบของจ านวนเตม เพราะศนยกลางของจดภาพในหนวยความจ ากนชนกรอบแสดงผล จะตองถกวางอยบนตารางทก าหนดตายตวไว เนองจากวาจดภาพตางๆ นนถกแยกออกจากกนอยางสนเชง และเราระบต าแหนงพวกมน โดยการใชคาของ จ านวนเตมตางๆ

ในบางจด คาของพกดโลกจะตองถกแปลงเขากบพกดของฉาก ทแสดงใหเหนในรปท 2.3 ระบบกราฟกจะรบผดชอบในสวนน และการแปลงจะถกกระท าตามขนตอนโดยอตโนมต และเราดไดในหวขอตอไปวาผใชจ าเปนทจะตองระบตวแปรเพยงนดเดยว เชน พนทของโลกทเธอตองการจะเหน และขนาดทจะใหแสดงออกมา เพอก าหนดการแปลงครงน

API ของ OpenGL

เรามหวใจของโปรแกรมกราฟกอยางงายแลว ตอนน เราตองการจะควบคมใหวตถทเราสรางปรากฏขนทางจอแสดงผลอยางไร เรายงตองการควบคมขนตอนการท างานของโปรแกรม เราจะไปอธบายรายละเอยดในเรองนใน OpenGL API เนองจากจดตางๆ แสดงในลกษณะเดยวกน ไมวาจะถกระบเปน2 มต หรอ 3 มต ทกอยางทเราท าทนจะเทากนกบใน 3 มตแนนอน เราท าไดมากกวาใน 3 มต แตนเปนเพยงการเรมตน ในบทนเราจะเนนในเรองจะระบพนฐานในการแสดงผลหนาจออยางไรซงเราจะกลาวในบทท 3

โครงสราง OpenGL จะคลายกบของ API ททนสมยทสด รวมทง java3D และ DirectX ดงนน ความพยายามใดกตามทคณใสใจในการเรยนร OpenGL จะท าใหรไปถงระบบอนๆ ของซอฟตแวรดวย ถงแมวา OpenGL จะเรยนรงายเมอเทยบกบ API แลว แตมนกมประสทธภาพอยางมาก มนชวยในเรองโปรแกรม 2 มต และ 3 มต ทเราพฒนาในบทท 2 ถงบทท 6 นอกจากน มนยงชวยพฒนาเทคนคตางๆ ทเราเรยนในบทท 8 ถงบทท 12 อกดวย

เปาหมายส าคญของเราคอการศกษาคอมพวเตอรกราฟก เราใชโปรแกรม API เพอชวยใหเราบรรลเปาหมาย ดงนน เราจะไมน าเสนอฟงกชนทงหมดของ OpenGL และเราจะขามรายละเอยดบางอยางไปบาง อยางไรกตาม โปรแกรมตวอยางของเราจะครบถวนสมบรณ ส าหรบขอมลเพมเตมเกยวกบ OpenGL และ API จะกลาวไวในทายบทน

ฟงกชนตางๆของกราฟก

แบบพนฐานของเราในรปแบบกราฟกส าเรจรป คอกลองด า เปนค าศพททวศวกรใชเรยก เพอแสดงวาระบบไดถกอธบายโดย การน าขอมลเขา (Input) และการสงขอมลออก (Outputs) ของตวมนเอง เราอาจจะไมรอะไรเลยเกยวกบการท างานภายในของมน แตเราคดถงระบบกราฟกในรปแบบของกลองทน าเขาขอมลถกเรยกจากผใชไดถกวดคาจากอปกรณปอนขอมลตางๆ เชน เมาส คยบอรดและขอมลอนๆ เชน ขอความตางๆ ทไดจากการท างานของระบบ สวนการสงขอมลออก โดยพนฐานแลวเปนกราฟกตางๆ ทสงไปทอปกรณสงขอมลทไดจากการปอนเขา เราจะอธบายอยางงายวา การน าขอมลเขาคอฟงกชนหรอขอมลทใสเขาไป สวนการสงขอมลออก เปนสงทแสดงผลออกทางจอภาพ อยางภาพตวอยางทแสดงในรปท 2.4 ถงแมวา OpenGL เปนระบบทเราใชทวไป ภาพกราฟกทงหมดนนไดโครงสรางเดยวกนกบ API ทกประการ

เราอธบายโปรแกรม API ผานฟงกชนในคลงโปรแกรมไปแลว ตว API ทดจะตองประกอบไปดวยหลายรอยฟงกชน เพราะมนจะมประโยชนและชวยแยกพวกมนออกเปน 7 กลม ดงน

1. ฟงกชนการสรางวตถพนฐาน 2. ฟงกชนวธการใช 3. ฟงกชนการก าหนดมมมอง 4. ฟงกชนการแปลงวตถ 5. ฟงกชนการปอนขอมล 6. ฟงกชนการควบคมวนโดว

3

OpenGL ท าใหเกดความแตกตางระหวางการปรบใหเปนจดภาพ (raster) และฉาก (screen) แตความแตกตางนจะไมส าคญจนกวาเราจะเรยนรวาการสงขอมลของ OpenGL ท าอยางไร ในบทท 7

Page 11: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

1

1

7. ฟงกชนการจดหาขอมลส าหรบโปรแกรมเรยกใช (inquiry) ฟงกชนพนฐาน ก าหนดวตถระดบลางหรอรปพรรณขนาดเลก(อะตอม) ทระบบของเราแสดงผลได พนฐานดงกลาว รวมถงจดตางๆ การ

แยกเสนตางๆ รปหลายเหลยมตางๆ จดภาพตางๆ ตวหนงสอ และอกหลากหลายชนดของเสนโคงและพนผว ซงขนอยกบโปรแกรม API ดวย

ถาหากพนฐานของ API เปนอะไรทแสดงใหเหนพนฐานของวตถไดแลวนนตวคณลกษณะจะเปนตวแสดงใหเหนวา ท าไดอยางไร ซงตวคณลกษณะนจะคอยควบคมเสนทางทจะไปปรากฏหรอแสดงผลออกทางหนาจอ ซงฟงกชนวธการใชจะเปนตวบอกใหเราปฏบตตาม

รป 2.4 ระบบกราฟกเปรยบเสมอนกลองด า ซงเปนหวใจส าคญของคอมพวเตอรกราฟก

การด าเนนการแบงประเภทจากการเลอกสดวยสงทเราแสดงดวยเสนทเปนการแบง เพอหยบรปแบบดวยการเตมเขาไปในโพลกอน เพอเลอกตวพมพส าหรบหวเรองบนกราฟ

กลองทท าขนของเราจะตองถกอธบาย ถาเราจะสรางรปภาพ ตามทเราเหนในบทท 1 เราตองอธบายต าแหนงของกลองและทศทางในโลกของเราและตองเลอกเลนสทคาเทากน กระบวนการนจะไมเพยงเปนการก าหนดภาพทแนนอนแตยงใหเราท าการตดวตถทใกลเกนไปหรอไกลเกนไป สวนหนาทในการมองทวทศนจะใหเราระบภาพ ถงแมวา APIs จะแตกตางในระดบของความยดหยนทกลองไดใหในการเลอกภาพ

คณสมบตอนหนงของ API ทดคอ มนควรจะใหชดของหนาทในการเปลยน ทใหเราท าการเปลยนวตถไดส าเรจ เชน การหมน การเปลยนแปลง และการวด การปรบภาพในบทท 5 และการสรางแบบจ าลองในบทท 10 ซงจะมการใชรปแบบการเปลยนรปทเขมขน ใน OpenGL เรายงมการแสดงรปตามวตถประสงคผานการปรบเปลยน

ส าหรบสวนเชอมตอประสานโปรแกรมประยกตกบผใชงาน (API) ตองใหชดของฟงกชนการน าขอมลเขา เพอใหเราจดการกบรปแบบหลายดานของ การน าขอมลเขา ทมคณสมบตทเปนระบบกราฟกแบบใหม เราตองการฟงกชนทจะจดการกบอปกรณ เชน คยบอรด เมาส และตารางขอมล ในบทท 3 เราเเนะน าฟงกชนในการท างานกบโหมดการน าขอมลเขา ตางๆและท างานกบชดของอปกรณการน าขอมลเขา

ในโปรแกรมประยกตทแทจรง เรายงตองกงวลเกยวกบการจดการความซบซอนในการประมวลผล สภาพแวดลอมทเปดหนาตางซอนกน – ทมกจะเปนสภาพแวดลอมทเราตองเชอมตอกบเครอขายและมผใชคนอนๆ ฟงกชนควบคมท าใหเราตดตอกบระบบวนโดวเพอเรมตนโปรแกรมและเพอจดการกบขอผดพลาดทเกดขนหลอกๆในชวงด าเนนการโปรแกรม

ถาเราจะเขยนโปรแกรมเกยวกบอปกรณ – ซงเปนโปรแกรมอสระ เราคาดหวงทจะน า API ไปใชเพอดแลความแตกตางระหวางอปกรณ เชน มกสทจะรองรบหรอขนาดเทาใดทจะแสดงได อยางไรกตาม มนมโปรแกรมประยกตทตองรจกคณสมบตในการน าไปใชในแบบเฉพาะทาง ตวอยางเชน เราอาจจะเลอกทจะท าอยางแตกตางถาเรารลวงหนาวาเราก าลงท างานเกยวกบจอภาพทจะรองรบเพยง 2 ส คอนขางมากกวา 1 ทมเปนลานส โดยทวไป ภายในโปรแกรมประยกตเรามกจะใชขอมลอนๆใน API ได รวมถงพารามเตอรของกลอง หรอคาในหนวยความจ ากนชนกรอบแสดงผล (frame buffer) – API ทดจะตองใหขอมลเหลานผานชดของฟงกชนตงกระทถาม

กราฟกสถาปตยกรรมแนวทอและเครองท างานทมการเปลยนสถานะ

ถาเราน าเอามมมองนมารวมกบกราฟก APIs เราจะไดภาพอกแบบหนง เราจะเขาใกลกบ OpenGL โดยเฉพาะ มนจะจดและด าเนนการอยางแทจรง เราคดถงระบบกราฟกทงหมด เชน เครองท างานทมการเปลยนสถานะ ซงเปนกลองด า ทมเครองนามธรรมสถานะจ ากด เครองนามธรรมสถานะนม การน าขอมลเขา ทมาจากโปรแกรมโปรแกรมประยกตและอาจจะเปลยนเครองนามธรรมสถานะหรอสาเหตของเครองเพอสรางการสงขอมลออก (outputs) ทเหนได จากมมมองของ API ฟงกชนกราฟกม 2 ชนดทมค าจ ากดความเรมตนทการไปตามขบวนการผานสถาปตยกรรมแนวทอเขาไปในเครองนามธรรมสถานะและอกอนหนงททงเปลยนภายในเครองนามธรรมสถานะหรอกลบมายงขอมลของสถานะ ใน OpenGL ฟงกชน เชน เปนชนดเเรก และฟงกชนอนๆ เกอบทงหมดจะเปนชนดทสอง

ผใชโปรแกรม อปกรณ

น ำเขำ/สงออก

ระบบกรำฟก เรยกใชฟงกชน ขอมลออก

ขอมลเขำ ขอมล

Page 12: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

1

2

ผลลพธทส าคญอนหนงของภาพนอยใน OpenGL ท พารามเตอรสวนใหญจะมหนาททเปลยนสถานะ ตวอยางเชน ทนทเราตงสไว สนนจะคงอยในยนตสปจจบน จนกระทงมนถเปลยนโดยส – ทเปนฟงกชนเปลยนส อกผลลพธหนงของภาพนคอการสบเนองมาจากสงทเราพจารณาวาเปนเหมอนสรางขอบเขตใหกบวตถ – เสนสแดงและวงกลมสน าเงน – อยในสวนทแทจรงของเครองสถานะ และเสนดงกลาวจะถกวาดเปนสแดงเทานนถาเปนสของสถานะทเปนอยกจะตองวาดใหเปนสแดง ถงแมวาภายในโปรแกรมประยกตมกจะไมเสยหาย และมกจะเปนทตองการ ซงเพอทจะใหเปนขอบเขตแกการเรมตน มนอาจจะมผลกบผลลพธถาเราละเลยทเปลยนสถานะเมอจ าเปนหรอสญเสยชองในสถานะปจจบน

ฟงกชนเชอมตอประสาน OpenGL

ชอของฟงกชนใน OpenGL เรมดวยตวอกษร GL และถกเกบไวในกลมของโปรแกรมทมกจะอางถงเปน GL (หรอ OpenGL ในวนโดว) มนมกลมโปรแกรมทเกยวของไมมากนกทเราใชดวยเหมอนกน โปรแกรมแรกคอ Graphics Library Utility (GLU) กลมโปรแกรมนใชฟงกชน GL เทานนแตจะมรหสโปรแกรมในการสรางวตถแบบทวไป เชน spheres และในสวนของงานอนๆทผใชไมตองการเขยนซ า กลมโปรแกรม GLU พบไดใน OpenGL ทท าใหเกดผลทงหมด กลมโปรแกรมอนทสองเนนไปทปญหาของการเชอมโยงกบระบบวนโดว เราใชกลมโปรแกรมทหาไดในทนทเรยกวา Graphics Library Utility Toolkit (GLUT) ทใหฟงกชนทนอยทสดทคาดวาจะมมในระบบวนโดวแบบใหม ในบทท 3 ทพจารณาการน าขอมลเขาและการโตตอบในรายละเอยด รปท 2.5 แสดงกลมของกลมโปรแกรมส าหรบสภาพแวดลอมของ ระบบเอกซวนโดว (XWindow) กลมโปรแกรม GLX ไดให ความเชอมโยง ทนอยมากระหวาง OpenGL และ ระบบเอกซวนโดว ซง GLX ถกใชโดย GLUT และ ดงนนกลมโปรแกรมนและกลมโปรแกรมอนๆเรยกมาจาก กลมโปรแกรม OpenGL แตโปรแกรมโปรแกรมประยกตไมตองการอางไปถงกลมโปรแกรม OpenGL น แตโปรแกรมโปรแกรมประยกตไมตองการอางถงกลมโปรแกรม OpenGL โดยตรง กลมองคประกอบทคลายกนไดคงไวเพอสภาพแวดลอมอนๆ ตวอยางเชน ดวย ไมโครซอฟต วนโดว ทกลมโปรแกรมเรยกวา wgl แทนท GLX ในขณะทถาเปนคอมพวเตอรของแมคอนทอชใชกลมโปรแกรมเรยกวา agl

OpenGL ท าใหการใชงานหนกของมาโคร4 (macros) เพอเพมความสามารถในการอานรหส และหลกเลยงการการใชตวเลขพเศษดงนนขอความเชน GL_FILL และ GL_POINTS มการก าหนดแลวในไฟลสวนหว (header.h) โดยเปนบรรทดหนงในค าสง "include"

#include <GL/glut.h>

หรอ

#include <glut.h>

ซงไฟลสวนหวดงกลาวจะไดรวมเอาไฟลสวนหวทส าคญกบ OpenGL ไดแก gl.h และ glu.h เขามาในระบบดวย

รป 2.5 ผงการจดการคลงโปรแกรมของ OpenGL

วตถพนฐานและคณลกษณะของมน

ในกลมของงานกราฟกนน มนมการถกเถยงอยเสมอเกยวกบวตถพนฐานทควรจะถกน าไปรองรบใน API ใหญ การถกเถยงเปนเรองทลาสมยและไมเคยทการแกไขอยางเตมท ทางฝายผทสนบสนนทมอยนอย มองวาการโตแยงทวา API ใหญควรจะมชดของวตถพนฐานเลกๆทฮารดแวร

4

กลมของค าสงส าหรบท างานอยางใดอยางหนงทล าดบของขนตอนดงกลาวจะเปนล าดบการท างาน ผใชจะเรยกใชค าสงในลกษณะมาโครเพยงค าสงเดยวจะท าใหเครองท างานกลมค าสงนนไปทละล าดบจนครบ

Page 13: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

1

3

ทงหมดรองรบได นอกจากนนวตถพนฐานควรมลกษณะตงฉากซงกนและกน (orthogonal) ซงแตละสวนทไดมาจะไมรบกนสวนทเหลอ ระบบทเลกทสดควรจะรองรบ เสน โพลกอน และบางรปแบบของขอความ (ตวอกษรทเรยงตอกน) โดยขอความทงหมดท าใหฮารดแวรมประสทธภาพได ในผลลพธอนๆ คอระบบยงรองรบชดของวตถพนฐานเฉพาะ เชน วงกลม เสนโคง พนผว และวตถทรงตน การโตแยงในทนคอผใชตองการวตถพนฐานทซบซอนมากขนเพอท าใหโปรแกรมประยกตทยากงายขน อยางไรกตามเพราะระบบฮารดแวรไมมากนกทรองรบชดของวตถพนฐานทใหญไดนนคอ การรวมเขาดวยกนของความตองการทงหมดของกลมผใชโดยโปรแกรมจะพฒนาดวยระบบเหลานนทบางทเคลอนยายไมไดเพราะการท าใหเกดผลบางอนรองรบชดของวตถพนฐานทงหมดได

OpenGL ใชระดบปานกลาง ซงกลมโปรแกรมพนฐานมชดของวตถพนฐานขนาดเลกและกลมโปรแกรม GLU ใหญ มกลมของวตถมากมายทมาจากกลมโปรแกรมพนฐาน

รป 2.6 สถาปตยกรรมของกระบวนการของ OpenGL

OpenGL รองรบวตถพนฐาน 2 ประเภท ไดแก วตถพนฐานทางเรขาคณตและจดภาพ (raster) วตถพนฐานเรขาคณตไดรบการจดการเปนหลกซงไดแก จด สวนของเสนตรง โพลกอน เสนโคง และพนผว การด าเนนการกบมนนเรมจากมนถกสงผานเขาไปยงสถาปตยกรรมของการประมวลผลทเกยวกบเรขาคณตดงแสดงในรปท 2.6 ซงขนตนวตถดบทเขามาคอจดยอด (vertex) ในขนตอนมนจะไดรบการแปลงใหเปนวตถทก าหนด จากนนมนจะถกประเมนวาวตถทสรางขนมาอยในกรอบของจอภาพหรอไมซงจอภาพจะแสดงเฉพาะวตถทอยในกรอบของจอภาพเทานนซ งขนตอนนคอการตดภาพวตถทเกนออก (clipping) จากนนวตถทอยในกรอบหนาจอจะไดรบการปรบเปนภาพแบบสองมตโดยกระบวนการฉายภาพไปยงฉาก (projection) และภาพทไดจะไดรบการปรบเปนจดภาพในขนสดทายทงนเนองจากหนาจอแสดงผลคอกลมของจดภาพนนเอง ในอกเสนทางหนงวตถดบทผานเขากระบวนการจะไมใชจดยอดทจะน าเอาไปสรางวตถพนฐาน ซงมนคอจดภาพและมนไมใชวตถทางเรขาคณตดงนนระบบกราฟกสจงมเสนทางการประมวลผลจดภาพโดยตรง อยางไรกตามจะยงไมกลาวถงในจดนและจะกลาวถงในบทตอๆไป

วตถพนฐานทางเรขาคณต OpenGL ถกระบโดยชดของจดยอด ดงนนรปแบบหนงของการสรางวตถในโปรแกรมจะมรปแบบดงแสดง

glBegin(type);

glVertex*(…);

.

.

.

glVertex(…);

กราฟกดวย OpenGL

การแปลงวตถ การตดภาพ การฉายภาพ

การด าเนนการจดภาพ

หนวยความจ ากนชนกรอบ

แสดงผล

กระบวนการทางจดภาพ

กระบวนการทางเรขาคณต

Page 14: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

1

4

glEnd();

คาของ type ระบวา OpenGL จะแปลความหมายของจดยอดตางๆทใชในการก าหนดวตถพนฐานอยางไร สวนฟงกชนอนของ OpenGL ทอยระหวางรอบวน glBegin() และ glEnd() เกดขนได ตวอยางเชนใชในการก าหนดคณลกษณะเฉพาะหรอแสดงการค านวณส าหรบคาจดยอดถดไประหวาง glBegin() และ glEnd() หรอระหวาง glVertex() แนวคดทส าคญทแตกตางกนระหวางชนดของวตถคอมนอาจจะมพนทภายในหรอไมกได วตถพนฐานทกชนดจะไดรบการนยามไมวาจะเปนในรปแบบของจดยอดหรอสวนตางๆของเสนตรงทเรยกวาสวนของเสนตรง (line segment) ซงไมเหมอนกบความหมายของเสนตรงปรกตทจะหมายถงเสนทมความยาวไมเปนอนนต เราใชสวนของเสนตรงเพอก าหนดการประมาณการณไปยงเสนโคงไดหรอใชล าดบของสวนของเสนตรงเพอเชอมตอกบขอมลทมคณคาส าหรบกราฟได คณยงใชสวนของเสนตรงส าหรบขอบทชดกบวตถ เชน โพลกอน ทอยภายใน สดทายนมนมกจะเปนการชวยอยางมากในการคดในบรบททงจดยอดและสวนของเสนตรง

ถาเราตองการแสดงจดของสวนของเสนตรง เรามทางเลอกไมมากนกใน OpenGL (รปท 2.7) วตถพนฐานและขอก าหนดรายละเอยดของชนดรวมถงสงตอไปน

Points(GL_POINTS) จดยอดแตละจดทแสดงจะมขนาดอยางนอย 1 จดภาพ

Line segments (GL_LINES) ชนดของสวนของเสนตรงเปนสาเหตของคทตอมาของจดยอด เพอตความวาเปน จดสดทายของสวนทพเศษ ขอสงเกตคอสวนทตอกนมามกจะไมเชอมตอกนเพราะการตความไดถกด าเนนการจากคของจดยอดเทานน

รป 2.7 จดและลกษณะของสวนของเสนตรง

Polylines (GL_LINE_STRIP , GL_LINE_LOOP) ถาจดจดยอดทตอกนมา (และสวนของเสนตรง) ไดถกเชอมตอกนเราใชแถบเสน (line strip) หรอรปแบบสวนของเสนตรงประกอบ (polyline) เสนโคงหลายเสนถกประมาณคาดวยเสนตรงประกอบทเหมาะสมได ถาเราตองการใหมนมรอบปด เรากใชจดยอดอนสดทายเปนจดเดยวกบจดยอดแรกหรอใช GL_LINE_LOOP ทจะวาดสวนของเสนตรงจากจดยอดทายไปสจดยอดแรก ดงนนการสรางดงกลาวนจะท าใหชองถกปด

รป 2.8 วตถรปหลายเหลยมทไดรบการเตมเตม

Page 15: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

1

5

รป 2.9 วธการแสดงของวตถหลายเหลยม

รป 2.10 รปแบบของวตถหลายเหลยม

(a) รปแบบอยางงาย (b) รปแบบซบซอน

คณลกษณะของรปหลายเหลยม

สวนของเสนตรงและแถบของเสนเปนแบบใหกบขอบของวตถได แตวตถทอยใกลกนอาจจะอยภายในดวย (รปท 2.8) เรามกจะใชชอโพลกอนหรอวตถหลายเหลยม เพออางถงวตถทมขอบทอธบายไดโดยเสนรอบปด แตยงมการก าหนดสงภายในไดอยางด5 โพลกอนแสดงบทบาทพเศษในคอมพวเตอรกราฟกเพราะเราแสดงโพลกอนไดอยางรวดเรวและใชมนเพอค านวณพนผวทก าหนดเอง ประสทธภาพของระบบกราฟกถกวดโดยจ านวนโพลกอนตอวนาททท าได เราสรางโพลกอนไดในหลายวธ สรางแคขอบได สรางใหขางในมสทงรปหรอท าใหมรปแบบตางๆ และสรางหรอไมสรางขอบกได ตามทแสดงในรปท 2.9 ถงแมวาภายนอกขอบของโพลกอนจะถกก าหนดอยางงายๆ จากล าดบล าดบของจดยอด ถาขางในก าหนดอยางไมดเทาไหร จะท าใหล าดบของจดยอด อาจจะสรางไมไดหรอสรางในลกษณะทไมเปนทตองการทงหมด คณสมบต 3 อยางทจะท าใหแนใจวาโพลกอนแสดงผลไดอยางถกตอง มนจะตองม ความงาย มโครงราง และมความราบเรยบใน รป 2 มตนน ตราบเทาทไมมขอบดานของโพลกอนทบซงกนและกน เราจะไดรปสามเหลยมอยางงายๆ ตามทเราเหนจากรปท 2.10 ซงเปนโพลกอน 2 มตแบบงายๆ ทมการก าหนดภายในไวอยางด ถงแมวาต าแหนงของจดยอดจะก าหนดวามหรอไมมโพลกอนแบบงายๆ หรอไม ซงคาทไดจากการทดสอบมความเพยงพอวางายสง (ดในแบบฝกหดท 2.12) ทระบบกราฟกสวนใหญตองการใหโปรแกรมโปรแกรมประยกตนนท าการทดสอบทจ าเปน เราถามในสงระบบกราฟกท าถามนท าใหโพลกอนไมมความงายทจะแสดงผลและถาเปนวธทจะท าใหภายในโพลกอนมความชดเจนวาเปนโพลกอนทยาก เราจะมาตรวจสอบค าถามนในบทท 8

รป 2.11 การทดสอบวตถทมผวนน

5 ค าวา fill area บางครงถกใชแทนโพลกอน

Page 16: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

1

6

รป 2.12 วตถนน

จากมมมองของวธค านวณทางคณตศาสตรในทางปฏบตเพอเตมภายในโพลกอน ซงความงายอยางเดยวมกจะไมเพยงพอ APIs บางอน

รบประกนวาในการเตมมความสม าเสมอจากวธใชในการใชวธใชอยางเดยวถาโพลกอนมโครงราง วตถ หรอตรงขอบเขตของมน จะอยขางในวตถ (รปท

2.11) ถงแมวาเราจะมการด าเนนการเพยงวตถ 2 มต ค าอธบายนไมเปนการอางองกบชนดของวตถและไมทงกบจ านวนของมต วตถทมเคาโครง

รวมถง รปสามเหลยม รปสเหลยม สเหลยมผนผา วงกลม รปทรงกลม และปรซมหกดาน (รปท 2.12) มนมการทดสอบหลายครงส าหรบเรองเคา

โครงราง (ดในแบบฝกหดท 2.19) อยางไรกตาม เหมอนกบการทดสอบความงาย การทดสอบเคาโครงรางใชคาใชจายสงและมกจะละทงโปรแกรมโปรแกรมประยกต

ในรป 3 มตโพลกอนมความยากเพมขนเพยงเลกนอยเพราะไมเหมอนวตถ 2 มต ทจดยอดทงหมดทระบบกราฟกสวนใหญใช และเราจะใช

จดยอด 3 จดยอดวางเปนรปสามเหลยม ดงนนถาเราใชรปสามเหลยมบอยๆ เราจะปลอดภย (รปสามเหลยมจะมความเปนระนาบเสมอ) - โดยเราเเนใจวาวตถนนจะถกสรางอยางถกตอง บอยครงทเราเกอบจะบงคบใหใชรปสามเหลยมเพราะการการสรางระบบค านวณทางคณตศาสตรจะไดรบการรบประกนวามความถกตอง สามเหลยมเปนโพลกอนเพยงอยางเดยวทมเคาโครงทราบเรยบ นอกจากนน ฮารดแวรและซอฟตแวรมกจะรองรบรปสามเหลยมทสรางไดเรว

ชนดของรปหลายเหลยมใน OpenGL

กลบมาดชนดของวตถทมพนผวของ OpenGL ซงมรปแบบเปนวตถพนฐานไดดงน (รปท 2.13)

Polygon (GL_POLYGON) ขอบของรปเปนเหมอนกบททมนเปนถาเราใชเสนรอบปด จดยอดทตอกนมาแสดงขอบเขตของสวนของเสนตรงตรง และสวนของเสนตรงจะเชอมกบจดยอดอนสดทายและไปทอนแรก ภายในรปเหลยมจะแสดงตามลกษณะเฉพาะทเปนคาปรยายของมน ขอใหสงเกตวาโพลกอนเปนวตถทมดานในและดานนอกดวย ตวมนไมมความหนา เปนผลใหระบบกราฟกสวนใหญปลอยใหผใชเปนผก าหนดสหรอรปแบบทตองการแสดงออก หรอวาดเสนลอมรอบรมขอบลงไปในโพลกอนได แตท าทงสองอยางพรอมกนไมไดในชดค าสงเดยว ใช glPolygonMode() ในการสรางรมขอบหรอเพยงแคจดส าหรบจดยอดแทนทการเตมเตม (ซงเปนคาปรยาย) อยางไรกตาม ถาเราตองการวาดโพลกอนทมการเตมภายในและแสดงรมขอบของมน ท าใหเราตองสรางมนสองครง ทนทในแตละโหมด หรอวาดโพลกอนและเสนรอบปดดวยจดยอดชดเดยวกน

รป 2.13 ประเภทของโพลกอน

รป 2.14 แถบสามเหลยม, แถบสเหลยม และสามเหลยมใบพด

Page 17: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

1

7

รปสามเหลยมและรปสเหลยม (GL_TRIANGLES , GL_QUADS) วตถนเปนกรณพเศษของโพลกอน กลมทตอกนมาของสามเหลยมสจดยอดซงตความวาเปนสามเหลยมและสเหลยมตามล าดบ การใชรปสองชนดนอาจจะน าไปสการสรางทมประสานมากกวาทไดรบจากโพลกอน ขอสงเกตคอทงรปแบบของทงสองชนดอยในรปแบบของค าแบบพหพจน นนมความหมายวาถาจดยอดทอางถงมจ านวนเกนกวาทจ านวนทครบได เชน สามเหลยมตองการสามจดและจดยอดทม 6 จดดงนนจะท าใหสรางสามเหลยมไดจ านวนสองรปเปนตน

เสนแถบและรปสามเหลยมใบพด (GL_TRIANGLE_STRIP, GL_QUAD_STRIP, GL_TRIANGLE_FAN) วตถรปทรงเหลานมพนฐานมาจากกลมของรปสามเหลยมหรอสเหลยมทใชจดยอด และรมขอบรวมกน ตวอยางคอ ในเสนรปสามเหลยม ในแตละจดยอดทเพมเขามาไดรวมกบ 2 จดยอดกอนหนามาเพอก าหนดขอบเขตของรปสามเหลยมรปใหม (รปท 2.14) ส าหรบแถบสเหลยม เรารวม 2 จดยอดใหมดวย 2 จดยอดกอนหนานเพอก าหนดขอบเขตสเหลยมรปใหม รปสามเหลยมใบพดมพนฐานมาจากจดทก าหนดไวหนงจด สองจดถดไปก าหนดรปสามเหลยมรปแรก และตอมารปสามเหลยมจะกอรปจากจดใหมจดหนง จากจดกอนหนานและจด (ทก าหนดไวแลว) จดแรก

การสรางวตถทรงกลม

รป 2.15 ทรงกลมถกอางองโดยแถบสเหลยม

รปใบพดและเสนแถบยงใหเราค านวณพนผวเสนโคงหลายเสนไดงายๆ ตวอยางเชน ทางหนงทเราจะสรางการค านวณใหกบรปทรงกลมคอตองใหรปทรงกลมใชชดของโพลกอนทก าหนดขอบเขตโดยเสนลองตจดและเสนละตจดในรปท 2.15 เราสรางโดยใชทงเสนแถบสเหลยมหรอเสนแถบสามเหลยม ในการพจารณาจดทผวทรงกลม เราอธบายมนโดยสมการ 3 สมการ

x(θ, 𝜙) = sinθ ∙ cos𝜙 y(θ, 𝜙) = cosθ ∙ cos𝜙 𝑧(𝜃, 𝜙) = 𝑠𝑖𝑛𝜙

ถาเราท าให 𝜃 คงทและวาดเสนโคงตอนทเราเปลยน 𝜙 เราจะไดวงกลมของเสนลองตจดส าเรจรป เชนเดยวกน ถาเราท าให 𝜙 คงทและเปลยน 𝜃 เราจะไดวงกลมของเสนละตจดส าเรจรป จากการสรางจดทเพมขนทคงทของ 𝜃 และ 𝜙 เราก าหนดขอบเขตของสเหลยมตามรปท 2.15 รหสโปรแกรมส าหรบรปสเหลยมตอบสนองกบการเพมขน 20 ระดบใน 𝜃 และเปน 20 ระดบใน 𝜙

const double M_PI = 3.14159265;

double c=M_PI/180.0; //degrees to radians, M_PI=3.14159…

for(double phi=-80.0; phi<=80.0; phi+=20.0)

{

phir=c*phi;

phir20=c*(phi+20);

glBegin(GL_QUAD_STRIP);

for(double theta=-180.0; theta<=180.0; theta+=20.0)

{

thetar=c*theta;

x=sin(thetar)*cos(phir);

y=cos(thetar)*cos(phir);

z=sin(phir);

glVertex3d(x,y,z);

Page 18: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

1

8

x=sin(thetar)*cos(phir20);

y=cos(thetar)*cos(phir20);

z=sin(phir20);

glVertex3d(x,y,z);

}

glEnd();

}

อยางไรกตาม ปญหาทขวของรปทใชเสนแถบไมไดอกตอไปเพราะเสนทงหมดของเสนลองตจดบรรจบกนทนน อยางไรกตาม เราใชรปใบพดสามเหลยม 2 รป ทขางหนงทแตละขวดงน

glBegin(GL_TRIANGLE_FAN);

glVertex3d(0.0, 0.0, 1.0);

c=M_PI/180.0;

c80=c*80.0;

z=sin(c80); for(double theta=-180.0; theta <=180.0;theta +=20.0 ) {

thetar=c*theta;

x=sin(thetar)*cos(c80); y=cos(thetar)*cos(c80); glVertex3d(x,y,z); }

glEnd(); glBegin(GL_TRIANGLE_FAN); glVertex3d(0.0,0.0,-1.0 ) z=-sin(c80); for(double theta=-180.0; theta <=180.0;theta +=20.0) {

thetar=c*theta;

x=sin(thetar)*cos(c80); y=cos(thetar)*cos(c80); glVertex3d(x,y,z); }

glEnd();

ขอความ

การแสดงกราฟกในโปรแกรมประยกต เชน โปรแกรมเกยวกบการวเคราะหขอมลและการแสดงผลของมนตองการการวตถทเปนวตถทใชเตอน (notate) ในลกษณะของวตถเตอน (notation) เชน เลเบล (label) หรอขอความบนกราฟทสรางขนมา ในโปรแกรมทไมใชกราฟกการแสดงขอความดงกลาววธการของมนคอนขางจะมลกษณะทวไปไมซบซอนแตขอความส าหรบกราฟกคอนขางทจะมรปแบบเฉพาะ ในโปรแกรมทไมใชกราฟกโดยปกตเราจะใชเกยวกบการตงคาตวอกษร แสดงออกมารปแบบเดยวกน ในคอมพวเตอรกราฟก ตองการแสดงขอความออกมาในลกษณะของอกขระทมรปแบบตางๆ โดยอาจเปนการควบคมรปแบบ ขนาด ส และตวแปรอนๆ เรายงตองการทจะใหมการเลอกรปแบบของตวอกษร จากรปแบบทงหมดโดยการเลอกรปแบบทเจาะจง อยางเชนคอมพวเตอรในปจจบนอกษรทตองการแสดงอาจเปนอกษรทไมมฐานดงรปท 2.16

Page 19: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

1

9

รป 2.16 การเขยน (ตวอกษรตนแบบ) รปแบบของขอความมอยสองรปแบบ ขอความทอกขระของมนเปนองคประกอบของวตถเรขาคณตและตวขอความทอกขระของมนเกดจาก

การรวมกนของจดภาพแบบแรกเรยกวาชดอกขระแบบโสตรก (stroke font) (รปท 2.16) และอกแบบคอชดอกขระแบบบตแมพ (bitmap font) หรอขอความแบบราสเตอร อกขระแบบโสตรกจะใชจดยอดในการสรางตวอกขระเชนเดยวกบการสรางวตถเรขาคณตซงอาจจะมสวนประกอบดวยเสนตรงหรอเสนโคงฯลฯ ถาตวอกษรถกก าหนดโดยเสนเขตปดเราเตมเตมใหกบมนได (มความหนาเพมขนเปนตน) ขอดของขอความแบบโสตรกคอเรากระท ากบมนไดเชนเดยวกบกระท ากบวตถเรขาคณตทวไปทงนเนองจากองคประกอบของมนเปนวตถทางเรขาคณตซงองคประกอบของตวขอความหรออกขระจะสมพนธในรปแบบของสมการทางคณตศาสตร ถาเราหมนหรอจบมนขยายออกกจะกระท าไดเชนเดยวกบวตถเรขาคณตทวไปโดยการกระท าดวยสมการทางคณตศาสตรกบมน ในท านองเดยวกนเรานยามตวอกขระเพยงครงเดยวแลวเรากจะใชมนไดตามจ านวนทเราตองการ

อกขระแบบนจะใชพนทหนวยความจ าไมมากทงนมนประกอบขนจากสมการทางคณตศาสตร อยางไรกตามถามนมความซบซอนของรปแบบอกษรมากขนกจะใชหนวยความจ าทมาขนมากขนและกใชเวลาในการประมวลผลทมากขนตาม (เพราะตองค านวณสมการทางคณตศาสตร)

ตวอยางของแบบอกษรในลกษณะนเชนอกขระแบบโพสตสครปท (PostScript) ซงอกขระของมนจะนยามดวยองคประกอบของเสนโคง มนไดแสดงใหเหนถงทงความไดเปรยบและเสยเปรยบของอกขระในลกษณะน อกขระโพสตสครปทในหลายรปแบบกถกใชกบการแสดงผลทงทความละเอยดสงและความละเอยดทต าไดทงนตวอกษรของมนจะไมแตกออกทงนเนองจากมนเปนสมการทางคณตศาสตร การใชงานมนจะเหมาะสมกบรปแ บบของการท างานของเครองแบบผใหบรการ-ผรองขอ (client-server) ซงจะไดกลาวถงในบทท 3

รป 2.17 องคประกอบของจดภาพ

ขอความราสเตอร (รปท 2.17) คออกขระทคอนขางเรยบงายและประมวลผลไดเรว ตวอกษรถกจ ากดอยในกรอบเปนรปสเหลยมมมฉาก

ของบตทเรยกบลอคบต บลอคแตละกรอบจะใชบรรจตวอกษรจ านวนหนงตว โดยมนจะเปนในแบบแผนของคอของบตเปน 0 หรอ 1 ซงอาจจะหมายถงต าแหนงดงกลาวมจดของตวอกขระอย ในบลอกตวอกษรราสเตอรจะเกบเปนคลงโปรแกรมอยในชดในหนวยความจ ากนชนกรอบแสดงผล (frame buffer) โดยบลอคบตและถายโอนบตไดอยางรวดเรว การด าเนนการเคลอนยายบลอกของบตจะใชเพยงค าสงเดยว เมอมการเรยกใชงานมนกเพยงส าเนาเอารปแบบการแสดงผลของอกขระนนๆขนบนหนาจอโดยทไมจ าเปนตองมการค านวณทางคณตศาสตร เราจะกลาวถงการด าเนนการ

bitblt ซงเปนรปแบบของการยายขอมลตอไปในบทท 8 OpenGL จะใชฟงกชนโปรแกรมโดยตรงของเนอหาสาระส าคญจากชดหนวยความจ ากนชนกรอบแสดงผล

ตวอกขระแบบบตแมพกอาจจะกระท าการใชงานในลกษณะของการปรบแปลงมนได เชนการขยายแตองคประกอบของมนทประกอบกนเปนตวอกขระจะไมมความสมพนธกน การขยายขนาดกนเปนเพยงการเพมจดภาพขนเทานน ดงนนถาเรากระท าทมากกวาการขยายภาพอ าจจะ

กระท าไดมนดนก มนอาจจะท าใหตวอกขระแตกออกและไมเหมาะสมได ในรปท 2.18 เปนตวอยางของการแปลงทกระท ากบตวอกขระซงไดแกการขยายขนาด

เพราะวาการแปลงสภาพอาจจะเปนการเคลอนยายบตทจ ากดขนาดของตวอกษรในต าแหนงทไมตรงกบต าแหนงของจดส (Pixel) ในชดหนวยความจ ากนชนกรอบแสดงผล

Page 20: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

2

0

เพราะวา การเขยนและภาพบตแมพทถกสรางขนมาจากขนตน OpenGL ไมมขอความขนตน

รป 2.18 แสดงค าตอบของจดภาพ อยางไรกตามภาพบตแมพไดถกจ ากดใหมขนาดทเลก และท าใหตวอกษรนนถกจ ากดขนาดไวในซอฟตแวรแบบเดยวกน เปนตนวา เรา

บงคบใหตวอกษรในภาพบตแมพนนเปน 8×13 จดภาพไดโดยเรยกใช

glutBitmapCharacter(GLUT_BITMAP_8_BY_13, c)

โดยท c คอคาตวเลขทไดจากตวอกษร ASCII จ านวนหนงทไดรบการแทนท ตวอกษรทถกแทนทจะแสดงต าแหนงราสเตอร ณ ต าแหนงนน

คอสวนหนงของภาพ ทถกวดคาจดภาพและถกดดแปลงไดโดยรปแบบตางๆของ glRasterPos*() เราจะกลาวถงอกครงในบทท 3 ทงการเขยนและการใชงานอกขระบตแมพอยางมประสทธภาพในการแสดงผล

เสนโคง

ในขนตนของการก าหนดออกแบบจดรวมพนฐานของทงหมด ยกเวนบางจดซงจดทงหมดไดจากเสนทถกก าหนดขอบเขตทท าใหเปนแบบแผนเดยวกนได เราท าใหวตถทงสองตดกนเพอสรางเปนวตถชนใหม

ขนแรกเราเรมตนโดยเราจะตองประมาณเสนโคงและพนผว ตวอยางเชนถาเราตองการสรางวงกลมเราใชรปหลายเหลยมมาประกอบกนอยางสม าเสมอซงมนมความใกลเคยงกบรปทรงกลมโดยขนอยกบความละเอยดหรอจ านวนเหลยมของมน ส าหรบรปสามเหลยมและรปสเหลยมซงโดยรวมแลวเราประมาณโครงรางเหลยมๆ แลวนนออกซงอาจเกดขนทงในสวนของการแสดงผลภายในโปรแกรม

วธการเขาถงสงทเรากลาวตอไปในบทท 11 คอใหเรมตนเกยวกบการก าหนดเชงวตถ เชงโคงทางคณตศาสตร ตอมาเปนการสรางฟงกชนการท างานใหกบวตถ เชนเดยวกนกบการสรางพนผวใหกบวตถ ซงเราเจาะจงจดทเราตองการได ตวอยางเชน เราก าหนดการก าหนดจดบนพนผวหรอเราก าหนดความโคงของลกบาศกจากสจด

ระบบกราฟกจะท าใหรายละเอยดทงหมดเขากนไดใน OpenGL เราใชฟงกชนของ GLU หรอ GLUT ในการสรางสวนโคงทเทากนได และเราเขยนก าหนดฟงกชนดวยตวเราเองได และเรายงก าหนดระดบการท างานของ GL ทท างานกบสวนของพนผวได

คณสมบต

ในระบบกราฟกททนสมยจะท าใหมความแตกตางระหวางขนตอนและวธการสรางรปภาพจากเสนสแดง และสเขยว ซงเปนเสนทเกยวกนหลกทางเรขาคณตแบบเดยวกน แตการสรางจะมความแตกตางกน ขนอยกบการสรางในขนตน การใหสของเสนทชดเจน เพมเตมเกยวกบรปหลาย

เหลยมดไดจากรปท 2.19 ใชส าหรบเสน และรปหลายเหลยม

Page 21: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

2

1

รป 2.19 คณลกษณะตางๆ (a) เสน และ (b) รปเหลยม

คณสมบตทเกยวของหรอขอบเขตทเกยวของ เรมจากจดตางๆทท าใหเกดวตถ ณ จดน จะเกยวของกบโหมดกราฟกโดยตรง ขนตนจะยงไมถกจดเกบเขาในระบบแตจะถกก าหนดเมอไดรบการตรวจสอบ คาปจจบนจากระบบกราฟก เรมจากการสรางแลวใชและจะแสดงในหนวยความจ าแลวถายโอนไปยงนวยความจ ากนชนกรอบแสดงผลเพอการแสดงผลอกครงหนง เราจะไดศกษาตอใน บทท 3 ซงจะเขาสการแสดงผลของวตถอกครงในหนวยความจ า

OpenGL เนนการท างานในกราฟกในรปแบบทนท (immidiate mode) ซงมนท างานไดอยางดกบกราฟกทมการใชงานสวนเชอมตอประสานผใชแบบกราฟกดวย แตการเนนการท างานนมนเปนความแตกตางของพนฐานระหวาง OpenGL กบระบบเชงวตถซงวเรยกใชหรอสรางวตถไดตามตองการ (จะกลาวถงในรายละเอยดในหวขอ SceneGraph ตอไปซงเปนพนฐานของระบบอนๆเชน JAVA3D ในบทท 10)

แตละรปแบบของวตถเรขาคณตจะมคณชดคณสมบต (attribute) ของมนตวอยางเชน จดทเกดจากเสนทใหส ความหนา และแบบแผนเรมตนตวอยางเชนรปหลายเหลยมใหมคณสมบตมากขน เราแตงเตมสสนไดแตเราแตงเตมในสวนทนอกเหนอจากขอบเขตของมนไมไดเทานน ถาเราใสในรปหลายเหลยมเราอาจจะแสดงในขอบเขตของสทแตกตางจากสงนนโดยสนเชง

ในระบบของการเขยนสนบสนนในขนตนของการใหคณสมบตมความหลากหลาย ซงจะถกแสดงอยในรปท 2.20 เกยวกบการน าเขาของขอความ ในสวนทเกดจากการน าเขาเกยวกบรปแบบของตวอกษร

รป 2.20 คณสมบตตางๆทเปนไปไดของอกขระแบบสโตรก

สคอสงหนงของลกษณะทนาสนใจและเปนทเขาใจระหวางมนษยกบคอมพวเตอรกราฟก เราดตวอยางจากการจ าลองโมเดลทไดจากในบทท 1 ทเปนตวอยางเกยวกบในเรองของส มนษยใชประโยชนเกยวกบแบบจ าลองเกยวกบกลไกลทางดานกราฟกคอมพวเตอร เราจะไดศกษาความซบซอนตอไปในบทท 7

Page 22: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

2

2

สของตวอกษรทไดจากฟงกชน C(λ) ทเรามองเหนจะอยทความยาวคลน 350 ถง 780 nm แสดงอยในรปความยาวคลนในรปท 2.21 แสดงใหเหนความยาวคลนของสนนๆ

รป 2.21 การไลส

ถงแมวาตวอกษรในรปแบบของสทางกายภาพจะวดคาไดจงไมมการตงพจารณาขอสงเกตของส ดจากบนทกไดในบทท 1 จากการจ าลองในเรองสทงสามชนดท าใหรจกเกยวกบสทงสามชนดมากขน ดงนน สมองของเราจงไมไดรบการกระจายทางดานคาส เพราะคาสทไดคอนขางคลายคาการกระตนสามองคประกอบ (tristimulus) เปนคาทตอบสนองทเกดจากคาสทงสามชนด ถาทงสองสผลตคาทคลายกนกจะท าใหผใชจ าแนกไมไดโดยงาย

ผลทตามมาในหลกการของขอคดเหนนเพอวาตองการใหแสดงเฉพาะสามสเทานน ผลทไดจากการสงเกตคาทงสามท าใหเราไดเหนถงสงทหลากหลายทแสดงสทเราเหนกบ CRT ในบทท 1 ตวอยางของสทเพมเขาไปอนดบแรกทรวมกนเพอใหเกดส เชน การเพมสเขาไปในเครองสไลดฉายภาพ และแผนฟลมในระบบจะเปนสแดง เขยว น าเงน กบสทตองการหรอเพมแสงเขาไป

รป 2.22 วงสมาตรฐานทงสองแบบ (a) สแบบเพมส าหรบสของแสง (b) สแบบลบส าหรบสของวตถ

ส าหรบกระบวนการทแสดงผลตวอยางของแบบสแบบลบ (subtractive) โดยเรมจากพนผวทเปนสขาว เชนเดยวกนกบแผนกระดาษ รงควตถจะประกอบขนจากสทสวางเขามาปะทะพนผว ถาเรามองดสงรอบตวเรางายๆ กเชนหลอดไฟทแสงสขาวกระจายสพนผวทเปนแสงสแดงท าใหแสงสแดงดจางลง โดยปกตสทอยเปนอนดบแรกๆ เปนสน าเงนปนเขยว สมวงแดง และสเหลอง สงทเพมเขาไปจะตองเปนส RGB ทคกบระบบส CMY (ดแบบฝกหดท 2.8)

เราดสไดจากชดของสดงแสดงอยในรปท 2.23 เราจะวาดพกดเรมตนทงสามจด ระบบจดพกดเรมตนตรงกบสปกตทท าใหคาทสงทสดอยในอนดบตนๆ ตอมาเราแสดงสทเราตองการใหแสดงออกมาในรปของลกบาศก สด า (ไมใชสเรมตน) , สแดง , สเขยว และสน าเงน (อยอนดบตนๆ) สวนคสเรมตน สน าเงนปนเขยว (สเขยวและสน าเงน) , สมวงแดง (สแดงและสน าเงน) , สเหลอง (สแดงและสเขยว) และสขาว จดเชอมตอทเปนเสนหลกจะเปนสด า ซงสทงหมดทไดตามเสนเทยบไดกบคาของสทปรากฏเปนก าบงของสเทา

Page 23: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

2

3

รป 2.23 ลกษณะพกดลกบาศกส

มหลายสงหลายอยางทยงไมไดอธบายใหละเอยดแตจะอธบายรายละเอยดตอไปในบทท 7 ก าหนดสวนทเกยวของกบสวนตางๆหรอขอจ ากดทางกายภาพของอปกรณ โดยเฉพาะสวนทแสดงสทไดจากเครองแสดงผลซงอปกรณแตละชนดจะใหการแสดงผลทแตกตางกน หรอไมกอาจเปรยบเสมอน การจบคสใหเขากน คาการกระตนสามองคประกอบ (tristimulus) ทไดของสทมองเหนจะเปนคาการกระตนสามองคประกอบเดยวกนกบอปกรณอน

สแบบ RGB

กลาวคอปจจบนเราจดการสในระบบกราฟกจากการจดวางมมมองของภาพโดยนกเขยนโปรแกรมผาน API ทงสองแนวทางทตางกนเราจะมส RGB เปนตนแบบบงคบของสของแบบจ าลอง จะเปนการก าหนดแสงและเงาตามตนแบบของการจ าลองสในหวขอสดชน เพอใหงายขนในการใชอปกรณทมหนวยความจ านอย และขอจ ากดในการแสดงส แตระบบส RGB จะเปนระบบทเปนมาตรฐาน

ในสามอนดบแรกระบบสบวก (additive color) RGB มชดหนวยความจ ากนชนกรอบแสดงผลทแยกออกมาส าหรบสแดง ภาพสเขยวและสน าเงน จดภาพแตละจดทมสแดงจะถกแยกออกมาจากสเขยวและสน าเงน ซงตรงกบต าแหนงในหนวยความจ า (รปท 2.24) และสน าเงนทตรงกบต าแหนงของหนวยความจ า (รปท 2.24) โดยในระบบอาจจะม 1280×1024 อารเรยของจดภาพของจดภาพแตละจดภาพประกอบดวย 24 บต ส าหรบ 1 ไบทของสแตละชด สเขยวและสน าเงน ทเกยวกบกราฟกคอมพวเตอรหนวยความจ าจาก 64 MB ถง 256 MB ไมเปนปญหาเกยวกบการแสดงเนอหาจากชดหนวยความจ ากนชนกรอบแสดงผลในขอบเขตของภาพ

รป 2.24 หนวยความจ ากนชนกรอบแสดงผลส าหรบ สแดง เขยว น าเงน ขณะทนกเขยนโปรแกรมระบสทตองการใหเปนอยในชดหนวยความจ า 24 บตโดยตรงซงมระดบสไดทงหมด 224 ระดบส บางครงอาจมถง

16 ลานสซงแทน M เมอ 𝑀 = 10242 หรอในระบบอนอาจมคาเปน 4 บตตอส ดงนนควรระบอปกรณทน ามาใช วาเราตองการไดสทเปนอสระในการใชงานกบชดหนวยความจ ากชนกรอบแสดงผลและการจบคกบอปกรณ โดยเทคนคการใชปกตจะใชลกบาศกสและใชสวนประกอบของสทเจาะจงเปนคา

Page 24: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

2

4

0.0 และ 1.0 ซงท 1.0 จะแทนคาทสงทสด หรอเปนคาความอมตวของสในอนดบทหนง และ 0.0 จะแทนคาศนยทคาอนดบหนง ใน OpenGL เราจะใชลกบาศกสดงน เพอใหไดสแดง เราจะตองประกาศเรยกใชฟงกชน

glColor3f(1.0, 0.0, 0.0);

การใชฟงกชนในการวาดรปใหเปนสแดง เพราะวาเปนสวนหนงของสถานะของสเพอใหไดสแดงจนกระทงสถกเปลยน ถงจะใช 3f ทอยในลกษณะของฟงกชน glVertex ซงเปนการผสมระหวาแมสทงสามสไดแก RGB โดยเฉพาะคาทไดจากองคประกอบ ทอยในรปของทศนยมในภาษาซ ถาเราประกาศตวแปรแบบทศนยม หรอคาหนวยไบทเพอเจาะจงหาคาส คาทสงทสดจะเลอกสทอยในอนดบตนๆ มาให และคาทสนอยทสดจะโดนปดดวยคาสทสงกวา

ตอมาเราจะสนใจเกยวกบส RGBA ระบบสทงส หรอ แอลฟาจะยงถกเกบอยในชดหนวยความจ ากนชนกรอบแสดงผลทเปนคาของ RGB เพราะสทงสถกก าหนดเปนฟงกชน เพอก าหนดขอบเขตของส ในบทท 7 เราจะมาดคาตางๆทใชส าหรบแอลฟาเชนเดยวกนกบการผสมสใหกบรปภาพ ณ จดนเราตองการเพอเจาะจงคาแอลฟาในสวนเรมตนของโปรแกรม OpenGL ในการผสมส ตอมาบทท 8 เปนการรกษาคาแอลฟาของ OpenGL โดยอาศยความทบและความโปรงแสง ซงลกษณะความโปรงแสงและความทบแสงจะสงเสรมซงกนและกน วตถทบแสงสวางจะผานมนไมได สวนวตถโปรงใสแสงจะผานไดทงหมด คาความทบจะมคาความโปรงใสสงสด A=0 มคาความขนมวสงสด A=1

สงหนงทเราตองท าเปนอนดบแรกของการเขยนโปรแกรม คอ การเคลยพนทหนาจอทเราตองการใหแสดงผลลพธทเราตองการ เราจะลบลางขอมลของเราเมอไรกไดทเราตองการสรางเฟรมใหม โดยการก าหนดขนาดของระบบส (RGBA) เราสรางโดยการก าหนดการสรางรปภาพโดยใชฟงกชนของสทมความขนมว (ทบแสง) แลวใชฟงกชนลบหนาจอใหเปนสขาว เพราะวาสวนทงสามทเสรมเขามาจะเปนสวนททบแสง เพราะสวนประกอบของแอลฟาคอ 1.0 ดงนน เราใช glClear() ในการลางหนาจอแสดงผลใหเปนสขาว จากพนทวางนกไมเกดผลกระทนตอคาแอลฟา ทเขมขนกวา

glClearColor(1.0, 1.0, 1.0, 1.0);

สดชน

เรมจากระบบคาสจะมชดหนวยความจ ากนชนกรอบแสดงผล ทถกจ ากด ตวอยางเชน เราอาจมชดหนวยความจ า ทเกยวกบรายละเอยดของชางวางขนาด 1280×1024 แตละจดภาพจะมคาบตมากสดไดถง 8 บต เราแบงแยกยอยใหอยในรปทเลกกวาไดจากการก าหนดสแดง, สเขยว ถงแมวากระบวนการนจะเหมาะสมกบโปรแกรมเลกๆ แตโดยปกตมนกใชไดตามสทเราก าหนด ภายใตเงอนไขในการแกปญหาจากโปรแกรมทจะแสดงขอบเขตระยะของสตราบเทาทโปรแกรมไมม โดยจะถกอางถงสจากจดภาพมากกวาซงเทคนคนยงคงใชอยในปจจบน

เราจะท าคลายคลงกบการวาดภาพของศลปนดวยสน ามน คนทวาดดวยสน ามนจะผสมสจ านวนมากมายไดโดยไมมทสนสด โดยการน าสจากหลอดมาผสม ชางทาสกอาจพดกบเราเชนนกเปนไปได อาจจะกบทกคนดวยซ า อยางไรกตามเนองจากบางทถงก าหนดการใชสเพยงเลกนอย ถงแมวาในปจจบนจะมสส าเรจรปอยมากมายทน ามาใชไดเลย โดยเฉพาะทเกยวกบการวาดภาพเพราะเลอกสเพยงเลกนอยจากแถบสจ านวนมากมายได

การสงคาตวอยางกลบเราอางเหตผลสงนนทเราเลอกสกบโปรแกรมทมสอยเปนจ านวนมากได จากแถบสเราจะสรางภาพทมคณภาพทดได ณ เวลาน

คอนขางกวาถาเราเลอกสโดยการแปรผลจากดชนจดภาพเขาไปในคาส โดยสมมตใหชดหนวยความจ ากนชนกรอบแสดงผล ของเรามคา k

บต ตอจดภาพ แตละจดภาพจะมดชนจ านวนเตมอยระหวาง 0 และ 2𝑘– 1 สมมตวาสทแสดงไดกบความละเอยดของคา m บต กลาวคอเราเลอกส

แดง 2m , สเขยว 2m , สน าเงน 2m ดงนนสทไดจะมคาตวเลขเทากบ 23m แตชดหนวยความจ ากนชนกรอบแสดงผลระบสไดเพยง 2k เทานน

โดยผใชจะก าหนดสเองจากขนาด 2𝑘 × 3𝑚 (รปท 2.25) โดยผใชโปรแกรมจะก าหนดรายการได 2𝑘 (แถวแนวนอน) การใช 𝑚 บต จากตารางของแตละส ของ สแดง สเขยว สน าเงน อกครงหนง

Page 25: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

2

5

รป 2.25 ตารางคาสดชนเทยบสแบบ RGB

รป 2.26 ลกษณะสดชน

การระบสโดยดชน (index) ของมนซงจะชถงความเหมาะสมใน การคนหาสจากตาราง (color-lookup table) (รปท 2.26) ส าหรบ k=m=8, เราเลอกส 256 ออกจาก 16 M ไดถาอยในแบบสดชน สทออกมาจะถกเลอกโดยฟงกชน เชน

glIndexi(element);

เลอกสเฉพาะเจาะจงออกจากจากตาราง การตงคาและการเปลยนขอมลในการคนหาสจากตาราง (color-lookup table) กอใหเกดการสลบฉากทเกยวกบระบบวนโดว หวขอนจะถกกลาวถงในหวขอท 3 ฮารดแวรจะสนบสนนจ านวนสทถกจ ากดเทานนซงมอยนอยเพราะวาระบบวนโดวอาจจะมตารางสเดยว (single color table) เทานน ซงตองใชส าหรบวนโดวของมนทงหมดหรอมนอาจจะตองปรบใหเหมาะสม

glutSetColor(int color, GLfloat red, GLfloat green, Glfloat blue)

โดยพนฐานแลวแบบของ สดชนเปนสงส าคญเพราะวามนตองการความจ านอยมากส าหรบ หนวยความจ ากนชนกรอบแสดงผลและม

จ านวนนอยกวาฮารดแวรอนๆ อยางไรกตาม แบบของสดชนทเกดขนกมปญหาเพยงเลกนอยเมอเราท างานเกยวกบ ดชนภาพแบบไดนามก(dynamic

images index) ซงจะตองคอยๆ ท า โดยปกตเราจะตองการสทมากกวาคอเงอนไขทมอยโดยแบบของสดชนในสวนของการเพมเตม การรวมกนเกยวกบระบบวนโดวเปนการซบซอนยงขนทมากกวา ส RGB ดงนน ส าหรบอตราสวนสวนใหญ เราควรจะยอมรบทเราก าลงใชส RGB

การก าหนดคณสมบตของส

ซงหมายถง การตงคาของคณลกษณะของส ส าหรบโปรแกรมตวอยาง เราใชส RGB เรามสามคณลกษณะในการเซท อยางแรกคอ การลางส ซงเปนการเซทใหขาวโดยฟงกชน

glClearColor(1.0,1.0,1.0,1.0);

เราเลอกการเรนเดอรสส าหรบจดตางๆไดโดยการตงคาตวแปรสภาพส (color state variable) เปนสแดง เนองจากฟงกชนทเรยกวา

glColor3f(1.0, 0.0, 0.0);

เราตงคาขนาดของจดทท าการเรนเดอรเปนความกวาง 2 จดภาพไดโดยใช

glPointSize(2.0);

คณลกษณะแบบน เชน ขนาดของจดและความกวางของเสน เปนการเฉพาะเจาะจงในระยะของขนาดจดภาพ ดงนนถา 2 ระบบแสดงภาพมขนาดของจดภาพทแตกตางกน การเรนเดอรภาพกอาจจะปรากฏขนแตกตางกนเพยงเลกนอย กราฟก APIs ในความพยายามทจะท าใหแนใจวา

Page 26: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

2

6

เทากนจะเปนการสรางบนระบบทงหมดเกยวกบโปรแกรมของผใชทเหมอนกน โดยเฉพาะ คณลกษณะทงหมดในองคประกอบของรปแบบ นาเสยดาย การท าใหแนใจซง 2 ระบบมการแสดงภาพทเหมอนกนนน ถกทดสอบวาเปนปญหาทยากมาก OpenGL ท าการเลอกความเหมาะสมทใชไดจรงระหวาง ความตองการของการปฏบตและขอจ ากดซงปฏบตไดจรง

มมมอง

การวางประเภทของขอมลกราฟกเขาไปในเวรด และเราอธบายไดวาเราตองการใหวตถนปรากฏขน แตเรายงไมมวธการส าหรบการเฉพาะเจาะจงจรงๆ ซงวตถควรเกดขนบนจอภาพ ซงเราจะท าการเขยนบนทกลงในโฟโตกราฟทอยสวนดานบน ซงเราชไปทกลองและเลนสทเราใชเราตองท ามมมองทคลายๆ กนลงในโปรแกรม

รากฐานของแนวคดซงมาจากแบบจ าลองกลองสงเคราะห (Synthetic-Camera Model) ซงกลาวถงในหวขอท 1 ในทนททเรามฉากทเฉพาะเจาะจงและกลองเราจะประกอบภาพขนมาได กลองท าการสรางรปภาพโดยใชฟลมทไดมา โปรแกรมแอพพลเคชนตองการทจะตองการเกยวกบความเฉพาะเจาะจงของพารามเตอรส าหรบวตถและกลอง

อยางไรกตามในกลองนนมการก าหนดเลนสและต าแหนงในททก าหนดไว เพอท าใหเกดรปภาพขนมา เราสรางสรรคภาพเพมเตมได เรามกจะชอบเปลยนเลนสเพอทจะท าใหมนงายขนกวาเดมเพอสรางภาพของคอนเลคชนขนมา มนจะดเหมอนจรงมากขนเมอเราใชระบบกราฟกน

มมมองแบบตงฉาก

เราจะท าการกลาวถงโปรเจกตนและขอมลอนๆ ใน บทท 5 แตเราตองการทจะแนะน ากราฟฟกตงฉาก (orthographic) ทอยขางลางน ดงนนในการท าโปรเจกตนคณเรมเขยนโปรแกรม 3 มต โดยกลองในแบบจ าลองกลองสงเคราะห (Synthetic-Camera Model) มความยาวโฟกสของเลนซอยทระยะอนนต จากนนเลอนใหไกลออกไปจากวตถของเรา เรากะประมาณไดในทนรปท 2.27 โดยออกจากจดทจ ากดของภาพไวและเคลอนยายกลองไดไกลจากทเดม ในจดประมาณนจดศนยกลางจะแทนทโดยทศทางของการฉายภาพ

รป 2.27 มมมองจากการเคลอนยายกลองไปมาตามแนวระนาบ

Page 27: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

2

7

รป 2.28 กราฟกแบบตงฉาก โปรเจกต กบ โปรเจกต ระนาบ z=0

รป 2.29 กลองคาเรมตนและปรมาตรมมมองออโตกราฟก

รป 2.30 การฉายภาพแบบกราฟกสตงฉาก

กราฟกวนโดวเปนวนโดวทใชในการแสดงผลทางดานกราฟก การอางจดใดๆ บนวนโดวจะตองมการอางองมมใดมมหนงของวนโดวเปน

หลก โดยปกตมมลาง-ซาย มกจะเปนจดก าเนดมพกดเปน (0,0) อยางไรกตามทกๆ ระบบ ปรบใหเปนจดภาพ (raster) จะมการก าหนดจดก าเนดเหมอนกบของโทรทศน คอจะมการเรยงล าดบจากบนลงลางซายไปขวา ดงนน จะไดวามมบนซายคอจดก าเนด ใน OpenGL จดก าเนด คอ ลางซาย

แตระบบวนโดว เชน ต าแหนงของเมาส จะมจดก าเนดทบน

กราฟกแบบตงฉากเกยวกบระดบมมมองภายในกรอบมมมองทรงลกบาศก

void glortho(GLdouble left, GLdouble right,GLdouble bottom ,GLdouble top, GLdouble

near, GLdouble far)

พารามเตอรทกลาวถงทงหมดเปนขนาดของระยะทางทแนนอนแลวจากกลองกราฟกแบบตงฉาก (Orthographic Projection) “sees” เทานน เปนวตถทอยในการเจาะจงระดบโดยระดบของมมมอง กราฟกแบบตงฉากรวมวตถทอยดานขางของกลองได ดวยเหตนจงมความยาวพอๆกบ

(ซาย,ลาง,ใกล)

Page 28: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

2

8

ระดบ 𝑧 = 0 ซงอยระหวางความใกลและไกล ภาพ 2 มต จะตดผานระดบของมมมอง ถาเราไมท าการเจาะจงระดบของมมมอง OpenGL ใชสตรของสเหลยมลกบาศก คอ 2 × 2 × 2 การเรมตนในจดศนยกลาง ในระยะของภาพ 2 มต สวนของมมไซดดานลางจะอยท (-1.0, -1.0) และในมมขวาดานบนจะอยท (1.0,-1.0)

มมมอง 2 มต

ในมมมองขางลางนเปนกราฟก 2 มต ทเปนแบบพเศษของกราฟก 3 มต ภาพขางลางเปนมมมองสเหลยมผนผาทเปนมมฉากและอยในสวนของระนาบ z=0 ซงอยขางในระดบมมมอง 3 มต และแสดงในรปท 2.31 ถาการใชระดบ 3 มต มนจะท าใหภาพดผดแปลกไปจากแอพพลเคชน 2 มต

void glu0rtho2D(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top)

ประโยชนของมนจะท าใหโปรแกรมของคณสอดคลองกนมากขน ฟงกชนนจะมคาเทากบ กอโต (glortho) เกยวกบความใกลและความไกลของ ก าหนด -1.0 และ 1.0 ในหวขอท 4, 5 เราไดท าการกลาวถง การเคลอนยายกลองและการสรางสรรคเพมเตมในมมมองทมากกวาเดม

รป 2.31 ปรมาตรมมมอง

รป 2.32 มมมอง 2 มต

(a) วตถกอนการตด (b) วตถหลงการตด

เราสรางมมมอง 2 มตไดโดยตรง โดยการน าพนทสเหลยมมมฉากมาท าเปนพกด 2 มต โดยจะด าเนนการดงน ในสวนของวตถทอยดานในสเหลยมจะเปนสวนของรปภาพและวตถทอยดานนอกจะถกตดออกไป

รปแบบของเมตรกซ

การสรางภาพในกราฟกคอมพวเตอรนนเราใชการด าเนนการทางเมตรกซ เพอใหไดภาพทเราตองการโดยเฉพาะกบสามมตทซบซอนใน

OpenGL นนระบบเมตรกซเปนสวนหนงของสภาวะ (state) ของกราฟกและเมตรกซทส าคญทสดและใชบอยทสดคอเมตรกซมมมอง (modelview matrix) และเมตรกซการฉายภาพ (projection matrix) คาเรมตนของเมตรกซใดๆ คอเมตรกซเอกลกษณ (identity matrix) สวนล าดบการท างานกบเมตรกซเปนล าดบโดยปกตทวไปและเลอกไดวาจะท ากบเมตรกซไหนเมตรกซมมมองหรอเมตรกซการฉาพภาพ ในตอนเรมตนของเมตรกซมกก าหนดใหเลอกเมตรกซเอกลกษณขนมาแลวท าการก าหนดหรอเปลยนแปลงคาตางๆ โดยการเปลยนแปลง สวนเมตรกซเรมตนคอเมตรกซมมมอง ดงนนในการก าหนดการฉายภาพเราตองเลอกใชเมตรกซการฉาพภาพแทนกอน เราท าการตงคาเพอใหเมตรกซท างานในการใชเมตรกซการฉายแลวตามดวยขนตอนของเมตรกซมมมองโดยการเรยกใชฟงกชนตามขนตอนไดดงน

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(0.0, 50.0, 0.0, 50.0);

Page 29: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

2

9

glMatrixMode(GL_MODELVIEW);

ขนตอนดงกลาวเปนการสรางมมมองแบบกรอบสเหลยมขนาด 50.0 × 50.0 หนวยโดยมจดก าเนดอยทมมซายลางของหนาตางทสรางขน

ฟงกชนควบคม

ระบบกราฟกบนระบบปฏบตการ วนโดวบน PC กตองมการตดตอระหวางโปรแกรมกบระบบกราฟก ทงระบบปฏบตการและระบบวนโดวตางกมการท างานทซบซอนและผใชงานระบบไดกตองมความรเฉพาะในระบบนนๆ ในแตละระบบกมการท างานทไมเหมอนกน ส าหรบในทนการตดตอกบระบบกราฟกจะมการเรยกฟงกชนของ GLUT มาใช

การโตตอบในระบบวนโดว

กราฟกวนโดวเปนวนโดวทใชในการแสดงผลทางดานกราฟก การอางจดใดๆ6บนวนโดวจะตองมการอางองมมใดมมหนงของวนโดวเปนหลก

โดยปกตมมลาง-ซายมกจะเปนจดก าเนดมพกดวนโดว (0,0) อยางไรกตามทกๆระบบทเปนแบบจดภาพ (raster) จะมการก าหนดจดก าเนดเหมอนกบของโทรทศนคอจะมการเรยงล าดบจากบนลงลางซายไปขวา ดงนนจะไดวามมบนซายคอจดก าเนด ใน OpenGL จดก าเนดคอลางซาย แตระบบวนโดว

เชน ต าแหนงของเมาสจะมจดก าเนดทบน-ซาย ดงนนจะตองมการเปลยนต าแหนงจากระบบพกดแบบหนงไปเปนแบบอน

แมวาหนาจอจะมความละเอยดเปน 1280 × 1024 จดภาพ วนโดวทใชจะมขนาดเทาใดกไดขนอยกบวาขนาดของภาพทเตมหนาจอ ซงหนวยความจ ากนชนกรอบแสดงผลตองมขนาดเทากบขนาด ของหนาจอทใชแสดงผล ถาใชวนโดวขนาด 300 × 400 จดภาพกจะตองใชหนวยความจ ากนชนกรอบแสดงผลขนาด 300 × 400 แมวาในการท างานจะใชเพยงบางสวนของหนวยความจ ากนชนกรอบแสดงผลกตาม

กอนทจะเปดวนโดวจะตองมการตดตอกนระหวางระบบวนโดวกบ OpenGL โดยจะมการเรยกใชฟงกชนเมอเรมการท างานผาน GLUT ดงน

glutInit(int *argcp , char **argv)

ผใชก าหนดอารกวเมนตของมนไดจากอารกวเมนตทงสองตวผานค าสงเชงบรรทด (command line) เมอเรยกใชงานโปรแกรมในตอนเรมตนการท างานและในขนการสรางวนโดวจะเรยกใช

glutCreateWindow (char *title)

พารามเตอรของ glutCreateWindow() จะเปนขอความทตองการจะแสดงบนแถบหวเรอง (title bar) ของวนโดวทสรางขนมา วนโดวท

สรางขนจะมคาเรมตน (default) ตางๆ เชน การใชสเปนแบบ RGB อยแลวเราใชฟงกชน GLUT ก าหนดคณสมบตใหมกอนทจะมการสรางวนโดว เชน

glutInitDisplayMode(GLUT_RBG | GLUT_DEPT | GLUT_DOUBLE);

glutInitWindowSize(480, 640);

glutInitWindowPosotion(0, 0);

โดยมการก าหนดใหมการแสดงวนโดว มขนาด 480×640 บนต าแหนงมมซาย-บนของหนาจอและก าหนดสเปนแบบ RGB แทนทจะเปนแบบดชน (GLUT_INDEX) มการใชหนวยความจ ากนชนความลก (depth buffer) ส าหรบการก าจดผวหลบ (hidden-surface removal) และใชหนวยความจ ากนชนการแสดงผลแบบสองชด (GLUT_DOUBLE) แทนการใชเพยงชดเดยว (GLUT_SINGLE) คาเรมตนของระบบคอสระบบ RBG

อตราสวนหนาจอและชองมมมอง

อตราสวนของขนาดของวนโดว (aspect ratio) คอความกวางตอความสง การแสดงขนาดหรอรปรางรปภาพอสระอาจจะไมเปนไปตามทตองการหากคาดงกลาวของวนโดวทก าหนดดวย glOrtho() มคาไมเทากบคาทก าหนดโดย glutIntWindowSize() (ซงมกจะเกดจากการปรบเปลยนขนาดของวนโดวขณะใชงาน) จะท าใหภาพทออกมามความบดเบยว ปญหานหลกเลยงการแสดงภาพบดเบยวไดหากมนใจวาการตดภาพของรป

6 ใน OpenGL หนาตางทท างานไปพรอมกนนนเปนแบบ 3 มต ในทางตรงขามกนนน ฉากทท างานไปพรอมกนเปนแบบ 2 มต ทงสองระบบนนใชหนวยวดทควบคมไดในหนวยของจดภาพ แตหนาตางทท างานไปพรอมกนนน จะเกบรกษาความเขมของสไว

Page 30: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

3

0

สเหลยมและหนาจอวนโดวมอตราสวนเทากน อกวธหนงคอการใชหลกการของชองมมมอง (Viewport) คอ บรเวณสเหลยมของการแสดงภายในวนโดวโดยคาเรมตนคอขนาดของวนโดวแตท าใหขนาดเลกลงไดโดย

void glViewport(GLint x, GLint y, GLsizei w, GLsizei h)

โดย (x , y) คอระยะตามแนวแกน x และ y จากมมซาย-ลางของชองมมมอง w และ h คอ ความกวางและความสงของชองมมมองชนดของตวแปรเปนตวเลขทงหมด ท าใหก าหนดต าแหนงเปนจดสไดและก าหนดความสงและความกวางของมมมองพอรต เพอใหเหมาะสมกบอตราสวนของภาพทถกตดท าใหรปภาพทไดไมเกดการบดเสยรป

รป 2.33 ลกษณะการแสดงผลเมอจอแสดงผลไมเหมอนกน

(a) หนาตางแสดงผลเปนรปสเหลยมผนผา (b) หนาตางแสดงผลทความสงมากกวาความกวาง

รป 2.34 รปแบบของชองมมมอง

ชองมมมองเปนสวนหนงของสถานะ ถาเราเปลยนชองมมมองระหวางการเรนเดอร ภาพหรอการเรนเดอรซ าภาพวตถทเหมอนกนกบววพอรตทเปลยนแปลงแลว เราจะไดรบผลกระทบของววพอรตทเพมขนกบภาพทแตกตางกนในความแตกตางทเปนสวนหนงของวนโดว ซงเราจะแสดง

มมองใหเหนถดไปในบทท 3 และในนนเราจะพจารณาการเปลยนแปลงรวมกนของขนาดและรปรางของวนโดว

main(), display() และ myinit()

ในหลกการของการเขยนโปรแกรมเราควรจะรวมรหสโปรแกรมทเปนกระบวนการเรมตนพนฐานกบรหสโปรแกรมของเราจากสวนท 2.1 ไปถงโปรแกรม OpenGL ทงหมดโดยการสรางขอมลของโปรแกรมปะเกน Sierpinski ขนมาใหม มอยสองปญหาทเกดขนคอ : ปญหาแรกคอระบบกราฟกทงหมดไมไดรบการคมครองจากการจดทะเบยนเครองหมายการคา สวนปญหาทสองมจ านวนมากทเกยวกบปญหาของการโตตอบเกยวกบระบบวนโดวทเปนรากฐาน

ในเรองของกราฟกทเปนการวาดภาพ 3 มตแบบงายเบองตนคอการเรนเดอรใสหนวยความจ ากนชนกรอบแสดงผล ระบบใชสถานะปจจบนก าหนดการปรากฏขนในเบองตน ตอมาโปรแกรมจะไปทถอยแถลง (statement) ถดไป สวนในโปรแกรมการโตตอบ เราจะสรางขนตอไปใหมากกวาในเบองตน อยางไรกตาม ส าหรบโปรแกรมแอพพลเคชน เชน โปรแกรมเบองตนของเรา เราวาดโปรแกรมเบองตนจ านวนไมมากและเปนอนเสรจเรยบรอย วนโดวของแอพพลเคชนอาจหายไปจากการแสดงผลกอนทเราจะท าใหมโอกาสเทากนทจะเหนขอมลทไดจากคอมพวเตอร วธการแกปญหาแบบพนฐานส าหรบโปรแกรมพนฐานทวไปอาจจะเปนการน าไปสการหนวงเวลาของโปรแกรมตวอยาง โดยฟงกชนพนฐาน เชน sleep(enough_time)

Page 31: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

3

1

อยางไรกตามเราตองการเทคนควธการทครอบคลมมากกวานและในบทท 3 เรามการถกเถยงถงการด าเนนการกระบวนการทจะไดมา ซงผลลพธซงจะใหไดดกวาการควบคมในโปรแกรมของเรา ส าหรบตอนนเราใชฟงกชน GLUT ได

void glutMainLoop();

โดยในการด าเนนการใหส าเรจนนจะท าไดโดยโปรแกรมซงเรมตนท เหตการณการท างานของรอบวน (loop) ถาไมมกระบวนการของโปรแกรมจะอยในสถานะรอ เกยวกบกราฟกบนจอภาพจนกระทงเราสนสดโปรแกรม โดยการใชคยพเศษหรอการรวมกนของคยพเศษดงกลาว เชน การควบคม Control-c ซงเปนการสนสด การด าเนนการของโปรแกรม

กราฟกจะถกสงไปทจอภาพเนองจากฟงกชนทเรยกวาการแสดงผลกลบและฟงกชนนเปนชอทเนองมาจากฟงกชน GLUT

void glutDisplayFunc (void(*func)(void))

และการบนทกไวเกยวกบระบบวนโดว ในทนฟงกชนมชอวา func() และจะเรมเรยกกนตอไป เมอใดกตามระบบวนโดวจะท าการก าหนดซง OpenGL ตองการทจะเปนการแสดงผลอกครง ซงเวลานจะเรมเมอวนโดวถกเปดเปนครงแรก ดงนนถาเราวางกราฟกทงหมดเขาส func() จะถกด าเนนการทนทและปะเกนของเรากจะถกสรางขน

จากดานบนทกลาวมานเปนโปรแกรมหลกทท างานไมมการโตตอบกบผใชงาน

#include <GL/glut.h>

void main (int argc, char **argv)

{

glutInit (&argc,argv);

glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);

glutInitWindowSize(500,500);

glutInitWindowPosition(0,0);

glutCreateWindow(“simple OpenGL examle”);

glutDisplayFunc(display);

myinit();

glutMainLoop();

}

เราใช myinit()7 ฟงกชนแรกทจะท าการตงคา OpenGL เกยวกบมมมองและคณลกษณะพารามเตอร ซงเราแตงตงฉากเซททนทดวยตวมนเอง โดยพนฐาน “include” (h.) จ าท าการรวมไฟลส าหรบ GLUT จะถกโหลดกอนทฟงกชนจะเรมตนขน

#include <GL/glut.h>

จะมการรวมอยในไฟลใหญส าหรบ GLUT และฟงกชนตางๆของ OpenGL “glu.h” ความคมชดของภาพเพอคาพนฐาน เชน GL_LINES, ซงอยในไฟลน

โครงสรางของโปรแกรม

ทกโปรแกรมทเขยนขนจะมการน าชดเครองมอพฒนา GLUT มาชวยในการเขยน ดงนนฟงกชนหลกจะมการเรยกใชฟงกชนของ GULT ในการสรางวนโดวและท าใหมนใจไดวาการแสดงผลการท างานได ในฟงกชนหลกยงตองมชอของฟงกชนเรยกกลบดวย ทกๆ ฟงกชนจะตองม การแสดงผลกลบ และสวนมากจะเปนการก าหนดใหมการท างานแบบโตตอบ โดย myint() จะท าการสรางตวเลอกแกผใชโดยผานฟงกชน

OpenGL ใน GL และคลงโปรแกรมในโปรแกรมสวนใหญ ขอมลทสงออกของฟงกชนกราฟกจะถกสรางในฟงกชนเรยกกลบ display()

โปรแกรมปะเกน

ในการใชฟงกชนหลกน เราเขยนโปรแกรมไดซงในทนจะยกตวอยางการเขยนโปรแกรมเพอเปนการวาดรปปะเกน Sierpinski โดยโปรแกรมจะวาดจดสแดงบนพนหลงสขาว เราจะตงคาระบบเปนแบบ 2 มต ดงนนจะก าหนดจดทมความละเอยด 500 × 500 เปนสเหลยมจตรส อยดานลางมมซาย ซงในรนนเราใช 2 มตในการสรางภาพ

7 เราจะหลกเลยงความสบสนโดยใชชอฟงกชนทเหมอนกบใน OpenGL ไกด และเอกสารของ GLUT

Page 32: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

3

2

ในนมอย 2 ฟงกชน ดงน :

void myinit()

{

/*attributes*/ glClearColor(1.0,1.0,1.0,1.0); /*white background*/ glColor3f(1.0,0.0,0.0);/*draw in red*/ /*set up viewing*/ glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(0.0,50.0,0.050.0);

glMateixMode(GL_MODELVIEN);

}

void display()

{

GLflat verties[3][2]={{0,0,0,0},{25.0,50.0},{50.0,0.0}};

/*triangle*/

int rand (); /*standard random-number generator*/ GLfloat p[2]={7.5,5.0}; /*arbitrary point inside triangle*/ glClear(GL_COLOR_BUFFER_BIT); /*clear the window*/ /*compute and output 5000 new points*/ glBegin(GL_POINTS);

for(int k=0; k<5000; k+++

{

int j=rand()%3; /*pick a vertex at random*/ /* compute point halfway between vertex and old point*/ p[0]=(p[0]+VERTICES[j][0])/2.0;

p[1] ]=(p[1]+VERTICES[j][1])/2.0;

/*plot point*/

glVertex2fv(p);

}

glEnd();

glFlush();

}

วตถหลายเหลยมและฟงกชนการกอก าเนด

รป 2.35 ดานของสามเหลยม

ขอมลทสงออกทไดจากปะเกนถาเราเรมด าเนนการโปรแกรมซบซอนมากยงขน ตอจากนนกจะใชการสมในรปภาพจะไมมจดตรงกลางถาเราวาดเสนตดกน รปทไดจะเปนสามเหลยมอยในสามเหลยมเดมแลวเรากจะไดสามเหลยมทงหมด 4 อน โดยสามเหลยมตรงกลางไมมจดเลย

โดยเปนฟงกชนส าหรบวตถหลายเหลยมเปนกลมของจด 3 - 4 ในการสรางสามเหลยม มองไปทสามเหลยมอนอนทไมใชอนตรงกลางเราจะมองเหนไดเชนกนโดยการเชอมตอของจดตางๆไดออกมาเปนสามเหลยมสอน

Page 33: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

3

3

ในการสรางภาพนจะไมตองการใชวธการสมตวเลข ซงเรมแรกเราจะมสามเหลยมแคหนงอนแตเมอเราใชโปรแกรมในการสรางภาพจะท าใหภายในสามเหลยมนนเกดเปนสามเหลยมสอน ตอมาเรากจะยายสามเหลยมทอยตรงกลางเปนรปทมพนฐานมาจากกลมของรปสามเหลยมทมการใชจดและขอบรวมกนแตละจดทเพมขนมาใหมจะถกรวมกบจดทมอยเดม 2 จดเพอสรางรปสามเหลยมรปใหม

ในกระบวนการทจะสรางภาพนเราจะเรมทสามเหลยมแรกแลวท าการวาดสามเหลยมใหเพมขนจากทมอยนนท าได ดงน

void triagle(GLfloat *a,GLgloat *b,GLfloat*c )

{

glVertex2fv(a);

glVertex2fv(b);

glVertex2fv(c);

}

การเพมจ านวนสามเหลยมทไดจากการเขยนสตรดานบน โดยจดอยางเปนล าดบ

Glfloat v[3][2];

หลงจากนนจดทอยกลางของขอบไดมาจากการล าดบ m[3][3] ซงใชรหสโปรแกรมไดดงน

for(j=; j<2; j++) m[0][j]=(v[0][j]+v[1][j])/2.0;

for(j=; j<2; j++) m[1][j]=(v[0][j]+v[2][j])/2.0;

for(j=; j<2; j++) m[2][j]=(v[1][j]+v[2][j])/2.0;

เราใชสามเหลยมทมอยสรางสามเหลยมขนอก 3 ภาพ จาก(v[0],m[0],m[1]);(v[2], m[1] ,m[2])); และ (v[1],m[2],m[0])

drivide_triangle(float *a,float *b,float*c,int k)

ถา k=0 มนจะถกแบงยอยออก โดย a, b และ c และการลดลงของ k และโคดมดงน

void divide_triangle(GLfloat *a,GLfloat *b,GLfloat *c,int k)

{

float ab[2], ac[2],bc[2];

if(k>0)

{

/*compute midpoint of sides*/

for (int j=0;j<2;j++) ab[j]=(a[j]+b[j]) /2;

for (int j=0;j<2;j++) ac[j]=(a[j]+c[j]) /2;

for (int j=0;j<2;j++) bc[j]=(b[j]+c[j]) /2;

/*subdivide all but inner triangle*/

divide_triangle (a, ab,ac,k-1);

divide_triangle (c, ac,bc,k-1);

divide_triangle (b, bc,ab,k-1);

}

else triangle(a,b,c); /*draw triangle at end of recursion*/

}

ตอไปจะเปนฟงกชนเลกๆ เราจะใชการก าหนดคา8โดยโปรแกรมหลกทจะระบตวเลขของขนตอน และเราเรยกวา divide_triangle once

void display ()

{

glClear(GL_COLOP_BUFFER_BIT); glBegin(GL_TRIANGLES);

divise_triangle(v[0],v[1],v[2],n);

glEnd();

glFlush();

}

เปนการท างานแบบกงๆ แบบจ าลองหมวดยอยจรงและใชในงานได วธการสรางแบบจ าลองรบวตถยอย (Sub-Object) ทถกเลอก

8 เราไมมวธการทสะดวกในการผานไปยงตวแปรใหเรยก GLUT กลบ (callbacks) นอกจากวธ global พารามเตอร ถงแมวาเราเราอาจจะไมเชยวชาญในการผานคาในวธการแบบน เพราะวารปแบบฟงกชนเหลานตายตว และเปลยนแปลงไมไดแลว เราไมมทางเลอกแลว

Page 34: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

3

4

รป 2.36 สามเหลยมทไดจากการแบงยอย

ท างานกบจดยอดหรอพนผว ทเกดขนใหมไดดวยในตว และยงท างานไดอยางมประสทธภาพมากขนและสงการแบงยอย (Subdivision) แลวท างานกบพนผวทเกดขนใหม ในแตละระดบไดทนท และการท างานพวกนนจะถกบนทกลงไปในแตละระดบ โดยสรางระดบการแบงยอยทสงกวา

ปะเกน 3 มต

รป 2.37 โครงสรางพรามด

เปนการเพมประสทธภาพใหดมากขนจาก 2 มต เปน 3 มต ซงกคอการแปลงภาพ 3 มตเรขาคณต หลกการของระบบภาพสามมต มวตถประสงคเพอน าความรทไดมาใชในการพฒนาเครองมอทใชใน การสราง ตกแตงภาพทางดานกราฟก โปรแกรมการสรางและออกแบบภาพ 3 มตนน มการใชงานคอนขางซบซอน ยากตอการเขาใจส าหรบผเรมตนใชโปรแกรม เพราะฉะนนการท าความเขาใจเกยวกบระบบภาพ 3 มตกอนการเรมตนใชโปรแกรม จะท าใหผใชใชโปรแกรมไดดขน

การใชจดในปะเกน 3 มต

ค าสงส าหรบสรางวตถทเปน 3 มต จากวตถ 2 มตทเปนหลายเสน และสวนใหญการสรางวตถ 3 มต จะสรางโดยการก าหนดเปนคาความหนาดวยค าสง คณสมบตซงบอกเปนคาทคณตองการยดวตถออกมาไดซงเปนวธงายๆนอกจากวธนแลวคณยงท าไดโดยการยาย วตถไปในแนวแกน z ดวยค าสง เคลอนยาย การใชค าสง 2 ค าสงนรวมกนจะท าใหเราสรางวตถทเปน 3 มต ไดรวดเรวและตอจากนเปนค าสงพนฐานส าหรบเขยนงาน 3 มต

ใชค าสงนก าหนดววในการมองภาพ 3 มต ในเขยนแบบของคณไดและนเปนอกทางหนงส าหรบการก าหนดรปแบบการมองของภาพ 3 มต

/*vertices of an arbitrary tetrahedron*/ GLfloat vertices[4][3]={{0.0,0.0,0.0},{25.0,50.0,10.0},

{50.0,25.0,25.0},{25.0,10.0,25.0}}; /*arbitrary initial initial location inside triangle*/

GLfloat p[3]={25.0,10.0,25.0};

ใชค าสงนเปลยนแปลงส ล าดบชน ชนดของเสน ขนาด ความหนา และอนๆ ไมวาจะเปนการเลอกหลายๆ วตถ พรอมกนหรอวตถเดยว ถาคณดวตถนในมมมองทเปนระนาบ 2 มต คณจะเหนวาต าแหนงจะไมแตกตางกน

void display()

{

/*computer and plots a single new location*/

int rand();

int j= rand()%4;/*pick a vertex at random*/

/*computer point halfway between vertex and old localion*/

p[0]=(p[0]+vertices[j][0])/2.0;

p[1]=(p[1]+vertices[j][1])/2.0;

p[2]=(p[2]+vertices[j][2])/2.0;

/*polt point */

glBegin (GL_POINTS);

Page 35: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

3

5

glColor3f(p[0]/250.0,p[2]/250.0);

glVertex3fv (p);

glEnd();

glFlush();

}

ตอนนเราก าลงสราง 3 มต ดงนน เราจะตดระดบโดย

glOrtho(-50.0,50.0,-50.0,50.0);

รปท 2.38 และแบบตางๆ จะถกแสดงขนถาเรามจดเพยงพอ ผลลพธของรปนนเหมอนรปกรวยสามเหลยมเบองตนทแยกออกเปนกรวยสามเหลยมทเลกลงอยางมากขน

รป 2.38 ประเกน Sierpinski สามมต

รป 2.39 รปสามเหลยมทแบงออกเปนสวนยอย

การใชรปหลายเหลยมใน 3 มต

เปนวธการทนาสนใจมากขนเปนวธทใชโพลกอนทงสองและสวนยอยของรปกรวยสามเหลยมใสเขาไปในรปทรงกรวยสามเหลยมทเลกกวา สมมตวาเราเรมจากรปทรงกรวยสามเหลยมและหาจดกลางของขอบทง 6 ขอบของรปทรงกรวยแลวเชอมจดกลางเหลานน ดงตวอยางในรปท 2.39 จะมรปสามเหลยมกรวยทมขนาดเลกกวาจ านวน 4 อน หนงในจดยอด (vertex) เดมและบรเวณอนในจดตรงกลางนนเราจะตดทงออกไป

ตามดวยวธท 2 สามเหลยมเดยว เราจะแบงเปนสวนยอยๆออกเปนรปสามเหลยมทรงกรวย 4 อน เพราะวาสวนผวหนาของรปกรวยสามเหลยมนนเปนสามเหลยม 4 อน ทเกดจากจดยอดของมนทง 4 จด ทจดสนสดของสวนตางๆ เราเรนเดอร (render) แตละอนของรปกรวยสามเหลยมอนสดทายโดยวาดภาพสามเหลยมจ านวน 4 อน

รหสโปรแกรมทงหมดของเราคลายคลงกบรหสโปรแกรมของ 2 มตเกอบทงหมดปจจบนชดค าสงรปสามเหลยมจะใชต าแหนงในสามมตคอนขางจะมากกวาในสองมต

void triangle(GLfloat * a, GLofloat *b, GLfloat*c))

{

glVertex3fv(a);

glVertex3fv(b);

glVertex3fv(c);

}

เราวาดภาพแตละรปทรงปรามดและระบายสในแตละพนผวหนาดวยสทแตกตางกนโดยใชฟงกชนตามดงน:

Page 36: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

3

6

void tetra(GLfloat *a, GLfloat *c, GLfloat *d)

{

glColor3fv(colors[0]);

triangle(a, b, c);

glColor3fv(colors[1]);

triangle(a, s, d);

glColor3fv(colors[2]);

triangle(a, d, b);

glColor3fv(colors[3]);

triangle(b, d, c);

}

เราแบงรปปรามดสามเหลยมดวยวธการทเหมอนกนใหเปนสามเหลยมเลกๆ รหสโปรแกรมนจะแบงแยกออกเปนสามเหลยมไดเหมอนกน

void divide_tetra(GLfloat*a, GLfloat*b, Glfloat*c, GLfloat*d, int m)

{

glfloat mid[6][3];

if(m>0)

{

/* computer six midpoints */

for(int j=0; j<3; j++) mid[0][j]=(a[j]+b[j]/2;

for(int j=0; j<3; j++) mid[1][j]=(a[j]+c[j]/2;

for(int j=0; j<3; j++) mid[2][j]=(a[j]+d[j]/2;

for(int j=0; j<3; j++) mid[3][j]=(b[j]+c[j]/2;

for(int j=0; j<3; j++) mid[4][j]=(c[j]+d[j]/2;

for(int j=0; j<3; j++) mid[5][j]=(b[j]+d[j]/2;

/* create 4 tetrahedrons by subdivision */

divide_tetra(a, mid[0], mid[1], mid[2], m-1);

divide_tetra( mid[0], b, mid[3], mid[5], m-1);

divide_tetra( mid[1], mid[3], c, mid[4], m-1);

divide_tetra(a, mid[2], mid[4], d, mid[5], m-1);

}

else

tetra(a,b,c,d); /*draw tetrahedron at end of recursion*/

}

ปจจบนเราเรมจากจดยอด ทง 4 จด และจดการสวนยอย n โดยแสดงผลยอนกลบ

{

glClear(GL_COLOR_BUFFER_BIT);

glBegin(GL_TRIANGLES);

divide_tetra(v[0], v[1], v[2], V[3], n);

glEnd();

glElush();

}

เหลอเพยงแคอก 1 ปญหาทเราตองแกไขกอนทเราจะไดโปรแกรมอรรถประโยชน 3 มต

รป 2.40 การยายพนทผวทหลบซอน

การก าจดผวหลบ

Page 37: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

3

7

ถาคณไดจดการกบรหสโปรแกรมในสวนกอนหนา คณอาจจะสบสนกบผลลพธได โปรแกรมจะวาดรปสามเหลยมตามค าสงทเราชเฉพาะเจาะจงในโปรแกรม ค าสงนไดเรยกตวเองซ าในโปรแกรมของเรา แตละสามเหลยมจะถกบรรจลงในพนสและบรรจสงกวารปสามเหลยมเหลานทไดเรนเดอรสบนจอแสดง

ถาเราสรางประเกน Sierpinski สามมตทดานนอกของรปทรงทม 4 หนาขนาดเลก เราจะ เหนเพยงดานหนาของรปทรง 4 หนาทอยขางหนาของทกดานหนาอนๆ ดงทไดเหนจากผสงเกตการณ ดงรปท 2.40 ทแสดงถงรปแบบของปญหาการยายพนผวททบซอนกนอยางเขาใจไดโดยงายจากต าแหนงของผสงเกตการณ เขาเหนรป 4 ดาน อยางชดเจน แตรปสามเหลยม B ถกบดบงจากสายตาของผสงเกตการณเอง สามเหลยม C

เหนไดชดเจนเพยงบางสวน นอกจากการเขาถงรายละเอยดของวธการทมลกษณะพเศษแลว ควรจะหาต าแหนงของผสงเกตการณและรปสามเหลยม

เราควรจะวาดรปสามเหลยมนนใหถกตองและเรยกวา “ขนตอนการยายพนผวทหลบซอนกน” (Hidden-Surfece Removal) หรอ “ขนตอนพนผวทมองเหนได” (Visible-Surface algorithms) นนขนอยกบเราจะพจารณาปญหาไดอยางไร เราจะพดถงรายละเอยดในขนตอนตางๆ ไดในบทท 4 และ 7

เนองจากปจจบน เราใชขนตอนการยายพนผวทหลบซอนกน (Hidden-Surfece Removal) ไดอยางงายๆ เรยกวา ขนตอนบฟเฟอร z (z-buffer) ทสนบสนนโดย OpenGL ขนตอนนเปดใชงาน (enable) หรอปดใชงาน (disable) ไดอยางสะดวก ในโปรแกรมหลกของเรา เราตองรองขอพนทหนวยความจ าเพมเตมส าหรบบพเฟอรความลกดงน

glutInitDisplayMode (…|GLUT_DEPTH) ทสรางหนวยความจ ากนชนกรอบแสดงผล เราเปดการท างานมนไดโดยการ เรยกใช

glEnable(GL_DEPTH_TEST)

สงใดสงหนงในสงทส าคญทงหมด C หรอในฟงกชนเบองตน เชน myinit.C เพราะวาขนตอนการเกบขอมลขาวสารในบฟเฟอร (buffer) ทลกทสด เราจะตองเคลยรบฟเฟอร (clear buffer) น อยางไรกตาม เราตองการทจะท าใหภาพทแสดงเปลยนแปลงไป; ดวยเหตน เราจงปรบปรงวธการในฟงกชนแสดงผล (display function)

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

รป 2.41 ประเกนสามมต หลงจากท าฟงกชนกอก าเนด 5 ชน (มมมองดานบน)

ค าสงเรยกการแสดงผลกลบ คอ

void display()

{

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glBeginGL_TRIANGLES;

divide_tetra(v[0], v[1], v[2], v[3], n); glEnd();

glFlush();

}

ผลลพธคอสงทแสดงอย ดงรปท 2.41 โปรแกรมทสมบรณจะถกจดใหอยใน ภาคผนวก A

Page 38: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

3

8

การพลอตดวยฟงกชนทเปนนย9

กอนเราเคลอนยายไประบบกราฟกโตตอบ มาพจารณาตวอยางทส าคญๆ ทแสดงขอมลทท าใหเกดมโนภาพและเปนโปรแกรมกราฟก

ประยกต (graphics applications) 2 มต ปญหาทกงวลคอวธการทจะแสดงขอมลทก าหนดโดยฟงกชนแบบเปนนย (implicit function) ทฟงกชน 𝑔 ทไดวเคราะหวเคราะหแลว เชน การท าใหเทากนของหนวยของกลมทอยตรงจดศนยกลางทจดก าเนด (origin)

𝑔(𝑥, 𝑦) = 𝑥2 + 𝑦2– 1 = 0

การแสดงผลของฟงกเชงชดแจง (explicit functions)

𝑦 = ℎ (𝑥)

เปนการเปดเผยอยางชดเจน เพราะเราประเมนคา y เพอทจะก าหนดคาของ x และจากนนไดเขยนโปรแกรมอยางงายๆ ทจะแสดงผล (x, y) ทงคมความสมพนธโดยเสนทแยกเปนเสนตรง (line segment) อยางไรกตาม อมพลซทฟงกชน (implicit function) เราแกปญหาคาของ y ไดไมเหมอนกนกบ x และเราคาดเดาในทงสองไมไดวาคานนจะใชไดหรอไม ยกตวอยางเชน ขนอยกบคาของ a และ b ตองมคาเทากน

𝑔(𝑥, 𝑦) = ( 𝑥2 + 𝑦2 + 𝑎2 )2 – 4𝑎2 𝑥2 – 𝑏4

จะสรางขน 1 หรอ 2 เสนโคง ซงเปนทรจกเหมอน ไข (Ovals) ของ Cassini. มมากกวารน (version) ทวไปของปญหาคอการแสดงผลของฟงกชน

𝑧 = 𝑓(𝑥, 𝑦),

ท 𝑓 เปนจดสงสดของพนผวส าหรบต าแหนงทไดรบมา พนผวของโลก บอยครงเราตองการเสนโคงทสอดคลองกนเพอจะก าหนคาของ z ดงนน คาของ z จะตองเทากนกบ c เราตองแกปญหาการเทากนของทงสอง

𝑔(𝑥, 𝑦) = 𝑓(𝑥, 𝑦) – 𝑐 = 0

เชนน เสนโคงนจะเปนทคนเคยเปรยบเสมอนเหมอนกบแผนทภมประเทศซงถกใชโดยนกไตเขา และ นกธรณวทยา

กลบสปญหาเดมทคอนขางจะล าบากในการแกไขใหสมดลกน เราเรมตนดวยตวอยางของ g บางตวอยางจะดกวา 0 ในขณะทตวอยางอนจะมคานอยกวา 0 ปญหาของเราจะหาคาประมาณของฟงกชนทตองการจากตวอยาง เราแกไขปญหาของขอมลตวอยางโดยใชทเรยกวา แมทชงสแควร (marching squares)

วธการมาชชงสแควร

สมมตวาเราสมเลอกอยางฟงกชน f(x,y) ทจดทวางอยางเทาๆ กนบนอารเรยรปสามเหลยมผนผา(หรอเสนกรด) ใน x และ y ดงนน การสรางก าหนดตวอยาง {fij=f(xi,yj)} เนองจาก

𝑥𝑖 = 𝑥0 + 𝑖∆𝑥, 𝑖 = 0, 1,… , 𝑁 − 1,

𝑦𝑖 = 𝑦0 + 𝑗∆𝑦, 𝑗 = 0, 1,… ,𝑀 − 1,

ท ∆x และ ∆y เปนการเวนระยะระหวาง ตวอยางในทศทาง x และ y ตามล าดบ นอกจากการพฒนาใหงายขน ไมจ าเปนทจะการเวน

ระยะหางใหเทากน เราจะไดรบชดตวอยางของ N × M ทไดจากการวดปรมาณทางกายภาพ (physical) บนเสนกรด (grid) ปกต หรอตวอยางทไดรบมาโดยตรงจากวธการตางๆ เชน กลองจลทรรศนเลเซอร (laser range finder) หรอดาวเทยม

สมมตวาเราตองการทจะหาทใกลเคยงกบเสนโคง

𝑧 = 𝑓(𝑥, 𝑦)

ส าหรบคาเฉพาะของ z ทเราใชหมายถง c, คาของเสนรอบขอบของเรา คา c ทไดรบมานน อาจไมมเสนรอบขอบบรเวณของเสนโคง เสนแสดงรปรางของเสนโคงเดยวหรอเสนแสดงรอบขอบของเสนโคงหลายเสน ถาเราท างานกบขอมลตวอยางแลวเราจะเขาไปใกลรอบขอบบรเวณของเสน

9 สวนนอาจจะขามไปยงการอานในตอนเเรก

Page 39: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

3

9

โคงเทานน กลยทธแผนการของเรา ในการสรางเสนโคงของเสนตรงทเกยวของกน เราเรมจากเซลลปกตดวยจดของเสนกรดทง 4 จด (xi , yj), (xi + 1 , yj ), (xi , yj + 1) ดงทแสดงในรปท 2.42 ในขนตอนของเรานนพบวาเสนตรงบน เซลลตอเซลลพนฐาน (cell by cell basis) โดยแตละเซลลจะใชเฉพาะคาคา z ทมมของเซลลเทานนเพอทจะตรวจสอบวารอบขอบบรเวณของเสนโคงทตองการนนผานเซลลได

รป 2.42 เซลลรปสเหลยมผนผา

โดยทวไป คาตวอยางทเราไดจากมมของเซลลนนจะไมเทากบคาของเสนแสดงรปราง แตเสนแสดงรปรางยงและจะผานเขาไปในเซลลได เมอพจารณากรณงายๆ ทจดหนงของคา ทมม fij ---- มากกวา c และคาทจดยอดอนๆ ของเซลลมคานอยกวา c

𝑓𝑖𝑗 > 𝑐,

𝑓𝑖 + 1 , 𝑗 < 𝑐,

𝑓𝑖 + 1, 𝑗 + 1 < 𝑐,

𝑓𝑖, , 𝑗 + 1 < 𝑐,

รป 2.43 การท าสญลกษณทจดยอดของลกบาศก

(a) จดเรมตนของจดยอด (b) การระบายสทจดยอด

เราแสดงแตละต าแหนงดงในรปท 2.43 (a) ทเราไดระบคาเทยบกบ c หรอดงใน รปท 2.43 (b) ซงเราจะใหมจดยอด ทมสด าส าหรบอนทมคานอยกวา c และมสขาวส าหรบคาทมากกวา c โดยจะดทสถานการณน เราจะเหนวาถาฟงกชน f ทสรางขอมลทเปนเหตเปนผลดแลวเสนรอบขอบ

𝑥𝑖 , 𝑦𝑗+1 𝑥𝑖+1, 𝑦𝑗+1

𝑥𝑖+1, 𝑦𝑗 𝑥𝑖 , 𝑦𝑗

𝑓𝑖, 𝑗+1

< 𝐶

𝑓𝑖+1, 𝑗+1

< 𝐶

𝑓𝑖, 𝑗

> 𝐶

𝑓𝑖+1, 𝑗

< 𝐶

Page 40: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

4

0

ของเสนโคงตองไขว (cross) กน 2 ขอบทมจดยอดสขาว 1 จดและ ม จดยอด สด า 1 จด ถาฟงกชน f(x,y) --- c จะตองมากกวา 0 ท จดยอด ใด จดยอด หนง 1 จด และ นอยกวา 0 ท จดยอด ทอยใกลกน และ จดยอด นนจะตองไดเทากบ 0 ณ ต าแหนงใดต าแหนงหนงทระหวางกลาง ต าแหนงนจะแสดงใน รปท 2.44 (a)

รป 2.44 การไขวเซลลทเสนรอบขอบ

รปท 2.44 (a) จะแสดงเพยง 1 วธทเสนแสดงรปรางทขอบจะไขว (cross) กน เสนรอบขอบจะไขว (cross )กน 3 ครงดวย ดงแสดงในรปท 2.44 (b) หรอแตละการอธบายตความทสอดคลองกนกบขอมลตวอยาง เรามกจะใชการอธบายตความท จดยอดเดยว (single vertex) ของขอบโดยเสนแสดงรปรางทเหมาะสมมากขนส าหรบฟงกชนทราบเรยบ (smooth) กวาแบบค (multiple) ทางเลอกแบบนเปนตวอยางของหลกการ Occam’s razor, ทอธบายถงวา ถามหลายการอธบายทเปนไปไดของปรากฏการณ ทสอดคลองกบขอมลควรจะเลอกเพยง 1 ตวอยางเทานน

กลบสตวอยางเซลลกนดกวา ถาเราประเมนคาทเสนแสดงรปรางตดผานกนไดทง 2 เสนขอบ เราจะเชอมตอจดยอดกบเสนตรง และเรายงวาดเสนตรงนไดทนทเนองจากการค านวณของเซลลอนๆ เปนอสระจากสงทเราท ากบเซลลนแตทใดทเราวาง จดยอดทง 2 ม 2 วธการทงายๆ เราวางจดยอดทง 2 ไดอยางงายๆ คอ ระหวางจดยอดสขาวและสด า อยางไรกตาม ถา a มากกวา c เพยงเลกนอย และ b มากนอยกวา c หลงจากนนเรากใหจดยอดทง 2 ของเสนรอบขอบกบขอบของเซลลทใกล (x.y) มากกวา xi+1, yj แผนการทซบซอนมากขนจะใช วธการสอดแทรกขอมล เหนไดวา 2 จดยอดทใชรวมขอบของเซลลรวมกนและมคาบนดานตรงขามกบ c --- ยกตวอยางเชน

𝑓(𝑥𝑖 , 𝑦𝑖) = 𝑎, 𝑎 > 𝑐, 𝑓(𝑥𝑖+1, 𝑦𝑖) = 𝑏, 𝑏 < 𝑐,

ถา 2 จดยอดถกแยกออกจากกนโดยการเวนระยะ x ∆x แลวเราจะหาคาแทรกระหวางจดยอดทง 2 โดยใชเสนตรง (line segment) ดงทแสดงในรปท 2.45 เสนตรงนตดกนทแกน x

𝑥 = 𝑥𝑖 + (𝑎 − 𝑐)∆𝑥

𝑎 − 𝑏

เราใชจดนส าหรบเปนจดปลายของการประมาณคาเสนตรงไปยงเสนรอบขอบในเซลล และเราจะท า การค านวณเหมอนกนส าหรบจดยอดทง 2 บนขอบอนๆ กบจดยอดสด าและสขาว

ดวยเหตน ส าหรบจดยอดทมสขาวและจดยอดอนทมสด า ม 16 (=24 ) รปแบบทเราระบายสได จดยอดของเซลลทใชเฉพาะสด าและสขาว ทกสงเกดขนไดกบปญหาเสนแสดงรปรางของเรา กรณเหลานไดแสดงบนรปท 2.6 ดงวธการเสนตรงอยางงายๆขางตน. ถาเราศกษาคนควาเกยวกบกรณเหลาน ก าหนดเลข 0-15 จากซายไปขวา เราจะเหนไดวาม 2 รปแบบทมความสมมาตร โดยมกรณหนงทมการหมน ทกกรณทเปลยนเปนลกบาศกทเหมอนปนจากการหมนไดเชน กรณท 1 และ 2 มเสนตรงเดยว (single line segment) ทมการตดจดยอดทง และมความสมมาตรระหวางกรณทเราไดเปลยนแปลงไปแบบอนโดยเปลยนทกจดยอดทมสด าไปเปนจดยอดทมสขาว เชน กรณน 0 และ 15

Page 41: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

4

1

รป 2.45 การแทรกจดตดทง 2 ของเซลลขอบ

หากวาเราเอาความสมมาตรเขาไปในการอธบาย (account) ม 4 กรณเทานนทเปนลกษณะพเศษจรงๆ

กรณเหลานไดแสดงในรปท 2.47 เราตองการรหสโปรแกรม (code) ทวาดเสนตรง (line segment) ไดเพยง 4 กรณ

รป 2.46 ตวอยางทมลกษณะเฉพาะทมการท าสญลกษณทจดยอด

รป 2.47 ตวอยางทมการท าสญลกษณทจดยอดบนเสนรอบขอบ

Page 42: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

4

2

กรณแรกเปนกรณทธรรมดา เพราะวาเสนรอบขอบผานเซลลไมได และเรานนกไมตองวาดเสนตรง (line segment) ดวย กรณท 2 คอกรณทท าใหกอใหเกดเสนตรง (line segment) 1 เสน กรณท 3 เปนกรณทงายๆ : เราวาดเสนตรงหนงเสน (single line

segment) ทขอบใดขอบหนงไปยงอกขอบหนงทตรงขามกน

กรณสดทายเปนกรณทยากและนาสนใจมากเพราะเปนกรณทคลมเครออย ดงทแสดงใน รปท 2.48

รป 2.48 ลกษณะทคลมเครอ

เราตองตดสนใจอกทหนงทใช ถาเราไมมขอมลอนๆ ทเรามเหตผลทชอบกวา อน ใดและ เราเลอกหนงทสมไดหรอทเรามกจะใชเพยงหนงในความเปนไปได แตเปนรปท 2.49 แสดงเราไดผลลพธทแตกตางกนขนอยกบการตความ เรา เลอกท เปนไปไดกคอแบงยอยเซลลเปนสเซลลขนาดเลกทแสดงในรปท 2.50 การ สรางจดขอมลใหมในศนย เรารบคาทจดนทงจากการท างานถาเรารวา มน analytically หรอโดยเฉลยคาทมม (corners) ของเซลลเดม หวงวาไมมเซลลขนาดเลกเหลา น เปนกรณทคลมเครอ ถาจะคลมเครอเรายงแยกยอยได

ผเขยนใชรหสงายๆ ในการสรางเสนรปรางได คดวาคาทจดเปน A, B, C และ D เราคดจากเซลลทงหมดถา A, B, C และ D คาทมมของเซลล แลวรหสทค านวณชนดเซลลทเรามอย

int cell (double a, double b, double c, double d)

{

/* THRESHOLD=contour value */ int n=0

if (a>THRESHOLD) n+=1;

if (b>THRESHOLD) n+=8;

if (c>THRESHOLD) n+=4;

if (d>THRESHOLD) n+=2;

return n;

รป 2.49 ตวอยางของรปทรงแตกตางกนดวยการตดปาย

Page 43: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

4

3

รป 2.50 แผนกของกอน

การวางแผนฟงกชนโดยปรยาย

จากนนเราตอตานก าหนดเซลลหนงในสกรณตามบญญตของการวดโดย

switch (n)

{

casel: case2: case4: case7: case8:

casell: case13: case14:

/* contour cuts off one corner*/

draw_one (oum,i,j,a,b,c,d);

break;

case3: case6: case9: case12: /* contour crosses cell */

draw_adjacent (num,i,j,a,b,c,d);

break;

case5 : case10: /* ambiguous case*/

draw_opposite (num,i,j,a,b,c,d);

break;

case0: case15: break; /* no contour in cell */

}

รป 2.51 กรณทเสนตดสวนวาดเสน

สดทายเราเขยนหนาทวาดสามกรณทมกลมบรรทดในพวกเขา ตวอยางเชน ขอ draw_one ท างานกบแปดกรณทกลมวาดเสน จากขอบทตดกบขอบของเซลล หากเซลลมความยาวดานของ s_x และ s_y ในมม xและทศทาง y ตามล าดบ และซายลางของเซลล คอ ดงแสดงในรปท 2.51 จากนนรหสจะอยในสวน

void draw_one (int num, int i, int j, double a, double b, double c, double d){

/* num=cell type */

/* i,j=coordinates of cell in array */

/* a,b,c, d values at four corners of cell */

/* s_x, s_y=side length of cell */

/* compute the lower left-corner of cell here */

switch (num) /* case type */

{

case l: case 14:

xl=ox;

yl=oy+s_y;

Page 44: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

4

4

x2=ox+s_x;

y2=oy;

break;

/* the other cases go here */

}

/* draw the line segment */

glVertex2d(x1, y1);

glVertex2d(x2, y2);

}

รหสโปรแกรมทงหมดจะไดรบในเสนแสดงรปรางรปท 2.52 แสดงสองสวนโคง (curves) ตรงกบคาเสนแสดงรปรางเดยวส าหรบวงร

(Ovals) ของรปทไดจากยานส ารวจ Cassini

รป 2.52 รปไขของ Cassini (a) ใชศนย (b) ใชแกไข

𝑓(𝑥, 𝑦) = (𝑥2 + 𝑦2 + 𝑎2)2– 4𝑎2𝑥2– 𝑏4

ม a=0.49 และ b=0.5 เราสรางเสนโคงในสวน (a) เสมอการใชจดกงกลางของจดตดของเสนโคงทมขอบของเซลล เราสรางเสนโคงในสวน (b) ใชเพอขอรบการแกไขจดแยก รปท 2.53 แสดงขอมล Hononolu แบบตง แสดงดวยรปทรงหลายคาเสน แสดงรปรางโดยเวนระยะเทากนมวธอนๆ เพอสรางเสนแสดงรปรางเปนเสนโคง (curves) หนงคอการเรมตนดวยเซลลทเปนทรจกกน จะมชนสวน ของเสน แสดงรปรางแลวท าตามเสนแสดงรปรางนใหเซลลตดตามความจ าเปนเพอใหเสนแสดงรปราง

มวธอนๆ เพอสรางเสนแสดงรปรางเปนเสนโคงคอการเรมตนดวยเซลลทเปนทรจกมชนสวนของเสน แสดงรปรางแลวท าตามเสนแสดงรปรางน ตดเซลลตามความจ าเปนเพอการรปราง อยางไรกตาม วธสเหลยมมประโยชนททกเซลลกระท าอสระได - เราเดนขบวนผานขอมลและการขยาย สามมตขอมลของไหล (volumetric) จะตรงไป

รป 2.53 แปลงสขอมลของ honolulu

สรปและบนทก

ในบทนเราแนะน า OpenGL API และใชแนวคดพนฐานทเราไดเรยนรในบทท 1 แมวาโปรแกรมแรกทเราใชในการพฒนา โปรแกรมแรกของเรา 2 มตเราไดเสนทางการดภาพกราฟก 2 มตเปนกรณพเศษของกราฟกสามมตจากนนเราขยายตวอยาง 3 เปนแบบสามมตโดยทเราเพมการท างานอกเลกนอย

Page 45: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

4

5

โปรแกรมประเกนเซยรสปนกไดใหการเรมตนโปรแกรมประยกตอยางไมยงยากมากนก การขยายเพมเตมบางสวนและคณตศาสตรทใชไดน าเสนอในสวนของแบบฝกหดในตอนทายของบทน หนงสอทไดแนะน าใหอานหวขอแนะน าอานไดใหตวอยางไวหลายตวอยางของวตถเสนโคงและพนผวทสรางขนไดดวยโปรแกรมอยางงาย

ประวตศาสตรของการพฒนาของโปรแกรมประยกตทเชอมตอประสานกบกราฟกและแบบจ าลองของมนไดแสดงความส าคญของการเรมตนในสามมต แบบจ าลองพลอตเตอรแบบผเขยนจากบทท 1 มการใชเวลาหลายป และ เปนพนฐานของ API ทส าคญมากเชนภาษาโพสครปต (PostScript) งานในการนยามมาตรฐานสากลส าหรบ API แบบกราฟกเรมใน 1970s และ culminated กบบตรบญธรรมของ GKS ตามมาตรฐาน องคการระหวางประเทศ (ISO)ใน 1984แต GKS มพนฐานในแบบ ปากกาของเครองพลอตเตอร (pen plotter) และเปน 2 มตคอ API ของอรรถประโยชนจ ากดในชมชน CAD แมวามาตรฐานไดขยายสามมตดวย GKS3D ขอจ ากด และก าหนดโดยรปแบบพนฐานเดมน าไปส มาตรฐานทเพยงพอในดานจ านวนมากPHIGS และ PHIGS + API ส าหรบ,เรมตนในชมชน CAD มอยางโดยเนอแทสาม มต และจะขนอยกบรนกลองสงเคราะห OpenGL มาจาก GL API ซงจะขนอยกบการใชสงเคราะหกลองรนทมสถาปตยกรรม GL ไดรบการพฒนาส าหรบซลคอน Graphics,Inc ดงนนแมวา PHIGS และ GL ไดเทากน GL ถกออกแบบเฉพาะ ส าหรบการแสดงผลเวลา ความเรวสง (highspeed) จรง OpenGL เปนผลของผใชงาน ทราบวาประโยชนของโปรแกรม GL และทตองการ ด าเนนขอดเหลานเพอแพลตฟอรม อนๆเพราะเขาออกและ หนาตาง(Windowing) หนาทจาก GL และเขมขนในการแสดงผล OpenGL เกดเปน API ใหมทพกพาขณะทการรกษาตางๆ ทท าให GL เชนททรงพลง API แตสวนมากผเขยนโปรแกรมประยกตใช OpenGL ชอบโปรแกรมใน C มจ านวนงานทนาสนใจในระดบสงท interfaceใช C + + มากกวา D ตองเปลยนรหสนอยทสดแตไมให ตดตอ วตถแวว (object oriented) จรงเพอ OpenGLในวตถแวว (object-oriented) โปรแกรมเมอรมไดรบความสนใจมากทง ใน OpenGL และสงกวา API ส าหรบระดบแตไมมผลผกพนทางการ Java เพอ OpenGL มไดหลายอยางเกดขนกบปญหา ไมไดงายๆ เนองจากผใชงานตองการขนกบปญหา ไมไดงายๆ เนองจากผใชงานตองการใชการปรบวตถของ Java และ Java toolkits ตางๆ รวมกบ วตถแววแบบธรรมดา(non-object-oriented) ขอก าหนด OpenGL มไมก ผกมด (bindings) ทางอนเทอรเนต และพระอาทตยโดยการผกมด(Sun Microsystems Java bindings) เพงเปดตวของพวกเขา แตสวนมาก

ในบทท 10 เราจะแนะน ากราฟฉากทใหมาก ระดบความสง(higherlevel),วตถแวว(object-oriented interface) ฮารดแวร กราฟก API ส าหรบสวนใหญจะสรางภาพกราฟดานบนของ OpenGLภายในชมชนเกมสปกครองของ Windows ท าใหรหสส าหรบนกพฒนาเกมเขยนไดส าหรบแพลตฟอรมเดยว DirectX ท างานเฉพาะในหนาตางของแพลตฟอรม และ เหมาะส าหรบความเรวในระบบเหลานแมวา รหส DirectX มากดเหมอนวารหส OpenGL, ผเขยนโปรแกรมจะใชอปกรณคณสมบตขนอยกบทม ในการดกราฟกสนคา ดงนนงานเขยนใน DirectX ไมไดเบาและความมนคงของโปรแกรม OpenGL ส าหรบโปรแกรมเมอร OpenGL ทตองการใชคณลกษณะเฉพาะของฮารดแวรบาง OpenGL มกลไกการขยายการเขาถงคณสมบตเหลานแตคาใชจาย ของเบา โปรแกรมทเขาถงไดผานภาษาการก าหนดระดบสของ OpenGL (OpenGL Shading Language) และในบทท 9 จะน าไปสความแตกตางระหวางโปรแกรมกราฟกดวย OpenGL กบ DirectX ใหสงโปรแกรมสนสดตวอยางและโปรแกรมของเราไดแสดงวธการ อธบายและแสดงวตถทางเรขาคณตในลกษณะงายๆใน แงของการท ารปแบบการแสดงผลแบบทเราน าเสนอใน บทท 1เราไดมงเนนการ สรางแบบจ าลอง แตรนเราไมมโครงรางสมบรณ ตวแทนของวตถ ทมรายชอของจด และแอตทรบวต ในบทท 10 เราจะเรยนรทจะ สราง แบบจ าลองล าดบชนทแสดงความสมพนธระหวางวตถ ยงคงทจดนคณควรทจะเขยนโปรแกรมทนาสนใจได แบบฝกหดทสมบรณทายบทและ ขยายไมกปญหาสองมตสามมต แบบฝกหดทสมบรณทายบทและ ขยายไมก ปญหาสองมตสามมต ขบวน(Marching)-วธ สเหลยมเปนกรณพเศษของ ขบวน(marching)-วธ กอน ทไดรบการพฒนาเพอ การแสดงขอมล ระดบเสยง (volumetric)

ค าแนะน า

ประเกน Sierpinski ใหการแนะน าทด mysteries ของเรขาคณต ชนสวนมการสนทนาทดในหลายขอความ [Bar93, Hil01, Man82, Pru90ปากกา-ผ เขยน APL ใชโดยตนแบบ(PostScript) [Ado85] และโลโก [Pap81] ให กราฟก เตา, API ททงงายในการเรยนร และอธบายลกษณะของคณตศาสตรของเสนโคง 2 มตทเราใชได ในบทท 10 โลโก (ดแบบฝกหดท 2.4) GKS [ANSI85] GKS-3D ISO88 [] PHIGS ANSI88 [] และ PHIGS + [PHI89] มทงสหรฐอเมรกา และ มาตรฐานสากลค าอธบายอยางเปนทางการของพวกเขาทได จากมาตรฐานอเมรกน Nationl Institute (ANSI) และจาก ISO ต าราหลายเหลานใช API ส าหรบ [Ang90, End84, Tol94, Hea04, Hop83, Hop91]

Page 46: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

4

6

X Window System [Sch88] เปนมาตรฐานในสถาน UNIX และมผลตอการพฒนาของระบบหนาตางบนแลตฟอรมอนๆ อนเตอรเฟซ RenderMan อธบายไวใน [Ups89] สองอางองมาตรฐานส าหรบ OpenGLเปน OpenGL Programming Guide [Ope04a] และ OpenGL Reference Manual [Ope04b.] นอกจากนยงมขอก าหนดอยางเปนทางการ OpenGL [Seg92.]

เรมตนกบรนทสอง และตอเนองถงรนทสปจจบนโปรแกรมมง คมอการใชคลงโปรแกรม ความเหลอเฟอทพฒนา โดย Mark Kilgard [Kil94b] Programming Guide ใหมากขน ตวอยางรหสใช Open จ านวนทมากเกนไปไดรบการพฒนาส าหรบใช กบ X Window System [Kil96] แตยงมรนส าหรบ วนโดร (Windows) และคอมพวเตอรแมคอนทอรช (Macintosh) สวนมากขอมลนและหลายโปรแกรม เชนมผานอนเตอรเนต เวบไซตตวแทนอยทจดเรมตนของภาคผนวก

OpenGL: เชอปะท Ang04 [], book เพอนขอความนมรายละเอยดของฟงกชน OpenGL ใชทนและอนๆ เชน

โปรแกรมสวนกราฟกของ DirectX API เปนทรจกเดมเปน Direct3D รนปจจบนคอรน 9.0 [Gra03]

แบบฝกหด

2.1 การเปลยนแปลงเลกนอยในการสรางปะเกนเซยรสปนกดวยโพลกอนสามเหลยมคอ ภเขาแบบแบงสวน (fractal mountain) ทใชในแอนเมชนทสรางดวยคอมพวเตอร หลงจากพบจดกงกลางของแตละดานของสามเหลยมใหกอกวนต าแหนงนกอนทจะท าการแบงยอยลงไป สรางสามเหลยมนโดยไมเตมเตมภายใน หลงจากการแบงยอยซกสองสามครงกควรทจะสรางรายละเอยดทเพยงพอทจะใหสามเหลยมเหลานนดเหมอนภเขา

2.2 Sierpinski ในขอท 2.1 แสดงถงความซบซอนทางเรขาคณตทมการศกษาในเรขาคณตแบบแบงสวนยอย (fractal geometry) สมมตวาคณสรางปะเกนดงกลาวดวยคณตศาสตรของเสนตรงทมความยาวแตไมมความกวาง ในขอจ ากดจะเปนเปอรเซนตเทาไดของพนทของสามเหลยมตวตนทยงเหลออยหลงจากทสามเหลยมตรงกลางถกเอาออก ในขอจ ากดเชนเดยวกนจะเกดอะไรขนกบความยาวของเสนรอบรปทงหมดของสามเหลยมทเหลอ

2.3 ทระดบต าสดของการประมวลผลเราจดการบตในหนวยความจ ากนชนกรอบแสดงผล OpenGL มฟงกชนเกยวกบการจดการจดภาพ (pixel-oriented) ทยนยอมใหผใชเขาถงหนวยความจ ากนชนกรอบแสดงผลโดยตรงได คณทดลองดวยอลกอรธมแบบราสเตอรอยางงาย เชน การวาดเสนตรงหรอวงกลม โดยการใชฟงกชนของ OpenGL glPoint() เปนเหมอนคลงโปรแกรมของหนวยความจ ากนชนกรอบแสดงผลเสมอน (virtual fram buffer) ได ใหเขยนคลงโปรแกรมดงกลาวทยนยอมใหท างานในคลงโปรแกรมหนวยความจ ากนชนกรอบแสดงผลเสมอนนนทสรางในหนวยความจ า ฟงกชนหลกทตองมควรเปน WritePixel() และ ReadPixel() คลงโปรแกรททสรางควรยนยอมใหมการตดตงและแสดงหนวยความจ ากนชนแสดงผลของคณ และท าใหโปรแกรมของผใชท างานในการอานและเขยนจดภาพ

รป 2.54 รนของเกลดหมะ koch

2.4 กราฟกเตา (Turtle graphics) เปนระบบต าแหนงทางเลอกทเปนไปตามแนวคดของเตายายกรอบหนาจอดวยปากกา ตดกบดานลางของ

เปลอกของ เขาต าแหนงของเตาอธบายโดยคาพารามเตอรสามคา (x, y,θ) โดยการใหต าแหนงของจดศนยกลางและรปแบบการวางตวของวตถเตา โดยทวไปมนจะมฟงกชนในลกษณะน

init (x,y,theta); /* initialize position and orientation of turtle */ forward (distance); right (angle);

left (angle); pen (up_down);

ท าการสรางฟงกชนดงกลาวดวย OpenGL

2.5 ใชคลงโปรแกรมกราฟกสเตาทสรางขนจากขอ 2.4 ในการสรางปะเกน Sierpinski และภเขาแบบชนสวน (fractal moutain) ในแบบฝกหดท 2.1 และ 2.2

Page 47: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

4

7

2.6 พนทเตมเตมของเสนโคง (Space-filling curves) คณตศาสตรของมนไดรบความสนใจเปนระเวลาหลายศตวรรษทผานมา ดวยขอจ ากดเสนโคงเหลานมความยาวอนนตแตกปรบใหมนเขาอยในรปของสเหลยมขนาดจ ากดทไมตดขามกน เสนโคงเหลานถกสรางขนโดยการท าซ าไปซ ามา (iterative) พจารณาจากกฎดงแสดงในError! Reference source not found. ทแทนสวนของเสนตรงหนงดวยสสวนสน จงเขยนโปรแกรมทเรมตนดวยสามเหลยมและใชการท าซ าในเขากบกฎการแทนทกบสวนของเสนตรงเหลานน วตถทสรางเรยกวาเกลดหมะ Koch (Koch snowflake) ส าหรบตวอยางอนๆ ของพนทเสนโคงเตมเตมด [Hil01] และ Bar93

2.7 คณสรางความเขาวงกต (maze) อยางงายไดโดยเรมจดใหเปนรปแบบของอารเรยของเซลสเหลยม แตละเซลลมสดานถาเราลบดานใดดานหนงออก (ยกเวนจากเสนรอบรปของทกเซลล) จนกระทงเซลลทงหมดจะเชอมตอ จากนนสรางทางเขาและทางออกโดยการลบทงสองขางจากเสนขอบรปงายๆไดแสดงในรปท 2.55 เขยนโปรแกรมโดยใช OpenGL ทจะเปนอนพตสองจ านวนเตม N และ M แลววาดเขาวงกต

ขนาด N× M ดวย

รป 2.55 เขาวงกต

2.8 อธบายวธการทคณจะปรบรนส RGB ใน OpenGL เพอใหท างานกบสแบบลบซงเปนสวตถได 2.9 เราเหนไดวาการด าเนนการขนพนฐานในระบบกราฟกคอการทาบจด (x, y) ทตงอยภายในระนาบการตดภาพสเหลยม (clipping rectangle)

ไปยงจด (𝑥𝑠, 𝑦𝑠) ทอยในพอรตมมมองของหนาตางบนหนาจอ สมมตวาสเหลยมทงสองไดรบการนยามโดยฟงกชนของ OpenGL ดงน

glViewport (u, b, w, h); gluortho2D (x_min, s_max, y_min, y_max);

จงหาสมการทางคณตศาสตรทใชในการทาบ (x, y) เปนไปยง (xs, ys)

2.10 โปรแกรมประยกตเชอมตอกราฟกส (API) ทวไปทใชรปแบบของต าแหนงสมพทธ (relative positioning) ซงมนมกจะมฟงกชนตวอยางเชน

move_rel (x, y);

line_rel (x, y);

ส าหรบวาดเสนตรงและวตถหลายเหลยม ฟงกชน move_rel() ใชส าหรบยายต าแหนงภายในหรอเคอรเซอรไปยงต าแหนงใหม line_rel() ยายเคอรเซอรและวาดสวนของเสนตรงระหวางต าแหนงเคอรเซอรเกาและต าแหนงใหม อะไรคอขอไดเปรยบและเสยเปรยบของการวาดโดยใชการวาดในลกษณะนเปรยบเทยบกบการวาดโดยการก าหนดต าแหนงแบบสมบรณโดยการใช OpenGL และใหอธบายวาเราจะใชลกษณะของต าแหนงแบบสมพทธภายใน OpenGL ไดอยางไร

2.11 ในทางปฏบตการทดสอบวาจดนนๆอยภายในหรอภายนอกรปหลายเหลยมนนมนไมมประสทธภาพเปนอยางมาก ใหอธบายถงกลยทธทวไปทคณจะใชหลกเลยงการทดสอบจดตอจดนน

2.12 ประดษฐการทดสอบเพอดวารปหลายเหลยมสองมตนนๆเปนรปหลายเหลยมสองมตอยางงาย 2.13 2.57 แสดงชดของวตถหลายเหลยมทเรยกวาเมช (mesh) โพลกอนเหลานนขอบบางและจด. หาหนงหรอโครงสรางขอมลทงายแสดงตาขาย

โครงสรางขอมลทดควรมขอมลในจด ทใชรวมกนและขอบ ใช OpenGL หาวธทมประสทธภาพส าหรบการแสดงตาขายแทนโครงสรางขอมลของคณ

Page 48: บทที่ โปรแกรมกราฟิก - KMUTTstaff.kmutt.ac.th/~isurnich/ftp/CMM 330/pptx/02 Graphics programming... · 1 ในบทที่ 4 เราจะอธิบายแนวคิดหลัก

4

8

รป 2.56 2.57 เมช

2.14 ในหวขอ 2.4 เราเหนไดวา OpenGL นยามโพลกอนโดยการใชรายการของจดยอด ท าไมถงจะดขนถานยามโพลกอนดวยขอบดานของมน แนะ ใหพจารณาวาเราจะแทนเมชอยางมประสทธภาพไดอยางไร

2.15 ใน OpenGL เราเชอมโยงสกบจดยอดไดถาจดปลายของสวนของเสนตรงนนๆมสแตกตางกนก าหนดใหกบมน OpenGL กจะท าการหาคาแทรกแลวเรนเดอรเสนตรงสวนของเสนตรงเสนนน ในท านองเดยวกนกบการกระท าส าหรบรปโพลกอน ใชคณสมบตนในการแสดงรปสามเหลยมแมกซเวล (Maxwell triangle) รปสามเหลยมดานเทาทจดยอดทงสามของมนก าหนดดวยส แดง เขยวและน าเงนตามล าดบ และสามเหลยมแมกซเวลกบลกบาศกสมความสมพนธกนอยางไร

2.16 เราจ าลองผลกระทบทคลายจรงดวยการใชคอมพวเตอรกราฟกทสอดคลองกบแบบจ าลองทางฟสกสได จงจ าลองลกบอลกระเดงกระดอน (bouncing ball) ในระบบกราฟกสสองมตทมความเกยวของทงแรงโนมถวงและการชนแบบยดหยนกบผวหนง เราอาจจ าลองลกบอลดวยโพลกอนปดทมจ านวนดานทเพยงพอทจะดวาผวของมนดเหมอนผวลกบอล

2.17 นาสนใจแตยากส าหรบหรบการขยายเพมเตมการจ าลองตามหวขอ 2.17 คอการจ าลองเกมพล (pool) หรอบลเลยด (billiards) ซงจ าเปนตองมการจ าลองลกบอลทมมากกวาหนงทมการกระท าตอกนรวมถงกระท าตอขอบโตะได ขอแนะน าใหเรมดวยการจ าลองเพยงลกบอลสองลกและพจารณาวาเราจะดกจบการชนไดอยางไร

2.18 ระบบกราฟกทใชจอแสดงผล CRT ไดรบการโฆษณาวาจะแสดงสทงสใดๆ ไดจาก 64 ส ค านบอกอะไรคณเกยวกบหนวยความจ ากนชนกรอบแสดงผลและคณภาพของจอภาพแบบ CRT

2.19 สรางโปรแกรมการทดสอบความนนของรปหลายเหลยมสองมต 2.20 ปญหาหนงส าหรบการเรมตนผใช OpenGL คอจ านวนรปแบบของหนาทพนฐานเชน glVertex() ในภาษาเชน C + + เราท าใหมนเปนชอ

เดยวและใหรวบรวมเลอกรนทถกตองโดยประเภทของอารกวเมนตใน C + + เขยนคลงโปรแกรมทเปนตวเชอมระหวาง OpenGL และโปรแกรมผใชทลดจ านวนการท างานทโปรแกรมเมอรแอพพลเคชนตองการ