Za hranice pixelů: Vědecké poznatky o CRT shaderech v prohlížeči

Když si spustíte klasickou 8bitovou nebo 16bitovou hru na moderním 4K monitoru nebo na displeji smartphonu s OLED panelem s vysokým rozlišením, něco vám na tom “nesedí”. Barvy působí drsně, okraje jsou zubaté a grafika vypadá hrubší, než si ji pamatujete. Nejde jen o hříčku nostalgie – je to zásadní nesoulad hardwaru.

Na adrese Rec0m88, nechceme jen, aby hry fungovaly; chceme, aby vypadaly tak, jak to zamýšleli původní výtvarníci. Abychom toho dosáhli, integrovali jsme pokročilé GLSL (OpenGL Shading Language) se dostává do naší “strojovny”, kde simuluje složitou fyziku katodové trubice (CRT). Zde je technický rozbor toho, jak využíváme výpočetní výkon GPU k překlenutí propasti mezi rokem 1992 a rokem 2026.

Problém s LCD: Mýtus o “čtvercových pixelech”

Retro hry nikdy neměly být vnímány jako dokonalá mřížka ostrých čtverců. Na staromódním CRT monitoru nebyly “pixely” vůbec čtverce; šlo o zářící fosforové body zasažené elektronovým paprskem. To vytvářelo několik přirozených vizuálních efektů:

• Skenovací čáry: Tmavé mezery mezi řádky v místech, kde se elektronový paprsek vracel zpět přes obrazovku.
• Rozmazávání barev: Červené, zelené a modré fosfory by se mírně překrývaly, čímž by vznikaly “nové” barvy, které v digitálním souboru neexistují.
• Záře: Oblasti s vysokým jasem by “rozplývaly” do okolních tmavých oblastí.

Když ty samé pixely zobrazíte na moderním LCD displeji, každý pixel je ostrý, sterilní blok. Díky tomu dílo působí “nedokončeně”, protože původní umělci využívali přirozené rozostření CRT k vytvoření “triky v oblasti transparentnosti” a prolínání barev.

Řešení: GLSL shadery v HTML5 Canvas

Abychom tento problém vyřešili, naše moderní herna obraz pouze “neroztaží”, aby vyplnil celou obrazovku. Video výstup ze hry prochází procesem následného zpracování, při kterém se používá WebGL 2.0.

A Shader je malý program, který běží přímo na grafické kartě (GPU). Namísto toho, aby procesor (CPU) počítal každý pixel jeden po druhém, grafická karta (GPU) vypočítává tisíce pixelů současně pomocí souřadnicové geometrie. V projektu Rec0m88 využíváme několik vrstev shaderů:

1. Překryv skanových čar

Vypočítáme svislou souřadnici každého pixelu. Pokud souřadnice leží na “sudé” čáře, použijeme mírný faktor ztmavení. Tím se obnoví vodorovné mezery, které dodávaly retro hrám jejich charakter a hloubku. Pouhá černá čára je však příliš ostrá. Naše shadery používají Gaussovo rozostření aby skenovací čáry působily přirozeně a nevypadaly jako mřížka přes obrazovku.

2. Simulace mřížky clony a stínové masky

Špičkové monitory “Trinitron” využívaly aperturní mřížku – jemné svislé drátky, které oddělovaly jednotlivé fosforové body. Naše pokročilé shadery tento efekt simulují pomocí subpixelové masky. Pokud si přiblížíte hru Rec0m88 spuštěnou s naším shaderem “Pro”, uvidíte mikroskopické červené, zelené a modré svislé pruhy, které napodobují fyzickou strukturu špičkového arkádového monitoru.

3. Zakřivení a zaoblení rohů

Sklo na staré televizi nebylo ploché, ale mělo tvar vypouklé baňky. Náš motor dokáže vyvinout souřadnicová osy osnovy která jemně zaobluje okraje herního okna. Ačkoli se to jeví jako čistě estetický prvek, ve skutečnosti to pomáhá při “sledování pohybu očí” během rychlé hry, protože udržuje pozornost soustředěnou na místo, kde je akce nejintenzivnější.

Rovnováha mezi věrností a výkonem

Největší výzvou při spouštění shaderů v prohlížeči je výkonnostní ztráta. Složitý shader, jako je “CRT-Geom” nebo “CRT-Royale”, vyžaduje pro každý jednotlivý snímek značné množství výpočtů na GPU. Pokud výpočet shaderu trvá déle než 2–3 milisekundy, ukrajuje to z “rozpočtu na snímek” 16,6 ms, který potřebujeme pro jádro emulátoru WebAssembly.

K vyřešení tohoto problému používá Rec0m88 Adaptivní stínování:

• Optimalizováno pro mobilní zařízení: Pokud náš engine detekuje mobilní prohlížeč, přepne se na “odlehčenou” verzi shaderu, která místo fyzikálních výpočtů v reálném čase využívá předem vygenerovanou vyhledávací tabulku (LUT).
• Desktop Ultra: Uživatelům s dedikovanými grafickými kartami umožňujeme víceprůchodové stínování, díky čemuž lze vykreslit efekt “bloom”, fosforovou perzistenci (tzv. „stopu“, kterou zanechávají jasné objekty) a dokonce i odrazy ve skle.