มีเหตุผลโลโก้ของฮิลลารีคลินตันมีรอยหยักหรือไม่


226

คำถามนี้ไม่ใช่ประเด็นทางการเมืองอย่างน้อย!

ป้อนคำอธิบายรูปภาพที่นี่

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

ป้อนคำอธิบายรูปภาพที่นี่


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

6
@NickT มันไม่ใช่ปัญหาการต่อสู้กับปัญหาการผสมความทึบและความครอบคลุมเข้าด้วยกัน แต่ 3D นั้นเป็นมากกว่าเกม ในแบบ 3 มิติเรามีหลายยุคสมัยที่ใช้การสุ่มหลายแบบเพื่อแก้ปัญหา aa การสุ่มหลายครั้ง (โดยปกติแม้ว่าจะไม่ได้ผลที่เด่นชัด) จะไม่คำนวณความครอบคลุมและทำให้ไม่เกิดความผิดพลาดในการคิดว่าการครอบคลุม 50% คือ 25% รางที่มองเห็นได้และอีก 50% ที่ครอบคลุม ขณะนี้อาจเป็นจริงคำตอบสามารถเป็น 50% มองเห็นได้หรือมองไม่เห็น ในกรณีนี้เพื่อหลีกเลี่ยงความสับสนอีก 50% จะถูกลบออกด้วยตนเองเราสามารถแก้ไข 3 กรณี แต่ไม่ทั้งหมด ไม่ควรจะต้องการ
joojaa

5
มันเป็นเรื่องน่าเศร้าที่ฉันจำได้อย่างชัดเจนว่ามันคือเพื่อหลีกเลี่ยงข้อผิดพลาดในการเรนเดอร์ของขอบที่ทับซ้อนกัน แต่ SVG ยังคงอายุ 14 ปีดังนั้นฉันหวังว่าจะได้รับการแก้ไขในบางวัน
Francisco Presencia

5
@ FranciscoPresencia มันไม่ใช่ปัญหากับ SVG มันเป็นปัญหากับวิธีที่เราเลือกที่จะใช้เรนเดอร์อย่างผิดพลาด ตัวแสดง SVG ที่แตกต่างกันมีความรุนแรงแตกต่างกันของปัญหานี้
joojaa

12
@ DA01 ไม่มีการแก้ไขที่ไร้เดียงสาเป็นเรื่องง่ายอย่างเหลือเชื่อรหัสน้อยกว่าอัลกอริทึมปัจจุบัน แทนที่จะทำการคำนวณตามความครอบคลุมเพียงแค่แสดงผลราวกับว่าคุณไม่ได้ใช้ antialias เลยในความละเอียดที่สูงขึ้นแล้วกรองภาพลงไปที่ความละเอียดจริง สิ่งนี้จะไม่มีการรั่วไหลจากล่างขึ้นบนเพราะมันไม่สามารถทำสิ่งผิดพลาดได้ การ์ดกราฟิกทำเช่นนี้ตลอดเวลาที่การตั้งค่า x4 x8 x16 aa ในการตั้งค่าการ์ด gfx
joojaa

คำตอบ:


233

เพื่อป้องกันสิ่งประดิษฐ์ที่เป็นไปได้

หากไม่มีรอยหยักคุณอาจเห็นขอบของรูปร่างด้านล่างซึ่งตรงกับขอบของรูปร่างซ้อนทับ (บนหน้าจออย่างไรก็ตามมันไม่ได้เป็นปัญหาจริง ๆ เมื่อพิมพ์)

คุณสามารถดูตัวอย่างและคำอธิบายของสิ่งประดิษฐ์ที่เป็นไปได้ที่นี่:

ไม่มีเหตุผลใดที่จะมีการจัดตำแหน่งขอบอย่างสมบูรณ์แบบซึ่งจะทำให้เกิดสิ่งประดิษฐ์เช่นนั้นดังนั้นการใช้ "รอยหยัก" เช่นเดียวกับในโลโก้ของฮิลลารีเป็นนิสัยที่ดีในการเข้ามา


6
นี่อาจเป็นปัญหาใหญ่ของการพิมพ์ ในการพิมพ์ดิจิทัลอย่างน้อย svg โดยทั่วไปจะเป็น rasterized ก่อนที่จะถูกส่งไปยังเครื่องพิมพ์และสิ่งประดิษฐ์ประเภทเดียวกันอาจปรากฏขึ้น (โครงการสุดท้ายที่นายจ้างคนสุดท้ายของฉัน (เครื่องพิมพ์เชิงพาณิชย์ขนาดใหญ่) ที่เกี่ยวข้องกับซอฟต์แวร์การเขียนเพื่อช่วยระบุสิ่งต่าง ๆ เหล่านี้ก่อนที่จะทำการวางหมึกลงบนกระดาษที่มีราคาแพง)
Mr.Mindor

1
เนื่องจากเรากำลังพูดถึงการเมืองของสหรัฐอเมริกาคุณหมายถึง "สิ่งประดิษฐ์" หรือไม่?
Andrew Rasmussen

5
ตามภาษาอังกฤษฉันหมายถึงสิ่งประดิษฐ์ไม่ใช่สิ่งประดิษฐ์ (แต่เนื่องจากฉันเป็นคนอังกฤษฉันหมายถึงสิ่งประดิษฐ์โดยไม่คำนึงถึง)
Cai

มีไม่ค่อยเหตุผลใด ๆ ...มีเพียงแค่อยากรู้อยากเห็นที่เคยด้วยเหตุผลใด?
Alois Mahdal

@AloisMahdal ฉันสงสัยอย่างมาก
Cai

61

การทำความเข้าใจกับ rasterization และอัลกอริทึมของจิตรกรอาจช่วยได้

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

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

เมื่อคุณฝากเลเยอร์คุณจะต้องใส่ใจกับความครอบคลุมของมัน (โดยปกติจะเก็บไว้ในช่องพิเศษ, ช่องอัลฟา) และใช้มันเพื่อผสมสีที่เพิ่มเข้ากับสิ่งที่มีอยู่แล้ว

หากเลเยอร์ใหม่ของคุณครอบคลุมพิกเซล 50% และเป็นสีน้ำเงินคุณจะเฉลี่ยสีปัจจุบันของพิกเซลนั้นด้วยสีน้ำเงินและวาดที่นั่นแทน

สิ่งต่าง ๆ มีความซับซ้อนมากขึ้นหากคุณกำลังสร้างภาพด้วยความโปร่งใส แต่ไม่ใช่พื้นฐาน

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

หากคุณมีสองเหลี่ยมของรูปหลายเหลี่ยมที่มีความบังเอิญ - อยู่ด้านบนของกันและกัน - แต่ทั้งสองปกครึ่งพิกเซลที่กำหนดสิ่งที่เกิดขึ้นเป็นปัญหา

สมมติว่ารูปหลายเหลี่ยมด้านล่างเป็นสีแดงและสีน้ำเงินด้านบนและพื้นหลังเป็นสีขาว

ก่อนอื่นเราทาสีแดง ผสมกับสีขาวซึ่งนำไปสู่ ​​50% สีขาวสีแดง 50%

จากนั้นเราทาสีฟ้า ผสมกับสีขาว 50% สีแดง 50% และเราได้สีขาว 25% สีแดง 25% สีน้ำเงิน 50% สิ่งเดียวกันนี้เกิดขึ้นถ้าสีแดงและสีน้ำเงินพบกันที่ตรงกลางหรือถ้าสีน้ำเงินครอบคลุมสีแดงอย่างสมบูรณ์

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

ตราบใดที่มีความครอบคลุม 100% ของรูปหลายเหลี่ยมเดียวนี่ก็ไม่ใช่ปัญหา

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

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

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


1
คำอธิบายของคุณนำไปใช้ในกรณีของกราฟิกที่มีช่องอัลฟาหรือในกรณีของการวาดภาพ subpixel เมื่อต่อต้านนามแฝง ตัวอย่าง OPs จะแสดงสิ่งประดิษฐ์บากสำหรับเลเยอร์ผสมที่ตรงกันข้ามกับสิ่งที่ตั้งใจไว้ ฉันขอแนะนำว่าปัญหาเกี่ยวข้องกับข้อผิดพลาดในการลงทะเบียนในการพิมพ์มากขึ้น
Pekka

2
@pekka ใช่ แต่การเรนเดอร์ส่วนใหญ่ทำการต่อต้านนามแฝงในวันนี้
Yakk

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

@pekka หากเลเยอร์บนสุดมีความโปร่งใสปานกลางปัญหานี้จะเป็นปัญหาน้อยกว่ามาก (อย่างที่คุณเห็นสีแดงภายใต้สีฟ้า แต่อย่างใด) ในขณะที่ความโปร่งใสของความทึบแสงด้านบนเข้าใกล้ทางออกข้างต้น เมื่อมันห่างไกลจากความทึบ ปัญหาทั่วไปเกิดจากข้อผิดพลาดในการลงทะเบียนปัญหาการสะสม (เลเยอร์มากเกินไป!) การต่อต้านนามแฝงและทุกอย่างอื่น: ในบางจุดคุณต้องการเขียนเวกเตอร์ที่กำหนดเองสำหรับแต่ละรูปแบบผลลัพธ์หรือแก้ไขเวกเตอร์ ฉันเพียงแค่พยายามตอบสาเหตุทางเทคนิคที่แน่นอนของปัญหาที่รอยบากแก้ไข
Yakk

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

48

Cai ถูกต้อง ฉันคิดว่าฉันจะเพิ่มคำตอบด้วยภาพเช่นกัน

เหตุผลนี้เกิดขึ้นได้เพราะมันเป็น SVG ซึ่งแตกต่างจากภาพแรสเตอร์ที่คุณควบคุมแต่ละพิกเซลที่แสดงผลการแรสเตอร์ของ SVG นั้นเกิดขึ้นในเบราว์เซอร์ ... ดังนั้นเบราว์เซอร์จะทำการตัดสินใจเหล่านี้

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

นี่คือภาพหน้าจอของกล่องสีเขียวซ้อนทับกล่องสีแดงใน Chrome ด้านบนอยู่ที่ 100% การซูมหน้าส่วนล่างจะถูกซูมเข้าสังเกตเห็นความแตกต่างในการแสดงผลขอบนั้น:

ป้อนคำอธิบายรูปภาพที่นี่

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

ป้อนคำอธิบายรูปภาพที่นี่

การแก้ไขที่สมบูรณ์แบบสำหรับ SVG rasterizer ในเบราว์เซอร์คือ 'ฉลาดกว่า' และไม่แสดงผลสิ่งที่ซ้อนกัน แต่เนื่องจากองค์ประกอบ SVG สามารถจัดการภายนอกและใช้งานได้จริง (เป็นเพียงไฟล์ XML) ไม่ใช่วิธีแก้ปัญหาที่ใช้งานได้จริง สำหรับเบราว์เซอร์

ดังนั้นนักออกแบบจะทำการตัดสินใจโดยใช้รอยหยักที่คุณเห็น

โดยวิธีการนี้จะคล้ายกันในแนวคิดวิธีการจัดการกับการลงทะเบียนในการพิมพ์โดยใช้การวางกับดัก


16

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

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

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.