Subpixel Snake [วิดีโอ]

 (youtube.com)
2 คะแนน โดย GN⁺ 2025-01-26 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เกม Snake ที่ใช้ subpixel ภายในพิกเซลของมอนิเตอร์เป็นช่องเกม เล็กมากจนต้องใช้กล้องจุลทรรศน์เพื่อเล่นให้ได้อย่างถูกต้อง
  • สร้างจาก JavaScript Snake เดิม โดยผสานสีตามตำแหน่งคอลัมน์กับ mix-blend-mode: lighten เพื่อให้เห็น subpixel หลายตัวภายในพิกเซลกายภาพเดียวกันพร้อมกัน
  • ต้องใช้โครงสร้าง subpixel แบบ RGB stripe และต้องจัดแนว CSS pixel กับพิกเซลกายภาพให้ตรงกันจึงจะทำงานได้ถูกต้อง บน iMac ปรับให้ตรงด้วยการซูมออกได้ แต่บน iPad ใช้ไม่ได้
  • เมื่อตรวจด้วยกล้องจุลทรรศน์ พบว่าสีเขียว sRGB ไม่ได้เปิดเฉพาะ subpixel สีเขียว แต่เปิดสีแดงและสีน้ำเงินร่วมด้วย โดยยืนยันแล้วว่าสาเหตุมาจากขอบเขตสีที่กว้างขึ้นของจอแสดงผลสมัยใหม่
  • เมื่อใช้ Lab color บน iMac สามารถแยก subpixel สีแดงและสีเขียวออกจากกันได้ แต่ความเข้ากันได้ระยะยาวยังอ่อนแอ เพราะโครงสร้างพิกเซลกำลังเปลี่ยนไปจาก RGB stripe

ใช้ subpixel เป็นกระดานเกม

  • เกม Snake นี้ไม่ได้ใช้พิกเซลทั่วไปของมอนิเตอร์ แต่ใช้ subpixel สีแดง·เขียว·น้ำเงิน ภายในพิกเซลเป็นเหมือนช่องเกม
  • เมื่อดูใกล้ ๆ พิกเซลบนหน้าจอประกอบด้วย subpixel หลายตัว และเมื่อดูจากระยะไกล ดวงตามนุษย์จะเห็นแสงเหล่านี้ผสมกันเป็นสีเดียว
  • ระหว่างถ่ายภาพหน้าจอหลายแบบด้วย เลนส์มาโคร ที่ได้รับในวันคริสต์มาส พบว่าแต่ละจอแสดงผลมีรูปแบบ subpixel แตกต่างกัน
    • รูปแบบ Chevron
    • รูปแบบ stripe
    • แพตเทิร์น diamond
  • ความแตกต่างของการจัดเรียงเหล่านี้เรียกว่า เรขาคณิตของ subpixel และ iMac ของผู้สร้างใช้โครงสร้าง RGB stripe

วิธีการนำไปใช้และข้อจำกัดที่เผยให้เห็นด้วยกล้องจุลทรรศน์

  • การนำไปใช้พื้นฐานเพื่อดัดแปลง JavaScript Snake ที่ทำไว้เมื่อ 15 ปีก่อนให้รองรับ subpixel ค่อนข้างเรียบง่าย
    • ลดจำนวนคอลัมน์ของเกม
    • ทำให้บล็อก Snake ในคอลัมน์ที่กำหนดแสดงเป็นสีเฉพาะ
    • ใช้ mix-blend-mode: lighten เพื่อให้มองเห็นบล็อกทั้งหมดได้ แม้มีหลายบล็อกอยู่ในพิกเซลเดียวกัน
  • เพื่อให้ทำงานจริงได้ ต้องตรงตามเงื่อนไขสองข้อ
    • ผู้ใช้ต้องใช้มอนิเตอร์ที่มีโครงสร้าง subpixel แบบ RGB stripe
    • CSS pixel ของเบราว์เซอร์ต้องจัดแนวตรงกับพิกเซลกายภาพ
  • การจัดแนว CSS pixel สามารถปรับให้ตรงได้ด้วยการซูมออก แต่วิธีนี้ใช้ได้เฉพาะบน iMac และล้มเหลวบน iPad
  • การนำไปใช้เสร็จอย่างรวดเร็ว แต่ไม่สามารถยืนยันการแสดงผลระดับ subpixel ด้วยตาเปล่าได้ จึงถ่ายหน้าจอจริงด้วย กล้องจุลทรรศน์ ราคาถูกที่ซื้อทางออนไลน์
  • เมื่อดูด้วยกล้องจุลทรรศน์ พบว่าเวลาแสดงสีเขียว ไม่ได้เปิดเฉพาะ subpixel สีเขียว แต่เปิด subpixel หลายตัวพร้อมกัน
    • ตอนแรกสงสัยว่าเป็นบั๊ก แต่โค้ดไม่มีปัญหา
    • เมื่อตรวจสีเขียวล้วน บน iMac พบว่าไม่เพียง subpixel สีเขียวเท่านั้น แต่สีแดงและสีน้ำเงินก็เปิดด้วย
    • บนโทรศัพท์มือถือ สีเขียวก็เปิด subpixel สีแดงแบบอ่อน ๆ เช่นกัน
  • หลังสอบถามผู้ดูแลหน้าว่าด้วยเรขาคณิตของ subpixel พบว่าสาเหตุคือความแตกต่างระหว่าง มาตรฐาน sRGB กับขอบเขตสีของจอแสดงผลสมัยใหม่
    • sRGB ถูกสร้างขึ้นในยุคที่หน้าจอมีประสิทธิภาพและขอบเขตสีแคบกว่า
    • หากเปิดเฉพาะ subpixel สีเขียวบนหน้าจอสมัยใหม่ อาจได้สีที่มีความอิ่มตัวสูงกว่าเขียว sRGB
    • เพื่อแสดงสีเขียว sRGB ที่ต้องการอย่างแม่นยำ จำเป็นต้องเติมสีแดง และในบางกรณีต้องเติมสีน้ำเงินด้วย
  • เมื่อเปลี่ยนนิยามสี RGB เป็น Lab color ก็สามารถใช้พื้นที่สีที่ใหญ่กว่าเพื่อแยก subpixel สีแดงและสีเขียวบน iMac ได้
  • อย่างไรก็ตาม เรขาคณิตของพิกเซลกำลังห่างออกจาก RGB stripe และ subpixel ในอนาคตอาจเปิดทำงานต่างจากปัจจุบันโดยสิ้นเชิง ทำให้วิธีนี้ยากที่จะคงอยู่ได้นาน

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-01-26
ความคิดเห็นจาก Hacker News

  • พออ่านบทความ Subpixel Zoo ที่ลิงก์ไว้ ก็เพิ่งรู้ว่า PenTile ยังถูกใช้กันอย่างแพร่หลายมากอยู่
    หน้าจอ PenTile เครื่องแรกที่เคยใช้คือ Motorola Droid 4 ซึ่งแย่มากจริง ๆ ตัวอักษรเล็ก ๆ อ่านยากขึ้นอยู่กับสีตัวอักษรกับสีพื้นหลัง และเพราะช่องว่างระหว่างสีค่อนข้างกว้าง พื้นที่สีแดง/เขียว/น้ำเงินล้วนจึงดูเหมือนลายตารางหมากรุก
    มันให้ความรู้สึกแบบนั้นมาตั้งแต่ก่อนที่คำว่า screen door effect จะกลายเป็นคำที่ใช้กันทั่วไปเมื่อ VR แพร่หลายเสียอีก เลยแปลกใจที่ PenTile ยังถูกใช้อยู่ คงเพราะมันดีขึ้นแล้ว หรือระยะห่างระหว่างซับพิกเซลลดลง หรือความละเอียดกับความหนาแน่นพิกเซลที่สูงขึ้นช่วยกลบจุดอ่อนที่เคยเห็นบน Droid 4

    • จอ PenTile รุ่นแรก ๆ มีการจัดเรียงต่างออกไป: [https://en.wikipedia.org/wiki/PenTile_matrix_family#/media/F...](https://en.wikipedia.org/wiki/PenTile_matrix_family#/media/File:Nexus_one_screen_microscope.jpg)
      ตามแกนแนวนอน/แนวตั้งจะเรียงเป็นน้ำเงิน เขียว แดง เขียว ทำให้ซับพิกเซลสีแดงหนึ่งตัวอยู่ห่างจากสีเขียวสองตัวและสีน้ำเงินหนึ่งตัวพอสมควร
      จอ PenTile สมัยใหม่มักใช้การจัดเรียงแบบสามเหลี่ยม: https://static1.xdaimages.com/wordpress/wp-content/uploads/w...
      ผมไม่ใช่ผู้เชี่ยวชาญด้านการเรนเดอร์ข้อความ แต่ด้วย การจัดเรียงแบบสามเหลี่ยม นี้ ดูเหมือนว่าจะทำให้ชุดซับพิกเซล RGB อยู่ใกล้กันได้มากกว่าแบบเรียงเป็นเส้นตรงมาก นอกจากนี้ Droid 4 ก็มีความละเอียดต่ำด้วย Apple ไปถึง 330ppi ตั้งแต่ปี 2010 แต่ Droid 4 ในปี 2012 อยู่ที่ 275ppi ซึ่งถือว่าต่ำแม้ตามมาตรฐานตอนนั้น และ PenTile ที่ลดซับพิกเซลลงหนึ่งในสามก็น่าจะทำให้แย่ลงอีก
      ทุกวันนี้ Galaxy S25 อยู่ที่ 416ppi และ iPhone 16 อยู่ที่ 460ppi จึงมีพิกเซลมากกว่ามาก ความหนาแน่นพิกเซลน่าจะเป็นปัจจัยที่มีผลมากที่สุด แต่การจัดเรียงแบบสามเหลี่ยมของจอสมัยใหม่ก็น่าจะช่วยด้วย
    • ใช่เลย เหตุผลก็ตรงนั้นแหละ ความละเอียดของ Droid 4 ต่ำจนมองเห็นการจัดเรียงซับพิกเซลได้ ส่วนจอสมัยใหม่มีความหนาแน่นสูงจนมองไม่เห็นซับพิกเซลเลย

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

  • ในฐานะคนที่หมกมุ่นกับเกมอาร์เคดย้อนยุคจนสร้างตู้เอมูเลชันระดับไฮเอนด์เอง โดยใส่ CRT อนาล็อก RGB แบบควอดซิงก์ 27 นิ้ว วิดีโอนี้ดีมาก
    ทันทีที่เขาอธิบายว่าเจอปัญหาพิกเซลสีเขียว ก็รู้สึกทันทีว่าจะได้เรียนรู้อะไรที่น่าสนใจ โครงสร้างซับพิกเซล ค่า chromaticity ของสารเรืองแสง และเรื่องทำนองนี้เป็นโพรงกระต่ายที่ยิ่งขุดยิ่งสนุก และยังเกี่ยวข้องมากกับจอแสดงผลในปัจจุบันอย่าง OLED, QLED
    เวลาเล่นเกมอาร์เคดคลาสสิกยุค 80–90 หรือเกมคอนโซลย้อนยุค การเล่นบน CRT ดีกว่ามากและใกล้เคียงต้นฉบับกว่า ถ้าเล่นผ่านเอมูเลชัน ก็เปิด pixel shader จำลอง CRT ได้ (CRT Royale ดี) พิกเซลอาร์ตเหล่านี้ถูกสร้างโดยนักพัฒนาและศิลปินในยุคนั้นที่ตั้งใจใช้การผสมสีของ CRT และ anti-aliasing ตามธรรมชาติจากเส้นสแกน คุ้มค่าที่จะดูในแบบที่ตั้งใจไว้แต่แรก: https://i.redd.it/9fmozdvt6vya1.jpg

    • ในฐานะคนที่ชอบฮาร์ดแวร์ย้อนยุคของจริง ตู้แบบนั้นดูเจ๋งมาก ทำให้อยากหยอดเหรียญเล่นยาว ๆ หลายชั่วโมง
      เพราะข้อความนี้ทำให้ผมตกลงไปในโพรงกระต่ายของ การจำลอง CRT แล้วก็พบว่ามีของแบบนี้อยู่จริง
      https://github.com/blurbusters/crt-beam-simulator
    • อยากฟังรายละเอียดการตั้งค่ามากกว่านี้ ถ้ามีบล็อกที่บันทึกไว้ก็คงดี
    • ผมไม่ชอบความรู้สึก LCD เบลอ ๆ นั่น เหมือนมีคนแฮ็กไฟล์ .ini ให้ anti-aliasing สูงกว่าเพดาน 4 เท่า แล้วเอามุ้งลวดมาวางหน้าจอ
      ผมเล่นเกมในยุคที่เปลี่ยนผ่านจาก CRT ไป LCD และตอนนั้นไม่มีใครชอบกราฟิกของ CRT มากกว่า
      การถอยหลังที่แท้จริงคือเมื่อเกมย้ายจาก PC ไปคอนโซล แล้ว เซิร์ฟเวอร์เฉพาะ ตายไป เมื่อก่อนเราเลือกเซิร์ฟเวอร์ latency 10ms ได้ แต่ตอนนี้ 60–100ms ขึ้นไปก็ยังถูกมองว่าโอเค
    • ข้ออ้างว่า “ต้องดูแบบที่ตั้งใจไว้แต่แรก” เชื่อยาก ผมโตมากับการเล่นเกมบน CRT แต่ CRT จริง ๆ แต่ละเครื่องมีความคม สี และอาร์ติแฟกต์ไม่เหมือนกันเลย แถมยังต่างกันมากตามวิธีส่งออก/รับสัญญาณวิดีโอด้วย
      ขึ้นอยู่กับว่าเสียบกับทีวี จอมอนิเตอร์ราคาถูก หรือจอมอนิเตอร์แพง สิ่งเดียวที่พูดได้ค่อนข้างแน่คือ CRT เบลอกว่า ภาพเปรียบเทียบที่ยกมาทำให้เข้าใจผิด เพราะความสว่างต่างกันโดยสิ้นเชิง ฝั่ง LCD/LED ดูเหมือนไม่ได้ใช้แกมมาที่ถูกต้อง
      ถ้าใช้ CRT สุ่ม ๆ สีผิวก็มีโอกาสสูงที่จะออกเขียว และ อาร์ติแฟกต์สี ของ CRT อาจรุนแรงได้ ผมเข้าใจการทำภาพให้เบลอในเอมูเลเตอร์เพื่อลดรอยหยัก และเอฟเฟกต์ CRT ย้อนยุคก็เป็นลูกเล่นตกแต่งที่สนุก แต่ข้ออ้างว่า “นี่คือภาพที่เกมตั้งใจให้เป็น” ผมรับได้ยาก มันคล้ายกับการบอกว่าเพลงยุค 90 ต้องฟังผ่านลำโพงราคาถูกท่ามกลางเสียงถนนถึงจะเป็น “วิธีที่ตั้งใจไว้” นั่นก็แค่สิ่งที่ดีที่สุดที่ทำได้ในยุคนั้นเท่านั้น
    • นั่นดูเหมือนเป็นภาพที่คล้ายกันแต่ไม่ใช่ภาพเดียวกัน
      ผมโตมากับ CRT แต่มีเกมน้อยมากที่ “ดูดีกว่า” บน CRT ส่วนใหญ่เป็นเกมที่ใช้อินเทอร์เลซเพื่อสร้างเอฟเฟกต์กะพริบ นอกจากนี้ปืนแสงก็ต้องใช้ CRT เพราะเรื่อง timing
      นอกนั้น CRT ก็คล้ายแผ่นไวนิล มีคนสร้างเหตุผลสารพัดว่ามันดีกว่า แต่จริง ๆ ไม่ใช่

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

  • เจ๋งดี บนจอ 1440p ผมใช้ แว่นขยายแบบคาดศีรษะ[1] แล้วลดความเร็วลง 10 เท่า ถึงจะเล่นได้
    ถ้าความหนาแน่นพิกเซลสูงกว่านี้ คงต้องใช้กล้องจุลทรรศน์จริง ๆ
    [1] https://www.amazon.com/ProsKit-MA-016-Personal-Headband-Magn...

  • QBasic Nibbles ก็ทำแบบเดียวกันด้วยอักขระวาดกรอบ ANSI
    มีอักขระข้อความที่ใช้แค่ครึ่งหนึ่งของ “เซลล์” แนวตั้ง และเมื่อผสมสี foreground/background อย่างฉลาด ก็ทำให้ความละเอียดแนวตั้งใน text mode เพิ่มเป็นสองเท่าได้

  • ถ้าใครโง่เหมือนผมแล้วพยายามเล่นจริง ๆ ควรรู้ไว้ว่า ค่า Snake speed ทำงานกลับด้าน

    • ความเร็วคือมิลลิวินาทีต่อเฟรม

  • มีใครแก่พอจะจำความสนุกตอนปรับ ClearType บน Windows XP ได้ไหม
    มันเป็นวิธีเลี่ยงที่ยอดเยี่ยมในการเรนเดอร์ข้อความให้ดูนุ่มขึ้นบน LCD ความละเอียดต่ำ

    • บน Windows 10 ก็ยังทำได้อยู่ แค่มันไม่ค่อยสนุกแล้ว

  • วิธีดูซับพิกเซลที่ง่ายที่สุดคือวาง หยดน้ำ หนึ่งหยดบนจอ น่าจะขยายได้ประมาณ 100 เท่าเลย :)

  • ส่วนที่ซูมเข้า/ออกเพื่อให้ CSS pixel ตรงกับพิกเซลจริง ผมคิดว่าใช้หน่วยอย่าง 0.25px ไปเลยก็ได้นะ
    หรือใน JavaScript อาจหารด้วย window.devicePixelRatio เพื่อปรับแบบไดนามิกก็ได้