Altpiksel Snake [Video]

 (youtube.com)
2 puan yazan GN⁺ 2025-01-26 | 1 yorum | WhatsApp'ta paylaş
  • Monitör pikselinin içindeki altpikselleri oyun karesi olarak kullanan bir Snake oyunu; o kadar küçük ki düzgün oynamak için mikroskop gerekiyor
  • Mevcut JavaScript Snake temel alınarak sütun konumuna göre renkler ve mix-blend-mode: lighten birleştirilmiş; böylece aynı fiziksel piksel içindeki birden fazla altpikselin birlikte görünmesi sağlanmış
  • Düzgün çalışması için RGB stripe altpiksel yapısı ve CSS pikselleri ile fiziksel piksellerin hizalanması gerekiyor; iMac’te uzaklaştırma ile ayarlanabilmiş, ancak iPad’de işe yaramamış
  • Mikroskopla bakıldığında sRGB yeşilinin yalnızca yeşil altpikseli yakmadığı, kırmızı ve maviyi de birlikte yaktığı görüldü; nedenin modern ekranların daha geniş renk gamı olduğu doğrulandı
  • Lab color kullanıldığında iMac’te kırmızı ve yeşil altpikseller ayrılabildi, ancak piksel yapıları RGB stripe’tan uzaklaştığı için uzun vadeli uyumluluk zayıf

Altpikselleri oyun tahtası olarak kullanmak

  • Bu Snake oyunu, monitörün sıradan piksellerini değil, piksel içindeki kırmızı·yeşil·mavi altpikselleri oyun kareleri gibi kullanıyor
  • Yakından bakıldığında ekrandaki pikseller birden fazla altpikselden oluşuyor; uzaktan bakıldığında ise insan gözü bu ışıkları karışmış halde tek bir renk olarak görüyor
  • Noel’de alınan makro lens ile çeşitli ekranlar fotoğraflanırken, her ekranın altpiksel biçiminin farklı olduğu görüldü
    • Chevron biçimi
    • stripe biçimi
    • diamond deseni
  • Bu dizilim farklarına altpiksel geometrisi deniyor ve geliştiricinin iMac’i RGB stripe yapısını kullanıyor

Uygulama yöntemi ve mikroskopla ortaya çıkan sınırlamalar

  • 15 yıl önce yapılmış JavaScript Snake’i altpikseller için uyarlayan temel uygulama nispeten basitti
    • Oyun sütunlarının sayısı azaltıldı
    • Belirli bir sütundaki Snake bloğunun belirli bir renkte gösterilmesi sağlandı
    • Aynı piksel içinde birden fazla blok olsa bile hepsinin görünmesi için mix-blend-mode: lighten uygulandı
  • Gerçekte çalışması için iki koşulun karşılanması gerekiyordu
    • Kullanıcının RGB stripe altpiksel yapısına sahip bir monitör kullanması gerekiyordu
    • Tarayıcının CSS piksellerinin fiziksel piksellerle hizalanması gerekiyordu
  • CSS piksel hizalaması uzaklaştırma ile ayarlanabiliyordu, ancak bu yöntem yalnızca iMac’te çalıştı ve iPad’de başarısız oldu
  • Uygulama hızla tamamlandı, fakat altpiksel düzeyindeki gösterim gözle doğrulanamadığı için internetten alınan ucuz bir mikroskop ile gerçek ekran görüntülendi
  • Mikroskopla bakıldığında yeşil gösterilirken yalnızca yeşil altpikselin yanmadığı, birden fazla altpikselin birlikte yandığı görüldü
    • Başta bir hata olduğundan şüphelenildi, ancak kodda sorun yoktu
    • Düz yeşil kontrol edildiğinde iMac’te yalnızca yeşil değil, kırmızı ve mavi altpiksellerin de yandığı görüldü
    • Telefonda da yeşil renk kırmızı altpikseli zayıf biçimde yakıyordu
  • Altpiksel geometrisi sayfasının yöneticisine sorulduğunda, nedenin sRGB standardı ile modern ekranların renk gamı arasındaki fark olduğu anlaşıldı
    • sRGB, ekran performansının ve renk gamının daha dar olduğu bir dönemde oluşturuldu
    • Modern ekranda yalnızca yeşil altpiksel yakılırsa sRGB yeşilinden daha doygun bir renk ortaya çıkabiliyor
    • İstenen sRGB yeşilini doğru göstermek için kırmızının, bazı durumlarda mavinin de birlikte eklenmesi gerekiyor
  • RGB renk tanımı Lab color ile değiştirildiğinde, daha büyük renk uzayı kullanılarak iMac’te kırmızı ve yeşil altpikseller ayrılabildi
  • Ancak piksel geometrisi RGB stripe’tan uzaklaşıyor ve gelecekteki altpikseller bugünkünden tamamen farklı şekilde yanabileceği için bu yöntemin uzun süre korunması zor

İlgili okumalar

1 yorum

 
GN⁺ 2025-01-26
Hacker News yorumları

  • Bağlantı verilen Subpixel Zoo yazısını görünce PenTile’ın hâlâ çok yaygın kullanıldığını öğrendim.
    İlk kullandığım PenTile ekran Motorola Droid 4’tü ve gerçekten kötüydü. Küçük yazılar, yazı rengine ve arka plan rengine bağlı olarak zor okunuyordu; renkler arasındaki aralık büyük olduğu için kırmızı/yeşil/mavi düz renk alanları dama tahtası gibi görünüyordu.
    VR yaygınlaşıp screen-door effect terimi sıradanlaşmadan önce bile zaten öyle bir his vardı. Bu yüzden PenTile’ın hâlâ kullanılıyor olması şaşırtıcı geldi; muhtemelen ya iyileşti ya da alt piksel aralıkları azaldı veya daha yüksek çözünürlük ve piksel yoğunluğu Droid 4’te görünen zayıflıkları gizliyor.

    • İlk PenTile ekranların dizilimi farklıydı: [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)
      Yatay/dikey eksende mavi, yeşil, kırmızı, yeşil sırasındaydı; bu yüzden bir kırmızı alt piksel, iki yeşil ve bir mavi kadar uzaktaydı.
      Modern PenTile ekranlar genelde üçgen dizilim kullanıyor: https://static1.xdaimages.com/wordpress/wp-content/uploads/w...
      Metin işleme uzmanı değilim ama bu üçgen dizilim RGB alt piksel kombinasyonlarını doğrusal dizilime göre çok daha yakın hâle getirebilecek gibi görünüyor. Üstelik Droid 4’ün çözünürlüğü de düşüktü. Apple 2010’da 330 ppi’ye geçmişken Droid 4, 2012’de 275 ppi idi; yani o dönem için bile düşük sayılırdı ve PenTile alt piksellerin üçte birini eksilttiği için durum daha da kötüleşmiş olmalı.
      Bugünkü Galaxy S25 416 ppi, iPhone 16 ise 460 ppi; yani çok daha fazla piksel var. En büyük etkiyi piksel yoğunluğu yapacaktır ama modern ekranlardaki üçgen dizilim de yardımcı oluyor gibi.
    • Tam olarak sebep bu. Droid 4 çözünürlüğü, alt piksel dizilimi gözle görülebilecek kadar düşüktü; yeni ekranların yoğunluğu yüksek olduğu için alt pikseller hiç görünmüyor.

  • Yılanın tuhaf hareket etmesinin nedeni alt piksellerin kare olmaması.
    Gerçek ekranda kullanıcıya hangi yöne giderse gitsin aynı hızda görünmesi için, dikeye kıyasla yatay hareket hızını alt piksel bazında daha yüksek yapmak iyi olurdu.

  • Arcade retro oyunlara takıntılı biri olarak, içine 27 inç quad-sync analog RGB CRT koyduğum üst düzey bir emülasyon kabinini bizzat yapmış biri açısından bu video hoşuma gitti.
    Yeşil piksel sorunuyla karşılaştığını açıkladığı anda ilginç bir şey öğreneceğimi hemen hissettim. Alt piksel yapısı, fosfor renkleri gibi konular kazdıkça daha da ilginçleşen tavşan delikleri ve günümüz OLED, QLED gibi ekranlarıyla da hâlâ çok ilgili.
    80’ler ve 90’lardaki klasik arcade veya konsol retro oyunlarını oynarken CRT’de oynamak çok daha iyi ve aslına daha yakın. Emülasyonla oynuyorsanız CRT emülasyon piksel shader’ını açabilirsiniz (CRT Royale iyi). Bu piksel sanatları, dönemin geliştiricileri ve sanatçıları tarafından CRT’nin renk karışımından ve tarama çizgilerinin doğal anti-aliasing etkisinden bilinçli olarak yararlanılarak yapılmıştı. Başta amaçlandığı şekilde görülmeye değer: https://i.redd.it/9fmozdvt6vya1.jpg

    • Gerçek retro donanımı seven biri olarak böyle bir kabin harika görünüyor. Saatlerce jeton basıp oynamak istetiyor.
      Bu yazı yüzünden CRT simülasyonu tavşan deliğine düştüm; gerçekten böyle bir şey var:
      https://github.com/blurbusters/crt-beam-simulator
    • Kurulumun hakkında daha fazla şey duymak isterim. Kaydettiğin bir blog falan varsa iyi olurdu.
    • Bulanık LCD hissini sevmiyorum. Sanki biri .ini dosyasını hack’leyip anti-aliasing’i sınırın 4 katına çıkarmış ve monitörün önüne sineklik koymuş gibi.
      CRT’den LCD’ye geçiş döneminde oyun oynuyordum; CRT grafiklerini daha çok tercih eden kimse yoktu.
      Asıl gerileme, oyunlar PC’den konsollara kayınca özel sunucuların ölmesiydi. Eskiden 10 ms gecikmeli sunucu seçerdik; şimdi 60–100 ms ve üstü bile kabul edilebilir görülüyor.
    • “Başta amaçlandığı şekilde görülmeli” iddiasına inanmak zor. CRT’de oyun oynayarak büyüdüm ama gerçek CRT’lerin keskinliği, rengi ve artefaktları birbirinden farklıydı; video çıkış/giriş yöntemlerine göre de çok değişiyordu.
      TV’ye mi bağladığınız, ucuz bir monitör mü yoksa pahalı bir monitör mü kullandığınız fark yaratıyordu; kesin söylenebilecek tek şey CRT’nin daha bulanık olduğuydu. Verilen karşılaştırma görselinde parlaklık tamamen farklı, bu da yanıltıcı. LCD/LED tarafı doğru gamma kullanmıyor gibi.
      Rastgele bir CRT kullanırsanız ten renginin yeşilimsiye dönme ihtimali de epey vardı ve CRT’nin renk artefaktları ciddi olabiliyordu. Emülatörde basamaklanmayı azaltmak için görüntüyü bulanıklaştırmayı anlıyorum; retro CRT efekti de eğlenceli bir süs ama “oyunun amaçladığı görünüm” iddiasını kabul etmek zor. 90’lar müziğini ucuz hoparlörlerle ve yol gürültüsü içinde dinlemenin “amaçlanan yöntem” olduğunu söylemeye benziyor. Bu sadece o dönemde mümkün olanın en iyisiydi.
    • Bence o benzer ama farklı bir görüntü.
      CRT ile büyüdüm ama CRT’de “daha iyi görünen” oyunlar çok azdı; genelde de titreme efekti yaratmak için interlace kullanan oyunlardı. Ayrıca light gun’lar zamanlama nedeniyle CRT gerektirir.
      Bunun dışında CRT, vinile benziyor. Daha iyi olduğuna dair türlü gerekçeler uyduranlar var ama gerçekte öyle değil.

  • Gerçekten ilginçti. Renk uzayı ve bunun alt piksellere nasıl uygulandığı hakkında çok şey öğrendim; videoyu izlediğime memnunum.
    Oynanış açısından tahtayı daha büyük yapmak ve yılanın her alt pikselden geçerken hızını düzeltmek gerekir gibi. Sağa-sola hareket ederken R’den G’ye gitmek, B’den R’ye gitmekten daha az yatay mesafe; dikey hareket ise yatay harekete kıyasla her adımda çok büyük.
    Konumun renk spektrumunun neresinde olduğuna göre her animasyon adımının hızını oranlayarak ayarlamak bunu oldukça kolay çözebilir; o zaman çok daha cilalı hisseder.

  • Harika. 1440p monitörde kafa bantlı büyüteç[1] kullanıp hızı 10 kat yavaşlatınca oynayabildim.
    Piksel yoğunluğu daha yüksekse gerçek mikroskop gerekir gibi.
    [1] https://www.amazon.com/ProsKit-MA-016-Personal-Headband-Magn...

  • QBasic Nibbles da ANSI kutu çizim karakterleriyle aynı şeyi yapıyordu.
    Dikey “hücrenin” yalnızca yarısını kullanan metin karakterleri vardı; ön plan/arka plan renklerini akıllıca birleştirerek metin modunda dikey çözünürlüğü iki katına çıkarabiliyordunuz.

  • Benim gibi aptalca gerçekten oynamaya çalışacaksanız, Snake speed değerinin ters çalıştığını bilmek iyi olur.

    • Hız, kare başına milisaniye.

  • Windows XP’de ClearType ayarlamanın keyfini hatırlayacak kadar yaşlı olan var mı?
    Düşük çözünürlüklü LCD’lerde daha yumuşak metin render etmek için harika bir geçici çözümdü.

    • Windows 10’da da hâlâ yapılabiliyor. Sadece artık pek eğlenceli değil.

  • Alt pikselleri görmenin en kolay yolu, ekranın üzerine bir su damlası koymak. Muhtemelen bu yöntemle yaklaşık 100 kat büyütme elde edersiniz :)

  • Yakınlaştırma/uzaklaştırmayla CSS piksellerini gerçek piksellerle hizalama kısmı için, sadece 0.25px gibi birimler kullanılsa olmaz mı diye düşünüyorum.
    Ya da JavaScript’te window.devicePixelRatio değerine bölerek dinamik şekilde ayarlanabilir gibi.