Den skjulte rotet med bildeinnlasting på web: En utviklerguide til WebGL og WebGPU

Du tror nok nettlesere bare viser bilder og tekst uten problemer. Det høres ut som en løst sak. Men sannheten er verre: Å laste bilder programmessig til WebGL og WebGPU er et mareritt med uforutsigbar ytelse.

Det handler ikke bare om å hente filen. Det dreier seg om å få pikslene raskt inn på GPU-en. Velger du feil metode, varierer resultatet vilt mellom nettlesere.

Hvorfor dette ødelegger moderne web-apper

Bygger du 3D-apper, sanntidsvisualiseringer eller noe GPU-tungt? Da må du velge riktig bildevei. Feil valg gir hakking, minnelekkasjer eller krasj i enkelte nettlesere. Slike feil dukker opp først når appen er live.

Kaoset av API-alternativer

WebGL og WebGPU har masse måter å konvertere bilder til GPU-tekster på. Hver har sine svakheter:

WebGL tar imot via gl.texImage2D:

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

WebGPU bruker queue.copyExternalImageToTexture med lignende DOM-kilder.

Ser ut som frihet. I praksis må du selv fikse ytelse og bugs.

createImageBitmap: Teori som svikter i praksis

På papiret er createImageBitmap best. Asynkron, sparer ressurser, styrer orientering, fargekonvertering og alpha. Slik ser det ut:

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 virkeligheten slår hardt:

SVG er ødelagt overalt

Firefox håndterer SVG greit. Chrome og Safari gir blurry eller feil output – verre med blob. Vil du ha skarpe vektorer? Glem det.

Fargeproblemer i WebGPU på Safari

ImageBitmap feiler i copyExternalImageToTexture. Noen fikser på nyere iOS, men de fleste brukere rammes.

Asynkron? Bare på papiret

Chrome dekoder i bakgrunnen. Firefox blokkerer hovedtråden (kjent feil). Safari er treg uten grunn. Fordelen forsvinner.

Sjekk per nettleser

• Chrome: Rask dekoding, men SVG ser dårlig ut
• Safari: Svak SVG-støtte, upålitelig farge i WebGPU
• Firefox: Riktig rendering, men synkron dekoding

Lærdommen for din tech-stack

Web viser stadig forskjellen mellom spesifikasjoner og virkelighet. For krevende apper: Test alt, profiler, og bygg workarounds.

På NameOcean vet vi at solid webutvikling krever mer enn docs. Hosting for vanlige sider eller WebGPU-apper? Velg infrastruktur som matcher ekte behov.

Fremtiden: Slik fikser du det

For GPU-bildeinnlasting:

1. Profiler først. Mål i mål-nettlesere.
2. Kjenn begrensningene. SVG, farger, alpha – alt teller.
3. Bygg fallback. Plan B ved nettleserfeil.
4. Følg ekte data. Dev-miljø løgner.

Web-plattformen vokser. Men kompleksiteten følger etter. Mestre createImageBitmap-feller, så går appen din overalt.