การลดรอยหยัก 101

เกริ่นนำ

การลบรอยหยักคือจุดเด่นของกราฟิกบนเว็บ นั่นเป็นเหตุผลที่เรามีข้อความที่ชัดเจนและรูปร่างเวกเตอร์ที่ลื่นไหลบนหน้าจอของเรา จริงๆ แล้วการลบรอยหยักที่ใช้ในเบราว์เซอร์ในปัจจุบันมี 2 วิธี ซึ่งเห็นได้ชัดที่สุดเมื่อพูดถึงการแสดงผลข้อความ เมื่ออัลกอริทึมที่ใช้สำหรับลดความรัดกุมของสวิตช์ อัลกอริทึมอาจส่งผลให้เกิดผลลัพธ์ที่เป็นภาพที่ไม่คาดคิด ในบทความนี้ เราจะมาดูวิธีการลบรอยหยักและการดูการวาดพิกเซล

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

จำนวนพิกเซลของหน้าจอในระยะใกล้ แต่ละพิกเซลจะมีส่วนประกอบสีแดง เขียว และน้ำเงิน
ภาพที่ 1 - พิกเซลของหน้าจอในระยะใกล้ แต่ละพิกเซลจะมีองค์ประกอบสีแดง เขียว และน้ำเงิน

การลดรอยหยัก

จะเกิดอะไรขึ้นเมื่อเราวาดรูปร่างเวกเตอร์และผ่าน "ส่วน" ของพิกเซล สมมติว่ารูปร่างที่เราวาดเป็นสีดำและพื้นหลังเป็นสีขาว เราควรจะลงสีพิกเซลนั้นไหม ถ้าเราใส่สี สีควรเป็นสีอะไร ดำ เทา หรืออื่นๆ

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

รูปที่ 2 - ขอบแบบลดรอยหยักเทียบกับขอบแบบแข็ง
ภาพที่ 2 - ขอบแบบลบรอยหยักหรือขอบแบบแข็ง

ในรูปที่ 2 คุณจะเห็นว่ารูปสามเหลี่ยมเดียวกันวาดอยู่ แต่ทางด้านซ้ายมีการเปิดใช้การลบรอยหยักและทางด้านขวาก็ถูกปิดใช้ ดังที่คุณเห็น เมื่อเปิดใช้งานการลบรอยหยัก พิกเซลจะเป็นเฉดสีเทาเมื่อรูปสามเหลี่ยมผ่านส่วนของพิกเซลเท่านั้น อย่างไรก็ตาม เมื่อปิดใช้ พิกเซลจะเติมเป็นสีดำทึบหรือสีขาวทึบ และรูปร่างดูขรุขระ

การแสดงผลข้อความ

เมื่อใดก็ตามที่เบราว์เซอร์แสดงผลข้อความ ซึ่งเป็นรูปร่างเวกเตอร์ เราจะเผชิญกับปัญหาเดียวกัน นั่นคือ อักขระของข้อความจะแสดงเต็มพิกเซลบางส่วนเท่านั้น เราจึงต้องการกลยุทธ์ในการเติมเต็มพิกเซลเหล่านั้น โดยหลักการแล้ว เราต้องการให้ข้อความมีการลบรอยหยักเพราะจะทำให้อ่านง่ายขึ้นและอ่านง่ายขึ้น

อย่างไรก็ตาม กลับพบว่าวิธีการใช้โทนสีเทากับการลบรอยหยักเป็นเพียงวิธีเดียวในการจัดการปัญหาดังกล่าว แนวทางที่มักจะดำเนินการคือให้เลือกวิธีการเปิดใช้งานคอมโพเนนต์ RGB ของพิกเซลให้ละเอียดยิ่งขึ้น กระบวนการนี้เรียกว่าการลบรอยหยักพิกเซลย่อย และในช่วงหลายปีที่ผ่านมา ทีม ClearType ของ Microsoft ได้ทุ่มเทเวลาและความพยายามอย่างมากเพื่อดำเนินการ แต่ปัจจุบันมีการใช้กันอย่างแพร่หลายมากขึ้น และเบราว์เซอร์หลักๆ ทั้งหมดก็จะใช้ในระดับที่สูงกว่าหรือน้อยลง

ก่อนอื่น เนื่องจากเราทราบว่าแต่ละพิกเซลประกอบด้วยองค์ประกอบสีแดง เขียว และน้ำเงินที่แยกจากกัน เราจึงตรวจพบว่าแต่ละพิกเซลควร "เปิดใช้งาน" คอมโพเนนต์ดังกล่าวสำหรับพิกเซลที่เป็นปัญหามากน้อยเพียงใด ดังนั้น หากพิกเซลหนึ่ง "ครอบคลุมครึ่งหนึ่ง" จากด้านซ้าย เราอาจเปิดองค์ประกอบสีแดงทั้งหมด ส่วนสีเขียวไปครึ่งทาง และปิดสีน้ำเงินไว้ กระบวนการนี้มักอธิบายว่า "ความละเอียดตามแนวนอนของหน้าจอเป็น 3 เท่า" และอาศัยข้อเท็จจริงที่ว่าพิกเซลแต่ละพิกเซลเป็นองค์ประกอบ 3 อย่างที่แยกกันข้างกัน แทนที่จะเป็นหน่วยเดียว

รูปที่ 3 - การลบรอยหยักโดยใช้โทนสีเทาเทียบกับพิกเซลย่อย
รูปที่ 3 - การลบรอยหยักโดยใช้โทนสีเทาเทียบกับพิกเซลย่อย

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

แต่อย่างไรก็ตาม การมองเห็นของมนุษย์ไม่ได้มีน้ำหนักแสงสีแดง เขียว และน้ำเงินเท่าๆ กัน เราให้ความสำคัญกับสีเขียวมากกว่าสีแดงหรือสีน้ำเงินมาก ซึ่งหมายความว่าแม้การลบรอยหยักระดับสีเทาจะมีข้อดีอย่างชัดเจน ดังที่คุณ Darel Rex Finley กล่าว การเปิดใช้แต่ละองค์ประกอบแยกกันไม่ได้ทำให้เห็นความชัดเจนมากขึ้น 3 เท่า แต่การลบรอยหยักพิกเซลย่อยนั้นก็มีประโยชน์ และหมายความว่าเราจะเห็นข้อความอย่างชัดเจนมากกว่าการใช้การลบรอยหยักโทนสีเทา

รูปที่ 4 - ข้อความลบรอยหยักพิกเซลย่อย เปิดใช้คอมโพเนนต์พิกเซลแต่ละรายการเพื่อสร้างเอฟเฟกต์โดยรวม
ภาพที่ 4 - ข้อความลบรอยหยักของพิกเซลย่อย เปิดใช้คอมโพเนนต์แต่ละรายการของพิกเซลเพื่อสร้างเอฟเฟกต์โดยรวม

ตัดไปที่การไล่ล่า

ผลกระทบต่อเราในฐานะนักพัฒนาซอฟต์แวร์ ในมุมมองของ Chrome อย่างน้อยก็มีการลบรอยหยักทั้งโทนสีเทาและพิกเซลย่อยที่ใช้เพื่อแสดงข้อความ และขึ้นอยู่กับเกณฑ์ไม่กี่ข้อ อย่างไรก็ตาม ในการเริ่มต้นนั้น เราต้องทำความเข้าใจเกี่ยวกับเลเยอร์สักเล็กน้อย เพราะนั่นเป็นเกณฑ์หลักที่ใช้ ถ้าคุณยังไม่พบเลเยอร์และวิธีใช้เลเยอร์ภายในโดย Chrome Tom Wiltzius ได้เขียนคำแนะนำที่ยอดเยี่ยมเกี่ยวกับหัวข้อนี้ซึ่งคุณควรอ่านก่อน

หากคุณคุ้นเคยกับเลเยอร์ดีแล้ว หรือคุณเพิ่งได้อ่านเกี่ยวกับเลเยอร์ มาลองอ่านต่อกัน หากเปิดใช้การประกอบฮาร์ดแวร์ไว้บนหน้าเว็บและคุณมีเนื้อหาข้อความในเลเยอร์ที่ไม่ใช่เลเยอร์ราก ระบบจะแสดงผลโดยใช้การลบรอยหยักโทนสีเทาโดยค่าเริ่มต้น นักพัฒนาซอฟต์แวร์มักสังเกตเห็นว่าหากพวกเขาแฮ็กองค์ประกอบเพื่อใส่ลงไปในเลเยอร์ของตัวเอง (ไม่ใช่ราก) (เช่น การใช้ translateZ) จะเห็นว่าข้อความแสดงผลต่างกัน บ่อยครั้งที่นักพัฒนาซอฟต์แวร์ใช้ทริกเกอร์ "เลเยอร์ใหม่" ทันทีผ่าน JavaScript หรือ CSS ซึ่งทําให้การแสดงผลข้อความเปลี่ยนจากพิกเซลย่อยไปเป็นโทนสีเทา อาจทำให้เกิดความสับสนได้หากไม่ทราบว่าสิ่งใดที่ทริกเกอร์การเปลี่ยนแปลงการแสดงผล อย่างไรก็ตาม หากข้อความของคุณอยู่ในเลเยอร์ราก ข้อความควรจะแสดงผลด้วยการลบรอยหยักพิกเซลย่อย ซึ่งจะทำให้ข้อความอ่านได้ชัดเจนยิ่งขึ้น

แต่เช่นเดียวกับทุกอย่างบนเว็บ มันกำลังเปลี่ยนแปลง มีการเปิดใช้การลบรอยหยักพิกเซลย่อยใน Chrome สำหรับข้อความในเลเยอร์ที่ไม่ใช่ราก โดยเลเยอร์นี้เป็นไปตามเกณฑ์ 3 ข้อ โปรดทราบว่าเราได้นำเกณฑ์เหล่านี้มาใช้ในวันนี้ แต่มีแนวโน้มว่าเกณฑ์จะมีการเปลี่ยนแปลงและคุณน่าจะได้รับเคสต่างๆ เพิ่มขึ้นในอนาคต ในปัจจุบัน เกณฑ์ดังกล่าวได้แก่

  1. เลเยอร์มีสีพื้นหลังทึบแสงเต็มที่ สิ่งที่ควรทราบเมื่อใช้ border-radius หรือค่า background-clip ที่ไม่ใช่ค่าเริ่มต้นจะส่งผลให้เลเยอร์ได้รับการพิจารณาว่าไม่ทึบแสงและการแสดงผลข้อความจะเปลี่ยนกลับไปเป็นการลบรอยหยักโทนสีเทา
  2. เลเยอร์ต้องมีการแปลงข้อมูลประจำตัวหรือการแปลปริพันธ์เท่านั้น โดยปริพันธ์หมายถึงค่าปัดเศษ ตัวอย่างเช่น translate(20.2px, 30px) จะส่งผลให้มีการลบรอยหยักโทนสีเทาเนื่องจากคอมโพเนนต์ x 20.2px เป็นแบบไม่ปริพันธ์ การแปลงข้อมูลประจำตัวหมายถึงว่าจะไม่มีการนำการหมุน การแปล หรือการปรับขนาดเพิ่มเติมมาใช้นอกเหนือจากค่าเริ่มต้น
  3. เลเยอร์มีความทึบแสง 1.0 การเปลี่ยนแปลงความทึบแสงจะเปลี่ยนการลบรอยหยักจากพิกเซลย่อยเป็นโทนสีเทา
รูปที่ 5 - ก่อนและหลัง: โทนสีเทาเทียบกับพิกเซลย่อย โปรดสังเกตขอบสีในข้อความทางด้านขวา
รูปที่ 5 - ก่อนและหลัง: โทนสีเทาเทียบกับพิกเซลย่อย สังเกตเส้นขอบสีบนข้อความทางด้านขวา

สิ่งสุดท้ายที่ควรทราบคือการใช้ภาพเคลื่อนไหว CSS อาจทำให้เกิดการสร้างเลเยอร์ใหม่ ในขณะที่การใช้ requestAnimationFrame จะไม่สร้าง สำหรับนักพัฒนาซอฟต์แวร์บางราย ความแตกต่างของการแสดงผลข้อความที่แสดงเป็นนัยซึ่งทำให้ใช้ภาพเคลื่อนไหว CSS ไม่ได้ ดังนั้น หากคุณใช้ JavaScript เพื่อทำให้องค์ประกอบเคลื่อนไหวเนื่องจากการแสดงผลข้อความมีความแตกต่าง ให้ตรวจดูว่าการอัปเดตนี้แก้ปัญหาให้คุณได้ไหม

ตอนนี้ Chrome ครอบคลุมทุกอย่างแล้ว เช่นเดียวกับเบราว์เซอร์อื่นๆ Opera ซึ่งย้ายไปยัง Chromium ควรจะตรงกับลักษณะการทำงานของ Chrome อย่างมาก ดูเหมือนว่า Internet Explorer จะใช้การลบรอยหยักพิกเซลย่อยกับข้อความเกือบทั้งหมด (แน่นอนว่าคุณได้เปิดใช้งาน ClearType ไว้) แม้ว่าจะไม่ได้อยู่ในโหมด Metro ของ Windows 8 ก็ตาม Safari ซึ่งเนื่องจาก WebKit มีความใกล้เคียงกับ Blink จึงทำงานคล้ายกับ Chrome มาก แม้ว่าจะไม่มีการปรับปรุงใหม่เหล่านี้ ซึ่งจะทำให้ลบรอยหยักพิกเซลย่อยได้มากขึ้น Firefox มักจะทำงานในลักษณะเดียวกับ Internet Explorer ตราบเท่าที่ใช้การลบรอยหยักพิกเซลย่อยกับข้อความทั้งหมด แน่นอนว่านี่ไม่ใช่รายการโดยสมบูรณ์ และมักเป็นบางกรณีในเบราว์เซอร์ทั้งหมดที่มีการใช้การลบรอยหยักโทนสีเทาแทนพิกเซลย่อย แต่เป็นเรื่องดีที่จะทราบว่าการลบรอยหยักพิกเซลย่อยมีการใช้กันอย่างแพร่หลายในเบราว์เซอร์ชุดหลัก

บทสรุป

ตอนนี้คุณก็รู้แล้วว่าการลบรอยหยักทำงานอย่างไร และสาเหตุที่คุณอาจเห็นความแตกต่างของการแสดงผลข้อความในเว็บไซต์และแอปพลิเคชันของคุณในปัจจุบัน โดยเฉพาะบนอุปกรณ์ที่มี DPI ต่ำกว่า หากคุณสนใจที่จะติดตามการดำเนินการของ Chrome เกี่ยวกับการแสดงผลข้อความด้วย คุณควรติดดาวข้อบกพร่องต่อไปนี้

แหล่งข้อมูลและข้อมูลอ้างอิง