คอมพิวเตอร์กราฟิกส์ใช้ OpenGL (Computer Graphics using OpenGL)

1. คอมพิวเตอร์กราฟิกส์ใช้ OpenGL(Computer Graphics using OpenGL)

2. บทที่ 6การแปลงทางเรขาคณิต(Geometric Transformation)

3. เนื่องจากข้อมูลรูปภาพ หรือข้อมูลทางกราฟิกส์ถูกจัดเก็บไว้ในคอมพิวเตอร์ การเปลี่ยนแปลงวิธีการแสดงภาพเหล่านี้ออกทางจอภาพทำให้ได้ภาพในลักษณะที่ต้องการ การเปลี่ยนแปลงนี้อาศัยการคำนวณทางคณิตศาสตร์ โดยเปลี่ยนค่าพารามิเตอร์ต่าง ๆ ที่เกี่ยวข้องกับการสร้างภาพเท่านั้น เรียกวิธีการนี้ว่า การแปลง (Transformation) การแก้ไข หรือเปลี่ยนแปลงภาพกราฟิกให้แตกต่างไปจากกราฟิกเดิม ทั้งการย้ายตำแหน่ง (Translation), การย่อ/ขยาย (Scaling), การหมุนภาพ (Rotation), การเฉือนภาพ (Shearing) และการสะท้อนภาพ (Reflecting) ปฏิบัติการเหล่านี้เรียกว่า “การแปลงทางเรขาคณิต” (Geometric Transformation) การแปลงทางเรขาคณิต

4. การเลื่อนตำแหน่ง (Translation) คือการเปลี่ยนตำแหน่งของออปเจ็กต์ไปในแนวเส้นตรงจากตำแหน่งหนึ่งไปอีกตำแหน่งหนึ่ง อาจกล่าวได้ว่าเป็นเปลี่ยนตำแหน่งจากโคออร์ดิเนตหนึ่งไปยังโคออร์ดิเนตอื่นก็ได้ ตำแหน่งออปเจ็กต์ที่เกิดจากการเลื่อนจะต้องสัมพันธ์กับขนาดจอภาพ ทำให้ออปเจ็กต์อาจจะอยู่ในจอภาพ นอกจอภาพ หรืออยู่ในจอภาพบางส่วนก็ได้ขึ้นอยู่กับขนาดของจอภาพที่ทำให้เกิดการขริบภาพ (clipping) การเลื่อนตำแหน่ง (Translation)

5. การเลื่อนตำแหน่ง (Translation) การเลื่อนตำแหน่งของจุดและรูปสามเหลี่ยมจากตำแหน่งเดิมไปตำแหน่งใหม่

6. สามารถย้ายจุดใด ๆ ใน 2 มิติ โดยการบวก ระยะการเลื่อน (Translation Distance) ในรูปของเวกเตอร์ในแต่ละแกน (txและ ty) จากจุดเดิม (x, y) ไปยังจุดใหม่ (x’, y’) ดังนี้ 6-1 การเลื่อนตำแหน่ง (Translation) คู่ลำดับระยะการเลื่อน อาจเรียกว่าทรานสเลชันเวกเตอร์ (translation vector) หรือชิฟต์เวกเตอร์ (shift vector)

7. สามารถเปลี่ยนสมการการเลื่อนตำแหน่ง (6-1) เป็นสมการเมทริกซ์โดยใช้เวกเตอร์แทนตำแหน่งโคออร์ดิเนตและทรานสเลชันเวกเตอร์เป็น 6-2 6-3 การเลื่อนตำแหน่ง (Translation) จากสมการ 2 มิติ เขียนในรูปแบบเมทริกซ์ ได้เป็น

8. การเลื่อนตำแหน่ง (Translation) ตำแหน่งเดิม และตำแหน่งใหม่ของออปเจ็กต์ที่ใช้ทรานสเลชันเวกเตอร์เป็น (-3, 4)

9. คำสั่ง OpenGL ที่ใช้ในการเลื่อนออปเจ็กต์คือ glTranslatef (Glfloat x, Glfloat y, Glfloat z); โดยที่ x คือทรานสเลชันเวกเตอร์ในแนวแกน x y คือทรานสเลชันเวกเตอร์ในแนวแกน y z คือทรานสเลชันเวกเตอร์ในแนวแกน z ดูตัวอย่างโค้ดการเลื่อนตำแหน่ง ex06_01.cpp การเลื่อนตำแหน่ง (Translation)

10. การย่อ/ขยาย (Scaling) คือการเปลี่ยนขนาดของออปเจ็กต์ให้มีขนาดใหญ่ขึ้นหรือเล็กลง ตำแหน่งออปเจ็กต์ที่เกิดจากการย่อ/ขยายอาจจะอยู่ในจอภาพ นอกจอภาพ หรืออยู่ในจอภาพบางส่วนก็ได้ ขึ้นอยู่กับขนาดของจอภาพที่ทำให้เกิดการขริบภาพ (clipping) การย่อ/ขยายภาพ (Scaling)

11. การย่อ/ขยายภาพ (Scaling) ขยายตามแนว แกน y ขยายตามแนว แกน x และแกน Y ขยายตามแนว แกน x รูปเดิม

12. การย่อ/ขยายออปเจ็กต์ทางเรขาคณิตใด ๆ ทำได้โดยการคูณตำแหน่ง (x, y) ด้วยค่าสเกลลิงเฟคเตอร์ (Scaling factor) Sx, Syทำให้ได้โคออร์ดิเนต (x’, y’) ดังนี้ 6-4 การย่อ/ขยายภาพ (Scaling) ค่าสเกลลิงแฟคเตอร์ Sxจะทำการย่อ/ขยายออปเจ็กต์ตามแนวแกน x ส่วนค่าสเกลลิงแฟคเตอร์ Syจะทำการย่อขยายออปเจ็กต์ตามแนวแกน y

13. สมการ 6-4 สามารถเขียนให้เป็นรูปเมทริกซ์ได้เป็น 6-5 6-5 หรือ การย่อ/ขยายภาพ (Scaling)

14. คุณสมบัติของสเกลลิงแฟคเตอร์มีดังนี้คุณสมบัติของสเกลลิงแฟคเตอร์มีดังนี้ ถ้าค่าสเกลลิงแฟคเตอร์ = 1 ทำให้ขนาดของออปเจ็กต์ไม่เปลี่ยนแปลง ถ้าค่าสเกลลิงแฟคเตอร์ < 1 จะเป็นการย่อขนาดออปเจ็กต์ ถ้าค่าสเกลลิงแฟคเตอร์ > 1 จะเป็นการขยายขนาดออปเจ็กต์ ถ้าค่าสเกลลิงแฟคเตอร์ Sx = Syจะเรียกว่า uniform scaling ถ้าค่าสเกลลิงแฟคเตอร์ Sx Syจะเรียกว่า differential scaling การแปลงออปเจ็กต์ตามสมการ 6-5 เป็นทั้งการย่อ/ขยายและเปลี่ยนตำแหน่ง ถ้าค่าสเกลลิงแฟคเตอร์ <1 ตำแหน่งใหม่จะเข้าใกล้จุดกำเนิด (origin) ถ้าค่าสเกลลิงแฟคเตอร์ >1 ตำแหน่งใหม่จะออกห่างจากจุดกำเนิด (origin) บางระบบสามารถใช้ค่าสเกลลิงแฟคเตอร์เป็นค่าลบได้ ซึ่งจะได้ผลเป็นการสะท้อน (reflect) ตามแกนที่กำหนด การย่อ/ขยายภาพ (Scaling)

15. การย่อ/ขยายภาพ (Scaling) รูปสี่เหลี่ยมเมื่อ กำหนดสเกลแฟคเตอร์ sx = 2 และ sy = 1 รูปสี่เหลี่ยมจัตุรัสเมื่อ กำหนดสเกลแฟคเตอร์ sx = sy = 0.5

16. การย่อ/ขยายแบบสัมพัทธ์ (Relative Scaling) คือการย่อ/ขยาย ออปเจ็กต์ โดยกำหนดจุดอ้างอิงเป็นจุดคงที่ (fixed point) ไม่มีการเปลี่ยนแปลงทั้งก่อนและหลังการย่อขยาย เราสามารถเลือกจุดอ้างอิง (xf, yf) ได้อย่างอิสระ เมื่อเลือกจุดได้แล้ว ก็ทำการปรับขนาดโดยการย่อ/ขยายระยะทางระหว่างจุดของออปเจ็กต์กับจุดอ้างอิง การย่อ/ขยายภาพ (Scaling)

17. การย่อ/ขยายภาพ (Scaling) การย่อ/ขยายแบบสัมพัทธ์ที่เลือกจุดอ้างอิง (xf, yf) ระยะจากเวอร์เท็กซ์ของรูปหลายเหลี่ยมไปยังจุดอ้างอิงตามสมการ 6-7

18. ตำแหน่งโคออร์ดิเนต (x, y), โคออร์ดิเนตของออปเจ็กต์ที่ปรับขนาดแล้ว (x’, y’) สามารถคำนวณได้จากความสัมพันธ์ 6-7 6-8 การย่อ/ขยายภาพ (Scaling) เขียนสมการ 6-7 ในรูปแบบใหม่ เป็น

19. คำสั่ง OpenGL ที่ใช้ในการย่อย/ขยายออปเจ็กต์คือ glScalef (Glfloat x, Glfloat y, Glfloat z); โดยที่ x คือสเกลลิงแฟคเตอร์ในแนวแกน x y คือสเกลลิงแฟคเตอร์ในแนวแกน y z คือสเกลลิงแฟคเตอร์ในแนวแกน z ดูตัวอย่างโค้ดการย่อ/ขยายออปเจ็กต์ได้ใน ex06_02.cpp การย่อ/ขยายภาพ (Scaling)

20. การหมุน (Rotation) คือการเปลี่ยนตำแหน่งของวัตถุไปในแนวเส้นโค้งของวงกลมในระนาบ xy (ขนานกับโคออร์ดิเนตของแกน z) จากตำแหน่งหนึ่งไปอีกตำแหน่งหนึ่ง โดยไม่เปลี่ยนขนาดของออปเจ็กต์นั้น มีการกำหนดตัวแปร 2 ตัวคือ มุมที่ต้องการหมุน () ถ้าค่าเป็น + หมายถึงการหมุนทวนเข็มนาฬิกา (CCW : Counter ClockWise) ถ้าค่าเป็น – หมายถึงการหมุนตามเข็มนาฬิกา (CW : ClockWise) จุดศูนย์กลางการหมุน (rotation point หรือ pivot point) ตำแหน่ง (xr, yr) หลังจากที่หมุนออปเจ็กต์ไปแล้วระยะห่างระหว่างจุดหมุนกับออปเจ็กต์ยังคงมีค่าเท่าเดิม ลักษณะของออปเจ็กต์ยังคงเหมือนเดิม แต่จะวางในตำแหน่งที่ต่างไปจากเดิมอันเนื่องมาจากการหมุน การหมุนภาพ (Rotation)

21. การหมุนสามารถหมุนได้ครั้งละหลาย ๆ ออปเจ็กต์ก็ได้ จุดหมุนจะอยู่ภายในหรือภายนอกออปเจ็กต์ก็ได้ ตำแหน่งของออปเจ็กต์ที่เกิดจากการหมุนอาจจะอยู่ในจอภาพ นอกจอภาพ หรืออยู่ในจอภาพบางส่วนก็ได้ ขึ้นอยู่กับขนาดของจอภาพที่ทำให้เกิดการขริบภาพ (clipping) การหมุนภาพ (Rotation)

22. การหมุนภาพ (Rotation) การหมุนออปเจ็กต์ที่จุดหมุน (xr, yr) ด้วยมุม 

23. การหมุนภาพ (Rotation) การหมุนจากจุด (x, y) ไปยังจุด (x’, y’) โดยมีมุม  สัมพันธ์กับโคออร์ดิเนตเดิม และทำมุม  กับแกน x

24. การหมุนโดยมีจุดหมุนอยู่ที่จุดกำเนิด โดยที่ความสัมพันธ์ระหว่างมุมที่เวกเตอร์ของจุดเดิม (x, y) และจุดที่หมุนไป (x’, y’) ได้แก่ และ  ตามลำดับ และ r คือรัศมีการหมุน (ขนาดของเวกเตอร์ของจุดทั้งสอง) มีค่าคงที่ สามารถเขียนความสัมพันธ์ได้เป็น 6-9 6-10 การหมุนภาพ (Rotation)

25. เมื่อแทนค่าสมการที่ 6-10 ลงในสมการ 6-9 จะได้ 6-11 6-12 โดยที่ 6-13 การหมุนภาพ (Rotation) จากคอลัมน์เวกเตอร์ 6-2 สามารถเขียนสมการการหมุนในรูปแบบของเมทริกซ์ได้เป็น

26. สำหรับการหมุนออปเจ็กต์ที่มีจุดหมุนอยู่ที่จุดใด ๆ ให้เลื่อนจุดที่ต้องการหมุนไปที่จุดกำเนิดก่อน หลังจากนั้นทำการหมุนโดยใช้ความสัมพันธ์การหมุนซึ่งมีจุดศูนย์กลางอยู่ที่จุดกำเนิด แล้วเลื่อนจุดที่หมุนเรียบร้อยแล้วกลับมาที่จุดหมุน สามารถใช้สมการ 6-9 เพื่อหาสมการการหมุนของจุดเมื่อกำหนด จุดหมุนเป็น (xr, yr) 6-14 การหมุนภาพ (Rotation)

27. การหมุนภาพ (Rotation) การหมุนจุดจากตำแหน่ง (x, y) ไปยังตำแหน่ง (x’, y’) ทำมุม  กับจุดหมุน (xr, yr)

28. คำสั่ง OpenGL ที่ใช้ในการหมุนออปเจ็กต์คือ glRotatef (GLfloat angle, GLfloat x, GLfloat y, GLfloat z); โดยที่ angle คือมุมที่ต้องการให้หมุน (เป็นองศา) x คือ กำหนดให้หมุนตามแนวแกน x y คือ กำหนดให้หมุนตามแนวแกน y z คือ กำหนดให้หมุนตามแนวแกน z ดูตัวอย่างโค้ดการหมุนออปเจ็กต์ใน ex06_03.cpp การหมุนภาพ (Rotation)

29. โปรแกรมกราฟิกทั่วไปมักจะเกี่ยวข้องกับการแปลงทางเรขาคณิตหลายครั้ง หลายรูปแบบ การแปลงทางเรขาคณิตพื้นฐานทั้งสามแบบ (การเลื่อน, การย่อ/ขยาย และการหมุน) สามารถจัดรูปแบบเป็นสมการทั่วไป ได้เป็น 6-15 เมทริกซ์กับการแปลงทางเรขาคณิต โดยที่ P แทนเวกเตอร์ตำแหน่งจุดเริ่มต้น P’ แทนเวกเตอร์ตำแหน่งจุดสิ้นสุด M1 เป็นเมทริกซ์ขนาด 2x2 ซึ่งเก็บค่าสัมประสิทธิ์การคูณ M2 เป็นเมทริกซ์ขนาด 2x1 ซึ่งเก็บพจน์ที่นำไปบวก

30. ตัวอย่างการนำไปประยุกต์ใช้งาน เช่น กรณีการเลื่อนออปเจ็กต์ ค่า M1 จะเป็นเมทริกซ์เอกลักษณ์ (Identity Matrix) กรณีการหมุนหรือการย่อ/ขยายออปเจ็กต์รอบจุดกำเนิด ค่า M2 จะเป็น 0 ในการแปลงเป็นชุด ๆ ด้วยสมการนี้ เช่น ทำการย่อ/ขยาย การหมุน การเลื่อนออปเจ็กต์ จะต้องทำการคำนวณเพื่อการแปลงทีละขั้นตอน เริ่มต้นด้วยการย่อ/ขยายตำแหน่งก่อน หลังจากนั้นจึงทำการหมุน แล้วท้ายสุดจะเป็นการเลื่อน สำหรับคำสั่งใน OpenGL จะทำย้อนกลับจากท้ายไปหาคำสั่งแรก เมทริกซ์กับการแปลงทางเรขาคณิต

31. การแปลงด้วยสมการ 6-15 หลายครั้ง จะทำให้เกิดข้อผิดพลาดสะสมสำหรับตัวเลขจำนวนเต็ม ดังนั้นจึงจำเป็นต้องรวมพจน์ M1 และ M2 เข้าด้วยกัน หลักการของวิธีนี้ คือการแปลงทางเรขาคณิตในรูปของการคูณกันของเมทริกซ์ซึ่งทำได้โดยขยายพจน์ที่เป็นเมทริกซ์ขนาด 2x2  3x3 และ 2x1  3x1 ตามลำดับ ทำได้โดยจัดโคออร์ดิเนต (x, y) ในรูปของเทอม (xh, yh, h) เรียกว่า “โฮมจีเนียสโคออร์ดิเนต” (Homogeneous Coordinates) โดยค่าพารามิเตอร์ h จะไม่เท่ากับ 0 โดยที่ เมทริกซ์กับการแปลงทางเรขาคณิต

32. โฮโมจีเนียสโคออร์ดิเนตอาจเขียนได้ใหม่เป็น (x • h, y • h, h) สามารถเลือกค่า h เป็นจำนวนจริงบวกใด ๆ ได้ แต่เพื่อความสะดวกมักจะเลือกให้ h = 1 ซึ่งจะได้โคออร์ดิเนตเป็น (x, y, 1) สามารถจัดรูปแบบเมทริกซ์การแปลงใหม่เป็น 6-16 เมทริกซ์กับการแปลงทางเรขาคณิต

33. การเลื่อน (Translation) 6-17 6-18 หรือเขียนแบบสั้นเป็น เมทริกซ์กับการแปลงทางเรขาคณิต

34. การย่อ/ขยาย (Scaling) 6-19 6-20 หรือเขียนแบบสั้นเป็น เมทริกซ์กับการแปลงทางเรขาคณิต

35. การหมุน (Rotation) 6-21 6-22 หรือเขียนแบบสั้นเป็น เมทริกซ์กับการแปลงทางเรขาคณิต

36. การแปลงอินเวิร์ส (Inverse Transformation) สามารถใช้หลักการทางเมทริกซ์พิสูจน์ได้โดยการหาอินเวิร์สเมทริกส์ ด้วยคุณสมบัติของ เมทริกซ์ อาจกล่าวได้ว่า การแปลงอินเวิร์ส (Inverse Transformation) การหาอินเวิร์สทำได้โดย

37. หาดีเทอร์มิแนนต์ การแปลงอินเวิร์ส (Inverse Transformation) det T = [(111) + (0ty0) + (tx00)] – [(01tx) + (0ty1) + (100)] det = 1

38. หา adj(T) โดยหา cofactor แต่ละตัว เนื่องจาก ตัวอย่างการหา c22 จาก โดยที่ การแปลงอินเวิร์ส (Inverse Transformation)

39. ดังนั้น การแปลงอินเวิร์ส (Inverse Transformation)

40. การแปลงอินเวิร์ส (Inverse Transformation)

41. การแปลงอินเวิร์ส (Inverse Transformation)

42. การแปลงอินเวิร์ส (Inverse Transformation) ดังนั้น สำหรับการเลื่อน 6-17 พิสูจน์ได้ว่า 6-23

43. การแปลงอินเวิร์ส (Inverse Transformation) 6-24 ดังนั้น จากอินเวิร์สเมทริกซ์ในการเลื่อนออปเจ็กต์ตีความว่า การแปลงออปเจ็กต์ที่เลื่อนไปกลับไปยังจุดเดิม ทำได้โดยเลื่อนออปเจ็กต์นั้นในทิศทางตรงกันข้าม

44. การแปลงอินเวิร์ส (Inverse Transformation) สำหรับการย่อ/ขยาย 6-19 พิสูจน์ได้ว่า 6-25 6-26 ดังนั้น

45. การแปลงอินเวิร์ส (Inverse Transformation) สำหรับการหมุน 6-21 พิสูจน์ได้ว่า 6-27 6-28 ดังนั้น

46. เนื่องจากการแปลงทางเรขาคณิตอยู่ในรูปของเมทริกซ์ สามารถเชื่อมโยงชุดของการแปลงแบบต่าง ๆ เข้าด้วยกันด้วยวิธีการแปลงรวม (Composite Transformation) เรียกรูปแบบว่าเป็น Composite หรือ Concatenation ของเมทริกซ์ เนื่องจากการแสดงตำแหน่งโคออร์ดิเนตเป็นคอลัมน์เมทริกซ์แบบโฮโมจีเนียส ต้องทำการคูณคอลัมน์เมทริกซ์ด้วยเมทริกซ์ของการแปลง เนื่องจากตำแหน่งต่าง ๆ บนจอภาพปกติจะมาจากการแปลง ทำให้การคูณเมทริกซ์ของการแปลงก่อนจะทำการแปลงรวมจึงมีประสิทธิภาพมากกว่า ถ้าต้องการแปลงตำแหน่งจุด P สองครั้ง ตำแหน่งของการแปลงคำนวณได้จาก การแปลงแบบรวม (Composite Transformation)

47. ตำแหน่งของการแปลงคำนวณได้จากตำแหน่งของการแปลงคำนวณได้จาก การแปลงแบบรวม (Composite Transformation) 6-29 การแปลงตำแหน่งโคอร์ดิเนตใช้เมทริกซ์ M จะดีกว่าการใช้ M1 แล้วตามด้วย M2

48. การแปลงรวมของการเลื่อน (Composite Translations) ถ้าต้องการเลื่อนออปเจ็กต์ตำแหน่ง P 2 ครั้งด้วย T1(t1x, t1y) และ T2(t2x, t2y) คำนวณตำแหน่งสุดท้ายของการแปลงแบบเลื่อน P’ ได้ด้วย การแปลงแบบรวม (Composite Transformation) 6-30 เมื่อ P และ P’ แสดงด้วยเมทริกซ์ 3x1 ของคอลัมน์เมทริกซ์แบบโฮโมจีเนียส

49. การแปลงแบบรวม (Composite Transformation) เนื่องจาก ดังนั้น

50. การแปลงแบบรวม (Composite Transformation) 6-31 หรือ 6-32