Den skjulte rod i billedindlæsning på web: En guide til WebGL og WebGPU

Browsere skal vise billeder og tekst. Det lyder simpelt. Men at indlæse billeder til WebGL og WebGPU er en total jungle.

Det handler ikke kun om at hente filen. Det handler om at få pixels ind på GPU'en hurtigt og sikkert. Valg af API kan gøre forskellen mellem smooth performance og kaos – afhængig af browseren.

Hvorfor det rammer dig som udvikler

Bygger du 3D-apper, visualiseringer eller GPU-tunge ting? Så støder du snart på problemet. Forkert metode giver hakket FPS, hukommelsesproblemer eller fejl i specifikke browsere. Det er de usynlige faldgruber, der slår til live.

API-junglen og dens faldgruber

WebGL bruger gl.texImage2D til billeder som:

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

WebGPU har lignende via queue.copyExternalImageToTexture.

Mange valg lyder godt. Men det betyder, du selv skal kæmpe med hastighed, fejl og browser-forskelle.

createImageBitmap: Perfekt på papiret, kaos i praksis

createImageBitmap burde være det bedste. Asynkront, sparsomt og med kontrol over rotation, farverum og alpha.

Her er et typisk eksempel:

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"
  })
}

Fin kode. Men virkeligheden slår hårdt til:

SVG er et mareridt på tværs af browsere

Firefox håndterer SVG perfekt. Chrome og Safari laver det uskarpt eller totalt forkert – især som blob. Vil du have skarpe vektorer? Glem det.

Farveproblemer i WebGPU på Safari

ImageBitmap til copyExternalImageToTexture krangler i Safari. Nyere iOS fikser det, men mange brugere sidder stadig med fejl.

"Asynkront" er løgn i mange tilfælde

API'et ser asynkront ud. Chrome kører det i baggrunden. Firefox blokerer main thread. Safari er bare langsom. Din forventede gevinst forsvinder.

Browser-test: Hvad sker der egentlig?

• Chrome: Hurtig dekoding, men SVG er dårligt
• Safari: Elendig SVG-støtte og WebGPU-farvefejl
• Firefox: Rigtig rendering, men synkron dekoding

Læringen til din kodebase

Web-udvikling er fuld af løfter, der ikke holder. Specs er teori. Browsere er virkelighed. Test alt, mål performance og build workarounds.

Hos NameOcean ved vi, at solide web-apper kræver mere end dokumentation. Uanset om det er klassiske sites eller WebGPU-monstre, skal dit hosting matche de rigtige krav – ikke bare teorien.

Sådan tackler du det

Her er vores råd til GPU-billeder:

1. Mål først. Test alle metoder i dine browsere.
2. Kend begrænsningerne. SVG, raster, farverum og alpha ændrer alt.
3. Byg fallback. Plan B, når primærmetoden fejler.
4. Følg med i product. Dev-maskinen lyver – brugernes hardware er anderledes.

Web-platformen bliver stærkere. Men kompleksiteten følger med. At kende faldgruberne i createImageBitmap gør forskellen mellem "virker hos mig" og "virker overalt".