360° mediální obsahové aplikace - jak principiálně fungují a jak se vyvíjí?

360° mediální obsahové aplikace - jak principiálně fungují a jak se vyvíjí? Tagy: Vývoj aplikací
| Publikováno dne

Aplikace postavené na 360° souborech (foto, video) - jak se tvoří, na jakém principu fungují a s čím je nutné počítat? To si rozebereme v tomto článku osvětlujícím technickou stránku 360° mediálních souborů a aplikací. Tento článek vychází z vývoje takovýchto aplikací v herním enginu Unity, nicméně principy a postupy zde popsané lze aplikovat v jakémkoli vývojovém prostředí. Článek je psán "lidskou" řečí - jednoduše a srozumitelně i pro netechnické publikum.

360° mediální aplikace jsou aplikace určené především pro konzumaci 360° obsahu získaného pomocí 360° kamery. Konzumovat je lze na všech typech zařízení - telefonu, počítači, televizi i 3D brýlích. Ovládání je definováno typem použitého zařízení - myš / touchpad, dotyková obrazovka, ovladač, gyroskop (pohyb zařízení) nebo automatická prezentace. Mediální soubory mohou být propojeny s jakýmkoli uživatelským prostředím.

360° foto a 360° video v hlavní roli

360° fotografie a videa bývají mnohdy 2D prohlížeči a přehrávači zobrazovány v přímočarém vyobrazení. To si můžete představit jako glóbus (mapu světa) rozvinutou do 2D mapy. Takto vyobrazený svět si jistě pamatujete z hodin Zeměpisu na základní škole. V případě fotografií a videa jsou tyto 2D projekce lehce "kostrbaté", avšak o 2D tu nejde - pro kvalitní vyobrazení 360° fotografií a videa je potřeba tato média vyobrazovat na povrchu koule.

Jak to funguje?

Princip je velice jednoduchý. Představte si kulatou místnost, v jejímž těžišti je umístěný data projektor vyzařující obraz na všechny strany. Výsledná projekce je viditelná po celém vnitřním povrchu koule. Nyní to otočíme. Řekněme, že povrch dané koule není zeď, ale obrazovka zobraující ten samý obraz. A namísto projektoru máme volně otočnou kameru, propojenou s pohyby / ovládacími prvky zařízení, na jehož obrazovce obraz z dané kamery sledujeme.

Jak na "mediální" kouli v Unity?

Software pro vývoj her a aplikací Unity je na zobrazování 360° fotografií a videí nativně připraven. Technologie, postupy a z toho vycházející možnosti jsou rozebrány v následujících krocích.

Promítání na vnitřní povrch koule

Pohled z koule

Geometrické těleso koule lze v Unity vytvořit jednoduše prostřednictvím nabídky Create object → 3D → Sphere. Takto vzniklé těleso Unity defaultně považuje za těleso plné a pracuje jen s jeho vnějším povrch. Tato vlastnost vychází z defaultně přiřazeného materiálu k tělěsu. Pro naši potřebu musíme materiál koule nahradit za vlastní - potřebovali bychom takový, který bude brát v úvahu pouze povrch daného tělesa. Logicky bychom v klasických aplikacích pracovali s materiálem s přižazeným povrchový shaderem, v jehož nastavení bychom zvolili render na vnitřní stranu. Pro případ práce s texturami se však nepoužívá, namísto něj můžeme použít shader Skybox/Panaromic v případě videí a Skybox/Cubemap pro fotografie. Samozřejmostí je i možnost použití vlastního shaderu, kód k jednomu takovému najdete například v této diskuzi na StackOverflow. Daný shader je možné používat jak pro fotografie tak i pro video.

Kamera ve středu koule

Kamera ve středu koule

Do těžiště koule, na jejíž povrch promítáme, umístíme kameru. Daná kamera bude reflektovat požadavky na otáčení jdoucí ze zařízení, prostřednictvím kterého obraz z kamery sledujeme. Například pohyb myši, interakce s dotykovou obrazovkou nebo gyroskop při prohlížení ve virtuální realitě. Toho se dosahuje s použitím input managera, a to buď obecného, nebo spojeného s konkrétním zařízením.

Při aplikacích pro prohlížení 360° fotografií a kamer se zpravidla pracuje pouze se třemi stupni volnosti - pozorovateli je umožněno rozhlížet se kdekoli po prostoru a zároveň s kamerou rotovat. (kamera / hlava pozorovatele je vždy v místě, z kterého byl pozorovaný záznam natočen / vyfocen).

Pokud se nepracuje s kamerou definovanou kitem pro konkrétní zařízení (např. VR headset), v dokumentaci Unity je doporučeno nehýbat přímo objektem kamery, namísto toho z kamery udělat child element jiného prázdného objektu a pohybovat až s tímto kameře nadřazeným objektem.

V případě, že používáte zabudované Unity shadery, nezapomeňte se v nastavení kamery přepnout z "Clear flags" na variantě "skybox". Postup s použitím zabudovaných shaderů popsaných výše a renderováním na povrch koule je stejný jako v případě zjednodušeného postupu popsaného v článku níže. Jediným rozdílem je, že naše prostředí je definováno konkrétní koulí namísto celou scénou.

Uživatelské rozhraní

Fotografie doplněná o interaktivní přístav a letícího ptáka

Vzniklé propojení kamery a prostoru může být doplněno o jakékoli předměty a animace, a to jak v prostoru, tak i 2D vrstvě na úrovni kamery. Dokonce můžeme pracovat i s perspektivou (vzdálenosti takto vložených těles / animací od kamery) a tímto způsobem tvořit "3D" vizuální efekty. Díky držení fixních rozměrů i poloh (kamera, promítací koule, velikost objektů) je dosahováno stálého a přirozeného vzhledu přidaných prvků za všech okolností. Na přiloženém obrázku je například přidán interaktivní bod přístaviště pro přechod na pevninu a bílý pták pro pohled z ptačí perspektivy.

Při použití interaktivních prvků je potřeba definovat konkrétní typy interakcí a jejich propojení s konkrétními hardwarovými ovladači pomocí input managera.

Praktický příklad

Nebudeme-li brát v úvahu přímo aplikace pro procházení a sledování 360° fotografií a videí, použití 360° formátů může posloužit například pro tvorbu zátiší všemožných aplikací. Velmi zajímavou oblastí jsou tzv. virtuální prohlídky, které sdružují několik fotografií prostoru provedených z míst s malou vzdáleností od sebe. Tyto jednotlivé fotografie jsou posléze vzájemně prolinkované pro snadný a přirozeně působící přechod mezi nimi. Použití Unity pro takový účel má výhodu naprosté volnosti, kdy nejste ničím limitováni. Naproti tomu, existuje celá řada nástrojů a služeb, které jsou schopny takovéto prohlídky vygenerovat z nahraných fotografií zcela automaticky. O těchto softwarech se dozvíte více zde.

Pro ukázku dobrý, ale nejde to jednodušeji?

Ano, jde! Při tomto řešení nepoužíváme žádný vlastnoručně vytvořený prostor v podobě koule a náš datový média soubor promítáme v rámci kompletního prostředí Unity scény. Uživatelské rozhraní se v tomto případě řeší prostřednictvím canvas vrstvy vložené před úrovní kamery. Postup je následující:

360° Fotografie

  1. 360° fotografii vložíme do Unity projektu. V jejím inspector okně přepneme tvar její textury z formátu "2D" do "Cube".
  2. Vytvoříme nový materiál a přiřadíme mu shader Skybox/Cubemap. Do jeho slotu "Cubemap (HDR)" vložíme fotografii z kroku 1.
  3. V okně "Lighting" (window → rendering → lighting settings), na záložce "scene" změníme "Skybox materiál" za námi vytvořený materiál v kroku 2 a máme hotovo!

360° Video

  1. Vytvoříme si renderovací texturu (Create → Render texture) a nastavíme její velikost na velikost našeho 360° videa.
  2. Vytvoříme si materiál (Create → Material) a jeho shader si zvolíme na Skybox/Panaromic. Do jeho slotu "Spherical HDR" si vložíme renderovací texturu z kroku 1.
  3. Vytvoříme objekt video přehrávače (Create → Video → Video Player). Jeho render mód nastavíme na možnost render texture. Do jeho slotu "Target texture" si vložíme opět texturu z bodu 1. Do jeho dalšího slotu "Video Clip" vložíme 360° video, které chceme přehrávat.
  4. V okně "Lighting" (window → rendering → lighting settings), na záložce "scene" změníme "Skybox materiál" za námi vytvořený materiál v kroku 2 a máme hotovo. Po přechodu do play módu bychom měli vidět naše video.
360° zobrazení v Unity s minimem použitých zdrojů

Poznámka: Unity a podobné softwary pracují s 360° fotografiemi a videi jako s finálními soubory a nelze je tedy v těchto nástrojích nijak upravovat. Nahrávejte tedy již všechna média v takové podobě, v jaké mají být zobrazena. Úpravy 360° videí jsou možné např. v Pinnacle studio.