Du måste aktivera javascript för att sverigesradio.se ska fungera korrekt och för att kunna lyssna på ljud. Har du problem med vår sajt så finns hjälp på http://kundo.se/org/sverigesradio/
Digitala insatsstyrkans blogg

Eurovisionradio i 360-grader - så gjorde vi

Publicerat onsdag 18 maj 2016 kl 17.07
Bild föreställande interaktiv 360-graders app sedd från dammen i Kungsträdgårdens Eurovision Village
1 av 5
Interaktiv 360-graders app sedd från dammen i Kungsträdgårdens Eurovision Village
Interaktiv 360-graders app sedd uppifrån tornet från Kungsträdgårdens Eurovision Village
2 av 5
Interaktiv 360-graders app sedd uppifrån tornet från Kungsträdgårdens Eurovision Village
Interaktiv 360-graders app med utfälld text vid scen i Kungsträdgårdens Eurovision Village
3 av 5
Interaktiv 360-graders app med utfälld text vid scen i Kungsträdgårdens Eurovision Village
Interaktiv 360-graders app med integrerat ljud från Kungsträdgårdens Eurovision Village
4 av 5
Interaktiv 360-graders app med integrerat ljud från Kungsträdgårdens Eurovision Village
Så här kan man bygga kopplingsschema mellan 360-bilder
5 av 5
Så här kan man bygga kopplingsschema mellan 360-bilder

360 eller VR är på många mediemänniskors läppar just nu. När vi ville visualisera Sveriges Radios närvaro i ”Eurovision Village” i Kungsträdgården var det därför ett bra tillfälle för oss att samtidigt lära oss skapa digitala bildbubblor och en virtuell verklighet. Men vilken kamera krävs, vilka datorprogram ska jag använda och hur gör jag för att komma igång? Här är sammanfattningen av hur vi gjorde, vad vi lärde oss och hur resultatet blev.

Radio på distans

Målet med 360-navigationen i Kungsträdgården var att ge lyssnarna runt om i landet chansen att "på plats" följa Sveriges Radios rapportering under Eurovision-veckan i Stockholm. Tanken var att låta publiken själv leta sig runt mellan scenerna och miljöerna, åka upp i utkikstornet, och lyssna på våra direktsändningar.

Utrustning

Uppdraget att skapa bilder likt Google street view börjar förstås med att hitta rätt utrustning. Efter en ganska noggrann research  landade vi i rekommendationen att köra på en Ricoh Theta S.

Självklart finns det flera märken att välja mellan, men så här motiverade vi valet:
Den är enkel och behändig, kan både filma video och fotografera, är kompatibel med Youtube och Facebook, förhållandevis billig, och rekommenderades när vi besökte våra radiokollegor på YLE i Finland. Och fotograferar såklart i 360 - inte med enskilda foton som kräver utvecklartid genom att "stitchas" ihop.

Kameran går att manövrera enkelt handhållen, men då syns förstås den som håller kameran tydligt. Med wifi går det däremot att styra kameran med en app på mobilen - så gjorde vi i Kungsträdgården. Tillhörande instruktioner är lättbegripliga och det finns även flera instruktionsfilmer på Youtube.

Fotograferingsteknik

En karta över området och att planera i förväg vilka positioner som behövdes var nödvändigt. Detta inte minst eftersom vi visste att vi skulle behöva återvända och ta nya bilder från samma position när alla byggställningar flyttats...

I det här fallet ville vi skapa sammanlänkade bubblor som publiken kan förflytta sig mellan. Därför var det viktigt att reda ut var i 360-bilden du först hamnar och i vilken riktning du tittar i din startposition. (Hint: "mitten" i bilden hamnar 180 grader ifrån avtryckarknappens perspektiv).

Vid första test-tillfället saknade vi kamerastativ, men det är att rekommendera. Det kan vara blött på underlaget utomhus och en vindpust skulle kunna välta den något ömtåliga utrustningen. De flesta stativ går att använda till kameran, och det finns stativ med smala fötter som inte stör bildupptagningen nämnvärt. Det använde vi senare när Eurovision Village var på plats.

Det gäller förstås sedan att inte gå för långt från kameran (stöldrisk och misstänkt beteende i rådande läge med höjt terrorhot) och samtidigt inte synas för mycket i bilden. Som ni ser på bilderna är det ett hårt jobb att inte komma med själv i en bild, som just fångar allt runtomkring. Alltför långa avstånd kan också avbryta wifi-kopplingen mellan mobilen och kameran.

När du sedan har dina bilder kan du enkelt dela dem vidare i sociala medier via kamerans app, men här har vi gått vidare med att redigera bildmaterialet – lägga till ljud och grafiska element i våra webbprogram.

Programmering i tre dimensioner

För att kunna få bilderna interaktiva för vår publik på webben började vi med att utforska 3D-biblioteket ThreeJS där man med JavaScript kan programmera ett rum för användare att röra sig inom. Att från att programmera ett rum till att programmera många rum med navigation sinsemellan visade sig bli en utmaning i ThreeJS. Det blir dels svårt att få en tydlig översikt programmatiskt, dels tenderar ändringar att bli väldigt tidskrävande.

Efter utforskande av ThreeJS uppstod ett behov av ett färdigt program att ta till hjälp för kopplingarna mellan bilderna, en studio där man faktiskt kan jobba med interaktiva 360-bilder på ett visuellt sätt. Valet föll på  Panotour Pro, efter att det gått sådär med Mittle Skybox. Med Panotour Pro följer exportmöjligheter för att skräddarsy upplevelsen för desktop, tablet och mobil.

"Hjälp, var hamnade jag nu?"

Navigationen mellan panoraman blev den första stora utmaningen. Enkelt förklarat placeras punkter ut och kopplingar skapas mellan dessa punkter så att rätt panorama laddas in. I slutskedet av skapandeprocessen upptäcktes möjligheten att ändra fokus i vyn vid förflyttning mellan dessa punkter. Det är något som blir viktigt för att det ska kännas naturligt för besökaren när denne vill gå tillbaka samma väg igen. Tanken, när du klickar på en knapp, är ju att du "teleporteras" 100 meter framåt, men fortfarande tittandes i samma riktning.

En annan funktion som vi använde oss av i programmet var att skapa egendesignade knappar och förse dem med specifika egenskaper och actions. Exempel på detta är inforutorna som skapades med ett plug-in och ljudet som lades till via ett javascript-kommando.

En utmaning av annan karaktär som är extra klurig i 360-berättande är balansen mellan utforskning och presentation.  finns en avgörande risk med att basera hela upplägget på egen utforskning. Besökaren kan då missa delar av budskapet som vi som avsändare vill få dem att ta till sig. En idé att utforska är att försöka arbeta med en mer snitslad bana utefter en dramaturgisk kurva, samtidigt som användaren måste få möjlighet till sann interaktivitet och inte bara "åka med".

Ljudet och mobilen i fokus

För att slutligen kunna erbjuda publiken direktlyssning på våra program från parken, som går i olika kanaler under veckan, byggde vi ett sändningsschema, som knöts till navigations- och play-knapparna som vår grafiker placerade ut i 360-miljön. Med en knapptryckning får lyssnaren automatiskt upp det program som sänder live från parken just då, och mellan direktsändningarna specialkanalen P4 Melodifest.
  Vi vill alltid i möjligaste mån arbeta mot sverigesradio.se:s utmärkta integrerade spelare, vilket var det kanske viktigaste skälet till att vi valde att integrera Kungsträdgårdsgrafiken på sverigesradio.se. Det var roligt att se hur det gick att få alla bitar att klaffa i flera mobiler - om än inte alla. Vissa mobilfabrikörer tillåter inte programmatiska starter av ljudströmmar.

Idé: Workshop med Digitala insatsstyrkan och Ekots specialister
Foto, sociala medier: Marcus Eriksson
Grafik: Susanne Lindeborg
Redaktör: Nils Lindström
Programmering: Niklas Emilsson
Projektledning: Yasmine El Rafie

Grunden i vår journalistik är trovärdighet och opartiskhet. Sveriges Radio är oberoende i förhållande till politiska, religiösa, ekonomiska, offentliga och privata särintressen.

Användarkommentarer

Har du frågor eller förslag gällande våra webbtjänster?

Kontakta gärna Sveriges Radios supportforum där vi besvarar dina frågor vardagar kl. 9-17.

Du hittar dina sparade avsnitt i menyn under "Min lista".