Jenseits der Pixel: Die Wissenschaft der CRT-Shader im Browser

Wenn man ein klassisches 8-Bit- oder 16-Bit-Spiel auf einem modernen 4K-Monitor oder einem OLED-Smartphone-Bildschirm mit hoher Pixeldichte lädt, fühlt sich etwas “falsch” an. Die Farben wirken grell, die Kanten sind gezackt und die Grafik erscheint blockiger, als man sie in Erinnerung hat. Das ist nicht nur Nostalgie, die einem einen Streich spielt – es handelt sich um eine grundlegende Inkompatibilität der Hardware.

Bei Rec0m88, wir wollen nicht nur, dass die Spiele laufen, sondern auch, dass sie so aussehen, wie es die ursprünglichen Künstler beabsichtigt haben. Um dies zu erreichen, haben wir fortschrittliche GLSL (OpenGL Shading Language) wird in unseren “Maschinenraum” eingespeist, um die komplexen physikalischen Vorgänge einer Kathodenstrahlröhre (CRT) zu simulieren. Hier ist die technische Erklärung, wie wir mithilfe von GPU-Berechnungen die Lücke zwischen 1992 und 2026 schließen.

Das LCD-Problem: Der Irrtum der “quadratischen Pixel”

Retro-Spiele waren nie dafür gedacht, als perfektes Raster aus scharfen Quadraten wahrgenommen zu werden. Auf einem klassischen CRT-Monitor waren die “Pixel” gar keine Quadrate; es handelte sich vielmehr um leuchtende Phosphorpartikel, auf die ein Elektronenstrahl traf. Dadurch entstanden mehrere natürliche visuelle Effekte:

• Scanlinien: Dunkle Lücken zwischen den Zeilen, wo der Elektronenstrahl über den Bildschirm zurücklief.
• Farbausbluten: Die roten, grünen und blauen Leuchtstoffe würden sich leicht überlappen und so “neue” Farben erzeugen, die in der digitalen Datei nicht vorkommen.
• The Glow: Bereiche mit hoher Helligkeit würden in die umgebenden dunklen Bereiche “auslaufen”.

Wenn man dieselben Pixel auf einem modernen LCD-Bildschirm anzeigt, erscheint jedes Pixel als scharf umrissener, steriler Block. Dadurch wirkt das Bild “unvollendet”, da die ursprünglichen Künstler die natürliche Unschärfe der Röhrenbildschirme nutzten, um “Transparenztricks” und Farbmischung.

Die Lösung: GLSL-Shader im HTML5-Canvas

Um dieses Problem zu beheben, “streckt” unsere moderne Spielhalle das Bild nicht einfach, um Ihren Bildschirm auszufüllen. Wir leiten die Videoausgabe des Spiels durch eine Nachbearbeitungs-Pipeline unter Verwendung von WebGL 2.0.

A Shader ist ein kleines Programm, das direkt auf Ihrer Grafikkarte (GPU) läuft. Anstatt dass die CPU jedes Pixel einzeln berechnet, berechnet die GPU mithilfe der Koordinatengeometrie Tausende von Pixeln gleichzeitig. Bei Rec0m88 setzen wir mehrere Shader-Ebenen ein:

1. Die Scanline-Überlagerung

Wir berechnen die vertikale Koordinate jedes Pixels. Liegt die Koordinate auf einer “geraden” Linie, wenden wir einen leichten Abdunkelungsfaktor an. Dadurch werden die horizontalen Lücken nachgebildet, die Retro-Spielen ihren Charakter und ihre Tiefe verliehen haben. Eine einfache schwarze Linie wirkt jedoch zu hart. Unsere Shader verwenden Gaußsche Unschärfe damit die Scanlinien natürlich wirken und nicht wie ein Käfig über dem Bildschirm.

2. Simulation von Aperturgittern und Schattenmasken

Hochwertige “Trinitron”-Monitore verwendeten ein Apertur-Gitter – feine vertikale Drähte, die die Leuchtstoffe voneinander trennten. Unsere fortschrittlichen Shader simulieren dies durch die Anwendung einer Subpixel-Maske. Wenn Sie ein Rec0m88-Spiel, das mit unserem “Pro”-Shader läuft, vergrößern, sehen Sie die mikroskopisch kleinen roten, grünen und blauen vertikalen Streifen, die die physikalische Struktur eines High-End-Arcade-Monitors nachahmen.

3. Krümmung und Eckenabrundung

Das Glas eines alten Fernsehers war nicht flach, sondern gewölbt. Unser Motor kann eine Koordinaten-Kettfaden die die Ränder des Spielfensters dezent abrundet. Auch wenn dies rein ästhetisch erscheint, hilft es tatsächlich beim “Eye-Tracking” während rasanten Spielverläufen, da es den Fokus dort zentriert, wo die Action am intensivsten ist.

Das Gleichgewicht zwischen Treue und Leistung

Die größte Herausforderung bei der Ausführung von Shadern in einem Browser ist Leistungsaufwand. Ein komplexer Shader wie “CRT-Geom” oder “CRT-Royale” erfordert für jedes einzelne Bild eine beträchtliche Menge an GPU-Rechenleistung. Wenn die Berechnung des Shaders länger als 2–3 Millisekunden dauert, zehrt dies an dem “Frame-Budget” von 16,6 ms, das wir für den WebAssembly-Emulator-Kern benötigen.

Um dieses Problem zu lösen, verwendet Rec0m88 Adaptive Schattierung:

• Für Mobilgeräte optimiert: Wenn unsere Engine einen mobilen Browser erkennt, wechselt sie zu einer “Light”-Version des Shaders, die anstelle von Echtzeit-Physikberechnungen eine vorab berechnete Lookup-Tabelle (LUT) verwendet.
• Desktop Ultra: Für Nutzer mit dedizierten GPUs aktivieren wir Multi-Pass-Shading, wodurch Bloom-Effekte, Phosphor-Nachleuchten (die “Spur”, die helle Objekte hinterlassen) und sogar Glasreflexionen möglich werden.