Anti-aliasing (vyhlazování hran)

Příklady z praxe

1. 01

   Pixel art v canvasu

   Webová hra zvětšuje 16×16 pixelový sprite na velkou postavu v canvasu. Při zapnutém vyhlazování se pixely rozlijí do okolí a sprite ztratí retro styl. Vypnutí smoothingu zachová ostré bloky a výsledný obraz odpovídá pixel artu.

   const ctx = canvas.getContext('2d');
   ctx.imageSmoothingEnabled = false;
   ctx.drawImage(sprite, 0, 0, 160, 160);

2. 02

   Multisampling ve WebGL scéně

   WebGL vizualizace zobrazuje šikmé hrany 3D modelu proti světlému pozadí. Kontext požádá prohlížeč o antialiasing a na podporovaném zařízení se obrys modelu přestane výrazně schodovat. Aplikace přesto ověří atribut kontextu, protože konkrétní GPU nebo prohlížeč nemusí požadavek splnit.

   const gl = canvas.getContext('webgl2', { antialias: true });
   console.log(gl?.getContextAttributes().antialias);

Časté omyly

MýtusZapnu anti-aliasing a grafika bude vždycky ostřejší.

Ve skutečnostiAnti-aliasing obvykle zlepší plynulost hran, ale ostrost může naopak snížit. U drobných detailů, textu nebo pixel artu může nevhodné vyhlazování vytvořit měkký a méně čitelný výsledek.

MýtusimageSmoothingEnabled vypíná antialiasing celého canvasu.

Ve skutečnostiVlastnost imageSmoothingEnabled se týká hlavně vyhlazování při kreslení a škálování bitmap přes drawImage. Prohlížeč může dál vyhlazovat vektorové tvary nebo text jinými mechanismy.

Časté dotazy

Proč anti-aliasing někdy obraz rozmaže?

Anti-aliasing obraz rozmaže, když metoda míchá barvy příliš agresivně nebo když filtr pracuje nad hotovým snímkem bez znalosti skutečné geometrie. Post-process filtry mohou vyhodnotit jemný detail jako zubatou hranu a změkčit ho. Rozmazání je zvlášť vidět u malého textu, tenkých vzorů, pixel artu a uživatelských rozhraní s nízkým kontrastem.

Kdy má smysl vypnout anti-aliasing u pixel artu?

Anti-aliasing u pixel artu má smysl vypnout při zvětšování malých bitmap, které mají zůstat složené z viditelných čtvercových pixelů. Interpolace mezi sousedními barvami vytváří mezitóny, které autor do grafiky nezamýšlel. Webové hry, editory sprite grafiky a retro UI proto často používají nejbližší sousední vzorek místo hladkého škálování.

Proč MSAA nezlepší všechny zubaté hrany ve hře?

MSAA zlepšuje hlavně hrany vzniklé rasterizací geometrie, protože uvnitř pixelu vzorkuje pokrytí trojúhelníkem vícekrát. Moderní hra ale obsahuje i průhledné textury, odlesky, stíny, shaderové vzory a post-processing. Tyto zdroje aliasingu nemusí MSAA zachytit, proto se často kombinuje s TAA, vyšším rozlišením nebo speciálními filtry pro konkrétní efekt.

Je anti-aliasing stejný jako vyšší rozlišení?

Vyšší rozlišení a anti-aliasing řeší podobný problém, ale nejsou totéž. Vyšší rozlišení zmenší pixely, takže zubatost je méně nápadná. Anti-aliasing se snaží lépe odhadnout barvu hran i při daném rozlišení. Supersampling obě myšlenky spojuje: scéna se spočítá ve vyšším rozlišení a potom se kvalitně zmenší na cílový obraz.

Zdroje

1. CanvasRenderingContext2D: imageSmoothingEnabled property(otevře se v novém okně)MDN Web Docs
2. Multisampling(otevře se v novém okně)Khronos Group
3. HTML Standard(otevře se v novém okně)WHATWG
4. Spatial anti-aliasing(otevře se v novém okně)Wikipedia

Související pojmy

• ShaderShader je malý program, který běží přímo na grafické kartě a určuje, jak se vykreslí geometrie nebo jednotlivý pixel. Spouští se v tisících kopií najednou, každá nad jiným vrcholem nebo pixelem, což je zdroj jeho výkonu i jeho omezení.
• RasterizaceRasterizace je převod geometrie, písma, vektorových tvarů nebo obrazových popisů na mřížku pixelů či vzorků. V grafických kartách tvoří klíčový krok mezi 3D scénou a obrazem na displeji: rozhoduje, které pixely pokrývá trojúhelník, jakou mají hloubku a jaké fragmenty dostanou shadery.
• RozlišeníRozlišení je počet rozlišitelných vzorků obrazu, displeje nebo vykreslovací plochy, nejčastěji vyjádřený v pixelech na šířku a výšku. Určuje, kolik detailu lze zobrazit nebo zpracovat, ale samo o sobě neříká nic jistého o fyzické velikosti, ostrosti, kvalitě panelu ani výkonu aplikace.
• PixelPixel je nejmenší adresovatelný prvek rastrového obrazu, kterému lze přiřadit jednu barvu. Digitální fotografie, obsah obrazovky i textura ve hře jsou mřížkou pixelů uspořádaných do řádků a sloupců. Ve webovém designu navíc CSS pixel neznamená fyzický bod displeje, ale referenční jednotku délky nezávislou na hustotě zobrazovače.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Alfa kanálAlfa kanál je složka obrazových dat, která u pixelu určuje míru neprůhlednosti nebo průhlednosti. Doplňuje barevné kanály, typicky RGB, a umožňuje plynulé okraje, stíny, překryvy, masky i skládání vrstev. Hodnota alfa sama neurčuje barvu, ale říká, jak se barva pixelu promíchá s pozadím.