{"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\/nl\/beyond-the-pixels-the-science-of-crt-shaders-in-the-browser\/","title":{"rendered":"Voorbij de pixels: De wetenschap van CRT Shaders in de browser"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Inhoudsopgave<\/h2><nav><ul><li><a href=\"#the-lcd-problem-the-square-pixel-fallacy\">Het LCD-probleem: de misvatting van de \u201cvierkante pixel\u201d<\/a><\/li><li><a href=\"#the-solution-glsl-shaders-in-the-html-5-canvas\">De oplossing: GLSL-shaders in het HTML5-canvas<\/a><ul><li><a href=\"#1-the-scanline-overlay\">1. De scanline-overlay<\/a><\/li><li><a href=\"#2-aperture-grille-and-shadow-mask-simulation\">2. Simulatie van diafragmarooster en schaduwmasker<\/a><\/li><li><a href=\"#3-curvature-and-corner-rounding\">3. Kromming en afronding van hoeken<\/a><\/li><\/ul><\/li><li><a href=\"#balancing-fidelity-and-performance\">Een evenwicht vinden tussen betrouwbaarheid en prestaties<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Als je een klassiek 8-bit- of 16-bit-spel opent op een moderne 4K-monitor of het OLED-scherm van een smartphone met hoge resolutie, voelt er iets \u201cniet helemaal goed\u201d. De kleuren zien er hard uit, de randen zijn gekarteld en de grafische weergave lijkt hoekiger dan je je herinnert. Dit is niet alleen nostalgie die je voor de gek houdt \u2013 het is een fundamentele mismatch tussen de hardware.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Op <strong>Rec0m88<\/strong>, we willen niet alleen dat de games werken; we willen ook dat ze eruitzien zoals de oorspronkelijke ontwerpers het bedoeld hebben. Om dit te bereiken, hebben we geavanceerde <strong>GLSL (OpenGL Shading Language)<\/strong> wordt naar onze \u201cmachinekamer\u201d gestuurd om de complexe fysica van een kathodestraalbuis (CRT) te simuleren. Hier volgt een technische uitleg van hoe we GPU-rekenkracht gebruiken om de kloof tussen 1992 en 2026 te overbruggen.<\/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\">Het LCD-probleem: de misvatting van de \u201cvierkante pixel\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Retrogames waren nooit bedoeld om te worden gezien als een perfect raster van scherpe vierkantjes. Op een ouderwetse CRT-monitor waren de \u201cpixels\u201d helemaal geen vierkantjes; het waren gloeiende fosfordeeltjes die door een elektronenstraal werden geraakt. Dit zorgde voor verschillende natuurlijke visuele effecten:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Scanlijnen:<\/strong> Donkere openingen tussen de lijnen op de plekken waar de elektronenstraal weer over het scherm terugging.<\/li>\n\n\n\n<li><strong>Kleurdoorbloeding:<\/strong> De rode, groene en blauwe fosforen zouden elkaar enigszins overlappen, waardoor \u201cnieuwe\u201d kleuren ontstaan die niet in het digitale bestand voorkomen.<\/li>\n\n\n\n<li><strong>The Glow:<\/strong> Gebieden met een hoge helderheid zouden in de omliggende donkere gebieden \u201cuitlopen\u201d.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Als je diezelfde pixels op een modern LCD-scherm weergeeft, is elke pixel een blok met scherpe randen en een steriele uitstraling. Hierdoor ziet de kunst er \u201conaf\u201d uit, omdat de oorspronkelijke kunstenaars de natuurlijke onscherpte van de CRT gebruikten om <strong>\u201ctrucs om de zaken onduidelijk te maken\u201d<\/strong> en kleurmenging.<\/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\">De oplossing: GLSL-shaders in het HTML5-canvas<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Om dit te verhelpen, \u201crek\u201d onze moderne arcade de afbeelding niet zomaar uit om je scherm te vullen. We leiden de video-uitvoer van het spel door een nabewerkingspijplijn met behulp van <strong>WebGL 2.0<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>Shader<\/strong> is een klein programma dat rechtstreeks op je grafische kaart (GPU) draait. In plaats van dat de CPU elke pixel \u00e9\u00e9n voor \u00e9\u00e9n berekent, berekent de GPU duizenden pixels tegelijk met behulp van co\u00f6rdinatenmeetkunde. Op Rec0m88 maken we gebruik van verschillende lagen shaders:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1-the-scanline-overlay\">1. De scanline-overlay<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">We berekenen de verticale co\u00f6rdinaat van elke pixel. Als de co\u00f6rdinaat op een \u201ceven\u201d lijn valt, passen we een lichte verduisteringsfactor toe. Hierdoor worden de horizontale openingen nagebootst die retro-games hun textuur en diepte gaven. Een simpele zwarte lijn is echter te hard. Onze shaders maken gebruik van <strong>Gaussiaanse vervaging<\/strong> om ervoor te zorgen dat de scanlijnen er natuurlijk uitzien, en niet als een kooi over het scherm.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"2-aperture-grille-and-shadow-mask-simulation\">2. Simulatie van diafragmarooster en schaduwmasker<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Bij hoogwaardige \u201cTrinitron\u201d-monitoren werd gebruikgemaakt van een apertuuroppervlak: fijne verticale draadjes die de fosfordeeltjes van elkaar scheidden. Onze geavanceerde shaders simuleren dit door een subpixelmasker toe te passen. Als je inzoomt op een Rec0m88-game waarop onze \u201cPro\u201d-shader draait, zie je de microscopisch kleine rode, groene en blauwe verticale streepjes die de fysieke structuur van een hoogwaardige arcademonitor nabootsen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"3-curvature-and-corner-rounding\">3. Kromming en afronding van hoeken<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Het glas van een oude tv was niet vlak; het was een bolvormige glazen kap. Onze motor kan een <strong>co\u00f6rdinaat-ketting<\/strong> waardoor de randen van het spelvenster subtiel worden afgerond. Hoewel dit puur esthetisch lijkt, helpt het in feite bij het \u201cvolgen van de blik\u201d tijdens snelle gameplay, omdat het de aandacht gecentreerd houdt op de plek waar de actie het meest intens is.<\/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\">Een evenwicht vinden tussen betrouwbaarheid en prestaties<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">De grootste uitdaging bij het uitvoeren van shaders in een browser is <strong>prestatie-overhead<\/strong>. Een complexe shader zoals \u201cCRT-Geom\u201d of \u201cCRT-Royale\u201d vereist voor elk afzonderlijk frame een aanzienlijke hoeveelheid rekenwerk door de GPU. Als de shader meer dan 2-3 milliseconden nodig heeft om te berekenen, gaat dit ten koste van het \u201cframebudget\u201d van 16,6 ms dat we nodig hebben voor de WebAssembly-emulatorkern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Om dit op te lossen, maakt Rec0m88 gebruik van <strong>Adaptieve schaduwweergave<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Geoptimaliseerd voor mobiel:<\/strong> Als onze engine een mobiele browser detecteert, schakelt deze over naar een \u201clight\u201d-versie van de shader die gebruikmaakt van een vooraf berekende opzoektabel (LUT) in plaats van realtime fysica-berekeningen.<\/li>\n\n\n\n<li><strong>Desktop Ultra:<\/strong> Voor gebruikers met een aparte grafische kaart ondersteunen we multi-pass shading, waardoor bloomeffecten, fosforpersistentie (het \u201cspoor\u201d dat heldere objecten achterlaten) en zelfs glasreflecties mogelijk zijn.<\/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>Als je een klassieke 8-bit of 16-bit game laadt op een moderne 4K-monitor of een OLED-smartphonescherm met hoge dichtheid, voelt er iets niet goed. De kleuren zien er hard uit, de randen zijn gekarteld en de afbeeldingen lijken blokkeriger dan je je herinnert. Dit is niet alleen nostalgie die je voor de gek houdt, het is een fundamentele hardware mismatch. Bij Rec0m88...<\/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\/nl\/wp-json\/wp\/v2\/posts\/5781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/comments?post=5781"}],"version-history":[{"count":0,"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/posts\/5781\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/media\/5764"}],"wp:attachment":[{"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/media?parent=5781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/categories?post=5781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/tags?post=5781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}