{"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\/cs\/beyond-the-pixels-the-science-of-crt-shaders-in-the-browser\/","title":{"rendered":"Za hranice pixel\u016f: V\u011bdeck\u00e9 poznatky o CRT shaderech v prohl\u00ed\u017ee\u010di"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Obsah<\/h2><nav><ul><li><a href=\"#the-lcd-problem-the-square-pixel-fallacy\">Probl\u00e9m s LCD: M\u00fdtus o \u201c\u010dtvercov\u00fdch pixelech\u201d<\/a><\/li><li><a href=\"#the-solution-glsl-shaders-in-the-html-5-canvas\">\u0158e\u0161en\u00ed: GLSL shadery v HTML5 Canvas<\/a><ul><li><a href=\"#1-the-scanline-overlay\">1. P\u0159ekryv skanov\u00fdch \u010dar<\/a><\/li><li><a href=\"#2-aperture-grille-and-shadow-mask-simulation\">2. Simulace m\u0159\u00ed\u017eky clony a st\u00ednov\u00e9 masky<\/a><\/li><li><a href=\"#3-curvature-and-corner-rounding\">3. Zak\u0159iven\u00ed a zaoblen\u00ed roh\u016f<\/a><\/li><\/ul><\/li><li><a href=\"#balancing-fidelity-and-performance\">Rovnov\u00e1ha mezi v\u011brnost\u00ed a v\u00fdkonem<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Kdy\u017e si spust\u00edte klasickou 8bitovou nebo 16bitovou hru na modern\u00edm 4K monitoru nebo na displeji smartphonu s OLED panelem s vysok\u00fdm rozli\u0161en\u00edm, n\u011bco v\u00e1m na tom \u201cnesed\u00ed\u201d. Barvy p\u016fsob\u00ed drsn\u011b, okraje jsou zubat\u00e9 a grafika vypad\u00e1 hrub\u0161\u00ed, ne\u017e si ji pamatujete. Nejde jen o h\u0159\u00ed\u010dku nostalgie \u2013 je to z\u00e1sadn\u00ed nesoulad hardwaru.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na adrese <strong>Rec0m88<\/strong>, nechceme jen, aby hry fungovaly; chceme, aby vypadaly tak, jak to zam\u00fd\u0161leli p\u016fvodn\u00ed v\u00fdtvarn\u00edci. Abychom toho dos\u00e1hli, integrovali jsme pokro\u010dil\u00e9 <strong>GLSL (OpenGL Shading Language)<\/strong> se dost\u00e1v\u00e1 do na\u0161\u00ed \u201cstrojovny\u201d, kde simuluje slo\u017eitou fyziku katodov\u00e9 trubice (CRT). Zde je technick\u00fd rozbor toho, jak vyu\u017e\u00edv\u00e1me v\u00fdpo\u010detn\u00ed v\u00fdkon GPU k p\u0159eklenut\u00ed propasti mezi rokem 1992 a rokem 2026.<\/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\">Probl\u00e9m s LCD: M\u00fdtus o \u201c\u010dtvercov\u00fdch pixelech\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Retro hry nikdy nem\u011bly b\u00fdt vn\u00edm\u00e1ny jako dokonal\u00e1 m\u0159\u00ed\u017eka ostr\u00fdch \u010dtverc\u016f. Na starom\u00f3dn\u00edm CRT monitoru nebyly \u201cpixely\u201d v\u016fbec \u010dtverce; \u0161lo o z\u00e1\u0159\u00edc\u00ed fosforov\u00e9 body zasa\u017een\u00e9 elektronov\u00fdm paprskem. To vytv\u00e1\u0159elo n\u011bkolik p\u0159irozen\u00fdch vizu\u00e1ln\u00edch efekt\u016f:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Skenovac\u00ed \u010d\u00e1ry:<\/strong> Tmav\u00e9 mezery mezi \u0159\u00e1dky v m\u00edstech, kde se elektronov\u00fd paprsek vracel zp\u011bt p\u0159es obrazovku.<\/li>\n\n\n\n<li><strong>Rozmaz\u00e1v\u00e1n\u00ed barev:<\/strong> \u010cerven\u00e9, zelen\u00e9 a modr\u00e9 fosfory by se m\u00edrn\u011b p\u0159ekr\u00fdvaly, \u010d\u00edm\u017e by vznikaly \u201cnov\u00e9\u201d barvy, kter\u00e9 v digit\u00e1ln\u00edm souboru neexistuj\u00ed.<\/li>\n\n\n\n<li><strong>Z\u00e1\u0159e:<\/strong> Oblasti s vysok\u00fdm jasem by \u201crozpl\u00fdvaly\u201d do okoln\u00edch tmav\u00fdch oblast\u00ed.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Kdy\u017e ty sam\u00e9 pixely zobraz\u00edte na modern\u00edm LCD displeji, ka\u017ed\u00fd pixel je ostr\u00fd, steriln\u00ed blok. D\u00edky tomu d\u00edlo p\u016fsob\u00ed \u201cnedokon\u010den\u011b\u201d, proto\u017ee p\u016fvodn\u00ed um\u011blci vyu\u017e\u00edvali p\u0159irozen\u00e9 rozost\u0159en\u00ed CRT k vytvo\u0159en\u00ed <strong>\u201ctriky v oblasti transparentnosti\u201d<\/strong> a prol\u00edn\u00e1n\u00ed barev.<\/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\">\u0158e\u0161en\u00ed: GLSL shadery v HTML5 Canvas<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Abychom tento probl\u00e9m vy\u0159e\u0161ili, na\u0161e modern\u00ed herna obraz pouze \u201cnerozta\u017e\u00ed\u201d, aby vyplnil celou obrazovku. Video v\u00fdstup ze hry proch\u00e1z\u00ed procesem n\u00e1sledn\u00e9ho zpracov\u00e1n\u00ed, p\u0159i kter\u00e9m se pou\u017e\u00edv\u00e1 <strong>WebGL 2.0<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>Shader<\/strong> je mal\u00fd program, kter\u00fd b\u011b\u017e\u00ed p\u0159\u00edmo na grafick\u00e9 kart\u011b (GPU). Nam\u00edsto toho, aby procesor (CPU) po\u010d\u00edtal ka\u017ed\u00fd pixel jeden po druh\u00e9m, grafick\u00e1 karta (GPU) vypo\u010d\u00edt\u00e1v\u00e1 tis\u00edce pixel\u016f sou\u010dasn\u011b pomoc\u00ed sou\u0159adnicov\u00e9 geometrie. V projektu Rec0m88 vyu\u017e\u00edv\u00e1me n\u011bkolik vrstev shader\u016f:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1-the-scanline-overlay\">1. P\u0159ekryv skanov\u00fdch \u010dar<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Vypo\u010d\u00edt\u00e1me svislou sou\u0159adnici ka\u017ed\u00e9ho pixelu. Pokud sou\u0159adnice le\u017e\u00ed na \u201csud\u00e9\u201d \u010d\u00e1\u0159e, pou\u017eijeme m\u00edrn\u00fd faktor ztmaven\u00ed. T\u00edm se obnov\u00ed vodorovn\u00e9 mezery, kter\u00e9 dod\u00e1valy retro hr\u00e1m jejich charakter a hloubku. Pouh\u00e1 \u010dern\u00e1 \u010d\u00e1ra je v\u0161ak p\u0159\u00edli\u0161 ostr\u00e1. Na\u0161e shadery pou\u017e\u00edvaj\u00ed <strong>Gaussovo rozost\u0159en\u00ed<\/strong> aby skenovac\u00ed \u010d\u00e1ry p\u016fsobily p\u0159irozen\u011b a nevypadaly jako m\u0159\u00ed\u017eka p\u0159es obrazovku.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"2-aperture-grille-and-shadow-mask-simulation\">2. Simulace m\u0159\u00ed\u017eky clony a st\u00ednov\u00e9 masky<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\u0160pi\u010dkov\u00e9 monitory \u201cTrinitron\u201d vyu\u017e\u00edvaly aperturn\u00ed m\u0159\u00ed\u017eku \u2013 jemn\u00e9 svisl\u00e9 dr\u00e1tky, kter\u00e9 odd\u011blovaly jednotliv\u00e9 fosforov\u00e9 body. Na\u0161e pokro\u010dil\u00e9 shadery tento efekt simuluj\u00ed pomoc\u00ed subpixelov\u00e9 masky. Pokud si p\u0159ibl\u00ed\u017e\u00edte hru Rec0m88 spu\u0161t\u011bnou s na\u0161\u00edm shaderem \u201cPro\u201d, uvid\u00edte mikroskopick\u00e9 \u010derven\u00e9, zelen\u00e9 a modr\u00e9 svisl\u00e9 pruhy, kter\u00e9 napodobuj\u00ed fyzickou strukturu \u0161pi\u010dkov\u00e9ho ark\u00e1dov\u00e9ho monitoru.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"3-curvature-and-corner-rounding\">3. Zak\u0159iven\u00ed a zaoblen\u00ed roh\u016f<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Sklo na star\u00e9 televizi nebylo ploch\u00e9, ale m\u011blo tvar vypoukl\u00e9 ba\u0148ky. N\u00e1\u0161 motor dok\u00e1\u017ee vyvinout <strong>sou\u0159adnicov\u00e1 osy osnovy<\/strong> kter\u00e1 jemn\u011b zaobluje okraje hern\u00edho okna. A\u010dkoli se to jev\u00ed jako \u010dist\u011b estetick\u00fd prvek, ve skute\u010dnosti to pom\u00e1h\u00e1 p\u0159i \u201csledov\u00e1n\u00ed pohybu o\u010d\u00ed\u201d b\u011bhem rychl\u00e9 hry, proto\u017ee udr\u017euje pozornost soust\u0159ed\u011bnou na m\u00edsto, kde je akce nejintenzivn\u011bj\u0161\u00ed.<\/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\">Rovnov\u00e1ha mezi v\u011brnost\u00ed a v\u00fdkonem<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nejv\u011bt\u0161\u00ed v\u00fdzvou p\u0159i spou\u0161t\u011bn\u00ed shader\u016f v prohl\u00ed\u017ee\u010di je <strong>v\u00fdkonnostn\u00ed ztr\u00e1ta<\/strong>. Slo\u017eit\u00fd shader, jako je \u201cCRT-Geom\u201d nebo \u201cCRT-Royale\u201d, vy\u017eaduje pro ka\u017ed\u00fd jednotliv\u00fd sn\u00edmek zna\u010dn\u00e9 mno\u017estv\u00ed v\u00fdpo\u010dt\u016f na GPU. Pokud v\u00fdpo\u010det shaderu trv\u00e1 d\u00e9le ne\u017e 2\u20133 milisekundy, ukrajuje to z \u201crozpo\u010dtu na sn\u00edmek\u201d 16,6 ms, kter\u00fd pot\u0159ebujeme pro j\u00e1dro emul\u00e1toru WebAssembly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">K vy\u0159e\u0161en\u00ed tohoto probl\u00e9mu pou\u017e\u00edv\u00e1 Rec0m88 <strong>Adaptivn\u00ed st\u00ednov\u00e1n\u00ed<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Optimalizov\u00e1no pro mobiln\u00ed za\u0159\u00edzen\u00ed:<\/strong> Pokud n\u00e1\u0161 engine detekuje mobiln\u00ed prohl\u00ed\u017ee\u010d, p\u0159epne se na \u201codleh\u010denou\u201d verzi shaderu, kter\u00e1 m\u00edsto fyzik\u00e1ln\u00edch v\u00fdpo\u010dt\u016f v re\u00e1ln\u00e9m \u010dase vyu\u017e\u00edv\u00e1 p\u0159edem vygenerovanou vyhled\u00e1vac\u00ed tabulku (LUT).<\/li>\n\n\n\n<li><strong>Desktop Ultra:<\/strong> U\u017eivatel\u016fm s dedikovan\u00fdmi grafick\u00fdmi kartami umo\u017e\u0148ujeme v\u00edcepr\u016fchodov\u00e9 st\u00ednov\u00e1n\u00ed, d\u00edky \u010demu\u017e lze vykreslit efekt \u201cbloom\u201d, fosforovou perzistenci (tzv. \u201estopu\u201c, kterou zanech\u00e1vaj\u00ed jasn\u00e9 objekty) a dokonce i odrazy ve skle.<\/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>Kdy\u017e spust\u00edte klasickou 8bitovou nebo 16bitovou hru na modern\u00edm 4K monitoru nebo na displeji smartphonu s OLED panelem s vysokou hustotou pixel\u016f, n\u011bco v\u00e1m na tom \u201cnesed\u00ed\u201d. Barvy p\u016fsob\u00ed drsn\u011b, okraje jsou zubat\u00e9 a grafika vypad\u00e1 hranat\u011bji, ne\u017e si ji pamatujete. Nejde jen o to, \u017ee v\u00e1m nostalgie hraje na nervy \u2013 je to z\u00e1sadn\u00ed nesoulad hardwaru. V Rec0m88 jsme\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\/cs\/wp-json\/wp\/v2\/posts\/5781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/comments?post=5781"}],"version-history":[{"count":0,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/posts\/5781\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/media\/5764"}],"wp:attachment":[{"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/media?parent=5781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/categories?post=5781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/tags?post=5781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}