nrk.no

Hvordan levere 3GB til nettleseren din?

Kategorier: Forskning,Nettjenester & Teknobabbel

Norges største turbilde (utsnitt)

Her er historien om hvordan vi lagde Norges største turbilde.

Vi har laget et kvadratisk bilde med 32768 piksler i hver retning; en oppløsning på én gigapiksel. Det er sammensatt av over 2100 bilder, sendt inn av turglade mennesker, og vi takker alle for en god dugnad.

Norges største turbilde (utsnitt)

Norges største turbilde bruker kartvisningsmotor.
Foto: Kjersti Magnussen, Mosaikk: UT.no/Knut-Olav Hoven

Å sette sammen bildet

For å lage bildet brukte vi verktøyet metapixel, et kommandolinjeverktøy som kan lage veldig store mosaikkbilder fra en stor samling bilder raskt og med god kvalitet.

Metapixel krever at alle bildene i samlingen har samme aspekt, og siden vi fikk innsendt både portrettbilder og landskapsbilder så landet vi et sted i mellom med kvadratiske bilder. For å være sikker på å få med alt og alle på bildene bestemte vi oss for at og det var bedre at noen ble litt tykkere eller tynnere enn at noen skulle risikere å bli halshugd ved beskjæring av bildene. Beklager det 🙂

Vise og navigere

Et så stort bilde lar seg ikke vise i normale bildeprogrammer. Ukomprimert ville bildet tatt 3 GB. Derfor var vi nødt til å dele opp bildet i mindre deler. Det finnes flere gigapikselbilder på nettet, men felles for de fleste er at de bruker Flash for presentasjon av bildene, og det var ikke godt nok for oss. Vi ønsket en løsning som kunne fungere på mobile enheter, som telefoner og nettbrett, med og uten Flash-støtte, mulighet til å vise i fullskjerm og støtte for å bokmerke og dele et bildeutsnittet med venner etter man har funnet fram til sitt eget bilde.

Kartmotor ble løsningen

Vi ble inspirert av arbeidet til Chris Petersen til å forsøke å bruke kartmotoren fra Google, Javascript-klienten til Google Maps, til å panorere og zoome i bildet. Vi brukte egenutviklede verktøy for å kutte opp bildet i mindre kvadratiske bildeutsnitt på 256×256 piksler; samme størrelsen som Google selv benytter på bildeutsnitt for sine kart. For å gjøre det mulig å se hele bildet på en normal PC-skjerm uten behov for å panorere i bildet laget vi kopier med forskjellige størrelser på bildet, og for å tilpasse zoomnivåene til kartmotoren halverte vi størrelsen for hver gang man zoomer utover.

Verden er ikke flat

Google Maps brukes for å navigere i en rund verden, men siden bildet vårt er flatt trengte vi å gjøre noen endringer i kartmotoren. Vi laget ny projeksjonslogikk som regner om visningspunkter i nettleseren om til piksler i bildet for det gjeldende zoomnivået. I den runde verden er det mulig å spinne jorda rundt alle veier, men det egner seg dårlig for bilder, så vi gjorde det slik at man ikke kan navigere seg utenfor og vekk fra bildet.

Statistikk og ytelse

Vi lagde og la ut bildet natt til mandag 7. februar, like etter at tusenvis over hele landet beveget seg ut i den norske naturen på «Kom deg ut»-dagen.

Hittil i uka (fredag kl 10:30) har bildet blitt vist 17.000 ganger og serverne våre har levert ut 6 millioner bildeutsnitt på tilsammen 101 GB.

I front av webserverne har vi satt opp Varnish til å mellomlagre bildeutsnittene, som har fungert veldig bra.
På det meste leverte serverne ut 127 bildeutsnitt i sekundet med 17.2 Mbits/sekund. Disse dataene er målt med oppløsning på ett minutt.

Kildekoden

Vi har gitt ut Javascript- og HTML-koden for visning av gigapikselbildet til fri bruk.

Koden kan du finne på Github.com, og prosjektet heter Javascript Gigapix Viewer og gitt ut med en MIT-lisens. Vi tar gjerne imot forbedringer av koden, både her eller på github.

Oppsummering

Vi klarte å engasjere en stor mengde turglade mennesker til å bidrag til Norges største turbilde og vi benyttet en kartmotor til å tegne ut et bilde som kan vises på både store og små skjermer.

Kjenner dere til annen bruk av Google Maps og andre kartmotorer som er noe utenom det vanlige?

12 kommentarer

    • Knut-Olav Hoven (NRK) (svar til John Thoresen)

      Jeg kikket litt på AndreaMosaic, men jeg trengte noe som kunne scriptes. Vi kjørte flere tester for både å finne beste motiv og fintune parametere for best mulig resultat uten at samme bilde skulle gjentas for ofte.

      Av ren nyskjerrighet testet jeg AndreaMosaic på nytt og fant ut at maksimal størrelse var 210 MPix og det brukte mye minne, ca 590 MB RAM, 2.6 GB virtuelt. Til sammenlikning brukte metapixel under 3 MB RAM på samme størrelse.

    • Knut-Olav Hoven (NRK) (svar til Ove)

      GMImageCutter feilet raskt med «OutOfMemoryError: Java heap space».

      Den største utfordringen vår var minnebruk. Vi forsøkte oss fram med enda større bilder, men hadde problemer med oppdeling til tiles, da vi ikke fant noen verktøy som klarte å skalere og kutte så store bilder.

      Vi brukte Netpbm og ImageMagick for å dele opp i tiles.

  1. Atle Frenvik Sveen

    Stusser litt på en ting: hvorfor Google Maps APIet? Og ikke OpenLayers (www.openlayers.org), som er åpen kildekode? Jeg er ganske sikker på at det samme er mulig der, og du slipper Google-bindingene helt og fullt

    Svar på denne kommentaren

    • Knut-Olav Hoven (NRK) (svar til Atle Frenvik Sveen)

      Tja, si det… Jeg har litt vondt merker jeg, for at jeg ikke gikk for OpenLayers med en gang. Grunnen var at jeg har brukt GMaps tidligere og var mest kjent med det.

      Skal jeg gjøre et liknende prosjekt igjen håper jeg det kan bli med OpenLayers 🙂

    • Atle Frenvik Sveen (svar til Knut-Olav Hoven)

      Godt å høre at du kjenner til og tenker på å bruke åpne alternativer også!

      Kult prosjekt er det uansett, glemte jo helt å nevne det!

    • Henrik Lied (NRK) (svar til Andre)

      Hei, Andre!

      Kan du gje meg litt info om kva for ein nettlesar du nyttar, samt kva slags operativsystem du er på? Dette hjelp med feilsøkjinga av problemet, då eg ikkje klarte å reprodusere hendinga i verken Firefox, Safari eller Chrome (OS X).

    • Kristoffer (svar til Henrik Lied)

      Hei, fikk samme feil i dag tidlig, men bare en gang. Etter dette var NRKBeta veldig treig, noe jeg tror skyldes Observerapp.com, som jeg tror er nede akkurat nå. Jeg har Firefox 3.6.13 og Mac.

Legg igjen en kommentar til Knut-Olav Hoven Avbryt svar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *. Les vår personvernserklæring for informasjon om hvilke data vi lagrer om deg som kommenterer.