Snímková frekvence (Frame rate)

Příklady z praxe

1. 01

   Měření plynulosti webové animace

   Vývojář webové hry si v prohlížeči měří orientační FPS pomocí requestAnimationFrame. Konzole ukáže, že při otevřeném debug panelu klesá plynulost pod cílovou hodnotu, takže autor přesune část výpočtů mimo hlavní animační smyčku. Výsledek není laboratorní benchmark, ale rychle odhalí, kdy UI ztrácí rytmus.

   let last = performance.now();
   let frames = 0;
   
   function tick(now) {
     frames++;
     if (now - last >= 1000) {
       console.log(`FPS: ${frames}`);
       frames = 0;
       last = now;
     }
     requestAnimationFrame(tick);
   }
   
   requestAnimationFrame(tick);

2. 02

   Scrollování v mobilním UI

   Mobilní aplikace má seznam karet s náhledy, stíny a animovaným posunem. Na slabším telefonu se při scrollování některé snímky nestihnou vykreslit, takže uživatel cítí zasekávání, i když aplikace průměrně nevypadá pomalá. Zjednodušení stínů a přesun animace na transformace sníží počet pozdních snímků.

Časté omyly

Mýtus30 FPS je vždycky přesně poloviční plynulost proti 60 FPS.

Ve skutečnostiRozdíl mezi 30 a 60 FPS je výrazný, ale vnímání plynulosti není jen lineární porovnání čísel. Velkou roli hraje pravidelnost frame time, typ pohybu, rozmazání pohybu, vstupní latence a obnovovací frekvence displeje.

MýtusVyšší FPS automaticky znamená lepší obraz.

Ve skutečnostiVyšší snímková frekvence může zlepšit plynulost a odezvu, ale sama nezaručuje vyšší kvalitu obrazu. Horší komprese, nízké rozlišení, nestabilní frame time nebo slabé osvětlení u kamery mohou výsledný dojem zhoršit.

Časté dotazy

Proč hra při 60 FPS může pořád působit trhaně?

Snímková frekvence hry může mít průměr 60 FPS a přesto působit trhaně, protože průměr neukazuje rozložení snímků v čase. Pokud několik snímků dorazí pozdě a další dorazí rychle za sebou, výpočet průměru vypadá dobře, ale oko zachytí nepravidelný pohyb. Pro hodnocení plynulosti je proto důležitý frame time, propady a stabilita, nejen jedna průměrná hodnota.

Jak snímková frekvence souvisí s obnovovací frekvencí monitoru?

Snímková frekvence popisuje, kolik nových obrazů vytvoří video, hra nebo aplikace za sekundu. Obnovovací frekvence monitoru popisuje, kolikrát za sekundu panel dokáže obraz zobrazit. Pokud aplikace dodává snímky pomaleji než monitor obnovuje, některé obrazy se opakují. Pokud aplikace dodává snímky rychleji, část snímků se nemusí zobrazit nebo může vzniknout tearing bez vhodné synchronizace.

Kolik FPS potřebuje webová animace?

Snímková frekvence webové animace by měla odpovídat tomu, co uživatel vnímá jako plynulé na svém zařízení, a zároveň nesmí zbytečně zatěžovat baterii a procesor. Prohlížeč obvykle plánuje animace přes requestAnimationFrame podle zobrazovacího rytmu zařízení. Prakticky je důležitější vyhnout se dlouhým úlohám, častému layoutu a blokování hlavního vlákna než ručně prosazovat konkrétní pevné FPS.

Proč video s vyšším FPS zabírá víc místa?

Snímková frekvence videa zvyšuje počet obrazů, které je potřeba uložit nebo zakódovat za stejný čas. Komprese sice využívá podobnosti mezi snímky, ale rychlejší pohyb a více časových vzorků obvykle znamenají vyšší datové nároky při stejné kvalitě. Vyšší FPS proto může vyžadovat vyšší bitrate, silnější enkodér nebo kompromis v rozlišení a detailech.

Zdroje

1. Frame rate(otevře se v novém okně)Wikipedia
2. Window: requestAnimationFrame() method(otevře se v novém okně)MDN Web Docs
3. Timing control for script-based animations(otevře se v novém okně)World Wide Web Consortium

Související pojmy

• 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.
• Animace klíčových snímkůAnimace klíčových snímků je technika, při které animátor zadá hodnoty vlastnosti (polohu, rotaci, barvu, průhlednost) jen v několika vybraných časech a software dopočítá všechny mezilehlé snímky interpolací. Klíčový snímek tedy nese stav v daném okamžiku, křivka mezi klíči určuje rychlost změny a výsledkem je plynulý pohyb bez ručního kreslení každého snímku.
• 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.
• 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.
• Alt atributAlt atribut je atribut HTML značky <img>, který nese textovou alternativu obrázku pro situace, kdy uživatel obrázek nevidí. Čtou ho odečítače obrazovky, zobrazí se při nenačtení souboru a vyhledávače z něj odvozují obsah obrázku. Prázdná hodnota alt="" je platná a znamená, že obrázek je čistě dekorativní.
• Ambient occlusionAmbient occlusion je technika stínování, která u každého bodu povrchu odhaduje, jak velká část okolní polokoule oblohy je zastíněna blízkou geometrií, a podle toho ztlumí rozptýlené okolní světlo. Výsledkem jsou tmavší kouty, spáry, záhyby a místa dotyku objektů, díky nimž scéna působí prostorově a objekty vypadají skutečně položené na podložce.
• Anchor textAnchor text je viditelný, klikatelný text odkazu, tedy obsah mezi značkami <a> a </a>. Vyhledávačům i uživatelům popisuje, co najdou na cílové stránce, a spoluurčuje, na jaké dotazy cílová stránka hodnotí. Kvalitní anchor text je krátký, popisný a čitelný i vytržený ze zbytku věty.