Transcript คอมพิวเตอร์กราฟิกส์ใช้ OpenGL

คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL
(Computer Graphics using OpenGL)
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
1
บทที่ 9
สี และโมเดลสี
(Color & Color Model)
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
2
สีคืออะไร
แสงและสีมีความสัมพันธ์กนั อยู่ เนื่องจากสีเกิดจากการหักเหของแสงสีขาว
แหล่งสีขาวที่ใหญ่ที่สดุ คือแสงจากดวงอาทิตย์
ถ้ าแสงสีขาวตกกระทบวัตถุแล้ วไม่มีการดูดซับพลังงานแสงไว้ เลยจะเป็ น
เหตุการณ์ในอุดมคติ
ในธรรมชาติวตั ถุจะต้ องมีการดูดซับพลังงานในแต่ละช่วงความถี่ที่แตกต่างกัน
ทาให้ เรามองเห็นวัตใุ นสีที่แตกต่างกัน
เมื่อนาแสงสีขาวนี ้มาแยกโดยอาศัยคุณสมบัติของการหักเหของแสงที่ไม่เท่ากัน
เมื่อผ่านตัวกลาง เช่นการวางปริซมึ่ (prism) ลงบนฉากสีขาว (ดังรูป) จะเกิดเป็ น
แสงสีตา่ งอย่างต่อเนื่องซึง่ อาจจะแยกออกเป็ นสีหยาบ ๆ ได้ เป็ นสีม่วง, น ้าเงิน,
เขียวอมฟ้า, เขียว, เหลือง, แสด และแดง (Violet, Blue, Cyan, Green, Yellow,
Orange, Red)
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
3
สีคืออะไร
การหักเหของแสงสีขาวผ่านปริซมึ่ ทาให้ เกิดเป็ นแสงสีตา่ ง ๆ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
4
สีคืออะไร
โดยธรรมชาติแล้ ว แสงที่มนุษย์มองเห็นเป็ นเพียงคลื่นแม่เหล็กไฟฟ้า
ช่วงแคบ ๆ ช่วงหนึง่ ซึง่ เราสามารถมองเห็นได้ (Visible Light)
มีช่วงความยาวคลื่น (Wavelength) ประมาณ 390 นาโนเมตร – 720
นาโนเมตร (1 นาโนเมตร = 10-9 เมตร)
ปกติแล้ วคลื่นแม่เหล็กไฟฟ้าเป็ นคลื่นชนิดหนึง่ ทาให้ มีความสัมพันธ์
ระหว่างความเร็ว, ความยาวคลื่น และความถี่
เนื่องจากเป็ คลื่นแม่เหล็กไฟฟ้า ดังนันจึ
้ งมีความสัมพันธ์เป็ น c = f
เมื่อ c เป็ นความเร็วแสง,  เป็ นความยาวคลื่น และ f เป็ นความถี่
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
5
สีคืออะไร
การวัดความยาวคลื่นเป็ นไปตามรูป สาหรับคลื่นแม่เหล็กไฟฟ้าที่มี
ความยาวคลื่นมากกว่าแสงที่มองเห็น ได้ แก่ แสงอินฟราเรด
(Infrared), คลื่นไมโครเวฟ (Microwave) และคลื่นวิทยุโทรทัศน์
(Radio)
คลื่นแม่เหล็กไฟฟ้าที่มีความยาวคลื่นน้ อยกว่าแสงที่มองเห็น ได้ แก่
รังสีอลุ ตราไวโอเล็ต (Ultraviolet), รังสืเอ็กซ์ (X-ray) และรังสีแกมม่า
(Gramma-ray) เป็ นต้ น คลื่นแม่เหล็กไฟฟ้าในช่วงต่าง ๆ แสดงดังรูป
ถัดไป
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
6
สีคืออะไร
การวัดความยาวช่วงคลื่นของคลื่นแม่เหล็กไฟฟ้า
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
7
สีคืออะไร
คลื่นแม่เหล็กไฟฟ้าในช่วงความยาวคลื่นต่าง ๆ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
8
สีคืออะไร
ตาราง 9-1 คุณสมบัติของคลื่นแม่เหล็กไฟฟ้า
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
9
การมองเห็นของมนุษย์
เราสามารถมองเห็นบางสิ่งก็เพราะว่าสิ่งนันให้
้ แสงออกมา
เราเห็นบางสิ่งก็เพราะว่าสิง่ เหล่านันสะท้
้
อนแสงได้
เมื่อสิ่งที่ให้ แสงให้ กาเนิดแสงออกมา สิง่ เหล่านันจะให้
้
สีที่เรามองเห็น
เมื่อสิ่งนันสะท้
้
อนแสงออกมา เช่น กระดาษ หรื ออื่น ๆ
สีจะถูกกาหนดโดยสีของแสงที่ชนกับวัตถุ และสีของวัตถุที่สะท้ อน
สาหรับกระดาษที่เห็นเป็ นสีขาว เนื่องจากสีของแสงสีขาวไม่ดดู กลืนสี
อะไรเลย
เนื่องจากแสงสีขาวมีคา่ พลังงานในแต่ละความถี่ที่มีคา่ ใกล้ เคียงกัน
มาก รูปต่อไปแสดงการกระจายของแสงสีขาว
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
10
การมองเห็นของมนุษย์
การกระจายของแสงสีขาว
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
11
การมองเห็นของมนุษย์
กราฟแสดงค่าพลังงานของแสงที่ไม่ใช่สีขาวก็แตกต่างกันออกไป รูป
ต่อไปเป็ นช่วงที่มีการกระจายของแสงที่ใกล้ กบั แสงสีแดง
ในช่วงที่มีคา่ พลังงานมากกว่าช่วงความถี่อื่นและมีความถี่ที่มีคา่
พลังงานสูงสุดนี ้เรี ยกว่า ความถี่เด่ นชัด (Dominant Frequency)
หรื อ ความยาวคลื่นเด่ นชัด (Dominant Wavelength)
เมื่อความยาวคลื่นเด่นชัดมีพลังงานมากกว่าพลังงานช่วงคลื่นอื่น
แสดงว่าแสงสีนนมี
ั ้ ความอิ่มตัว (purity หรื อ saturation) มากตามไป
ด้ วย
อาจกล่าวได้ วา่ ถ้ ามีแสงสีขาวเข้ ามาผสมมากขึ ้นจะมีความอิ่มตัวจะ
น้ อยลง แต่ถ้ามีแสงสีขาวเข้ ามาผสมน้ อยลงจะมีความอิ่มตัวมากขึ ้น
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
12
การมองเห็นของมนุษย์
การกระจายพลังงานในช่วงที่ใกล้ กบั แสงสีแดงทาให้ เกิดความถี่เด่นชัด หรื อ
ความยาวคลื่นเด่นชัด
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
13
การมองเห็นของมนุษย์
เมื่อเราจะนาสีมาใช้ งาน เราจาเป็ นต้ องหาตัวแทนที่จะบอกถึงความ
แตกต่างของแต่ละสี เพื่ออ้ างอิงสีเหล่านันได้
้
สมมุติเรามีสีเหลือง เราจะใช้ อะไรเป็ นตัวแบ่งว่าแสงสีนี ้เป็ นสีเหลือง
บางคนอาจจะใช้ ความยาวคลื่นของสีเหลืองเป็ นตัวกาหนด เช่นค่าแสง
สีเหลืองจากเปลือกกล้ วยจะมีความยาวคลื่น 570 นาโนเมตร
การอ้ างอิงในลักษณะนี ้อาจจะไม่ถกู ต้ องเสมอไปเนื่องจากแสงสีเหลือง
ที่สะท้ อนจากเปลือกกล้ วยนันไม่
้ ได้ มีแสงสีเหลืองที่ความยาวคลื่น 570
นาโนเมตร แต่อยูใ่ นช่วงความยาวคลื่น 560 – 580 นาโนเมตรรวมอยู่
ด้ วย
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
14
การมองเห็นของมนุษย์
แต่มีคา่ พลังงานที่แตกต่างกันออกไปโดยมีแสงสีเหลืองที่มีความยาว
570 นาโนเมตรเป็ นความยาวคลื่นเด่นชัด
ดังนันเราจะพบว่
้
าสีใด ๆ ที่เรามองเห็นเป็ นฟั งก์ชนั ของความยาวคลื่น
เป็ นช่วง ๆ มิได้ ขึ ้นอยูก่ บั ความยาวคลื่นใดความยาวคลื่นหนึง่
แสงที่ความยาวคลื่น หรื อความถี่เพียงค่าเดียวคือแสงเลเซอร์
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
15
การมองเห็นของมนุษย์
การแทนค่าสีต่าง ๆ ในรูปฟั งก์ชนั ของความยาวคลื่น เป็ นเรื่ องยุง่ ยาก
แสงที่เรามองเห็นยังสามารถแทนด้ วยฟั งก์ชนั ดังกล่าวนับไม่ถ้วน
ดังนันถ้
้ ากล่าวถึงแสงสีเหลืองจากเปลือกกล้ วยอาจจะไม่ได้ มีความยาวคลื่นของ
แสงในช่วงความยาวคลื่นสีเหลืองเป็ นความยาวคลื่นเด่นชัด กล่าวคืออาจจะ
ประกอบด้ วยแสงสีแดง และแสงสีเขียวซึง่ ไม่ได้ มีแสงเหลืองเป็ นความยาวคลื่น
เด่นชัด
ในบางครัง้ อาจจะไม่มีแสงในช่วงแสงสีเหลืองเลยก็ได้
ระบบประสาททางการมองเห็นของมนุษย์นนจะแปลความหมายออกมาเป็
ั้
นสี
เหลือง ปรากฏการณ์นี ้เรี ยกว่า เมตาเมอร์ ริซมึ่ (metamerism)
ตัวอย่างได้ ชดั เจนจากหลักการที่ใช้ ในจอภาพของคอมพิวเตอร์ แบบ CRT ซึง่
ประกอบพิกเซลที่มีสีเพียง 3 สีคือสีแดง (R), สีเขียว (G) และสีน ้าเงิน (B) เท่านัน้
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
16
การมองเห็นของมนุษย์
สิง่ ที่สาคัญก็คือ ตาของมนุษย์มีความไวหรื อการตอบสนองต่อแสงที่มี
ความถี่แตกต่างกันไป
ตัวอย่างเช่น แสงสีเขียวและแสงสีน ้าเงินเมื่อวัดด้ วยอุปกรณ์
วิทยาศาสตร์ ที่เป็ นการศึกษาทางด้ าน physical จะมีพลังงานเท่ากัน
แต่เมื่อมองด้ วยดวงตามนุษย์ที่มีความไวต่อแสงสีเขียวมากกว่าแสงสี
น ้าเงิน
สิ ้งเหล่านี ้เกิดจากการที่มีระบบประสาทมนุษย์เข้ ามาเกี่ยวข้ อง และ
เป็ นการศึกษาแบบ psychophysical
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
17
การมองเห็นของมนุษย์
สีที่เรามองเห็นสามารถจาแนกได้ เป็ น 3 ชนิดคือ
Illuminant color เป็ นสีที่เรามองเห็นโดยการมองจ้ องไปที่แหล่งกาเนิด
แสงโดยตรง เช่น การมองภาพที่เกิดจากจอภาพคอมพิวเตอร์ หรื อการ
มองหลอดนีออนป้ายโฆษณา
Transmitted color (หรื อ Percepted color) เป็ นสีที่เรามองเห็นเมื่อ
วัตถุถกู ให้ แสงทางด้ านหลัง กล่าวคือแสงจากแหลงกาเนิดได้ ส่องทะลุ
ผ่านวัตถุก่อนจะเข้ าสูส่ ายตาเรา
Reflected color เป็ นสีที่เรามองเห็นเมื่อแสงจากแหล่งกาเนิดแสง
สะท้ อนออกจากผิวของวัตถุโดยตรง เช่น สีของวัตถุที่ทบึ แสงทัว่ ไป
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
18
การมองเห็นของมนุษย์
การจาแนกสีทงั ้ 3 ชนิด
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
19
ดวงตาของมนุษย์
ความจริงแล้ วสีไม่มีจริงในธรรมชาติ มีเพียงคลื่นแม่เหล็กไฟฟ้าที่มีความถี่
แตกต่างกันไป ทาให้ การมองเห็นเปลี่ยนไปตามการรับรู้ของประสาทมนุษย์ที่ถกู
กระตุ้นโดยคลื่นแม่เหล็กไฟฟ้า
คลื่นแม่เหล็กไฟฟ้าที่สามารถกระตุ้นระบบการรับรู้ด้านการมองเห็นของมนุษย์ก็
คือแสงที่มองเห็นได้ (Visible light)
ดังนันเราจึ
้
งไม่สามารถบอกได้ วา่ รังสีเอ็กส์, รังสีอลุ ตราไวโอเลต หรื อคลื่นวิทยุ
เป็ นสีอะไร เนื่องจากช่วงความถี่ดงั กล่าวไม่สามารถกระตุ้นระบบประสาทในการ
มองเห็นของมนุษย์ได้
แต่ในสัตว์บางชนิดสามารถรับรู้ได้ เนื่องจากคลื่นเหล่านันสามารถกระตุ
้
้น
ประสาทรับรู้ได้ เช่น ผึ ้งสามารถมองเห็นแสงอุลตราไวโอเล็ต หรื องูสามารถ
มองเห็นอินฟราเรดได้
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
20
ดวงตาของมนุษย์
ระบบประสาทในการมองเห็นของมนุษย์นนั ้ ได้ แก่ ตวงตาที่เป็ นตัวรับ
แสงและอวัยวะที่ใช้ สง่ สัญญาณไปสูส่ มองได้ แก่ optic nerve และ
optic chaism (ดังรูป) จนกระทัง่ ถึงสมองที่ทาหน้ าที่ประมวลผล
เกี่ยวกับการมองเห็นแต่จะกล่าวเพียงดวงตาเพียงอย่างเดียว
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
21
ดวงตาของมนุษย์
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
22
ดวงตาของมนุษย์
ระบบตาของเราประกอบด้ วยหลายส่วน เมื่อแสงที่ผา่ นเข้ ามาในตา
จะต้ องผ่านแก้ วตา (Cornea) และเสนส์ (Lens)
ส่วนม่านตา (Iris) จะทาหน้ าที่ปิดเปิ ดเพื่อปรับความเข้ มของแสงที่เข้ า
มายังตา
การรับรู้เรื่ องแสงและสีของมนุษย์จะมีเนื ้อเยื่อที่บริเวณผนังรอบ ๆ
ดวงตาที่มีความไวต่อแสง ซึง่ ประกอบด้ วยเซลล์ตวั รับ (Receptor
cells) สองชนิดด้ วยกันคือ
เซลล์รูปกรวย (Cone cell)
เซลล์รูปแท่ง (Rod cell)
เซลล์ที่ตอบสนองต่อสีคือเซลล์รูปกรวย
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
23
ดวงตาของมนุษย์
เซลล์รูปกรวยนี ้จะมีสว่ นที่ตอบสนองต่อสีแดง, สีเขียว และสีน ้าเงิน
ส่วนสีอื่น ๆ ที่มองเห็นเป็ นผลรวมของการตอบสนองต่อสีแดง สีเขียว
และสีน ้าเงิน
ส่วนเซลล์แบบแท่งจะตอบสนองต่อความเข้ มต่า ๆ ได้ ดี ซึง่ จะช่วยให้
เรามองเห็นได้ ในที่มืด
ส่วนเซลล์รูปกรวยจะสามารถตอบสนองต่อแสงที่มีความเข้ มสูงอย่าง
ในเวลากลางวัน
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
24
ดวงตาของมนุษย์
เซลล์รูปกรวยและเซลล์รูปแท่งนี ้มีจานวนรวมกันประมาณ
94,500,000 เซลล์ (เซลล์รูปกรวยประมาณ 4,500,000 เซลล์ และ
เซลล์รูปแท่งประมาณ 90,000,000 เซลล์)
เซลล์รูปกรวยที่ตอบสนองแสงทัง้ 3 สีจะมีในปริมาณเท่า ๆ กัน โดย
เซลล์ที่ตอบสนองแสงสีแดงอยูใ่ นช่วงความถี่ต่า ส่วนเซลล์ที่ตอบสนอง
แสงสีเขียวได้ ดีจะอยูใ่ นช่วงความถี่ปานกลาง และเซลล์ที่ตอบสนอง
แสงสีน ้าเงินอยูใ่ นช่วงความถี่สงู
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
25
ดวงตาของมนุษย์
การตอบสนองต่อแสงที่ความถี่ตา่ ง ๆ ของเซลล์รูปกรวย
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
26
ดวงตาของมนุษย์
ที่กล่าวว่าเซลล์รูปกรวยตอบสนองแสงสีแดง เขียว หรื อสีน ้าเงินนัน้
ไม่ได้ หมายความว่าเซลล์รูปกรวยจะได้ รับการกระตุ้นจากแสงสีเพียงสี
เดียว เท่านัน้ แต่สามารถถูกกระตุ้นได้ ด้วยความถี่ที่เป็ นช่วง ๆ
ดังนันจึ
้ งถูกกระตุ้นด้ วยความถี่มากมาย ซึง่ แต่ละความถี่จะมี
ความสามารถในการกระตุ้นเซลล์รปกรวยที่มากน้ อยแตกต่างกันไป
เช่นเมื่อเรามองแสงสีแดง เซลล์รูปกรวยที่มีความไวต้ อแสงสีแดงจะ
ได้ รับการกระตุ้นมากที่สดุ และเซลล์รูปกรวยที่ไวต่อแสงสีเขียวจะ
ได้ รับการกระตุ้นรองลงมา ส่วนเซลล์รูปกรวยที่ไวต่อแสงสีน ้าเงินจะ
ได้ รับการกระตุ้นน้ อยที่สดุ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
27
ดวงตาของมนุษย์
บนพื ้นที่จดุ เล็ก ๆ บนเรตินาจะมีสดั ส่วนของเซลล์รูปกรวยที่ไวต่อแสงสี
แดง สีเขียว และสีน ้าเงินเป็ น 32:16:1
จะเห็นว่าเซลล์รูปกรวยที่ไวต่อแสงสีน ้าเงินมีน้อยสุด ทาให้ เรามีความ
ไวต่อสีน ้าเงินต่ากว่าสีเขียว และสีแดง นัน่ เอง
คุณสามารถมองเห็นวัตเุ ป็ นสีตา่ ง ๆ เนื่องจากสีที่สง่ มานันมี
้
องค์ประกอบของสีแดง, สีเขียว และสีน ้าเงินในสัดส่วนที่แตกต่างกัน
ดวงตาของมนุษย์จะแปลความคลื่นสีเหล่านันออกมาเป็
้
นสีต่าง ๆ
รูปต่อไปแสดงถึงการเห็นวัตถุเป็ นสีน ้าตาลซึง่ เกิดจากการประกอบของ
สีแดง 60 ส่วน, สีเขียว 40 ส่วน และสีน ้าเงิน 10 ส่วน
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
28
ดวงตาของมนุษย์
ตามองเห็นวัตถุเป็ นสีน ้าตาลที่เกิดจากส่วนประกอบสีแดง 60 ส่วน,
สีเขียว 40 ส่วน และสีน ้าเงิน 10 ส่วน
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
29
ดวงตาของมนุษย์
ความเข้ มของพลังงานแสงที่วดั ออกมาทางกายภาพจะอยูใ่ นรูปความ
สว่าง (Brightness) จะสว่างมากหรื อน้ อยขนาดไหน เราสามารถรับรู้
ได้ จากแสงที่ตกกระทบกับวัตถุ
ระบบการมองเห็นของมนุษย์จะมีการตอบสนองที่แตกต่างกันตามช่วง
ความถี่ของแสงแต่ละสี เช่น แสงที่มาจากช่วงความถี่สีเขียวกับสีแดง
โดยทังสองจะมี
้
ความเข้ มของแสงเท่ากัน แต่เราอาจจะเห็นแสงที่มี
ความสว่างต่างกัน เนื่องจากการตอบสนองที่ไม่เท่ากันของเซลล์รูป
กรวยที่มีตอ่ สีแดงและสีเขียว ความสว่างที่ตอบสนองต่อช่วงความถี่
ต่าง ๆ กัน แสดงดังรูป
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
30
ดวงตาของมนุษย์
เส้ นโค้ งมาตรฐานการมองเห็นของ CIE
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
31
การแสดงสีบนจอคอมพิวเตอร์
การแสดงสีบนจอคอมพิวเตอร์ ก็ใช้ หลักการเดียวกันคือการกาหนด
ความเข้ มของแสงสีแดง, สีเขียว และสีน ้าเงินเพื่อให้ เกิดเป็ นสีตาม
ต้ องการ
จอคอมพิวเตอร์ ถกู ออกแบบให้ สร้ างแสง 3 สี แต่ละสีตามความเข้ ม
ด้ านหลังจอภาพเป็ นปื นอิเล็กตรอน (Electron gun) ที่ทาหน้ าที่ยิง
อิเล็กตรอนจากด้ านหลังให้ มากระทบแผ่นฟอสเฟอร์ ทาให้ เกิดแสงสี
แดง, สีเขียว และสีน ้าเงิน
ความเข้ มของแสงที่ปล่อยออกมาเปลี่ยนไปตามลาแสงอิเล็กตรอน สี
ของสารฟอสเฟอร์ ทงั ้ 3 สีจะอยูใกล้ กนั ทาให้ กิดเป็ นจุดสีบนจอภาพ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
32
การแสดงสีบนจอคอมพิวเตอร์
การสร้ างสีบนจอคอมพิวเตอร์
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
33
โหมดการแสดงผลบนจอคอมพิวเตอร์
จอคอมพิวเตอร์ ในปั จจุบนั ก็มีหลากหลายให้ เลือกใช้ งาน แต่สงิ่ ที่ทาให้
กราฟิ กมีความสวยงาม สีกลมกลืนหรื อไม่ขึ ้นอยูก่ บั ความละเอียดของ
จอภาพ (resolution)
แต่เดิมความละเอียดจอภาพอาจจะอยูท่ ี่ 640x480 แต่ในปั จจุบนั
อาจจะมีความละเอียดถึง 2,560x2,048
รูปต่อไปแสดงพัฒนาการของชื่อจอคอมพิวเตอร์ และความละเอียดใน
การแสดงผลตังแต่
้ อดีตจนถึงปั จจุบนั
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
34
โหมดการแสดงผลบนจอคอมพิวเตอร์
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
35
โหมดการแสดงผลบนจอคอมพิวเตอร์
ตาราง 9-2 โหมดสีและชื่อทัว่ ไปในการแสดงผลกราฟิ ก
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
36
2 สี
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
37
16 สี
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
38
256 สี
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
39
16.7 M
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
40
โมเดลสี (Color Model)
สิง่ ที่เราใช้ อ้างอิงคุณสมบัติและธรรมชาติของสีในขอบเขตเฉพาะ
เรี ยกว่า โมเดลสี (Color Model)
เราไม่สามารถใช้ เพียงโมเดลสีเดียวในการอธิบายคุณสมบัติและ
ธรรมชาติของสีได้ ทงหมด
ั้
เราจาเป็ นต้ องใช้ โมเดลสีที่หลากหลายเพื่อช่วยอธิบายความแตกต่าง
คุณลักษณะของสี
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
41
สีหลัก
เมื่อเราผสมแสงจากแหล่งกาเนิด 2 แหล่งหรื อมากกว่าด้ วยความถี่
หลักที่แตกต่างเข้ าด้ วยกัน
เราสามารถเปลี่ยนความเข้ มของแสงจากแต่ละแหล่งเพื่อสร้ างช่วงสี
เพิ่มเติมขึ ้นมาใหม่ การทาแบบนี ้เป็ นวิธีหนึง่ ในการสร้ างโมเดลสี
สีสนั (hue) ที่เราเลือกจากแหล่งกาเนิดแสงเรี ยกว่า สีหลัก (Primary
Color) และขอบเขตสี (color gamut)
สาหรับโมเดลคือชุดของสีทงหมดที
ั้
่เราสามารถสร้ างจากสีหลักได้ สี
หลัก 2 สีที่สร้ างขึ ้นมาหมายถึงสีตรงข้ าม (Complementary color)
ตัวอย่างของคูส่ ีประกอบคือ แดงกับฟ้า, เขียวกับม่วงแดง และ น ้าเงิน
กับเหลือง
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
42
สีหลัก
ไม่มีข้อจากัดของชุดสีหลักที่นามาผสมกันเป็ นสีที่มองเห็นได้
อย่าไรก็ตามสีหลัก 3 สีก็เพียงพอแล้ วสาหรับงานทัว่ ไป
การกาหนดชุดของสีหลักทาให้ เราสามารถกาหนดคุณลักษณะสีที่ 4
ด้ วยกระบวนการผสมสี
ดังนันส่
้ วนผสมของสีหลัก 1 หรื อ 2 สีทาให้ ได้ สีที่ต้องการได้
อาจกล่าวได้ วา่ สีทกุ สีเกิดจากสีหลัก 3 สีที่ผสมกันในความเข้ มที่
แตกต่างกัน
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
43
สีหลัก
รูปต่อไปแสดงถึงฟั งก์ชนั ความเข้ ากันได้ ของสี (color-matching
function) สาหรับสีหลัก 3 สีและเป็ นความเข้ มแต่ละสีที่จาเป็ นต้ องใช้
เพื่อสร้ างสีที่ต้องการ
จากกราฟในรูปจะเห็นว่าสีที่มีความยาวคลื่น 500 นาโนเมตรเกิดจาก
ความเข้ มของแสงสีน ้าเงินรวมกับสีเขียวแล้ วลบด้ วยความเข้ มของแสง
สีแดง
นัน่ หมายความว่าสีรอบ ๆ ความยาวคลืน 500 นาโนเมตรอธิบายได้
เพียงว่าเป็ นการผสมของความเข้ มแสงสีแดง, สีน ้าเงิน และสีเขียวตาม
รูป ดังนันจอภาพสี
้
RGB จะไม่สามารถแสดงสีข้างเคียงของ 500 นา
โนเมตรได้
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
44
ปริมาณ RGB ของความเข้ ากันได้ ของสี
สีหลัก
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
45
โมเดลสี XYZ
เนื่องจากไม่มีข้อจากัดชุดของแหล่งกาเนิดแสงที่มาผสมกันให้ เกิดเป็ น
สีตา่ ง ๆ ได้ นนเอง
ั ้ สีหลัก 3 สีจึงได้ ถกู กาหนดขึ ้นในปี ค.ศ.1931 โดย
International Commission on Illumination ที่ชื่อ CIE
สีหลัก 3 สีเป็ นสีในจินตนาการซึง่ ถูกกาหนดทางคณิตศาสตร์ ด้วย
ฟั งก์ชนั ความเข้ ากันได้ ของสีที่เป็ นค่าบวก (รูปต่อไป) ที่กาหนดความ
เข้ มของแต่ละสีหลักที่จาเป็ นในการสร้ างสีตา่ ง ๆ
การกาหนดนี ้เป็ นมาตรฐานนานาชาติของสีทกุ สี และสีหลักของ CIE นี ้
ได้ กาจัดค่าความเข้ ากันได้ ของสีที่เป็ นค่าลบออกไป รวมทัง้ กาจัด
ปั ญหาต่างๆ ที่เกี่ยวข้ องในการเลือกชุดของสีหลักจริง ๆ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
46
ปริมาณการเข้ ากันได้ ของสี 3 สี
โมเดลสี XYZ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
47
โมเดลสี XYZ
ชุดของสีหลัก CIE โดยทัว่ ไปอ้ างอิงถึงโมเดลสี XYZ ซึง่ พารามิเตอร์
X, Y และ Z แทนความเข้ มของแต่ละสีหลัก CIE ที่จาเป็ นในการสร้ างสี
ตามต้ องการ
ดังนันสี
้ ที่อธิบายได้ ด้วยโมเดล XYZ จะเหมือนกับที่ได้ อธิบายสีด้วย
โมเดลสี RGB
ในรูปแบบ 3 มิติของสี XYZ เราแสดงสี c() ด้ วย
9-1
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
48
โมเดลสี XYZ
โดยที่ X, Y และ Z คานวณได้ จากฟั งก์ชนั ความเข้ ากันได้ ของสี
9-2
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
49
โมเดลสี XYZ
พารามิเตอร์ k ในการคานวณนี ้มีคา่ 683 lumens/watt
ซึง่ lumen เป็ นหน่วยสาหรับการแพร่กระจายแสงต่อหนึง่ หน่วยมุม
ของแข็งจากแหล่งกาเนิดจุดมาตรฐาน (บางครัง้ เรี ยกว่าแรงเทียน)
ฟั งก์ชนั I() แทนการแพร่สเปกตรัมซึง่ เลือกจากความเข้ มแสงใน
ทิศทางเฉพาะ
ฟั งก์ชนั ความเข้ ากันได้ ของสี fY ตามพารามิเตอร์ Y คือความส่องสว่าง
ของสี
ค่าความส่องสว่างโดยปกติจะปรับอยูใ่ นช่วง 0 ถึง 100.0 ซึง่ 100.0
แทนความส่องสว่างของแสงสีขาว
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
50
โมเดลสี XYZ
สีอื่น ๆ ที่แทนในสี XYZ เป็ นการรวมของสีหลักโดยใช้ เวกเตอร์ หนึง่
หน่วย X, Y, Z ดังนัน้ เราสามารถเขียนสมการ 9-1 ได้ เป็ น
9-3
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
51
ค่ านอมอลไลซ์ XYZ
เพื่อความสะดวกเราสามารถนอมอลไลซ์คา่ ในสมการ 9-2 กับค่า
ผลบวกของ X+Y+Z ซึง่ แทนค่าพลังงานรวมของแสง ทาให้ ได้ สมการ
9-4
เนื่องจาก x+y+z = 1 ทาให้ สีตา่ ง ๆ จึงสามารถแทนได้ ด้วยค่า x และ y
ดังนันเมื
้ ่อเรานอมอลไลซ์ด้วยค่าพลังงานรวม ค่าพารามิเตอร์ x และ y
ขึ ้นกับสีสนั และความบริสทุ ธิ์สี ที่เรี ยกว่า ค่าภาวะสี (Chromaticity
value)
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
52
ค่ านอมอลไลซ์ XYZ
ลาพังเพียงค่า x และ y ยังไม่สามารถอธิบายคุณสมบัติให้ สมบูรณ์ได้
และเราไม่สามารถหาค่า X, Y และ Z ได้ ดังนันค
้ าอธิบายที่สมบูรณ์
ของสีโดยปกติจะต้ องมีคา่ x, y และค่าส่องสว่าง Y หลังจากนันค่
้ า CIE
ที่เหลือคานวณได้ จาก
9-5
ลาพังโดยที่ z = 1 – x – y การใช้ โคออร์ ดิเนตภาวะสี (x, y) เรา
สามารถแทนทุกสีบนไดอะแกรม 2 มิติได้
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
53
ไดอะแกรมภาวะสีของ CIE (CIE Chromaticity)
เมื่อเราพล็อตค่านอมอลไลซ์ x และ y สาหรับค่าสีในสเปกตรัมที่มองเห็นได่
นัน้ เราจะได้ เส้ นโค้ งรูปลิ ้นตามรูปต่อไป
เส้ นโค้ งนี ้เรี ยกว่า ไดอะแกรมภาวะสีของ CIE (CIE Chromaticity)
จุดตามเส้ นโค้ งเป็ นสเปกตรัมสี (สีบริ สทุ ธิ์)
เส้ นตรงที่เชื่อมระหว่างจุดสีแดงกับจุดสีม่วง เรี ยกว่า เส้ นม่ วง (purple line)
ซึง่ เส้ นม่วงนี ้ไม่ได้ เป็ นส่วนหนึ่งของสเปกตรัม
จุดภายในแทนโคออร์ ดิเนตของสีทงหมดที
ั้
่สามารถมองเห็นได้
จุด C ในไดอะแกรมสัมพันธ์กบั ตาแหน่งแสงสีขาว โดยความเป็ นจริ งแล้ ว
จุดนี ้ถูกพล็อตขึ ้นมาสาหรับแหล่งกาเนิดแสงสีขาวที่เรี ยกว่า ความส่ อง
สว่ าง C ซึง่ ใช้ เป็ นค่ามาตรฐานโดยประมาณสาหรับค่าเฉลี่ยแสง
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
54
ไดอะแกรมภาวะสีของ CIE (CIE Chromaticity)
ไดอะแกรมภาวะสีของ CIE สาหรับสเปกตรัมช่วงความยาวคลื่น 400 ถึง 700 nm
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
55
ไดอะแกรมภาวะสีของ CIE (CIE Chromaticity)
ค่าความส่องสว่างไม่มีในไดอะแกรมภาวะสีของ CIE เนื่องจากการนอ
มอลไลซ์ สีที่มีความส่องสว่างแตกต่างกันแต่มีภาวะสีเดียวกันจะแม็
พลงบนจุดเดียวกัน ประโยชน์ของไดอะแกรมภาวะสีคือ
เปรี ยบเทียบค่าขอบเขตสีสาหรับชุดของสีหลักที่ตา่ งกัน
กาหนดสีตรงข้ าม
กาหนดความบริสทุ ธิ์และความยาวคลื่นเด่นชัดให้ กบั สีตา่ ง ๆ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
56
ขอบเขตสี (Color Gamuts)
เราสามารถกาหนดขอบเขตสี (Color Gamuts) บนไดอะแกรมภาวะสี
เป็ นเส้ นตรงหรื อขอบเขตหลายเหลี่ยมได้
สีทงหมดตามเส้
ั้
นตรงที่เชื่อมต่อจุด C1 และ C2 ในรูป 9.18 ได้ มาจาก
การรวมสีที่เหมาะสมของสี C1 และ C2
ถ้ าใช้ สดั ส่วนของสี C1 มาก สีที่ออกมาจะใกล้ สี C1 มากกว่า C2
ส่วนขอบเขตสีของจุด 3 จุด เช่น C3, C4 และ C5 ตามรูปต่อไปเป็ น
สามเหลี่ยมที่มีเวอร์ เท็กซ์บนตาแหน่งสีทงั ้ 3 สี
สีหลัก 3 สีเหล่านี ้สามารถสร้ างในหรื อบนขอบของสามเหลี่ยมได้
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
57
ขอบเขตสี (Color Gamuts)
ดังนันไดอะแกรมภาวะสี
้
จะช่วยเราเข้ าใจว่าทาไมถึงไม่มีชดุ ของ 3 สี
หลักที่รวมกันให้ เกิดเป็ นสีได้ ทงหมด
ั้
เพราะไม่มีสามเหลี่ยมภายใน
ไดอะแกรมที่สามารถครอบคลุมได้ ทกุ สี
ขอบเขตสีบนจอภาพและอุปกรณ์อื่นจะถูกนามาเปรี ยบเทียบกับ
ไดอะแกรมภาวะสีเพื่อให้ การใช้ งานสะดวกขึ ้น
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
58
ขอบเขตสี (Color Gamuts)
ขอบเขตสี (Color
gamuts) ที่กาหนดบน
ไดอะแกรมภาวะสี
สาหรับระบบสีหลัก 2 สี
หรื อ 3 สี
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
59
สีตรงข้ าม (Complementary Colors)
เนื่องจากขอบเขตสีของ 2 จุดเป็ นเส้ นตรง สีตรงข้ ามต้ องแทนบน
ไดอะแกรมภาวะสีเป็ น 2 จุดบนฝั่ งตรงข้ ามของ C และอยูร่ ่วมเส้ นตรง
กับ C ดังรูปต่อไป ระยะของสี C1 และ C2 ไปยัง C กาหนดความเข้ ม
ของแสงแต่ละสีที่ใช้ สร้ างแสงสีขาว
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
60
สีตรงข้ าม (Complementary Colors)
สีตรงข้ ามบนไดอะแกรมภาวะสี
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
61
ความยาวคลื่นเด่ นขัด (Dominant Wavelength)
ในการกาหนดความยาวคลื่นเด่นชัดของสี เราลากเส้ นตรงจาก C ผ่านจุดสีนนไป
ั้
ยังแสงสีบนเส้ นโค้ งภาวะสี
แสงสี Cs ในรูปต่อไป เป็ นความยาวคลื่นเด่นชัดของสี C1 ในไดอะแกรมนี ้ ดังนันสี
้
C1 สามารถแทนการรวมของแสงสีขาว C กับแสงสี Cs
วิธีที่ใช้ กาหนดความยาวคลื่นเด่นชัดนี ้ใช้ ไม่ได้ กบั จุดสีที่อยูร่ ะหว่าง C และเส้ นม่วง
การลากเส้ นตรงจาก C ผ่านไปยังจุด C2 ในรูปจะพาเราไปสูจ่ ดุ Cp บนเส้ นม่วงซึง่
ไม่อยูบ่ นสเปกตรัมที่มองเห็น
ในกรณีนี ้เราได้ สีตรงข้ ามกับสี Cp บนเส้ นสเปกตรัมซึง่ คือจุด Csp เป็ นความยาว
คลื่นเด่นชัด
สี C2 ในไดอะแกรมนี ้มีการกระจายสเปกตรัมด้ วยความยาวคลื่นเด่นชัดแบบลบ
เราสามารถอธิบายได้ โดยการลบความยาวคลื่นเด่นชัดจากแสงสีขาว
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
62
ความยาวคลื่นเด่ นขัด (Dominant Wavelength)
การกาหนดความยาวคลื่น
เด่นชัดและความบริสทุ ธิ์ของสี
โดยใช้ ไดอะแกรมภาวะสี
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
63
ความบริสุทธิ์สี (Purity)
สาหรับจุดสี C1 ในรูปที่ผา่ นมา เรากาหนดความบริสทุ ธิ์สีเป็ น
ความสัมพันธ์ของระยะทางของ C1 จาก C ไปตามเส้ นตรงที่เชื่อม
ระหว่าง C ไปยัง Cs
ถ้ า dc1 เป็ นระยะทางจาก C ไป C1 และ dcs เป็ นระยะทางจาก C ไปCs
เราแทนความบริสทุ ธิ์สีได้ ด้วยอัตราส่วน dc1/dcs
สี C1 ในรูปนี ้มีความบริสทุ ธิ์ประมาณ 25% เนื่องจากอยูใ่ นตาแหน่ง
ประมาณ 1/4 ของระยะทางทังหมดจาก
้
C ไป Cs
ที่จดุ Cs มีความบริสทุ ธิ์ 100%
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
64
โมเดลสี RGB
จากทฤษฎีตวั กระตุ้นสีทงสาม
ั้
(Tristimulus theory) ที่กาหนดค่าความเข้ ม
ของแสงสีตา่ ง ๆ ซึง่ จะต้ องกระตุ้นแหล่งแสงสีหลักเพื่อให้ แสดงแสงสีตาม
ต้ องการ โดยใช้ มาตรฐาน CIE ตามที่กล่าวในโมเดลสี XYZ ในหัวข้ อที่ผ่านมา
จากการจาลองค่าความเข้ มของแสง ช่วงแสงสีที่กระตุ้นเซลล์รูปกรวยของ
เรตินาได้ มากที่สดุ อยูใ่ นช่วงความยาวคลื่นประมาณ 630 นาโนเมตร (สีแดง)
ช่วงที่สองจะอยูใ่ นช่วงความยาวคลื่นประมาณ 530 นาโนเมตร (สีเขียว)
ช่วงที่สามอยูใ่ นช่วงความยาวคลื่นประมาณ 450 นาโนเมตร (สีน ้าเงิน)
จากการเปรี ยบเทียบความเข้ มแสงในแหล่งกาเนิดแสงที่เราได้ รับเป็ นสีจาก
แสงนัน้ ทฤษฎีของการมองเห็นเป็ นพื ้นฐานในการแสดงสีบนจอภาพโดยใช้
แสงสีหลัก 3 สีคือ แดง, เขียว และน ้าเงินซึง่ อ้ างอิงเป็ นโมเดลสี RGB นัน่ เอง
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
65
โมเดลสี RGB
เราสามารถแสดงโมเดลนี ้ด้ วยรูปลูกบาศก์หนึง่ หน่วยที่กาหนด R, G
และ B อยูท่ ี่แกนทัง้ 3 แกนดังรูป ก) หรื อแสดงเป็ นแผนภาพสีหลักและ
สีรองตามรูป ข)
สาหรับรูปลูกบาศก์หนึง่ หน่วย ที่จดุ กาเนิด (0, 0, 0) แสดงด้ วยสีดา
ที่เวอร์ เท็กซ์ทะแยงมุมตรงข้ าม (1, 1, 1) แสดงด้ วยสีขาว
เวอร์ เท็กซ์ของลูกบาศก์บนแกนจะแสดงเป็ นสีหลัก
ส่วนเวอร์ เท็กซ์ที่เหลือจะเป็ นสีตรงข้ ามของแต่ละสีหลัก
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
66
โมเดลสี RGB
โมเดลสี RGB ก) รูปลูกบาศก์หนึง่ หน่วย
ข) แผนภาพ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
67
โมเดลสี RGB
ตามโมเดลสี XYZ โมเดลสี RGB เป็ นโมเดลสีบวก (Additive Model)
แต่ละจุดสีในลูกบาศก์สามารถแทนได้ ด้วยผลรวมเวกเตอร์ น ้าหนักสี
ของสีหลัก โดยใช้ เวกเตอร์ หนึง่ หน่วย R, G และ B
9-6
เมื่อพารามิเตอร์ R, G และ B เป็ นค่าที่อยูใ่ นช่วง 0 ถึง 1.0
เช่น เวอร์ เท็กซ์ของสีม่วงแดง (magenta) เกิดจากการรวมตัวกันด้ วย
ค่าสูงสุดของสีแดงและสีน ้าเงินเกิดเป็ นค่า (1, 0, 1)
และสีขาว (1, 1, 1) เป็ นผลรวมค่าสูงสุดของสีแดง, สีเขียว และสีน ้าเงิน
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
68
โมเดลสี RGB
สีคล ้าของสีเทาสามารถแสดงตามเส้ นทะแยงมุมของลูกบาศก์จากจุด
กาเนิด (สีดา) ไปยังเวอร์ เท็กซ์สีขาว
จุดบนเส้ นทะแยงมุมนี ้มีการกระจายจากสีหลัก และสีเทาก็เป็ นครึ่งทาง
ระหว่างสีขาวและสีดาที่แสดงด้ วย (0.5, 0.5, 0.5)
ความกลมกลืนของสีตามระนาบด้ านหน้ าและด้ านบนของลูกบาศก์
RGB แสดงดังรูป
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
69
โมเดลสี RGB
มุมมอง 2 มุมมองของลูกบาศก์ RGB
ก) ตามเส้ นระดับสีเทาจากสีดาไปสีขาว ข) ตามเส้ นระดับสีเทาจากสีขาวไปสีดา
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
70
โมเดลสี RGB
โคออร์ ดิเนตภาวะสีสาหรับมาตรฐาน NTSC (National Television
System Committee) ของ RGB ฟอสเฟอร์ อยูใ่ นตาราง 9-3
ในตารางยังมีโคออร์ ดิเนตภาวะสี RGB ภายในโมเดลสีของ CIE และ
ค่าโดยประมาณที่ใช้ สาหรับฟอสเฟอร์ ในจอภาพสี
ส่วนรูปต่อไปแสดงขอบเขตสีโดยประมาณของมาตรฐาน NTSC ของสี
หลัก RGB
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
71
โมเดลสี RGB
ตาราง 9-3 โคออร์ ดิเนตภาวะสี RGB (x, y)
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
72
โมเดลสี RGB
ขอบเขตสี RGB สาหรับ
โคออร์ ดิเนตภาวะสี NTSC
ค่าความส่องสว่าง C อยูท่ ี่
ตาแหน่ง (0.310, 0.316) ด้ วย
ค่าความส่องสว่าง Y = 100.0
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
73
โมเดลสี YIQ
ถึงแม้ วา่ จอภาพ RGB ต้ องการสัญญาณแยกจากกันระหว่างสีแดง,
เขียว และน ้าเงินของรูปภาพ
แต่สาหรับจอเครื่ องรับโทรทัศน์จะใช้ สญ
ั ญาณรวมที่เข้ ารหัสสีแบบ
NTSC เพื่อสร้ างสัญญาณภาพรวมที่เรี ยกว่าโมเดล YIQ
ค่าพารามิเตอร์ Y เป็ นตัวเดียวกับค่า Y ในโมเดลสี XYZ
ข้ อมูลความส่องสว่าง จะถูกส่งโดยพารามิเตอร์ Y
ในขณะที่ข้อมูลภาวะสี (สีสนั และความบริสทุ ธิ์สี) ถูกรวมลงใน
พารามิเตอร์ I และ Q
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
74
โมเดลสี YIQ
ค่าพารามิเตอร์ Y เป็ นการรวมตัวกันของสีแดง, สีเขียว และสีน ้าเงิน
เพื่อให้ ได้ เส้ นโค้ งความส่องสว่างมาตรฐาน
เนื่องจาก Y ประกอบด้ วยข้ อมูลความส่องสว่าง ทาให้ จอเครื่ องรับ
โทรทัศน์ขาว-ดาใช้ เฉพาะสัญญาณ Y เท่านัน้
พารามิเตอร์ I ประกอบด้ วยข้ อมูลสีส้ม-ฟ้า เพื่อให้ สีคล ้า และ
พารามิเตอร์ Q จะนาข้ อมูลสีเขียว-ม่วงแดงไปใช้ งาน
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
75
โมเดลสี YIQ
สัญญาณรวมสี NTSC ถูกออกแบบเพื่อให้ ข้อมูลในรูปแบบที่จอภาพ
เครื่ องรับโทรทัศน์ขาว-ดาสามารถรับได้ ซงึ่ มีข้อมูลระดับสีเทาสาหรับ
รูปภาพภายในแบนด์วิธ 6 เมกะเฮิร์ต
ดังนันข้
้ อมูล YIQ จะเข้ ารหัสอยูภ่ ายในแบนด์วิธ 6 เมกะเฮิร์ต แต่คา่
ความส่องสว่างและค่าภาวะสีจถูกเข้ ารหัสเป็ นสัญญาณอะนาล็อกแยก
ออกมา
ด้ วยเหตุนี ้เองสัญญาณความส่องสว่างจะไม่สามารถเปลี่ยนให้ ใช้ กบั จอ
เครื่ องรับโทรทัศน์ขาว-ดาได้ และข้ อมูลสีแค่เพียงเพิ่มลงภายในแบนด์
วิธเดียวกัน
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
76
โมเดลสี YIQ
ส่วนข้ อมูลความส่องส่วาง (ค่า Y) จะถูกนาไปกับสัญญาณพาห์ที่
เหมือนการมอดูเลตแบบแอมปลิจดู ด้ วยแบนด์วิธ 4.2 เมกะเฮิร์ต
สาหรับข้ อมูลภาวะสี (ค่า I และ Q) จะถูกรวมไปในสัญญาณพาห์เส้ นที่
สองที่มีแบนด์วิธประมาณ 1.8 เมกะเฮิร์ต
ค่าพารามิเตอร์ ที่ชื่อ I และ Q หมายถึงวิธีการมอดูเลตที่ใช้ เพื่อเข้ ารหัส
ข้ อมูลสีบนสัญญาณพาห์
การเข้ ารหัสสาหรับการมอดูเลตแบบแอมปลิจดู จะส่งค่า I ที่แบนด์วิธ
ประมาณ 1.3 เมกะเฮิร์ต
ส่วนการเข้ ารหัสสาหรับการมอดูเลตแบบเฟสจะใช้ ที่ 0.5 เมกะเฮิร์ตเพื่อ
นาค่า Q ไปใช้ งาน
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
77
โมเดลสี YIQ
ค่าความส่องสว่างที่เข้ ารหัสที่ความแม่นยาสูงในสัญญาณ NTSC
(แบนด์วิธ4.2 เมกะเฮิร์ต) จะมากกว่าค่าภาวะสี (แบนด์วิธ 1.8 เม
กะเฮิร์ต) เนื่องจากเราสามารถตรวจจับความสว่างที่เปลี่ยนแปลงไป
เล็กน้ อยได้ ง่ายกว่าเมื่อเทียบกับสีที่เปลี่ยนไปเล็กน้ อย
อย่างไรก็ตามในการเข้ ารหัสภาวะสีที่ความแม่นยาต่าจะให้ ผลของ
คุณภาพสีสาหรับภาพ NTSC ที่แย่กว่า
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
78
โมเดลสี YIQ
เราสามารถคานวณค่าความส่องสว่างในจอแบบ RGB ด้ วยสมการ 9-7
มีวิธีหนึง่ สาหรับการสร้ างค่าภาวะสีก็คือการลบค่าความส่องสว่างออก
จากสีแดงและสีน ้าเงิน ดังนันจะได้
้
สมการ 9-8
9-7
9-8
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
79
การแปลงระหว่ างสี RGB กับ YIQ
สี RGB ถูกแปลงเป็ นชุดของค่าสี YIQ ด้ วยตัวเข้ ารหัส NTSC โดยการ
คานวณตามสมการ 9-8 และมอดูเลตกับสัญญาณพาห์
การแปลงจากสี RGB เป็ น YIQ ทาได้ โดยใช้ เมทริกซ์การแปลงดัง
สมการ 9-9
9-9
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
80
การแปลงระหว่ างสี RGB กับ YIQ
ในทางกลับกันสัญญาณภาพ NTSC ถูกแปลงเป็ นค่าสี RGB ด้ วยตัว
ถอดรหัส NTSC ซึง่ ขันแรกจะต้
้
องแยกสัญญาณภาพออกเป็ น
คอมโพเนนต์ YIQ ก่อน
หลังจากนันจึ
้ งทาการแปลงค่า YIQ เป็ นค่า RGB การแปลงสีจาก YIQ
เป็ น RGB ทาได้ โดยการอินเวิร์สการแปลง 9-9 ดังนัน้
9-10
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
81
ระบบ YUV และ YCrCb
เนื่องจากแบนด์วิธช่วงต่าถูกกาหนดให้ กบั ข้ อมูลภาวะสีในสัญญาณ
ภาพรวมแบบอะนาล็อก NTSC ทาให้ คณ
ุ ภาพสีของภาพ NTSC ลดต่าลง
ทาให้ มีการพัฒนาการเข้ ารหัสเพื่อปรับปรุงคุณภาพสีของการส่งสัญญาณ
ภาพ
การเข้ ารหัสแบบหนึง่ ก็คือชุดของพารามิเตอร์ สี YUV ซึง่ มีข้อมูลรวมสาหรับ
การส่งภาพด้ วยระบบ เช่นการส่งสัญญาณ PAL (Phase Alternation Line)
ที่ใช้ มากในยุโรป, แอฟริ กาออสเตรเลีย และยูเรเซีย
การกระจาย YIQ รูปแบบอื่นคือการเข้ ารหัสดิจิตอลที่เรี ยกว่า YCrCb
สีนี ้ถูกนามาใช้ สาหรับการส่งภาพดิจิตอล และรูปแบบกราฟิ กที่หลากหลาย
เช่น ระบบ JPEG เป็ นต้ น
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
82
โมเดลสี CMY และ CMYK
จอภาพคอมพิวเตอร์ แสดงแพทเทิร์นสีโดยการรวมแสงที่เปล่งจาก
ฟอสเฟอร์ ที่เคลือบจอภาพอยู่
ขบวนการนี ้เป็ นกระบวนการแบบบวก (Additive process)
อย่างไรก็ตามสาหรับอุปกรณ์ที่เป็ นฮาร์ ดก็อปปี ้ เช่น เครื่ องพิมพ์ หรื อ
พล็อตเตอร์ จะสร้ างสีโดยการเคลือบกระดาษด้ วยสี เราเห็นแพทเทิร์น
ของสีบนกระดาษโดยการสะท้ อนของแสง
กระบวนการในลักษณะนี ้เป็ นกระบวนการแบบลบ (Subtractive
process)
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
83
พารามิเตอร์ CMY
โมเดลสีลบสามารถสร้ างด้ วยสามสีหลักคือ สีฟ้า (Cyan), สีม่วงแดง (Magenta)
และสีเหลือง (Yellow)
จากหัวข้ อที่ผ่านมา สีฟ้าเกิดจากการผสมระหว่างสีเขียวกับสีน ้าเงิน
ในขณะที่สีมว่ งแดงเกิดจากการผสมระหว่างสีแดงกับสีน ้าเงิน
สีเหลืองเกิดจากการผสมระหว่างสีแดงกับสีเขียว
ดังนันส
้ าหรับสีฟ้าขณะที่แสงสะท้ อนจากสีฟ้า แสงที่สะท้ อนออกมานันจะ
้
ประกอบเพียงสีเขียวกับสีน ้าเงินเท่านัน้ ส่วนสีแดงจะถูกดูดซับ (absorbed ) ไว้
เช่นเดียวกับสีม่วงแดงที่แสงสีเขียวจะถูกดูดซับไว้
สีเหลืองที่แสงสีน ้าเงินถูกดูดซับเอาไว้
การแสดงโมเดลสี CMY แสดงได้ ด้วยรูปลูกบาศก์ ดังรูป ก) และแผนภาพโมเดลสี
CMY แสดงดังรูป ข)
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
84
พารามิเตอร์ CMY
โมเดลสี CMY ก) รูปลูกบาศก์หนึง่ หน่วย
ข) แผนภาพ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
85
พารามิเตอร์ CMY
ในโมเดลสี CMY ที่ตาแหน่ง (1, 1, 1) แสดงด้ วยสีดา เนื่องจากทุก
คอมโพเนนต์ของแสงตกกระทบถูกดูดซับไว้
ในขณะที่จดุ กาเนิดแสดงเป็ นแสงสีขาว
ในขณะที่สีหลักแต่ละสีในปริมาณที่เท่ากันเกิดระดับสีเทาตามแกน
ทะแยงมุมของรูปลูกบาศก์
สาหรับการผสมของแสงสีฟ้าและแสงสีมว่ งแดงทาให้ เกิดแสงสีน ้าเงิน
เนื่องจากสีแดงและสีเขียวของแสงตกกระทบถูกดูดซับเอาไว้
เช่นเดียวกับส่วนผสมของแสงสีฟ้ากับแสงสีเหลืองทาให้ เกิดแสงสีเขียว
ส่วนผสมของแสงสีมว่ งแดงและแสงสีเหลืองทาให้ เกิดแสงสีแดง นัน่ เอง
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
86
การแปลงระหว่ างสี CMY กับ RGB
เราสามารถแปลงจากสี RGB เป็ นสี CMY ด้ วยการแปลงเมทริกซ์ดงั นี ้
(ใช้ คณ
ุ สมบัติการดูซบั เช่นสีฟ้า สีที่ถกุ ดูดซับคือสีแดง ในขณะที่สีมว่ ง
แดง สีที่ถกู ดูดซับคือสีเขียว และสีเหลือง สีที่ถกู ดูดซับคือสีน ้าเงิน)
9-11
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
87
การแปลงระหว่ างสี CMY กับ RGB
โดยที่จดุ สีขาวในสี RGB ถูกแทนด้ วยคอลัมน์เวกเตอร์ หนึง่ หน่วย และ
เราแปลงจากสี CMY เป็ นสี RGB ด้ วยการแปลงเมทริกซ์
9-12
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
88
การแปลงระหว่ างสี CMY กับ RGB
ในการแปลงนี ้ คอลัมน์เวกเตอร์ หนึง่ หน่วยแสดงจุดสีดาในสี CMY
เพื่อความง่ายในการแปลงจากสี RGB เป็ นสี CMY ในขันแรกเรา
้
กาหนดค่า K = max (R, G, B)
หลังจากนันค่
้ า K ถูกลบออกจากแต่ละค่าของ C, M และ Y ในสมการ
9-11 เช่นเดียวกัน
สาหรับการแปลงจากสี CMYK เป็ นสี RGB ในขันแรกเราก
้
าหนดค่า
K = min (R, G, B)
หลังจากนันค่
้ า K ถูกลบออกจากแต่ละค่าของ R, G และ B ในสมการ
9-12
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
89
โมเดลสี HSV
โมเดลสี HSV ถูกสร้ างขึ ้นมาเพื่อเป็ นทางเลือกในการกาหนดสีใน
คอมพิวเตอร์ กราฟิ ก
โดยในโมเดลสีนี ้จะให้ ความหมายได้ ดีกว่าเมื่อพูดในเชิงศิลปะ เช่นเมื่อ
เราพูดถึงสีเหลืองในทางศิลปะมักจะมีความหมายที่แตกต่างกัน เช่น
เมื่อเราพิจารณา สีเหลืองอ่อน, สีเหลืองแก่ หรื อสีน ้าตาล ว่าจะมีความ
แตกต่างกันอย่างไร จะพบว่าทุกสีเป็ นสีเหลืองนัน่ เอง แต่มีระดับความ
เข้ ม หรื อความอิ่มตัวที่แตกต่างกันออกไป
ดังนันการก
้
าหนดสี HSV จึงทาให้ มีความรู้สกึ เข้ าใจได้ มากกว่า
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
90
พารามิเตอร์ HSV
พารามิเตอร์ ในโมเดลสีนี ้คือ H (Hue) เป็ นสีสนั ที่แตกต่างกันไปตาม
ความถี่ของแสง เช่น แดง, เขียว, นาเงิน เป็ นต้ น
ส่วน S (Saturation) เป็ นความอิ่มตัวของสีตามสีสนั เช่น สีแดง และสี
ชมพูตา่ งก็เป็ นสีแดง เพียงค่าความอิ่มตัวของสีแดงจะมีมากกว่าสีชมพู
V (Value) เป็ นค่าความสว่างของสี โดยที่คา่ V ต่าสุดหมายถึงสีดา
ในขณะที่คา่ V สูงสุดหมายถึงสีที่สว่างสุด
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
91
พารามิเตอร์ HSV
เราได้ สี 3 มิติตามความสัมพันธ์พารามิเตอร์ HSV กับทิศทางใน
ลูกบาศก์ RGB
ถ้ าเราลองจินตนาการการมองรูปลูกบาศก์ตามเส้ นทะแยงมุมจากเวอร์
เท็กซ์สีขาวไปยังจุดกาเนิด (สีดา) เราจะเห็นโครงร่างของลูกบาศก์ที่มี
รูปทรงหกเหลี่ยม แสดงดังรูป ข) ขอบเขตของรูปหกเหลี่ยมแสดงถึง
สีสนั ต่าง ๆ
ใช้ เป็ นส่วนบนของรูปกรวยหกเหลี่ยม (รูปต่อไป) ในโมเดล HSV ค่า
ความอิ่มตัว S วัดตามแกนนอน ส่วนค่า V วัดตามแกนตังไปยั
้ งจุด
ศูนย์กลางรูปกรวยหกเหลี่ยม
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
92
พารามิเตอร์ HSV
ก) ลูกบาศก์ RGB ข) โครงร่างของลูกบาศก์ที่มองตามเส้ นทะแยงมุมจากสีขาวไปหาสีดา
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
93
พารามิเตอร์ HSV
รูปกรวย 6 เหลี่ยม HSV
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
94
พารามิเตอร์ HSV
เราค่าสีสนั H แสดงเป็ นมุมกับแกนตัง้ ช่วงตังแต่
้ 0 ที่สีแดงไปจนถึง
360
เวอร์ เท็กซ์ของรูปกรวยหกเหลี่ยมแบ่งออกเป็ นช่วงละ 60 โดยสีเหลือง
อยูท่ ี่ 60, สีเขียวอยูท่ ี่ 120 และสีฟ้า (ตรงข้ ามสีแดง) อยูท่ ี่ H = 180
สีตรงข้ ามแบ่งออกจากกันด้ วยมุม 180
ค่าความอิ่มตัว S ถูกใช้ เพื่อกาหนดความบริสทุ ธิ์ของสี สีที่บริสทุ ธิ์จะมี
ค่า S = 1.0 และการลดค่า S ลงไปตามเส้ นระดับสีเทา (S = 0) ที่จดุ
ศูนย์กลางของรูปกรวยหกเหลี่ยม
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
95
พารามิเตอร์ HSV
ค่า V เริ่มจาก 0 ที่ปลายแหลมของกรวยหกเหลี่ยม จนมีคา่ 1.0 ที่
ระนาบด้ านบน
ที่ปลายแหลมของกรวยหกเหลี่ยมจะเป็ นจุดสีดา
ในขณะที่ระนาบบนสุดสีจะมีความเข้ มสูงสุด เมื่อ V = 1.0 และ S =
1.0 เราจะได้ สีบริสทุ ธิ์
ค่าพารามิเตอร์ สาหรับจุดสีขาวคือ V = 1.0 และ S = 0
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
96
พารามิเตอร์ HSV
สาหรับผู้ใช้ งานทัว่ ไปโมเดลนี ้ให้ ความสะดวกในการเลือกสี เริ่ มต้ นด้ วยการ
เลือกสีบริ สทุ ธิ์ซงึ่ กาหนดด้ วยมุม H และกาหนดค่า V = S = 1.0 เราสามารถ
อธิบายสีที่ต้องการในเทอมของการเพิ่มสีขาว หรื อสีดาเพื่อทาให้ บริ สทุ ธิ์
การเพิ่มสีดาให้ ลดค่า V และคงค่า S ไว้ ยกตัวอย่างเช่น ถ้ าเราต้ องการสีน ้า
เงินเข้ ม เราจะต้ องกาหนด V= 0.4 และค่า S= 1.0 และ H = 240
เช่นเดียวกับเมื่อมีการเพิ่มสีขาวให้ กบั สีที่เลือก ให้ ลดค่า S แล้ วคงค่า V ไว้
สีน ้าเงินอ่อนถูกกาหนดด้ วย S = 0.3 ในขณะที่ V= 1.0 และ H = 240
การเพิ่มทังสี
้ ดาและสีขาว ให้ เราลดทัง้ V และ S
โดยปกติแล้ ว ในโมเดลนี ้การแสดงตัวเลือกพารามิเตอร์ HSV จะเป็ นจานสีที่
ให้ ผ้ ใู ช้ เลือกโดยการเลื่อน หรื อใส่คา่ ในบ็อกซ์ตามต้ องการ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
97
การเลือกสีคลา้ , ระดับสีอ่อน และนา้ หนักสี
ขอบเขตสีสาหรับการเลือกสีคล ้า (shade), ระดับสีอ่อน (tint) และ
น ้าหนักสี (tone) แสดงได้ ในภาคตัดขวางของระนาบกรวยหกเหลี่ยม
HSV ดังรูปต่อไป
การเพิ่มสีดาทาได้ โดยลดค่า V ตามด้ านข้ างของกรวยหกเหลี่ยมไปยัง
จุดสีดา ดังนันสี
้ คล ้าต่าง ๆ แสดงด้ วยค่า S = 1.0 และ 0.0  V  1.0
ส่วนการเพิ่มสีขาวจะทาให้ เกิดระดับสีอ่อนตัดกับระนาบบนของกรวย
หกเหลี่ยม โดยที่คา่ พารามิเตอร์ V = 1.0 และ 0  S  1.0
สาหรับน ้าหนักสีทาได้ โดยการเพิ่มทังสี
้ ขาวและสีดาซึง่ จะสร้ างจุดสี
ภายในพื ้นที่สามเหลี่ยมภาคตัดขวางของกรวยหกเหลี่ยม
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
98
การเลือกสีคลา้ , ระดับสีอ่อน และนา้ หนักสี
ภาคตัดขวางของกรวยหกเหลี่ยม HSV
แสดงขอบเขตสีสาหรับการเลือกสีคล ้า,
ระดับสีอ่อน และน ้าหนักสี
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
99
การเลือกสีคลา้ , ระดับสีอ่อน และนา้ หนักสี
ดวงตาของมนุษย์สามารถแยกแยะสีได้ 128 สีสนั และระดับสีอ่อน130
สีที่ตา่ งกัน (ระดับความเข้ ม)
ในแต่ละสีสนั และระดับสีอ่อนนี ้จานวนสีคล ้า (ค่าที่ตง)
ั ้ สามารถ
ตรวจจับได้ ง่าย ขึ ้นอยูก่ บั การเลือกสีสนั
ในสีเหลืองสามารถแยกแยะสีคล ้าได้ 23 สี
ในสีน ้าเงินแยกแยะสีคล ้าได้ 16 สี
สิง่ นี ้หมายความว่าเราสามารถแยกแยะได้ ประมาณ 128 x 130 x 23 =
382,720 สีที่แตกต่างกัน
ต่อพิกเซลหรื อจะใช้ คา่ ตารางสีก็จะใช้ จานวนบิตที่น้อยกว่านี ้ในการ
จัดเก็บ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
100
การเลือกสีคลา้ , ระดับสีอ่อน และนา้ หนักสี
ในแอปพลิเคชันทัว่ ไปการกาหนดค่า128 สีสนั , 8 ระดับความอิ่มตัว
และ 16 ค่าก็เพียงพอแล้ ว
พารามิเตอร์ ในขอบเขตของโมเดล HSV นี ้จะให้ สีที่แตกต่างกัน 16,384
สี ค่าของสีเหล่านี ้สามารถเก็บอยูใ่ น 14 บิตต่อพิกเซลหรื อจะใช้ คา่
ตารางสีก็จะใช้ จานวนบิตที่น้อยกว่านี ้ในการจัดเก็บ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
101
การแปลงระหว่ างสี HSV กับ RGB
ในการกาหนดวิธีการแปลงระหว่างสี HSBV เป็ น RGB ในขันแรกเรา
้
ต้ องพิจารณาว่ากรวยหกเหลี่ยม HSV สร้ างจากลูกบาศก์ RGB ได้
อย่างไร
เส้ นทะแยงมุมของลูกบาศก์ RGB จากสีดา (จุดกาเนิด) ไปยังสีขาว
สัมพันธ์กบั แกน V ของกรวยหกเหลี่ยม
นอกจากนี ้แต่ละลูกบาศก์ยอ่ ยของลูกบาศก์ RGB สัมพันธ์กบั พื ้นที่
ภาคตัดขวางหกเหลี่ยมของกรวยหกเหลี่ยม
ที่ภาคตัดขวางใด ๆ ทุกด้ านของรูปหกเหลี่ยมและทุกเส้ นรัศมีจากแกน
V ไปยังเวอร์ เท็กซ์ที่มีคา่ V
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
102
การแปลงระหว่ างสี HSV กับ RGB
ดังนันในทุ
้ กชุดของค่า RGB ค่า V จะมีคา่ เท่ากับค่าสูงสุดของ
คอมโพเนนต์ RGB โดยจุด HSV ที่สมั พันธ์กบั ชุดของค่า RGB นี ้จะวาง
บนภาคตัดขวางหกเหลี่ยมที่คา่ V
หลังจากนันค่
้ า S ถูกกาหนดให้ เป็ นระยะทางที่สมั พันธ์ของจุดนี ้ไปยัง
แกน V ค่าพารามิเตอร์ H ถูกกาหนดโดยการคานวณตาแหน่งที่สมั พันธ์
ของจุดภายในแต่ละส่วนของหกเหลี่ยม
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
103
โมเดลสี HLS
โมเดลสี HSL เป็ นโมเดลสีที่ใกล้ เคียงกับโมเดลสี HSV มากที่สดุ
โมเดลนี ้เป็ นของบริษัท Tektonix
ในโมเดลสี HLS แสดงได้ ด้วยกรวย 2 กรวยดังรูปต่อไป ค่าพารามิเตอร์
ในโมเดลสีนี ้คือ H (Hue) เป็ นค่าสีสนั
ค่า L (Lightness) เป็ นค่าความสว่าง เหมือนกับค่า V ใน HSV
ค่า S (Saturation) เป็ นค่าความอิ่มตัวของสี
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
104
กรวยคูข่ อง HLS
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
105
โมเดลสี HLS
ค่า H มีความหมายเช่นเดียวกับค่า H ในโมเดล HSV โดยจะกาหนดมุม
กับแกนตังที
้ ่กาหนดสีสนั
ในโมเดลนี ้เมื่อ H = 0 สัมพันธ์กบั สีน ้าเงินสีที่เหลือถูกกาหนดรอบเส้ น
รอบรูปกรวยเช่นเดียวกับในโมเดล HSV
สีมว่ งแดง อยูท่ ี่ 60, สีแดงอยูท่ ี่ 120 และสีฟ้าอยูท่ ี่ H = 180 และสี
ตรงข้ ามแบ่งแยกจากกัน 180 บนกรวยคู่
แกนตังของโมเดลนี
้
้เรี ยกว่าค่าความสว่าง L โดยที่ L = 0 เป็ นสีดา และ
สีขาวอยูท่ ี่ L = 1.0
ค่าระดับสีเทาอยูต่ ามแกน L และสีบริสทุ ธิ์อยูท่ ี่ระนาบ L = 0.5
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
106
โมเดลสี HLS
ค่าพารามิเตอร์ ความอิ่มตัวของสี S กาหนดความบริสทุ ธิ์ของสี
พารามิเตอร์ นี ้อยูใ่ นช่วง 0 ถึง 1.0 โดยสีบริสทุ ธิ์อยูท่ ี่ S = 1.0 และ L =
0.5
เมื่อค่า S ลดลงเป็ นการเพิ่มสีขาวลงไป ส่วนค่าระดับสีเทาอยู่ที่ S = 0
การกาหนดสี เริ่มโดยเลือกมุม H หลังจากนันเลื
้ อกสีคล ้า, ระดับสีอ่อน
และน ้าหนักสีโดยปรับค่าพารามิเตอร์ L และ S
เราได้ ความสว่างเพิ่มขึ ้นเมื่อเพิ่มค่า L
เราได้ สีเข้ มขึ ้นเมื่อลดค่า L
สาหรับค่า S เมื่อลดลงจุดสีจะเข้ าหาเส้ นระดับสีเทา
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
107
การใช้ สีใน OpenGL
ใน OpenGL ได้ เตรี ยมฟั งก์ชนั เพื่อทางานกับสีไว้ ให้ เลือกใช้ งานแล้ ว ใน
ฟั งก์ชนั จะกาหนดพารามิเตอร์ สาหรับการกาหนดสีไว้ 4 ตัวคือ
สีแดง (R)
สีเขียว (G)
สีน ้าเงิน (B)
ค่าแอลฟ่ า (A) ซึง่ ใช้ สาหรับการกาหนดความโปร่งใส หรื อทาให้
สีกลืนกัน
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
108
ฟั งก์ ชันในการกาหนดค่ าสี
ฟั งก์ชนั ในการกาหนดสีให้ กบั ออปเจ็กต์ใน OpenGL คือ
glColor<x><t>(R, G, B, A);
ค่าพารามิเตอร์ <x> เป็ นจานวนอาร์ กิวเมนต์ในฟั งก์ชนั อาจจะเป็ น 3
ตัวสาหรับค่าสีแดง, สีเขียว และสีน ้าเงิน หรื ออาจจะเป็ น 4 ถ้ าใช้
สาหรับค่าแอลฟ่ า โดยที่คา่ แอลฟ่ าเป็ นการกาหนดความโปร่งแสงของสี
ค่าพารามิเตอร์ <t> เป็ นประเภทข้ อมูลของอาร์ กิวเมนต์ซงึ่ อาจจะเป็ น
b, d, f, i, s, ub, ul หรื อ us สาหรับ byte, double, float, integer,
short, unsign byte, unsign integer และ unsign short ตามลาดับ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
109
ฟั งก์ ชันในการกาหนดค่ าสี
โปรแกรม OpenGL ส่วนมากจะใช้ glColor3f เพื่อกาหนดความเข้ ม
ของของแต่ละสีเป็ น 0.0 เมื่อไม่มี หรื อ 1.0 เมื่อมีความเข้ มสูงสุด ดังนัน้
ค่าของสีที่ใช้ จะกาหนดได้ เป็ น
glColor3f (0.0, 0.0, 0.0, 0.0) ถึง glColor3f (1.0, 1.0, 1.0, 0.0)
เพื่อความง่าย คุณอาจจะกาหนดประเภทข้ อมูลเป็ น ub
glColor3ub (0, 0, 0) ถึง glColor3ub (255, 255, 255)
ซึ่ง glColor3ub (0, 255, 128) = RGB (0, 255, 128) นั่นเอง
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
110
ฟั งก์ ชันในการกาหนดค่ าสี
ในการกาหนดสีให้ กบั เวอร์ เท็กซ์ของรูปต่าง ๆ ถ้ ากาหนดเป็ นสีใดสีหนึง่
ก็จะแสดงสีนนทั
ั ้ งรู้ ป
เช่น ถ้ าต้ องการวาดรูปสามเหลี่ยมสีแดง เมื่อกาหนดด้ วย glColor3f
(1.0, 0.0, 0.0, 0.0) ทังสามเหลี
้
่ยมนันจะเป็
้
นสีแดง
แต่ถ้าในแต่ละเวอร์ เท็กซ์กาหนดสีตา่ งกันสีของรูปนันจะเป็
้
นการไล่โทน
สีจากเวอร์ เท็กซ์หนึง่ ไปอีกเวอร์ เท็กซ์หนึง่ เช่น ในรูปลูกบาศก์ดงั รูป
ต่อไป เป็ นการไล่โทนสีจากเวอร์ เท็กซ์หนึง่ ที่เป็ นสีขาวไปยังเวอร์ เท็กซ์
หนึง่ ที่เป็ นสีที่เป็ นสีเทาอ่อนไปสูส่ ีเทา และสีเทาแก่ เป็ นต้ น
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
111
ฟั งก์ ชันในการกาหนดค่ าสี
การไล่โทนสีจากเวอร์ เท็กซ์หนึง่ ที่เป็ นสีขาวไปยังเวอร์ เท็กซ์หนึ่งที่เป็ นสีดา
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
112
ฟั งก์ ชันในการกาหนดค่ าสี
ในการไล่โทนสีจากเวอร์ เท็กซ์หนึง่ ไปอีกเวอร์ เท็กซ์หนึง่ จาเป็ นต้ องใช้
ฟั งก์ชนั เพื่อให้ เกิดการไล่โทนสีที่ราบเรี ยบขึ ้น ฟั งก์ชนั ดังกล่าวคือ
glShadeModel (GL_SMOOTH);
ยังมีอีกหนึง่ พารามิเตอร์ ในฟั งก์ชนั นี ้ที่ไม่มีการไล่โทนสีโดยจะใช้ สีจาก
การกาหนดเวอร์ เท็กซ์สดุ ท้ าย พารามิเตอร์ ดงั กล่าวคือ GL_FLAT
ดังนันฟั
้ งก์ชนั จะเป็ น
glShadeModel (GL_FLAT);
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
113
ฟั งก์ ชันในการกาหนดค่ าสี
เพื่อการแสดงรูปที่ใช้ การไล่โทนสีจาเป็ นต้ องทางานร่วมกับบัพเฟอร์ สี
ดังนันจ
้ าเป็ นต้ องใช้ ฟังก์ชนั เพิ่มเติมเพื่อช่วยการแสดงผลให้ กลมกลืน
ดังนี ้
glEnable(GL_DEPTH_TEST);
glEnable(GL_DITHER);
โดยฟั งก์ชนั glEnable(GL_DEPTH_TEST) จะทาการเปรี ยบเทียบ
และอัปเดทบัพเฟอร์ ที่เก็บความเข้ มของสี ส่วนฟั งก์ชนั
glEnable(GL_DITHER) จะผสมสีก่อนที่จะเขียนลงบัพเฟอร์ สี
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
114
ฟั งก์ ชันในการกาหนดค่ าสี
ex09_01.cpp แสดงการไล่โทนสีของรูปลูกบาศก์ โดยกาหนดสี
ให้ กบั เวอร์ เท็กซ์ตา่ ง ๆ
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
115
ฟั งก์ ชันในการกาหนดค่ าสี
เราสามารถสร้ างโมเดลสีเป็ นรูปลูกบาศก์สีได้ รูปต่อไปแสดงแกนของสี
โดยมีสีดาเป็ นจุดกาเนิด มีแกนสีแดง, สีเขียว และสีน ้าเงิน
ค่าโคออร์ ดิเนตสีแดง, สีเขียว และสีน ้าเงินเหมือนแกน x, y และ z ที่จดุ
กาเนิด (0, 0, 0) เป็ นจุดที่ความเข้ มของสีทงสามมี
ั้
คา่ เป็ น 0 ทาให้ เกิด
เป็ นสีดา
ค่าสูงสุดตามการกาหนดด้ วยฟั งก์ชนั glColor3f() จะเป็ น 1.0 เมื่อเป็ น
รูปลูกบาศก์สีทาให้ เกิดเป็ นสี
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
116
ฟั งก์ ชันในการกาหนดค่ าสี
แกน 3 มิติของสี RGB
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
117
ฟั งก์ ชันในการกาหนดค่ าสี
ที่จดุ (0, 0, 0)
ที่จดุ (1, 1, 1)
ที่จดุ (1, 0, 0)
ที่จดุ (0, 1, 0)
ที่จดุ (0, 0, 1)
ที่จดุ (1, 1, 0)
ที่จดุ (1, 0, 1)
ที่จดุ (0, 1, 1)
=
=
=
=
=
=
=
=
RGB (0, 0, 0)
RGB (1, 1, 1)
RGB (1, 0, 0)
RGB (0, 1, 0)
RGB (0, 0, 1)
RGB (1, 1, 0)
RGB (1, 0, 1)
RGB (0, 1, 1)
=
=
=
=
=
=
=
=
สีดา (Black)
สีขาว (White)
สีแดง (Red)
สีเขียว (Green)
สีน ้าเงิน (Blue)
สีเหลือง (Yellow)
สีมว่ งแดง (Magenta)
สีฟ้า (Cyan)
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
118
ฟั งก์ ชันในการกาหนดค่ าสี
ในการวางซ้ อนทับออปเจ็กต์ตา่ ง ๆ ปกติจะเห็นฉพาะออปเจ็กต์ที่วาง
อยูบ่ นออปเจ็กต์อื่นเท่านัน้
ในฟั งก์ชนั glColor () ที่ผา่ นมาใช้ พารามิเตอร์ เพียง 3 ตัวคือ R (แดง),
G (สีเขียว) และ B (สีน ้าเงิน) เท่านัน้
จริง ๆ แล้ วพารามิเตอร์ ตวั สุดท้ ายคือ A หรื อแอลฟ่ าจะเป็ นการกาหนด
ความโปร่งใส่ ซึง่ ถ้ ากาหนดค่าเป็ น 1.0 จะเป็ นการกาหนดให้ ออปเจ็กต์
นันมี
้ ความทึบแสง
ดังนันเมื
้ ่อวางออปเจ็กต์นนซ้
ั ้ อนทับกับออปเจ็กต์อื่นจะทาให้ ไม่สามารถ
มองเห็นออปเจ็กต์ที่วางอยูด่ ้ านล่างได้ เลย
ถ้ ากาหนดค่าให้ น้อยลงก็ยิ่งมีความโปร่งใสเพิ่มมากขึ ้น
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
119
ฟั งก์ ชันในการกาหนดค่ าสี
ในโหมด RGB นัน้ พิกเซลสามารถวาดด้ วยฟั งก์ชนั ที่ให้ คา่ สี RGBA ที่
เข้ ามา (source) กลืนกับค่าสี RGBA ที่อยูใ่ นเฟรมบัพเฟอร์
(destination) รูปแบบคาสัง่ การใช้ คาสัง่ เพื่อให้ สีกลืนกันคือ
glEnable (GL_BLEND);
glBlendFunc(GLenum sfactor, GLenum dfactor);
ในโหมดปกติคา่ การกลืนของสีจะยังใช้ ไม่ได้ (disable) คุณจะต้ องเปิ ด
การใช้ งานด้ วยคาสัง่ glEnable หรื อปิ ดการใช้ งานด้ วย glDisable
ด้ วยอาร์ กิวเมนต์ GL_BLEND
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
120
ฟั งก์ ชันในการกาหนดค่ าสี
สาหรับฟั งก์ชนั glBlendFunc () จะกาหนดให้ สีกลืนกัน ซึง่ จะมี
พารามิเตอร์ sfactor ที่กาหนด 9 วิธีในการปรับค่าสีที่เข้ ามา (GL_ZERO,
GL_ONE, GL_DST_COLOR, GL_ONE_MINUS_DST_COLOR,
GL_SRC_ALPHA, GL_ONE_MINUS_SRC_COLOR,
GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA, และ
GL_SRC_ALPHA_SATURATE)
ส่วน dfactor กาหนด 8 วิธีในการปรับค่าสีที่สง่ ออกไป (GL_ZERO,
GL_ONE, GL_SCR_COLOR, GL_ONE_MINUS_SRC_COLOR,
GL_SRC_ALPHA, GL_ONE_MINUS_SRC_COLOR,
GL_DST_ALPHA, and GL_ONE_MINUS_DST_ALPHA)
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
121
ฟั งก์ ชันในการกาหนดค่ าสี
ความโปร่งใสที่ใช้ ให้ เห็นเด่นชัดที่สดุ คือพารามิเตอร์ (GL_SRC_ALPHA,
GL_ONE_MINUS_SRC_ALPHA) ที่เรี ยงจากไกลสุดเข้ ามาใกล้ สดุ
นอกจากนี ้พารามิเตอร์ นี ้ยังมีประโยชน์ในการเรนเดอร์ จดุ และเส้ นเพื่อลบ
รอยหยัก (antialias)
การลบรอยหยักของรูปหลายเหลีย่ มจะใช้ พารามิเตอร์
(GL_SRC_ALPHA_SATURATE, GL_ONE) ที่เรี ยงจากไกลสุดมาใกล้
สุด (ใช้ งานร่วมกับฟั งก์ชนั GL_POLYGON_SMOOTH)
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
122
ฟั งก์ ชันในการกาหนดค่ าสี
ex09_02.cpp การแสดงรูปสามเหลี่ยม 2 รูป (สีแดงและสีเขียว) ที่วาง
ซ้ อนทับกันแล้ วใช้ ฟังก์ชนั เพื่อให้ สีกลืนกัน
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
123
สรุ ปฟั งก์ ชันในการใช้ สีของ OpenGL
คอมพิวเตอร์ กราฟิ กส์ ใช้ OpenGL (Computer Graphics using OpenGL)
124