Virtual Tour realizzato con Pannellum ed integrazione LeafletJS

Introduzione

Il virtual tour sta conoscendo sempre maggiore applicazione e diffusione nel settore culturale. A tal proposito è bene sottolineare che si è imparato a conoscere e apprezzare questo strumento specialmente in tempo di pandemia, momento storico in cui ha rivelato maggiormente le sue potenzialità e versatilità.

Nell’ambito dello sviluppo del Virtual Tour di Pannellum, i cosiddetti periodi di lock downdurante la pandemia COVID-19 sono stati, per gli autori, il massimo momento di sperimentazione nell’arco di vita del suddetto progetto. Difatti, erano già in uso strumenti gratuiti e open source per la creazione di virtual tour ma si è deciso di ampliare le conoscenze e testare nuovi mezzi che fossero totalmente open source: fino a questo momento infatti si adoperava solo Marzipano tool che, per quanto open source, è parzialmente proprietà di Google per le sue funzionalità online (https://www.marzipano.net/). L’obiettivo del progetto è dunque quello di dimostrare che non occorrono strumenti eccezionali per giungere alla realizzazione di un ottimo virtual tour che sia, soprattutto, di facile utilizzo e accesso per tutti.

Origine del VT

Se attualmente il virtual tour viene ampiamente adoperato in campo culturale, un esempio è il catalogo “Gran tour virtuale. Viaggio nel patrimonio” realizzato dal Ministero della Cultura, all’epoca Ministero dei beni e delle attività culturali e del turismo, che raccoglie i progetti che hanno come soggetti i luoghi della cultura ministeriali (https://www.beniculturali.it/virtualtour). Occorre però immaginare che non è sempre stato così: è infatti esempio di una delle tantissime tecnologie nate con diverse funzionalità e poi acquisite dal mondo dei beni culturali.

I virtual tour nascono per scopi commerciali, principalmente per la promozione del settore immobiliare e turistico per poi approdare nella nostra quotidianità attraverso Google Maps. Dopo una lunga fase di sperimentazione, nel 2007, venne introdotto il servizio Google Street View (https://www.google.com/intl/it_it/streetview/). La copertura inizialmente ha riguardato solo 5 città statunitensi per poi allargarsi in breve tempo ad altri centri degli USA e a diverse città canadesi, australiane, giapponesi ed europee per poi estendersi, in breve tempo, alla maggioranza del globo. Un virtual tour si compone di fotografie sferiche scattate a distanza ravvicinata che consentono all’utente di esplorare e visionare le strade, proprio come se si trovasse sul luogo, con una vista completa a 360 gradi.

Dopo che Google ha portato questa tecnologia all’interno delle attività commerciali per accrescerne la visibilità si ha, nel 2013, la prima apertura al settore della cultura con il progetto Google Art Project, poi divenuto Google Arts&Culture (https://artsandculture.google.com/?hl=it), tramite il quale sono stati trasposti in forma di virtual tour ad altissima risoluzione i maggiori musei del mondo.

Ad oggi si contano migliaia di luoghi della cultura digitalizzati da Google, dimostrando così che la loro virtualizzazione non sostituisce la visita fisica ma, al contrario, costituisce un valore aggiunto, una forma di apertura e di superamento delle barriere.

Caratteristiche

Un virtual tour propriamente detto si compone di una sequenza di immagini sferiche. Tali immagini sono dette equirettangolari per il loro particolare dimensionamento: si tratta infatti di immagini rettangolari il cui rapporto base-altezza è di 2:1. Tale proporzione consente la trasposizione della sfera sul piano (https://onix-systems.medium.com/how-to-use-360-equirectangular-panoramas-for-greater-realism-in-games-55fadb0547da; https://www.casa360.net/formato-foto-panoramiche-equirettangolari/). Le immagini sferiche, anche dette in gergo “sfere”, sono ordinate in modo tale che la loro sequenza, nel virtual tour, simuli la successione degli spazi nella realtà. Per ottenere tale risultato devono essere adoperati appositi software tra i quali spiccano per notorietà Matterport (https://matterport.com/it), 3D Vista (https://www.3dvista.com/it/) e We Book (https://webobook.com/it/virtual-tour-software.html) e che consentono di realizzare un progetto completo in cui le immagini siano arricchite da ulteriori contenuti, oltre che collegate reciprocamente mediante apposite icone grazie alle quali l’utente finale avrà totale libertà di movimento.

Realizzazione

La creazione di un virtual tour si compone di cinque fasi.

Campagna fotografica

La prima fase è quella dell’acquisizione delle immagini sferiche. Allo scopo è stata adoperata una macchina fotografica a 360 gradi, Ricoh Theta S (https://theta360.com/it/about/theta/s.html). Si tratta di uno strumento di semplice utilizzo, commercializzata principalmente per scopi ricreativi, ma che garantisce una qualità di immagine tale da renderla adatta anche per un uso in campo di studio e/o lavorativo.

Il corpo macchina, piccolo e leggero, la rende estremamente maneggevole e può essere utilizzata a distanza grazie all’applicazione apposita per dispositivi mobili.

Lo strumento deve essere posizionato su un sostegno che sia il meno invasivo possibile, preferibilmente su un’asta o monopiede. La macchina infatti è dotata di due obiettivi che, all’atto dello scatto, producono ognuno un’immagine di circa 200 gradi di apertura così da avere un margine di sovrapposizione. Le due immagini vengono unite automaticamente dalla macchina mediante un’operazione detta di stitching.

L’immagine finale presenterà, in corrispondenza del nadir, una zona d’ombra dovuta al corpo macchina in corrispondenza del quale si avranno inevitabili deformazioni per l’incapacità dello strumento di compiere una compensazione completa. Dunque, minore è l’impatto del supporto e minori saranno le deformazioni dell’immagine in corrispondenza del nadir.

Postroduzione

La fase di postproduzione è un passaggio importante per la correzione di parametri non controllabili in fase di acquisizione.

Il programma adoperato, GIMP (https://www.gimp.org/) è un software di fotoritocco completo tramite il quale è possibile modificare, integrare e personalizzare le immagini.

Nel caso specifico è stato arricchito dalle funzionalità del plugin G’MIC (GREYC’s Magic for Image Computing (https://gmic.eu/). Il plugin si compone di centinaia di filtri tra i quali si individua il filtro “Equirectangular to Nadir-Zenith”, fondamentale per la lavorazione delle immagini sferiche poiché permette l’estrapolazione dalle immagini equirettangolari di due porzioni, coincidenti con zenith e nadir appunto, che vengono restituiti su due piani quadrati. L’isolamento del nadir, in particolare, è indispensabile per intervenire sulle deformazioni dovute alla compensazione che viene eseguita automaticamente dallo strumento e che permette di effettuare delle ricostruzioni o di procedere con l’inserimento di un logo.

Creazione delle tiles

Le sfere che costituiscono il virtual tour vengono collegate tramite l’applicativo Pannellum, (https://pannellum.org) un visualizzatore di foto sferiche, gratuito e open source per il Web, realizzato utilizzando HTML5, CSS3, JavaScript e WebGL.

Per comporre il virtual tour tramite l’applicativo Pannellum (https://pannellum.org/documentation/examples/multiresolution/ ) occorre preliminarmente trasformare le sfere in formato “tiles”, ovvero procedere alla frammentazione dell’immagine equirettangolare in un elevato numero di immagini di dimensione inferiore e forma quadrata, che risultano gestibili più facilmente dai motori di ricerca.

Questa operazione non è indispensabile, ma fortemente consigliata per avere una visualizzazione fluida delle sfere in Pannellum, altrimenti denominata “multi-risoluzione”.

Ciò richiede la conversione di una immagine equirettangolare nel formato “multi-risoluzione” di Pannellum utilizzando lo script generate.py.

Per poter creare tiles in “multi-risoluzione”, è necessario avere installato il programma Nona, che è disponibile come parte di Hugin (http://hugin.sourceforge.net/) così come Python3 con i pacchetti Pillow e NumPy.

Creazione del virtual tour

È possibile creare un collegamento tra più sfere in un tour virtuale utilizzando il linguaggio in modo opportuno come dimostrato nella porzione di codice seguente adottata come esempio (https://pannellum.org/documentation/examples/tour/).

“scenes”:{

“circle”:{

“title”: “Mason Circle”,

“hfov”: 110,

“pitch”: -3,

“yaw”: 117,

“type”: “equirectangular”,

“panorama”: “/images/from-tree.jpg”,

“hotSpots”: [

{

“pitch”: -2.1,

“yaw”: 132.9,

“type”: “scene”,

“text”: “Spring House or Dairy”,

“sceneId”: “house”

}

]

},

“house”:{

“title”: “Spring House or Dairy”,

“hfov”: 110,

“yaw”: 5,

“type”: “equirectangular”,

“panorama”: “/images/bma-0.jpg”,

“hotSpots”: [

{

“pitch”: -0.6,

“yaw”: 37.1,

“type”: “scene”,

“text”: “Mason Circle”,

“sceneId”: “circle”,

“targetYaw”: -23,

“targetPitch”: 2

}

]

}

}

Come è possibile riscontrare, nel codice sono presenti due sfere identificate dalle variabili circle” e “house”, a loro volta contenute in una variabile più generale “scenes” che gestisce tutte le eventuali sfere del virtual tour.

Ogni sfera è caratterizzata da una serie di parametri (https://pannellum.org/documentation/reference/) descritti di seguito.

titolo (stringa): Se impostato, il valore viene visualizzato come titolo della sfera. Se non si desidera alcun titolo, non è necessario impostare questo parametro;

hfov (numero): Imposta il campo visivo orizzontale iniziale della sfera in gradi. Il valore predefinito è 100;

pitch (numero): Imposta la posizione di inclinazione iniziale della sfera in gradi. Il valore predefinito è 0;

yaw (numero): Imposta la posizione di imbardata iniziale della sfera in gradi. Il valore predefinito è 0;

type (stringa): Specifica il tipo di hotspot;

panorama (stringa): Imposta l’URL dell’immagine equirettangolare.

Per ogni sfera posso esserci più hotspot che consentono il collegamento ad altre sfere a partire da essa. Gli hotspot sono caratterizzati dai seguenti parametri.

pitch (numero): Specifica la porzione dell’hotspot, in gradi.

yaw (numero): Specifica l’imbardata della posizione dell’hotspot, in gradi.

type (stringa): Specifica il tipo di hotspot.

text (stringa): Questo specifica il testo che viene visualizzato quando l’utente passa sopra l’hotspot.

sceneId (stringa): Specifica l’ID della scena cui l’hotspot si collega.

Inserimento della mappa

Nel virtual tour è stata integrata una mappa interattiva. Tale strumento consente di arricchire l’esperienza dell’utente durante la fruizione della visita virtuale.

La mappa è realizzata in LeafletJS, (https://leafletjs.com/) una libreria JavaScript open source per mappe interattive ottimizzate per dispositivi mobili.

Tale contenuto può essere derivato da un’elaborazione CAD, successivamente trasformata in formato vettoriale GIS. Per l’inserimento di tale elemento all’interno di LeafletJS è necessario infine trasformare il vettoriale GIS nel formato GeoJSON, particolarmente indicato per applicazioni web.

Il virtual tour: il caso di Villa Glori

La metodologia di lavoro adoperata è applicabile su larga scala e può essere utilizzata indifferentemente su qualunque sito culturale.

Possono essere individuate, nel campo dei beni culturali, le più disparate funzionalità e utilità.

Nel settore più specifico dell’archeologia il virtual tour può diventare un utile strumento di accompagnamento ai metodi di rilievo e documentazione grafica e fotografica più tradizionali dal momento che l’immagine sferica permette di avere, con un unico scatto, la visione integrale dell’area ripresa.

Il virtual tour realizzato si presenta con una schermata occupata quasi esclusivamente dalla foto sferica, alla cui apertura, essendo attiva la modalità ”autorotazione”, inizia appunto un movimento automatico che deve invitare il fruitore ad assumere il controllo della visita.

La schermata in alto è delimitata dalla “titlebar”, una sottile barra destinata ad ospitare il nome identificativo dell’immagine che si sta visualizzando; all’estremità destra è poi ospitato il pulsante per l’apertura e la chiusura della mappa interattiva. Nella parte bassa, la “footer bar”, una barra gemella a quella superiore, è utile per l’inserimento di loghi dei soggetti responsabili della realizzazione del virtual tour e, al contempo, si consente l’apertura dei rispettivi siti internet.

All’interno di ogni immagine si individuano delle frecce che funzionano da “link hotspot”, ossia dei pulsanti per il collegamento reciproco delle sfere che vengono così ordinate simulando il percorso di visita. Al passaggio del mouse compare un piccolo popup, il “tooltip”,che contiene il nome della sfera collegata.

L’elemento saliente del progetto è indubbiamente la già citata mappa interattiva la cui apertura è possibile grazie al pulsante posto in alto a destra. Nella rappresentazione schematica della planimetria del sito i punti, visibili tramite immagine sferica, sono identificati da un numero: anche questi sono dei pulsanti che consentono il passaggio da un’immagine all’altra, alternativi ai “link hotspot”. La mappa può essere, all’occorrenza, leggermente ingrandita o rimpicciolita.

Il virtual tour è stato progettato in modo tale da consentire la perfetta adattabilità su qualsiasi tipo di dispositivo. Nel momento in cui viene visualizzato su apparecchi mobili, quali smartphone e tablet, gli elementi che incorniciano le immagini sferiche aumentano leggermente di dimensione per facilitare la digitazione; la mappa invece, a seguito della sua apertura, viene visualizzata a schermo intero così da agevolarne la fruizione.

La sperimentazione di Pannellum per la realizzazione di virtual tour è stata condotta su fotografie sferiche realizzate nel parco romano di Villa Glori.

La scelta è stata dettata dalla necessità di individuare uno spazio liberamente accessibile nel maggio 2020, periodo non facile per le numerose chiusure e limitazioni dettate dalla pandemia COVID- 19. Gli autori avrebbero preferito lavorare su materiale prodotto in ambito archeologico, nel contesto di una campagna di scavo ma, per le ragioni sopra indicate, ciò non è stato possibile.

Il Parco è uno spazio di notevole importanza per il suo stretto legame con la storia, è stato infatti sede di battaglie durante il Risorgimento. Attualmente è un luogo della memoria, da qui la sua denominazione di Parco delle Rimembranze, ma anche sede di una collezione di arte contemporanea a cielo aperto che conta molteplici installazioni site specific oltre che di alcuni siti archeologici.

I punti di scatto sono stati selezionati per dare un’immagine completa della Villa oltre che per evidenziare i punti maggiormente significativi quali quelli coincidenti con le installazioni e i monumenti a memoria delle battaglie e dei caduti. Per quanto ampi i vari settori sono stati immortalati da un’unica fotografia per evitare ridondanze.

La realizzazione della campagna si è protratta per qualche ora, date le difficoltà nel posizionare correttamente la strumentazione nel terreno irregolare, cui si sono aggiunti tempi di attesa dovuti alla necessità di acquisire le immagini in assenza di persone, sia per questioni legate alla privacy che per rendere le fotografie più leggibili.

La fase di acquisizione del dato fotografico è l’unica che viene svolta direttamente in situ, le fasi successive, di pura elaborazione del dato fotografico, vengono portate avanti lontano dal sito oggetto.

Conclusioni

Allo stato attuale il virtual tour non comprende contenuti aggiuntivi fatta eccezione per la mappa interattiva, la cui presenza si ritiene un buon risultato dal momento che altre applicazioni consentono, di norma, l’inserimento di una sola mappa statica.

La mappa dinamica consente una migliore navigazione e la possibilità di riportare una maggiore e più completa quantità di informazioni del sito culturale.

Si sottolinea inoltre la scelta di LeafletJS per la realizzazione della mappa interattiva, applicativo ampiamente utilizzato nell’ambito della cartografia digitale su web. Contrariamente sarebbe stato necessario l’uso di altri applicativi cartografici meno diffusi o la realizzazione di un applicativo from-scratch. Tali ultime due scelte avrebbero vanificato gli indubbi vantaggi delle funzioni di LeafletJS, ormai riconosciute dalla comunità di sviluppatori e utilizzatori in ambito di applicazioni cartografiche online.

Il progetto è però facilmente implementabile con ulteriori pulsanti, detti “info hotspot” da collocare in corrispondenza di punti salienti delle immagini sferiche e che permetterebbero l’apertura di popup informativi all’interno del quale porre ulteriori contenuti, anche multimediali.

Nel settore archeologico una campagna fotografica cadenzata nel tempo e strutturata in diversi virtual tour, rappresentativi ognuno di una specifica fase di scavo, permettono di avere un’ulteriore memoria del procedere dell’attività di studio da affiancare agli altri strumenti di documentazione normalmente adoperati. Diviene inoltre un utile strumento di divulgazione delle conoscenze per i “non addetti ai lavori”.

Grazie alle caratteristiche che il lavoro assumerà mediante le implementazioni future che puntano all’integrazione delle immagini con popup informativi, renderanno lo strumento utile sia per la divulgazione delle informazioni ma anche, e soprattutto, per la documentazione della campagna di scavo. All’interno dei popup possono essere visualizzate, o anche richiamate nella forma di contenuto esterno, tutti i documenti prodotti durante le attività: schede, documentazione fotografica, rilievi tradizionali e laser per fare alcuni esempi. Un sapiente posizionamento dei popup consentirebbe di mantenere memoria, inoltre, dell’esatta collocazione dei reperti rinvenuti in fase di scavo creando un collegamento con oggetti che, dopo lo scavo, perdono inevitabilmente la loro posizione originaria.

Bibliografia

• Albrizio, P., F. De Virgilio, G. Panzarino, and E. Zambetta. 2013. “WebGIS e divulgazione del dato archeologico con software open source. Il progetto “Siponto aperta”. In Proceedings of ArcheoFOSS VIII: Free, libre and open source software e open format nei processi di ricerca archeologica, edited by Filippo Stanco and Giovanni Gallo, 101-114. Oxford: Archeaopress.
• Communication Strategies Lab, 2012. “Realtà aumentate. Esperienze, strategie e contenuti per l’Augmented Reality”. Milano: Apogeo.
• Conti, F. 2018. “Tecniche e strumenti software per la produzione di visite virtuali”. Torino. https://webthesis.biblio.polito.it/8147/1/tesi.pdf
• De Luca, V., C. Conati Barbaro, C. La Marca, M.L. Savino, and P. Rosati. 2019. “L’open source per i musei: il tour virtuale del Museo delle Origini (Sapienza Università di Roma)” in Archeologia e Calcolatori, 30: 479-482.
• Orlandi, M., Zambruno, S., Vazzana, A. 2014. “Tecnologia, Beni Culturali e Turismo: i Tour Virtuali (Virtual Tours) come strumento per una corretta comunicazione dei Beni Culturali” in Storia e Futuro, Rivista di Storia e Storiografia Contemporanea online, 34.
• Kennicott, P. 2011. “National Treasures: Google Art Project Unlocks Riches of World’s Galleries” Washington: The Washington Post.
• Petroff, M. 2019. “Pannellum: a lightweight web-based panorama viewer”in Journal of Open Source Software,4 (40): 1628. https://doi.org/10.21105/joss.01628.
• Waters, F. 2011. “The Best Online Culture Archives”. Londra: The Telegraph.