PanoView: una piattaforma per la realtà virtuale basata su WordPress
0 likes38 views
Panoview è una piattaforma web basata su A-Frame e WordPress che consente esperienze immersive di realtà virtuale attraverso browser e contenuti 360°. Fondata da Giovanni Micocci, la piattaforma è stata progettata per essere accessibile senza necessità di app e supporta vari ambiti, tra cui musei, formazione e architettura. Utilizza WordPress come framework per la gestione dei contenuti e offre funzionalità personalizzate per creare tour virtuali interattivi.
![1. A-FRAME
Cos’è
Is a web framework for building virtual reality
(VR) experiences. [cit.]
Nasce come progetto di Mozilla, successivamente
diventa un progetto OpenSource indipendente
(supportato da Mozilla)
Linguaggio di markup con un core rappresentato
da un framework entità/componente
Può essere fruito attraverso un normale browser
Demandiamo al framework tutto il lavoro
sporco :-)](https://image.slidesharecdn.com/bariwordcamp2018panoview-180517044135/85/PanoView-una-piattaforma-per-la-realta-virtuale-basata-su-WordPress-6-320.jpg)
PanoView: una piattaforma per la realtà virtuale basata su WordPress
- 1. PanoView: una piattaforma per la realtà virtuale basata su WordPress GIOVANNI MICOCCI
- 2. Presentazione Lavoro nell’ambito della progettazione e sviluppo web da oltre 15 anni. Sono fondatore di Ingegni Multimediali, uno studio che progetta e realizza soluzioni tecnologiche e strategie digitali “su misura”. Utilizzo di WordPress dal 2005 in ambito personale e dal 2009 in ambito professionale. Il 70% dei progetti web che realizziamo per i nostri clienti sono basati su WordPress. WordPress non solo blog e siti semplici, ma come potente piattaforma su cui sviluppare soluzioni complesse.
- 3. Agenda Introduzione A-Frame PanoView WordPress + A-Frame Demo live Domande Photo by Samuel Zeller on Unsplash
- 4. Introduzione Sviluppo crescente VR (specie in ambito gaming) Possibilità di inserire esperienze 360° “personalizzabili” in ambito web Esperienza già utilizzate (Google Maps, video 360, …) Photo by Jeshoots.com on Unsplash
- 5. 1. A-FRAME
- 6. 1. A-FRAME Cos’è Is a web framework for building virtual reality (VR) experiences. [cit.] Nasce come progetto di Mozilla, successivamente diventa un progetto OpenSource indipendente (supportato da Mozilla) Linguaggio di markup con un core rappresentato da un framework entità/componente Può essere fruito attraverso un normale browser Demandiamo al framework tutto il lavoro sporco :-)
- 7. Basato su HTML VR Cross-platform (supporta i principali dispositivi per la VR come Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard) Performance ottimizzate per il web Visual Inspector Libreria Componenti 1. A-FRAME Caratteristiche
- 8. <html> <head> <title>Hello, WebVR! - A-Frame</title> <script src="https://aframe.io/releases/0.8.0/ aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html> { —> https://aframe.glitch.me 1. A-FRAME Hello World
- 9. 2. PANOVIEW
- 10. 2. PANOVIEW Cos’è Soluzione web basata su A-Frame e WordPress Permettere la possibilità di vivere esperienze di WebVR immersiva mediante l’utilizzo di browser, (cardboard) e contenuti multimediali (foto/video) 360°
- 11. Contenuti visibili su desktop/tablet/smartphone Nessuna necessità di scaricare o installare alcun tipo di app Unica piattaforma per più canali Prima release: aprile 2017 (v1) per cliente fiera Vinitaly Gli unici requisiti sono una connessione ad internet e un browser, nulla di più. 2. PANOVIEW Caratteristiche
- 12. Tour virtuali basati su foto/video 360°: Musei/Poli culturali Negozi Formazione Architettura/Agenzie immobiliari Strutture ricettive 2. PANOVIEW Ambiti applicativi
- 13. Esperienze WebVR fruibili da browser No app Fruizione sia da desktop (possibilità embed in sito web) che da smartphone Scena personalizzabile Aggiornabile facilmente 2. PANOVIEW Pro
- 14. Veloce consumo batteria smartphone (stessa cosa con app) Necessità di essere connessi (almeno per scaricare i contenuti e inserirli nella cache del browser) Modalità VR solo 360° (non avanti/dietro/destra/sinistra con smartphone) 2. PANOVIEW Contro Photo by Thomas Jensen on Unsplash
- 15. 3. WORDPRESS
- 16. WordPress come framework di sviluppo Soluzione ideale per la gestione dei contenuti Template personalizzato per implementare specifiche A-Frame Plugin ACF PRO per gestire contenuti, con interfaccia di backend personalizzata Custom field 3. WORDPRESS Perché Photo by Ilya Pavlov on Unsplash
- 17. Uno dei plugin più utilizzati per WordPress Interfacce di backend personalizzate Semplice utilizzo dei custom field Campo repeater, consente di creare e raggruppare dinamicamente le informazioni di ogni singola entità/scena https://www.advancedcustomfields.com/pro/ 3. WORDPRESS ACF Pro
- 18. Cliente Scene Per ogni scena ci sono degli hotspot (informativi e link verso altra scena) Per ogni hotspot ci sono attributi per ogni componente (posizione, orientamento, ecc) Custom Post Type custom field 1° livello - ACF repeater custom field 2° livello - ACF repeater custom field 3° livello - ACF campo di testo 3. WORDPRESS Architettura Photo by Rawpixel on Unsplash
- 21. 4. WORDPRESS + A-FRAME
- 22. <a-assets> <img id="city" src="city.jpg"> <img id="city-thumb" src="thumb-city.jpg"> <img id="cubes-thumb" src="thumb-cubes.jpg"> <img id="sechelt-thumb" src="thumb-sechelt.jpg"> <audio id="click-sound" src="click.ogg"></audio> <img id="cubes" src="cubes.jpg"> <img id="sechelt" src=“sechelt.jpg"> </a-assets> 3. WORDPRESS + A-FRAME Codice A-Frame #1
- 23. <a-assets> <?php foreach($contenuti as $contenuto) : ?> <img id="<?php echo $contenuto->labelID; ?>" src=“<?php echo $contenuto->src; ?>”> <?php endforeach; ?> </a-assets> 3. WORDPRESS + A-FRAME Codice php #1
- 24. <a-entity id="e_1"> <a-entity id="e_1_poi_1" scale="" position="-0.4 -7 -24" rotation="-80 0 0" visible=""></a-entity> <a-entity ... position="10 25 0" rotation="45 270 0" > <a-image ...></a-image> <a-entity ...> <a-text value="nGli affreschi bassomedievali: Pie al Sepolcro - La Discesa del Cristo negli Inferinn" ...></a-text> </a-entity> </a-entity> </a-entity> 3. WORDPRESS + A-FRAME Codice A-Frame #2
- 25. <?php foreach ($POIs as $POI) : ?> <a-entity id=“e_<?php echo $contatore; ?>”> <?php if $POI is a link : ?> <a-entity id="e_1_poi_1" scale="" position="<?php echo $POI->posizione; ?>" rotation="<?php echo $POI->rotazione; ?>" visible=""></a-entity> <?php else : // $POI is infopanel?> <a-entity ... position="<?php echo $POI->posizione; ?>" rotation="<?php echo $POI->rotazione; ?>” > <a-text value="<?php echo $POI->testo; ?>" ...></a-text> </a-entity> <?php endif; ?> </a-entity> <?php endforeach; ?> 3. WORDPRESS + A-FRAME Codice php #2
- 26. 5. DEMO
- 27. —> Casaranello https://www.panoview.it/idu/576/ —> Legno&Materia https://www.panoview.it/idu/546/ —> Cantine Castello Monaci https://pnvw.it/ccm 5. DEMO URL