Subpixel Snake [Video]

 (youtube.com)
2 poin oleh GN⁺ 2025-01-26 | 1 komentar | Bagikan ke WhatsApp
  • Gim Snake yang memakai subpiksel di dalam piksel monitor sebagai petak permainan; ukurannya terlalu kecil sehingga perlu mikroskop agar bisa dimainkan dengan benar
  • Berbasis JavaScript Snake yang sudah ada, menggabungkan warna berdasarkan posisi kolom dengan mix-blend-mode: lighten agar beberapa subpiksel dalam piksel fisik yang sama dapat terlihat bersamaan
  • Agar berjalan normal, dibutuhkan struktur subpiksel RGB stripe serta penyelarasan piksel CSS dan piksel fisik; di iMac ini disesuaikan dengan zoom out, tetapi tidak berhasil di iPad
  • Saat diperiksa dengan mikroskop, hijau sRGB ternyata tidak hanya menyalakan subpiksel hijau, tetapi juga merah dan biru; penyebabnya adalah gamut warna yang lebih luas pada display modern
  • Dengan memakai Lab color, subpiksel merah dan hijau dapat dipisahkan di iMac, tetapi kompatibilitas jangka panjangnya lemah karena struktur piksel makin menjauh dari RGB stripe

Menggunakan subpiksel sebagai papan permainan

  • Gim Snake ini tidak memakai piksel biasa pada monitor, melainkan subpiksel merah, hijau, dan biru di dalam piksel sebagai petak permainan
  • Jika dilihat dari dekat, piksel layar tersusun dari beberapa subpiksel; dari jauh, mata manusia melihat cahaya-cahaya ini bercampur menjadi satu warna
  • Saat memotret berbagai layar dengan lensa makro yang diterima saat Natal, terlihat bahwa setiap display memiliki bentuk subpiksel yang berbeda
    • Bentuk chevron
    • Bentuk stripe
    • Pola diamond
  • Perbedaan susunan seperti ini disebut geometri subpiksel, dan iMac milik pembuatnya menggunakan struktur RGB stripe

Cara implementasi dan batasan yang terungkap lewat mikroskop

  • Implementasi dasar untuk mengubah JavaScript Snake yang dibuat 15 tahun lalu agar memakai subpiksel relatif sederhana
    • Mengurangi jumlah kolom permainan
    • Membuat blok Snake pada kolom tertentu ditampilkan dengan warna tertentu
    • Menerapkan mix-blend-mode: lighten agar beberapa blok dalam piksel yang sama tetap terlihat semuanya
  • Agar benar-benar berfungsi, dua kondisi harus terpenuhi
    • Pengguna harus memakai monitor dengan struktur subpiksel RGB stripe
    • Piksel CSS di browser harus sejajar dengan piksel fisik
  • Penyelarasan piksel CSS dapat dicapai dengan zoom out, tetapi cara ini hanya bekerja di iMac dan gagal di iPad
  • Implementasinya selesai dengan cepat, tetapi tampilan pada level subpiksel tidak bisa diverifikasi dengan mata telanjang, sehingga layar asli difoto menggunakan mikroskop murah yang dibeli secara online
  • Dengan mikroskop, terlihat bahwa saat menampilkan warna hijau, bukan hanya subpiksel hijau yang menyala, melainkan beberapa subpiksel ikut menyala
    • Awalnya diduga sebagai bug, tetapi tidak ada masalah pada kode
    • Saat memeriksa hijau polos, di iMac bukan hanya subpiksel hijau, tetapi juga merah dan biru ikut menyala
    • Di ponsel pun, warna hijau menyalakan subpiksel merah secara lemah
  • Setelah bertanya kepada pengelola halaman geometri subpiksel, penyebabnya adalah perbedaan antara standar sRGB dan gamut warna display modern
    • sRGB dibuat pada masa ketika kemampuan layar dan gamut warna masih lebih sempit
    • Pada layar modern, jika hanya subpiksel hijau yang dinyalakan, warna yang dihasilkan bisa lebih jenuh daripada hijau sRGB
    • Untuk menampilkan hijau sRGB yang diinginkan secara akurat, merah, dan dalam beberapa kasus biru, juga perlu ditambahkan
  • Setelah definisi warna RGB diubah menjadi Lab color, ruang warna yang lebih besar dapat dimanfaatkan sehingga subpiksel merah dan hijau bisa dipisahkan di iMac
  • Namun, karena geometri piksel makin menjauh dari RGB stripe dan subpiksel di masa depan bisa menyala dengan cara yang sepenuhnya berbeda dari sekarang, pendekatan ini sulit dipertahankan dalam jangka panjang

Bacaan terkait

1 komentar

 
GN⁺ 2025-01-26
Opini Hacker News

  • Setelah membaca tulisan Subpixel Zoo yang ditautkan, saya baru tahu bahwa PenTile masih sangat banyak digunakan
    Layar PenTile pertama yang saya pakai adalah Motorola Droid 4, dan itu benar-benar buruk. Teks kecil sulit dibaca tergantung warna teks dan latarnya, dan karena jarak antarna warna besar, area warna polos merah/hijau/biru terlihat seperti papan catur
    Bahkan sebelum VR populer dan istilah screen door effect jadi umum, rasanya sudah seperti itu. Jadi saya terkejut PenTile masih dipakai; mungkin sudah lebih baik, atau jarak antarsubpiksel mengecil, atau resolusi dan kerapatan piksel yang lebih tinggi menutupi kelemahan yang dulu terlihat di Droid 4

    • Display PenTile awal punya susunan berbeda: [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)
      Di sumbu horizontal/vertikal urutannya biru, hijau, merah, hijau, sehingga satu subpiksel merah berjarak sejauh dua hijau dan satu biru
      Display PenTile modern biasanya memakai susunan segitiga: https://static1.xdaimages.com/wordpress/wp-content/uploads/w...
      Saya bukan ahli rendering teks, tetapi dengan susunan segitiga ini kombinasi subpiksel RGB tampaknya bisa dibuat jauh lebih rapat dibanding susunan linear. Selain itu, resolusi Droid 4 juga rendah. Apple sudah mencapai 330ppi pada 2010, sedangkan Droid 4 pada 2012 hanya 275ppi, jadi bahkan untuk zamannya pun tergolong rendah, dan PenTile kemungkinan memperburuknya dengan mengurangi sepertiga subpiksel
      Galaxy S25 sekarang 416ppi, iPhone 16 460ppi, jadi jumlah pikselnya jauh lebih banyak. Kerapatan piksel mungkin punya pengaruh terbesar, tetapi susunan segitiga pada display modern juga tampaknya membantu
    • Tepat karena itu. Resolusi Droid 4 cukup rendah sampai susunan subpiksel terlihat oleh mata, sedangkan display terbaru punya kerapatan tinggi sehingga subpiksel sama sekali tidak terlihat

  • Ular itu bergerak aneh karena subpikselnya bukan persegi
    Agar di layar nyata pengguna melihatnya bergerak dengan kecepatan yang sama ke arah mana pun, sebaiknya kecepatan gerak horizontal relatif terhadap vertikal dibuat lebih tinggi dalam satuan subpiksel

  • Sebagai orang yang terobsesi dengan game retro arcade dan membuat sendiri kabinet emulasi kelas atas berisi CRT analog RGB quad-sync 27 inci, saya suka video ini
    Begitu ia menjelaskan bahwa ia menemui masalah piksel hijau, saya langsung merasa akan belajar sesuatu yang menarik. Struktur subpiksel, kromatisitas fosfor, dan hal-hal semacam itu adalah rabbit hole yang makin digali makin seru, dan masih sangat relevan untuk display masa kini seperti OLED dan QLED
    Saat memainkan game retro arcade klasik atau konsol era 80–90-an, memainkannya di CRT jauh lebih baik dan lebih dekat ke aslinya. Kalau lewat emulasi, aktifkan shader piksel emulasi CRT (CRT Royale bagus). Pixel art ini dibuat oleh developer dan artist waktu itu dengan sengaja memanfaatkan pencampuran warna CRT dan anti-aliasing alami dari scanline. Layak dilihat dengan cara yang memang dimaksudkan: https://i.redd.it/9fmozdvt6vya1.jpg

    • Sebagai penggemar hardware retro sungguhan, kabinet seperti itu terdengar keren. Rasanya ingin memasukkan banyak koin dan bermain selama berjam-jam
      Gara-gara tulisan ini saya masuk ke rabbit hole simulasi CRT, dan ternyata memang ada yang seperti ini
      https://github.com/blurbusters/crt-beam-simulator
    • Saya ingin mendengar lebih banyak tentang setup-nya. Semoga ada blog atau catatan yang pernah ditulis
    • Saya kurang suka tampilan LCD yang buram. Rasanya seperti ada yang mengutak-atik .ini untuk menaikkan anti-aliasing 4 kali di atas batas lalu menaruh kasa nyamuk di depan monitor
      Saya bermain game pada masa transisi dari CRT ke LCD, dan tidak ada yang lebih menyukai grafis CRT
      Penurunan yang sebenarnya adalah ketika game berpindah dari PC ke konsol dan dedicated server mati. Dulu kita memilih server dengan latensi 10ms, sekarang 60–100ms atau lebih pun dianggap oke
    • Klaim bahwa “harus dilihat seperti yang dimaksudkan aslinya” sulit dipercaya. Saya tumbuh bermain game di CRT, tetapi CRT sungguhan sangat bervariasi dalam ketajaman, warna, dan artefak, dan juga sangat bergantung pada metode output/input video
      Hasilnya berbeda tergantung apakah disambungkan ke TV, monitor murah, atau monitor mahal, dan satu-satunya hal yang bisa saya katakan pasti adalah CRT lebih buram. Gambar perbandingan yang diberikan menyesatkan karena tingkat kecerahannya sama sekali berbeda. Sisi LCD/LED tampaknya tidak memakai gamma yang benar
      Jika memakai CRT sembarang, warna kulit cukup mungkin berubah kehijauan, dan artefak warna CRT bisa parah. Saya paham memburamkan gambar di emulator untuk mengurangi jaggies, dan efek CRT retro juga dekorasi yang menyenangkan, tetapi klaim bahwa itulah “tampilan yang dimaksudkan game” sulit saya terima. Itu mirip mengatakan musik tahun 90-an harus didengarkan lewat speaker murah di tengah bising jalan agar “sesuai maksudnya”. Itu hanya yang terbaik yang memungkinkan pada masa itu
    • Sepertinya itu gambar yang mirip tetapi berbeda
      Saya tumbuh bersama CRT, tetapi sangat sedikit game yang “terlihat lebih bagus” di CRT; umumnya hanya game yang memakai interlace untuk membuat efek kedip. Selain itu, light gun memang membutuhkan CRT karena timing
      Di luar itu, CRT mirip vinil. Ada orang yang mengarang berbagai alasan bahwa itu lebih baik, padahal sebenarnya tidak

  • Benar-benar menarik. Saya banyak belajar tentang ruang warna dan bagaimana itu diterapkan pada subpiksel, dan senang sudah menonton videonya
    Dari sisi gameplay, sepertinya papan perlu dibuat lebih besar, dan kecepatan ular perlu dikoreksi saat melewati tiap subpiksel. Saat bergerak kiri-kanan, perpindahan dari R ke G lebih kecil secara horizontal dibanding dari B ke R, dan perpindahan vertikal memiliki langkah yang sangat besar dibanding horizontal
    Kalau kecepatan tiap tahap animasi disesuaikan secara proporsional berdasarkan posisi di spektrum warna, rasanya itu bisa diselesaikan cukup mudah dan akan terasa jauh lebih halus

  • Keren. Di monitor 1440p, dengan memakai headband magnifier[1] dan memperlambat kecepatan 10 kali, saya bisa memainkannya
    Kalau kerapatan piksel lebih tinggi, sepertinya perlu mikroskop sungguhan
    [1] https://www.amazon.com/ProsKit-MA-016-Personal-Headband-Magn...

  • QBasic Nibbles juga melakukan hal yang sama dengan karakter ANSI box-drawing
    Ada karakter teks yang hanya memakai setengah “sel” vertikal, dan dengan kombinasi cerdas warna foreground/background, resolusi vertikal di mode teks bisa digandakan

  • Kalau Anda seperti saya dan dengan bodohnya benar-benar mencoba memainkannya, perlu tahu bahwa nilai Snake speed bekerja terbalik

    • Kecepatan adalah milidetik per frame

  • Ada yang cukup tua untuk mengingat serunya mengatur ClearType di Windows XP?
    Itu workaround yang bagus untuk merender teks lebih halus di LCD beresolusi rendah

    • Masih bisa dilakukan di Windows 10. Hanya saja sekarang tidak terlalu menyenangkan

  • Cara termudah melihat subpiksel adalah menaruh satu tetes air di atas display. Mungkin dengan cara ini pembesarannya sekitar 100x :)

  • Untuk bagian memperbesar/memperkecil agar piksel CSS sejajar dengan piksel fisik, saya rasa cukup memakai unit seperti 0.25px
    Atau bisa juga disesuaikan secara dinamis di JavaScript dengan membaginya menggunakan window.devicePixelRatio