Skryté pasti načítání obrázků na webu: Průvodce pro developery s WebGL a WebGPU

Když si představíte prohlížeč, vidíte ho hlavně jako nástroj na zobrazení obrázků a textu. Jednoduché, ne? Realita je jiná. Načítání obrázků pro WebGL a WebGPU je plné pastí a komplikací.

Problém není jen v tom stáhnout soubor. Jde o to dostat pixely rychle na GPU. Volba špatného způsobu ovlivní rychlost i spolehlivost v různých prohlížečích.

Proč to trápí tvůj projekt

Pokud stavíš 3D appky, vizualizace v reálném čase nebo cokoli s GPU, narazíš na to brzy. Špatný výběr znamená sekání, plýtvání pamětí nebo chyby v některých prohlížečích. Tyto skryté brzdy se projeví až v produkci.

Bludiště API

WebGL i WebGPU nabízejí víc cest, jak z obrázků udělat textury na GPU. Každá má své mínusy.

WebGL bere do gl.texImage2D tyto zdroje:

• ImageBitmap
• ImageData
• HTMLImageElement
• HTMLCanvasElement
• HTMLVideoElement
• OffscreenCanvas
• VideoFrame

WebGPU to zvládá přes queue.copyExternalImageToTexture se stejnými DOM zdroji.

Hromada možností zní lákavě. Ve skutečnosti musíš sám řešit optimalizaci, výkon a chyby v prohlížečích.

createImageBitmap: Slíby vs. praxe

Teoreticky je createImageBitmap top volba. Asynchronní, šetří zdroje, umožňuje nastavit orientaci, konverzi barev či alpha kanál. Příklad:

export async function loadImageBitmap(url) {
  const res = await fetch(url, { mode: "cors" })
  if (!res.ok) throw new Error(`HTTP ${res.status} for ${url}`)
  const blob = await res.blob()

  return createImageBitmap(blob, {
    imageOrientation: "none",
    colorSpaceConversion: "none",
    premultiplyAlpha: "none"
  })
}

Vyšlo to hezky. Teď realita:

SVG v prohlížečích selhává

Firefox to zvládá správně. Chrome a Safari dávají rozmazané výstupy bez antialiasingu. V Chromu blob SVG končí úplně pokažené. Vektorové grafy na velké škále? Zapomeň.

Problémy s barevnými prostory v WebGPU

Safari má chyby při kopírování ImageBitmap do copyExternalImageToTexture. Novější iOS to opravily, ale uživatelé na starším softu to cítí.

Asynchronní? Vůbec ne

API vypadá asynchronně, ale dekódování často běží na hlavním vlákně. Chrome to dělá paralelně, Firefox synchronně (známý bug), Safari je pomalé bez vysvětlení.

Jak na tom stojí jednotlivé prohlížeče

• Chrome: Rychlé dekódování ImageBitmap, ale SVG je na nic
• Safari: Špatná SVG podpora, nespolehlivá konverze barev v WebGPU
• Firefox: Správné vykreslení, ale synchronní dekódování na hlavním vlákně

Lekce pro tvůj tech stack

Webový vývoj je plný mezer mezi specifikacemi a realitou prohlížečů. U výkonových app nestačí teorie. Testuj napříč prohlížeči, měř výkon a připrav si workaroundy.

V NameOcean víme, že spolehlivé appky potřebují víc než dokumentaci. Ať hostuješ klasické weby nebo WebGPU pecky, infrastruktura musí sedět na tvé realitě.

Jak dál

Pro načítání obrázků do GPU doporučuji:

1. Měř dřív, než optimalizuješ. Otestuj cesty v cílových prohlížečích.
2. Znám své limity. SVG vs. raster, požadavky na barvy a alpha.
3. Měj zálohu. Plán B pro chyby v prohlížečích.
4. Sleduj reálný výkon. Dev prostředí lže – hardware uživatelů rozhodne.

Webová platforma sílí, ale s komplikacemi. Znát pasti createImageBitmap dělá rozdíl mezi "funguje u mě" a "funguje všude.