सबपिक्सेल Snake [वीडियो]

 (youtube.com)
2 पॉइंट द्वारा GN⁺ 2025-01-26 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • यह Snake गेम मॉनिटर पिक्सेल के अंदर मौजूद subpixels को गेम की cells की तरह इस्तेमाल करता है, इतना छोटा कि ठीक से खेलने के लिए microscope चाहिए
  • मौजूदा JavaScript Snake के आधार पर column position के हिसाब से रंगों और mix-blend-mode: lighten को मिलाकर, एक ही physical pixel के अंदर कई subpixels को साथ दिखाई देने लायक बनाया गया
  • सही ढंग से चलने के लिए RGB stripe subpixel structure और CSS pixels व physical pixels का alignment ज़रूरी है; iMac पर zoom out करके alignment मिल गया, लेकिन iPad पर यह काम नहीं किया
  • microscope से देखने पर पता चला कि sRGB green सिर्फ green subpixel को ऑन नहीं करता, बल्कि red और blue को भी साथ ऑन करता है; इसकी वजह आधुनिक displays का wider color gamut निकला
  • Lab color इस्तेमाल करने पर iMac में red और green subpixels को अलग किया जा सका, लेकिन pixel structure अब RGB stripe से दूर जा रहा है, इसलिए long-term compatibility कमज़ोर है

सबपिक्सेल को गेम बोर्ड की तरह इस्तेमाल करना

  • यह Snake गेम मॉनिटर के सामान्य pixels नहीं, बल्कि pixel के अंदर के red, green, blue subpixels को गेम cells की तरह इस्तेमाल करता है
  • पास से देखने पर screen के pixels कई subpixels से बने दिखते हैं, और दूर से देखने पर इंसानी आंख को ये lights मिलकर एक ही रंग जैसी दिखाई देती हैं
  • Christmas पर मिले macro lens से कई screens की फोटो लेते हुए यह पता चला कि हर display में subpixel की shape अलग होती है
    • Chevron shape
    • stripe shape
    • diamond pattern
  • इन arrangement differences को subpixel geometry कहा जाता है, और creator का iMac RGB stripe structure इस्तेमाल करता है

implementation का तरीका और microscope से सामने आई सीमाएं

  • 15 साल पहले बनाए गए JavaScript Snake को subpixel के लिए बदलने का basic implementation अपेक्षाकृत आसान था
    • गेम columns की संख्या घटाई गई
    • किसी खास column के Snake block को किसी खास रंग में दिखाया गया
    • mix-blend-mode: lighten apply किया गया, ताकि एक ही pixel के अंदर कई blocks हों तब भी सभी दिखाई दें
  • असल में काम करने के लिए दो conditions पूरी होनी ज़रूरी थीं
    • user को RGB stripe subpixel structure वाला monitor इस्तेमाल करना था
    • browser के CSS pixels को physical pixels के साथ align होना था
  • CSS pixel alignment को zoom out करके match किया जा सकता था, लेकिन यह तरीका सिर्फ iMac पर चला और iPad पर fail हो गया
  • implementation जल्दी पूरा हो गया, लेकिन subpixel-level display को आंखों से verify नहीं किया जा सकता था, इसलिए online खरीदे गए सस्ते microscope से असली screen की तस्वीर ली गई
  • microscope से देखने पर green color दिखाते समय सिर्फ green subpixel नहीं, बल्कि कई subpixels साथ में ऑन हुए
    • शुरुआत में इसे bug समझा गया, लेकिन code में कोई समस्या नहीं थी
    • solid green जांचने पर iMac में green के साथ red और blue subpixels भी ऑन हुए
    • phone पर भी green color ने red subpixel को हल्का ऑन किया
  • subpixel geometry page के operator से पूछने पर पता चला कि वजह sRGB standard और modern display color gamut का अंतर था
    • sRGB उस समय बनाया गया था जब screen performance और color gamut ज्यादा narrow थे
    • modern screens पर सिर्फ green subpixel ऑन करने से sRGB green से अधिक saturated रंग आ सकता है
    • इच्छित sRGB green को सही ढंग से दिखाने के लिए red, और कुछ मामलों में blue भी साथ जोड़ना पड़ता है
  • RGB color definition को Lab color में बदलने पर, बड़े color space का उपयोग करते हुए iMac पर red और green subpixels को अलग किया जा सका
  • हालांकि pixel geometry RGB stripe से दूर जा रही है, और future के subpixels आज की तुलना में पूरी तरह अलग तरीके से ऑन हो सकते हैं, इसलिए यह तरीका लंबे समय तक टिके रहना मुश्किल है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-01-26
Hacker News टिप्पणियाँ

  • लिंक किए गए Subpixel Zoo लेख को देखकर पता चला कि PenTile आज भी बहुत व्यापक रूप से इस्तेमाल होता है
    मैंने पहली बार PenTile स्क्रीन Motorola Droid 4 पर इस्तेमाल की थी, और वह सच में बहुत खराब थी। छोटा टेक्स्ट, टेक्स्ट के रंग और बैकग्राउंड रंग के हिसाब से पढ़ना मुश्किल हो जाता था, और रंगों के बीच की दूरी इतनी अधिक थी कि लाल/हरा/नीला ठोस क्षेत्र चेकरबोर्ड जैसे दिखते थे
    VR के आम होने के साथ screen door effect शब्द प्रचलित होने से पहले ही वैसा एहसास होता था। इसलिए यह देखकर हैरानी हुई कि PenTile अब भी इस्तेमाल हो रहा है; शायद यह बेहतर हो गया है, या subpixel के बीच की दूरी कम हुई है, या फिर ज्यादा resolution और pixel density Droid 4 में दिखने वाली कमियों को छिपा देते हैं

    • शुरुआती PenTile डिस्प्ले का arrangement अलग था: [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)
      क्षैतिज/ऊर्ध्वाधर axis पर क्रम नीला, हरा, लाल, हरा था, इसलिए एक लाल subpixel, दो हरे और एक नीले जितनी दूरी पर होता था
      आधुनिक PenTile डिस्प्ले आम तौर पर triangular arrangement इस्तेमाल करते हैं: https://static1.xdaimages.com/wordpress/wp-content/uploads/w...
      मैं text rendering का विशेषज्ञ नहीं हूँ, लेकिन इस triangular arrangement में linear arrangement की तुलना में RGB subpixel combination को कहीं ज्यादा पास लाया जा सकता है। ऊपर से Droid 4 का resolution भी कम था। Apple 2010 में 330ppi तक पहुँच गया था, जबकि Droid 4 2012 में 275ppi था, तो उस समय के हिसाब से भी यह कम था, और PenTile ने subpixel का एक-तिहाई घटाकर इसे और खराब किया होगा
      आज का Galaxy S25 416ppi है, iPhone 16 460ppi, इसलिए pixels बहुत ज्यादा हैं। pixel density का असर सबसे बड़ा होगा, लेकिन आधुनिक डिस्प्ले का triangular arrangement भी मदद करता होगा
    • वजह बिल्कुल वही है। Droid 4 resolution इतना कम था कि subpixel arrangement आँखों से दिख जाता था, जबकि नए डिस्प्ले इतने dense हैं कि subpixel दिखाई ही नहीं देते

  • साँप का अजीब चलना इस वजह से है कि subpixel चौकोर नहीं हैं
    असली स्क्रीन पर यूज़र को हर दिशा में एक जैसी speed महसूस हो, इसके लिए vertical की तुलना में horizontal movement speed को subpixel के हिसाब से ज्यादा रखना अच्छा होगा

  • आर्केड retro games का इतना शौक रहा है कि मैंने 27-inch quad-sync analog RGB CRT वाला एक high-end emulation cabinet खुद बनाया, और उसी नज़र से यह वीडियो बहुत पसंद आया
    जैसे ही उसने हरे pixel की समस्या मिलने की बात कही, मुझे तुरंत लगा कि अब कुछ दिलचस्प सीखने को मिलेगा। subpixel structure, phosphor colorimetry जैसी चीज़ें जितना गहराई में जाओ उतनी रोचक rabbit hole हैं, और आज के OLED, QLED जैसे डिस्प्ले में भी इनकी प्रासंगिकता बनी हुई है
    80~90 के दशक के classic arcade या console retro games CRT पर खेलना कहीं बेहतर और मूल अनुभव के ज्यादा करीब है। अगर emulation कर रहे हैं, तो CRT emulation pixel shader चालू कर लें (CRT Royale अच्छा है)। यह pixel art उस समय के developers और artists ने CRT के color blending और scanlines की natural anti-aliasing का जानबूझकर इस्तेमाल करके बनाई थी। इसे उसी तरह देखना वाकई मूल्यवान है: https://i.redd.it/9fmozdvt6vya1.jpg

    • असली retro hardware पसंद करने वाले के तौर पर ऐसा cabinet कमाल का लगता है। कई घंटों तक सिक्के डाल-डालकर खेलते रहने का मन करता है
      इस पोस्ट की वजह से मैं CRT simulation rabbit hole में उतर गया, और सच में ऐसी चीज़ मौजूद है
      https://github.com/blurbusters/crt-beam-simulator
    • मैं आपकी setup के बारे में और सुनना चाहूँगा। अगर कहीं ब्लॉग वगैरह में लिखा हो तो अच्छा रहेगा
    • धुंधला LCD जैसा एहसास मुझे बिल्कुल पसंद नहीं। लगता है जैसे किसी ने .ini hack करके anti-aliasing को limit से 4 गुना बढ़ा दिया हो और monitor के सामने मच्छरदानी लगा दी हो
      मैंने CRT से LCD में बदलाव के दौर में गेम खेले हैं, और CRT graphics को ज्यादा पसंद करने वाला कोई नहीं था
      असली गिरावट तब आई जब games PC से console पर गए और dedicated servers खत्म हो गए। पहले हम 10ms latency वाले server चुनते थे; अब 60~100ms या उससे भी ज्यादा को लोग ठीक मान लेते हैं
    • “इसे उसी तरह देखना चाहिए जैसा मूल रूप से इरादा था” वाला दावा भरोसेमंद नहीं लगता। मैं CRT पर गेम खेलते हुए बड़ा हुआ, लेकिन असली CRT की sharpness, color, artifacts सब अलग-अलग होते थे, और video output/input के तरीके के हिसाब से भी बहुत फर्क पड़ता था
      TV से जोड़ा था, सस्ता monitor था, महँगा monitor था—सबसे नतीजा बदलता था; पक्का सिर्फ इतना कहा जा सकता है कि CRT ज्यादा धुंधला था। जो comparison image दी गई है, उसकी brightness पूरी तरह अलग है, इसलिए वह भ्रामक है। LCD/LED वाली तरफ शायद सही gamma इस्तेमाल नहीं हुआ
      किसी भी CRT पर skin tones का हरा पड़ जाना भी काफी आम था, और CRT के color artifacts गंभीर हो सकते थे। emulator में jaggies कम करने के लिए image blur करना समझ में आता है, और retro CRT effects मजेदार सजावट भी हो सकते हैं, लेकिन “यही वह रूप है जैसा game का इरादा था” यह मानना मुश्किल है। यह वैसा ही है जैसे कहना कि 90s का music तभी “इरादे के मुताबिक” है जब उसे सस्ते speakers और सड़क के शोर में सुना जाए। वह बस उस दौर की सर्वोत्तम उपलब्ध सीमा थी
    • यह मिलता-जुलता है, लेकिन शायद एक ही image नहीं है
      मैं CRT के साथ बड़ा हुआ, लेकिन CRT पर “बेहतर दिखने” वाले games बहुत कम थे; आम तौर पर वे games जो flicker effect बनाने के लिए interlace का इस्तेमाल करते थे। इसके अलावा light gun timing की वजह से CRT चाहिए
      बाकी मामलों में CRT, vinyl जैसा है। कुछ लोग उसे बेहतर बताने के लिए तरह-तरह के तर्क देते हैं, लेकिन हकीकत में ऐसा नहीं है

  • बहुत दिलचस्प था। color space और उसका subpixel पर कैसे लागू होता है, इसके बारे में बहुत कुछ सीखा, और वीडियो देखना सार्थक लगा
    gameplay के लिहाज़ से board को बड़ा करना होगा, और साँप की speed को हर subpixel पार करते समय adjust करना होगा। left-right चलते समय R से G तक जाना, B से R तक जाने से कम horizontal movement है, और vertical movement में हर step, horizontal की तुलना में बहुत बड़ा है
    position, color spectrum में जहाँ है, उसके हिसाब से हर animation step की speed को अनुपात में adjust करें तो यह काफी आसानी से सुलझ सकता है, और तब यह कहीं ज्यादा polished लगेगा

  • कमाल है। 1440p monitor पर headband magnifier[1] लगाकर और speed को 10 गुना धीमा करके मैं इसे खेल पाया
    pixel density इससे ज्यादा हो तो शायद असली microscope चाहिए होगा
    [1] https://www.amazon.com/ProsKit-MA-016-Personal-Headband-Magn...

  • QBasic Nibbles ने भी ANSI box drawing characters के साथ यही काम किया था
    ऐसे text characters थे जो vertical “cell” का सिर्फ आधा हिस्सा इस्तेमाल करते थे, और foreground/background color को चतुराई से मिलाकर text mode में vertical resolution दोगुना किया जा सकता था

  • अगर मेरी तरह आप भी इसे सच में खेलना चाहें, तो जान लें कि Snake speed value उल्टी तरह काम करती है

    • speed, milliseconds per frame है

  • क्या यहाँ कोई इतना पुराना है कि Windows XP में ClearType adjust करने का मज़ा याद हो
    low-resolution LCD पर ज्यादा smooth text render करने का यह एक शानदार workaround था

    • Windows 10 में भी यह अब तक किया जा सकता है। बस अब उतना मजेदार नहीं रहा

  • subpixel देखने का सबसे आसान तरीका डिस्प्ले पर पानी की एक बूँद रख देना है। शायद इससे लगभग 100x magnification मिल जाएगा :)

  • zoom in/out करके CSS pixel को real pixel से मिलाने वाली बात पर, क्या बस 0.25px जैसी unit इस्तेमाल नहीं की जा सकती
    या फिर JavaScript में window.devicePixelRatio से divide करके इसे dynamically match किया जा सकता है