Share
Negli ultimi tempi abbiamo assistito a un'impennata della popolarità e delle capacità tecniche della realtà virtuale. In genere, quando pensiamo alla realtà virtuale, pensiamo ai giochi e ai software desktop dedicati. Tuttavia, questo non è l'unico spazio in cui la realtà virtuale sta crescendo.
Attraverso il potere sempre più forte di WebGL, la realtà virtuale si sta facendo strada anche nei browser sotto forma di WebVR, e insieme a essa arrivano nuovi modi per condividere la fotografia in modi sempre più coinvolgenti.
Con una foto nel formato giusto e un dispositivo VR come Google Cardboard, HTC Vive o simili, si può far sentire una persona nel posto esatto in cui si trovava la fotocamera al momento in cui è stata scattata la foto, con il capacità di guardare intorno all'ambiente, scrutando la profondità dello spazio 3D simulato.
E anche senza un dispositivo VR, le persone che navigano sul Web possono ancora scorrere intorno a un'immagine panoramica sferica usando un mouse.
In questo tutorial configureremo panorami a 360 gradi con WebVR in tre modi diversi, utilizzando strumenti che mirano a rendere WebVR accessibile e semplice da utilizzare:
Per vedere a cosa stiamo lavorando, controlla le demo di ciascuno degli strumenti sopra riportati, mostrando il tipo di immagine a 360 ° che realizzeremo:
Ci sono due modi in cui un panorama a 360 gradi può essere interagito e visto.
Ad esempio, se una persona visualizza una foto WebVR a 360 gradi tramite un dispositivo compatibile con VR appropriato, ad esempio un Google Cardboard o HTC Vive, l'immagine verrà suddivisa in due immagini e elaborata in modo tale che l'auricolare possa utilizzare loro per generare l'illusione della profondità.
In questo caso la persona guarda attorno alla scena semplicemente girando sul posto e guardando su e giù. L'accelerometro del dispositivo aggiornerà la visualizzazione dell'immagine per tracciare con la direzione che l'utente sta guardando.
Quando una persona sta guardando attraverso un dispositivo che non è in grado di funzionare con la realtà virtuale, l'immagine a 360 gradi tornerà a visualizzare come una singola immagine che può essere ruotata intorno facendo clic e trascinando.
WebVR è ancora un po 'sanguinante, quindi alcuni aspetti di esso non sono ampiamente supportati. Tuttavia, i panorami a 360 gradi richiedono solo un piccolo sottogruppo di funzionalità WebVR, quindi il supporto per almeno la visualizzazione a livello di fallback è in realtà abbastanza diffuso.
Finché un browser supporta WebGL, un visualizzatore vedrà "clicca e trascina" il fallback per una foto 360. WebGL è ora completamente funzionante in tutti i principali browser.
Per verificare se un browser che stai utilizzando supporta WebGL, visita get.webgl.org. Se vedi un cubo rotante, WebGL è attivo e funzionante.
Diversi telefoni supportano WebVR se abbinati a cuffie come Google Cardboard o Daydream. Data la recente spinta di Google su WebVR, non sorprende che le sue versioni iOS e Android di Chrome supportino WebVR out of the box.
Se hai un auricolare Samsung Gear VR, d'altra parte, dovrai utilizzare il browser Samsung.
La strada da seguire per ottenere l'installazione per visualizzare WebVR tramite un display montato su un desktop completo dipende dall'unità in questione.
Per Oculus Rift o HTC Vive / SteamVR, puoi utilizzare una build sperimentale di Chromium o Firefox Nightly. La build di Chromium WebVR è disponibile solo per Windows, mentre Firefox Nightly è disponibile anche per macOS e Linux.
Attualmente, Oculus Rift supporta solo Windows, senza piani segnalati per il supporto multipiattaforma, quindi entrambi i browser sono adatti. Tuttavia, è probabile che il supporto multipiattaforma di HTC Vice / SteamVR arriverà molto presto, quindi se hai questo dispositivo e pensi che potresti preferire creare i tuoi panorami su macOS o Linux in quel momento, potresti scegliere Firefox Nightly come principale prova il browser ora.
Per le istruzioni complete sulla configurazione di uno di questi browser per WebVR, visitare Mozilla VR.
Fuoco di Bert, 2016. I vigili del fuoco liberano l'area negli ultimi giorni dell'incendio. Williams Ranger District, a nord di Parks, AZ. 6-21-16. Foto di Dyan Bone. Credito al servizio forestale degli Stati Uniti, regione Southweste rn, foresta nazionale Kaibab. CC BY SA.La prima cosa di cui avrai bisogno è una fotografia in un formato adatto ai panorami WebVR, che puoi vedere indifferentemente come una foto sferica, equirettangolare oa 360 gradi. Puoi prenderne uno tuo:
Abbiamo alcuni ottimi articoli che trattano alcune delle tecniche che puoi usare:
In alternativa, è possibile ottenere immagini equirettangolari via Flickr. Utilizzeremo un'immagine della foresta nazionale di Kaibab per questo tutorial.
Crea una directory per ospitare i panorami che creerai, scarica il file sopra e poi rinomina l'immagine in "fire.jpg".
Se hai intenzione di visualizzare il tuo panorama in WebVR completo piuttosto che semplicemente come un'immagine di clic e trascinamento in un browser desktop, probabilmente vorrai scaricare la versione "Dimensioni originali" a 10240 x 5120 per la massima fedeltà visiva. Tieni presente, tuttavia, che gli utenti potrebbero visualizzare uno schermo bianco vuoto mentre questa immagine di grandi dimensioni viene caricata, a seconda della loro connessione Internet. Se questo è potenzialmente un problema, scegli invece una delle dimensioni più piccole.
NB: più avanti, se vedi un buco nero nella parte inferiore dei panorami creati con questa immagine, significa che il file è incompleto e dovrai scaricarlo di nuovo.
Se desideri testare i tuoi panorami su un dispositivo remoto / secondario, ad esempio su un telefono compatibile Cardboard, ti consigliamo anche un modo per visualizzare i tuoi file attraverso la rete locale. Puoi farlo anche se preferisci, ma due possibili opzioni che potresti utilizzare sono:
Ogni esempio si troverà nella propria pagina Web, quindi avrai solo bisogno di un documento HTML di base per iniziare con ogni esempio:
Foto panoramiche a 360 °
Nella directory del tuo progetto, crea tre file HTML:
Quindi incollare il codice di avviamento in ciascun file, modificando il contenuto del file
Se stessimo creando un panorama WebVR da zero, sarebbe piuttosto complesso, richiedendo una codifica abbastanza estesa. Tuttavia, con framework eccellenti come WebVR Starter Kit, il processo viene ridotto a due passaggi.
Tutte le esperienze VR che puoi creare con WebVR Starter Kit sono alimentate da un singolo file JavaScript. Quindi, per iniziare, devi solo caricare il file JS nel ... sezione del file "webvrstarterkit.html" incollando il seguente frammento:
Se preferisci non caricare questo file JS da un'origine esterna, puoi scaricare il progetto WebVR dal suo repository GitHub. Troverete il file "vr.js" all'interno della directory "build".
Con il JavaScript WebVR caricato, la pagina è ora pronta per aggiungere elementi VR. Per creare un panorama a 360 gradi, inserisci il seguente codice nel ... sezione:
E questo è tutto! Il tuo panorama a 360 gradi è ora pronto per partire.
Nota che il valore tra parentesi è il percorso della nostra immagine equirettangolare. Questo può anche essere impostato per caricare un'immagine esterna inserendo invece un URL.
Quando visualizzi l'anteprima del tuo file "webvrstarterkit.html" ora, dovrebbe apparire così: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html.
A-Frame è un diverso framework WebVR, ma i mezzi per creare un panorama a 360 gradi sono molto simili a quelli che hai completato sopra. Come con WebVR Starter Kit, A-Frame è alimentato da un singolo file JavaScript. Carica quel file nel ... sezione del tuo file "aframe.html" con questo codice:
Se preferisci non caricare il file JS da un'origine esterna, puoi scaricare il repository A-Frame da GitHub. Dalla cartella "dist", dovresti utilizzare la versione ridotta dello script per la versione corrente del progetto, ad es. "Aframe-v0.4.0.min.js".
Invece di utilizzare un tag script nel corpo della pagina, A-Frame utilizza i propri elementi HTML personalizzati. Il primo elemento da aggiungere è sempre
Il
Quindi, per aggiungere la tua immagine a 360 gradi, inserisci il seguente codice nel ... sezione:
I risultati dovrebbero assomigliare a questo: https://tutsplus.github.io/VR_Panoramas/aframe.html.
Sotto il cofano, GuriVR è in realtà la libreria A-Frame. Quello che cerca di fare è dare un modo intuitivo e diretto per impostare esperienze di realtà virtuale attraverso un'interfaccia di editor.
Per usare GuriVR, vai all'editor GuriVR. Nell'interfaccia di modifica, puoi semplicemente inserire la parola panorama seguito dall'URL di un'immagine sferica e GuriVR si occuperà del resto per te.
Una volta che hai fatto, clicca Salvare nella parte inferiore dello schermo, quindi fare clic su Condividi il link pulsante, e ti verrà fornito un link che puoi dare agli altri per mostrare il tuo panorama.
In alternativa, puoi incorporare il panorama in una pagina web utilizzando un iframe elemento. Aggiorna il tuo file "gurivr.html" con il seguente codice, assicurandoti di aggiungere il tuo URL GuriVR all'iframe src attributo:
GuriVR 360 Demo di immagini
Quando hai fatto quanto sopra, dovresti ottenere un panorama a 360 gradi come questo: https://tutsplus.github.io/VR_Panoramas/gurivr.html.
Ora hai tre diversi modi per creare panorami basati su WebVR e consentire alle persone di connettersi con la tua fotografia in un modo completamente nuovo. Ricapitoliamo rapidamente ciò che abbiamo coperto:
Accentsconagua
copione tag, e quindi all'interno di utilizzare VR.panorama () per creare la tua immagine 360.panorama e poi l'URL della tua foto per creare la tua immagine 360. Facoltativamente, inserisci l'URL fornito in una pagina web tramite un iframe.Ora che hai visto con quanta rapidità puoi creare un'esperienza WebVR da una foto sferica, spero che tu sia ispirato a uscire e catturare il mondo in tre dimensioni!
