Subpixel Snake [Video]

 (youtube.com)
2 Punkte von GN⁺ 2025-01-26 | 1 Kommentare | Auf WhatsApp teilen
  • Ein Snake-Spiel, das Subpixel innerhalb von Monitorpixeln als Spielfelder nutzt; es ist so klein, dass man zum richtigen Spielen ein Mikroskop braucht
  • Basierend auf einem bestehenden JavaScript Snake kombiniert es Farben je nach Spaltenposition mit mix-blend-mode: lighten, sodass mehrere Subpixel innerhalb desselben physischen Pixels gleichzeitig sichtbar werden
  • Für den korrekten Betrieb sind eine RGB-stripe-Subpixelstruktur sowie die Ausrichtung von CSS-Pixeln und physischen Pixeln nötig; auf dem iMac gelang das per Herauszoomen, auf dem iPad funktionierte es nicht
  • Unter dem Mikroskop zeigte sich, dass sRGB-Grün nicht nur das grüne Subpixel einschaltet, sondern auch Rot und Blau; als Ursache wurde der größere Farbraum moderner Displays identifiziert
  • Mit Lab color ließen sich auf dem iMac rote und grüne Subpixel trennen, doch da sich Pixelstrukturen von RGB stripe entfernen, ist die langfristige Kompatibilität gering

Subpixel als Spielbrett nutzen

  • Dieses Snake-Spiel verwendet nicht die normalen Pixel eines Monitors, sondern die roten, grünen und blauen Subpixel innerhalb eines Pixels als Spielfelder
  • Aus der Nähe betrachtet bestehen Bildschirm-Pixel aus mehreren Subpixeln; aus der Ferne nimmt das menschliche Auge diese Lichter gemischt als eine einzige Farbe wahr
  • Beim Fotografieren verschiedener Bildschirme mit einem zu Weihnachten erhaltenen Makroobjektiv zeigte sich, dass Displays unterschiedliche Subpixel-Formen haben
    • Chevron-Form
    • Stripe-Form
    • Diamond-Muster
  • Diese Unterschiede in der Anordnung werden als Subpixel-Geometrie bezeichnet; der iMac des Erstellers verwendet eine RGB-stripe-Struktur

Implementierung und per Mikroskop sichtbare Grenzen

  • Die grundlegende Umsetzung, ein vor 15 Jahren erstelltes JavaScript Snake für Subpixel anzupassen, war vergleichsweise einfach
    • Die Anzahl der Spielspalten wurde reduziert
    • Snake-Blöcke in bestimmten Spalten wurden in bestimmten Farben angezeigt
    • mix-blend-mode: lighten wurde angewendet, damit auch mehrere Blöcke innerhalb desselben Pixels sichtbar bleiben
  • Damit es tatsächlich funktioniert, mussten zwei Bedingungen erfüllt sein
    • Nutzer müssen einen Monitor mit RGB-stripe-Subpixelstruktur verwenden
    • Die CSS-Pixel des Browsers müssen an den physischen Pixeln ausgerichtet sein
  • Die Ausrichtung der CSS-Pixel ließ sich durch Herauszoomen erreichen, diese Methode funktionierte jedoch nur auf dem iMac und scheiterte auf dem iPad
  • Die Implementierung war schnell abgeschlossen, doch die Anzeige auf Subpixel-Ebene ließ sich nicht mit bloßem Auge überprüfen; daher wurde der echte Bildschirm mit einem günstig online gekauften Mikroskop fotografiert
  • Unter dem Mikroskop zeigte sich, dass bei der Anzeige von Grün nicht nur das grüne Subpixel eingeschaltet wurde, sondern mehrere Subpixel zusammen leuchteten
    • Zunächst wurde ein Bug vermutet, doch im Code gab es kein Problem
    • Beim Prüfen von reinem Grün zeigte sich, dass auf dem iMac neben Grün auch rote und blaue Subpixel eingeschaltet wurden
    • Auch auf dem Smartphone aktivierte Grün das rote Subpixel schwach
  • Auf Nachfrage beim Betreiber einer Seite zur Subpixel-Geometrie stellte sich heraus, dass die Ursache im Unterschied zwischen dem sRGB-Standard und dem Farbraum moderner Displays lag
    • sRGB entstand zu einer Zeit, als Displayleistung und Farbräume noch kleiner waren
    • Wenn auf modernen Displays nur das grüne Subpixel eingeschaltet wird, kann eine Farbe mit höherer Sättigung als sRGB-Grün entstehen
    • Um das gewünschte sRGB-Grün exakt darzustellen, muss Rot und je nach Fall auch Blau hinzugefügt werden
  • Als die RGB-Farbdefinition auf Lab color umgestellt wurde, ließ sich der größere Farbraum nutzen, um auf dem iMac rote und grüne Subpixel zu trennen
  • Allerdings entfernen sich Pixel-Geometrien zunehmend von RGB stripe, und künftige Subpixel könnten völlig anders angesteuert werden als heute; daher dürfte diese Methode schwer dauerhaft beizubehalten sein

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-01-26
Meinungen auf Hacker News

  • Durch den verlinkten Subpixel-Zoo-Artikel habe ich erfahren, dass PenTile immer noch enorm weit verbreitet ist.
    Der erste PenTile-Bildschirm, den ich benutzt habe, war der des Motorola Droid 4, und der war wirklich schlecht. Kleine Schrift war je nach Text- und Hintergrundfarbe schwer zu lesen, und weil die Abstände zwischen den Farben groß waren, sahen einfarbige rote/grüne/blaue Bereiche wie ein Schachbrett aus.
    Dieses Gefühl gab es schon, bevor mit der Verbreitung von VR der Begriff Screen-Door-Effekt geläufig wurde. Deshalb hat mich überrascht, dass PenTile immer noch verwendet wird; vermutlich ist es inzwischen besser geworden, die Subpixel-Abstände sind kleiner, oder höhere Auflösung und Pixeldichte kaschieren die Schwächen, die man beim Droid 4 sehen konnte.

    • Frühe PenTile-Displays hatten eine andere Anordnung: [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)
      Auf der horizontalen/vertikalen Achse war die Reihenfolge Blau, Grün, Rot, Grün, sodass ein rotes Subpixel so weit von den nächsten entfernt war wie zwei grüne und ein blaues Subpixel.
      Moderne PenTile-Displays verwenden meist eine Dreiecks-Anordnung: https://static1.xdaimages.com/wordpress/wp-content/uploads/w...
      Ich bin kein Experte für Textrendering, aber mit dieser Dreiecks-Anordnung scheint man RGB-Subpixel-Kombinationen deutlich näher zusammenbringen zu können als mit einer linearen Anordnung. Außerdem hatte das Droid 4 eine niedrige Auflösung. Apple ging 2010 auf 330 ppi, während das Droid 4 2012 bei 275 ppi lag; selbst für die damalige Zeit war das eher niedrig, und PenTile dürfte es noch schlimmer gemacht haben, weil ein Drittel der Subpixel wegfiel.
      Heutige Galaxy-S25-Geräte haben 416 ppi, das iPhone 16 460 ppi, also viel mehr Pixel. Die Pixeldichte dürfte den größten Einfluss haben, aber die Dreiecks-Anordnung moderner Displays hilft vermutlich ebenfalls.
    • Genau daran liegt es. Die Auflösung des Droid 4 war niedrig genug, dass die Subpixel-Anordnung sichtbar war; aktuelle Displays haben eine so hohe Dichte, dass man die Subpixel gar nicht mehr sieht.

  • Dass sich die Schlange merkwürdig bewegt, liegt daran, dass Subpixel nicht quadratisch sind.
    Damit es auf einem realen Bildschirm für den Nutzer in jede Richtung gleich schnell aussieht, sollte die horizontale Bewegungsgeschwindigkeit relativ zur vertikalen, gemessen in Subpixeln, höher sein.

  • Als jemand, der wegen seiner Fixierung auf Arcade-Retro-Games ein hochwertiges Emulations-Cabinet mit einem 27-Zoll-Quadsync-Analog-RGB-CRT selbst gebaut hat, fand ich dieses Video großartig.
    In dem Moment, in dem er erklärte, dass er auf das Problem mit den grünen Pixeln gestoßen ist, wusste ich sofort, dass ich etwas Interessantes lernen würde. Subpixel-Strukturen, Phosphor-Farben und Ähnliches sind ein faszinierender Kaninchenbau, je tiefer man gräbt, und sie sind auch heute bei Displays wie OLED und QLED weiterhin sehr relevant.
    Wenn man klassische Arcade- oder Konsolen-Retro-Games aus den 80ern und 90ern spielt, ist ein CRT deutlich besser und näher am Original. Wenn man per Emulation spielt, sollte man CRT-Emulations-Pixel-Shader aktivieren (CRT Royale ist gut). Diese Pixel-Art wurde von den damaligen Entwicklern und Künstlern bewusst so gestaltet, dass sie die Farbmischung und das natürliche Anti-Aliasing der Scanlines eines CRT ausnutzt. Es lohnt sich, sie so zu sehen, wie sie ursprünglich gedacht war: https://i.redd.it/9fmozdvt6vya1.jpg

    • Als jemand, der echte Retro-Hardware mag, klingt so ein Cabinet großartig. Da bekommt man Lust, stundenlang haufenweise Münzen einzuwerfen und zu spielen.
      Wegen dieses Beitrags bin ich in den CRT-Simulations-Kaninchenbau geraten, und so etwas gibt es tatsächlich:
      https://github.com/blurbusters/crt-beam-simulator
    • Ich würde gern mehr über das Setup hören. Schön wäre, wenn es dazu irgendwo einen Blog gäbe.
    • Dieses verwaschene LCD-Gefühl mag ich nicht. Es wirkt, als hätte jemand die .ini gehackt, Anti-Aliasing viermal über das Limit gedreht und ein Fliegengitter vor den Monitor gestellt.
      Ich habe in der Zeit gespielt, als der Übergang von CRT zu LCD passierte, und niemand bevorzugte die Grafik auf CRTs.
      Der echte Rückschritt kam, als Spiele vom PC auf Konsolen wanderten und dedizierte Server starben. Früher wählte man Server mit 10 ms Latenz aus, heute gelten 60 bis über 100 ms als akzeptabel.
    • Die Behauptung, man müsse es „so sehen, wie es ursprünglich gedacht war“, kann ich schwer glauben. Ich bin mit Spielen auf CRTs aufgewachsen, aber echte CRTs unterschieden sich stark bei Schärfe, Farben und Artefakten, und auch die Art der Videoausgabe/-eingabe machte enorme Unterschiede.
      Es hing davon ab, ob man es an einen Fernseher, einen billigen Monitor oder einen teuren Monitor angeschlossen hatte, und das Einzige, was man sicher sagen kann, ist, dass CRTs unschärfer waren. Das gezeigte Vergleichsbild ist irreführend, weil die Helligkeit völlig unterschiedlich ist. Die LCD/LED-Seite scheint kein korrektes Gamma zu verwenden.
      Bei irgendeinem beliebigen CRT konnte es durchaus passieren, dass Hauttöne grünlich wurden, und Farb-Artefakte von CRTs konnten gravierend sein. Ich verstehe, wenn man in einem Emulator das Bild weichzeichnet, um Treppeneffekte zu reduzieren, und Retro-CRT-Effekte sind als dekoratives Extra unterhaltsam, aber die Behauptung, das sei „die vom Spiel beabsichtigte Darstellung“, kann ich nicht akzeptieren. Das ist ähnlich, als würde man sagen, Musik aus den 90ern müsse man über billige Lautsprecher und mit Straßenlärm hören, damit sie „wie beabsichtigt“ klingt. Es war einfach das Beste, was damals möglich war.
    • Das scheinen ähnliche, aber unterschiedliche Bilder zu sein.
      Ich bin mit CRTs aufgewachsen, aber es gab nur sehr wenige Spiele, die auf CRTs „besser aussahen“; meistens waren das Spiele, die Interlacing nutzten, um Flimmereffekte zu erzeugen. Außerdem brauchen Lightguns wegen des Timings einen CRT.
      Abgesehen davon sind CRTs wie Vinyl. Manche Leute erfinden alle möglichen Gründe, warum es besser sei, aber in Wirklichkeit stimmt das nicht.

  • Wirklich interessant. Ich habe viel über Farbräume und darüber gelernt, wie sie auf Subpixel angewendet werden; es hat sich gelohnt, das Video anzusehen.
    Aus Gameplay-Sicht müsste man das Board wohl größer machen und die Geschwindigkeit der Schlange korrigieren, wenn sie die einzelnen Subpixel passiert. Bei einer Links-rechts-Bewegung ist der Weg von R nach G horizontal kürzer als von B nach R, und vertikale Bewegung hat im Vergleich zur horizontalen sehr große Schritte.
    Je nachdem, wo sich die Position im Farbspektrum befindet, könnte man die Geschwindigkeit jedes Animationsschritts proportional anpassen; das sollte sich ziemlich leicht lösen lassen und würde sich dann deutlich geschmeidiger anfühlen.

  • Cool. Auf einem 1440p-Monitor konnte ich es mit einer Kopfbandlupe[1] spielen, nachdem ich die Geschwindigkeit um den Faktor 10 reduziert hatte.
    Bei höherer Pixeldichte bräuchte man vermutlich ein echtes Mikroskop.
    [1] https://www.amazon.com/ProsKit-MA-016-Personal-Headband-Magn...

  • QBasic Nibbles hat dasselbe mit ANSI-Boxdrawing-Zeichen gemacht.
    Es gab Textzeichen, die nur die Hälfte einer vertikalen „Zelle“ belegten, und durch geschicktes Kombinieren von Vorder- und Hintergrundfarben konnte man im Textmodus die vertikale Auflösung verdoppeln.

  • Falls jemand so dumm ist wie ich und tatsächlich versucht, es zu spielen: Es ist gut zu wissen, dass der Wert Snake speed umgekehrt funktioniert.

    • Die Geschwindigkeit ist Millisekunden pro Frame.

  • Ist noch jemand alt genug, um sich an den Spaß zu erinnern, unter Windows XP ClearType einzustellen?
    Das war ein hervorragender Workaround, um auf niedrig auflösenden LCDs weicheren Text zu rendern.

    • Unter Windows 10 kann man das immer noch tun. Es macht nur nicht mehr besonders viel Spaß.

  • Die einfachste Methode, Subpixel zu sehen, ist, einen Wassertropfen auf das Display zu setzen. Damit bekommt man vermutlich ungefähr eine 100-fache Vergrößerung :)

  • Bei dem Teil, in dem Zoom verwendet wird, um CSS-Pixel an echte Pixel anzupassen, frage ich mich, ob man nicht einfach Einheiten wie 0.25px verwenden könnte.
    Oder man könnte es in JavaScript dynamisch anpassen, indem man durch window.devicePixelRatio teilt.