{"id":5781,"date":"2026-01-31T11:00:46","date_gmt":"2026-01-31T18:00:46","guid":{"rendered":"https:\/\/rec0m88.com\/?p=5781"},"modified":"2026-02-02T10:57:31","modified_gmt":"2026-02-02T17:57:31","slug":"beyond-the-pixels-the-science-of-crt-shaders-in-the-browser","status":"publish","type":"post","link":"https:\/\/rec0m88.com\/de\/beyond-the-pixels-the-science-of-crt-shaders-in-the-browser\/","title":{"rendered":"Jenseits der Pixel: Die Wissenschaft der CRT-Shader im Browser"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Inhaltsverzeichnis<\/h2><nav><ul><li><a href=\"#the-lcd-problem-the-square-pixel-fallacy\">Das LCD-Problem: Der Irrtum der \u201cquadratischen Pixel\u201d<\/a><\/li><li><a href=\"#the-solution-glsl-shaders-in-the-html-5-canvas\">Die L\u00f6sung: GLSL-Shader im HTML5-Canvas<\/a><ul><li><a href=\"#1-the-scanline-overlay\">1. Die Scanline-\u00dcberlagerung<\/a><\/li><li><a href=\"#2-aperture-grille-and-shadow-mask-simulation\">2. Simulation von Aperturgittern und Schattenmasken<\/a><\/li><li><a href=\"#3-curvature-and-corner-rounding\">3. Kr\u00fcmmung und Eckenabrundung<\/a><\/li><\/ul><\/li><li><a href=\"#balancing-fidelity-and-performance\">Das Gleichgewicht zwischen Treue und Leistung<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn man ein klassisches 8-Bit- oder 16-Bit-Spiel auf einem modernen 4K-Monitor oder einem OLED-Smartphone-Bildschirm mit hoher Pixeldichte l\u00e4dt, f\u00fchlt sich etwas \u201cfalsch\u201d 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 \u2013 es handelt sich um eine grundlegende Inkompatibilit\u00e4t der Hardware.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei <strong>Rec0m88<\/strong>, wir wollen nicht nur, dass die Spiele laufen, sondern auch, dass sie so aussehen, wie es die urspr\u00fcnglichen K\u00fcnstler beabsichtigt haben. Um dies zu erreichen, haben wir fortschrittliche <strong>GLSL (OpenGL Shading Language)<\/strong> wird in unseren \u201cMaschinenraum\u201d eingespeist, um die komplexen physikalischen Vorg\u00e4nge einer Kathodenstrahlr\u00f6hre (CRT) zu simulieren. Hier ist die technische Erkl\u00e4rung, wie wir mithilfe von GPU-Berechnungen die L\u00fccke zwischen 1992 und 2026 schlie\u00dfen.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-lcd-problem-the-square-pixel-fallacy\">Das LCD-Problem: Der Irrtum der \u201cquadratischen Pixel\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Retro-Spiele waren nie daf\u00fcr gedacht, als perfektes Raster aus scharfen Quadraten wahrgenommen zu werden. Auf einem klassischen CRT-Monitor waren die \u201cPixel\u201d gar keine Quadrate; es handelte sich vielmehr um leuchtende Phosphorpartikel, auf die ein Elektronenstrahl traf. Dadurch entstanden mehrere nat\u00fcrliche visuelle Effekte:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Scanlinien:<\/strong> Dunkle L\u00fccken zwischen den Zeilen, wo der Elektronenstrahl \u00fcber den Bildschirm zur\u00fccklief.<\/li>\n\n\n\n<li><strong>Farbausbluten:<\/strong> Die roten, gr\u00fcnen und blauen Leuchtstoffe w\u00fcrden sich leicht \u00fcberlappen und so \u201cneue\u201d Farben erzeugen, die in der digitalen Datei nicht vorkommen.<\/li>\n\n\n\n<li><strong>The Glow:<\/strong> Bereiche mit hoher Helligkeit w\u00fcrden in die umgebenden dunklen Bereiche \u201causlaufen\u201d.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn man dieselben Pixel auf einem modernen LCD-Bildschirm anzeigt, erscheint jedes Pixel als scharf umrissener, steriler Block. Dadurch wirkt das Bild \u201cunvollendet\u201d, da die urspr\u00fcnglichen K\u00fcnstler die nat\u00fcrliche Unsch\u00e4rfe der R\u00f6hrenbildschirme nutzten, um <strong>\u201cTransparenztricks\u201d<\/strong> und Farbmischung.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-solution-glsl-shaders-in-the-html-5-canvas\">Die L\u00f6sung: GLSL-Shader im HTML5-Canvas<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Um dieses Problem zu beheben, \u201cstreckt\u201d unsere moderne Spielhalle das Bild nicht einfach, um Ihren Bildschirm auszuf\u00fcllen. Wir leiten die Videoausgabe des Spiels durch eine Nachbearbeitungs-Pipeline unter Verwendung von <strong>WebGL 2.0<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>Shader<\/strong> ist ein kleines Programm, das direkt auf Ihrer Grafikkarte (GPU) l\u00e4uft. 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:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1-the-scanline-overlay\">1. Die Scanline-\u00dcberlagerung<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Wir berechnen die vertikale Koordinate jedes Pixels. Liegt die Koordinate auf einer \u201cgeraden\u201d Linie, wenden wir einen leichten Abdunkelungsfaktor an. Dadurch werden die horizontalen L\u00fccken nachgebildet, die Retro-Spielen ihren Charakter und ihre Tiefe verliehen haben. Eine einfache schwarze Linie wirkt jedoch zu hart. Unsere Shader verwenden <strong>Gau\u00dfsche Unsch\u00e4rfe<\/strong> damit die Scanlinien nat\u00fcrlich wirken und nicht wie ein K\u00e4fig \u00fcber dem Bildschirm.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"2-aperture-grille-and-shadow-mask-simulation\">2. Simulation von Aperturgittern und Schattenmasken<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Hochwertige \u201cTrinitron\u201d-Monitore verwendeten ein Apertur-Gitter \u2013 feine vertikale Dr\u00e4hte, die die Leuchtstoffe voneinander trennten. Unsere fortschrittlichen Shader simulieren dies durch die Anwendung einer Subpixel-Maske. Wenn Sie ein Rec0m88-Spiel, das mit unserem \u201cPro\u201d-Shader l\u00e4uft, vergr\u00f6\u00dfern, sehen Sie die mikroskopisch kleinen roten, gr\u00fcnen und blauen vertikalen Streifen, die die physikalische Struktur eines High-End-Arcade-Monitors nachahmen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"3-curvature-and-corner-rounding\">3. Kr\u00fcmmung und Eckenabrundung<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Das Glas eines alten Fernsehers war nicht flach, sondern gew\u00f6lbt. Unser Motor kann eine <strong>Koordinaten-Kettfaden<\/strong> die die R\u00e4nder des Spielfensters dezent abrundet. Auch wenn dies rein \u00e4sthetisch erscheint, hilft es tats\u00e4chlich beim \u201cEye-Tracking\u201d w\u00e4hrend rasanten Spielverl\u00e4ufen, da es den Fokus dort zentriert, wo die Action am intensivsten ist.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"balancing-fidelity-and-performance\">Das Gleichgewicht zwischen Treue und Leistung<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Die gr\u00f6\u00dfte Herausforderung bei der Ausf\u00fchrung von Shadern in einem Browser ist <strong>Leistungsaufwand<\/strong>. Ein komplexer Shader wie \u201cCRT-Geom\u201d oder \u201cCRT-Royale\u201d erfordert f\u00fcr jedes einzelne Bild eine betr\u00e4chtliche Menge an GPU-Rechenleistung. Wenn die Berechnung des Shaders l\u00e4nger als 2\u20133 Millisekunden dauert, zehrt dies an dem \u201cFrame-Budget\u201d von 16,6 ms, das wir f\u00fcr den WebAssembly-Emulator-Kern ben\u00f6tigen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um dieses Problem zu l\u00f6sen, verwendet Rec0m88 <strong>Adaptive Schattierung<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>F\u00fcr Mobilger\u00e4te optimiert:<\/strong> Wenn unsere Engine einen mobilen Browser erkennt, wechselt sie zu einer \u201cLight\u201d-Version des Shaders, die anstelle von Echtzeit-Physikberechnungen eine vorab berechnete Lookup-Tabelle (LUT) verwendet.<\/li>\n\n\n\n<li><strong>Desktop Ultra:<\/strong> F\u00fcr Nutzer mit dedizierten GPUs aktivieren wir Multi-Pass-Shading, wodurch Bloom-Effekte, Phosphor-Nachleuchten (die \u201cSpur\u201d, die helle Objekte hinterlassen) und sogar Glasreflexionen m\u00f6glich werden.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Wenn man ein klassisches 8-Bit- oder 16-Bit-Spiel auf einem modernen 4K-Monitor oder einem OLED-Smartphone-Bildschirm mit hoher Pixeldichte l\u00e4dt, f\u00fchlt sich irgendetwas \u201cfalsch\u201d 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 \u2013 es handelt sich um eine grundlegende Inkompatibilit\u00e4t der Hardware. Bei Rec0m88 haben wir\u2026<\/p>","protected":false},"author":1,"featured_media":5764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpai_generated_summary":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[40],"tags":[],"class_list":["post-5781","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-meta"],"_links":{"self":[{"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/posts\/5781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/comments?post=5781"}],"version-history":[{"count":0,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/posts\/5781\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/media\/5764"}],"wp:attachment":[{"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/media?parent=5781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/categories?post=5781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/tags?post=5781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}