A-Frame, la realtà virtuale con del semplice HTML

Sin dagli anni ’80 gli sviluppatori hanno inseguito il sogno di portare la realtà virtuale nella vita di tutti quanti. Film come Il Tagliaerbe hanno spinto questo concetto ai limiti della realtà e oggi voglio presentarti una tecnologia che ti permetterà di creare questi effetti, con del semplice HTML.

Prima di proseguire e andare avanti con i singoli esempi devo essere onesto, non si tratta di semplice HTML. Anche se gli elementi che vedremo possono ricordarci da vicino questa sintassi, questi non sono stati inseriti all’interno delle sue specifiche ma è possibile sfruttarli grazie a un framework facile da includere nelle nostre pagine.

Grazie anche al video prodotto dal nostro Eugenio oggi ti mostreremo come sia possibile creare un ambiente virtuale e posizionare al suo centro un bel pupazzo di neve.

Sì, hai capito bene. Ci stiamo avvicinando al natale e da bravi geek che siamo al posto di uscire per strada e giocare con la neve (materia che comunque manca a Roma anche nei mesi più freddi), abbiamo deciso di creare nel caldo delle nostre case un bel pupazzo 😀

Non ci prendere per sfaticati perché per realizzare questo esempio ci siamo messi a studiare una nuova tecnologia che prende il nome di A-Frame e che è stata sviluppata dal team MozVR e che ha rilasciato questo framework come progetto open source all’interno di GitHub ricevendo, a oggi, più di 2000 commit!

La bellezza di questo framework è dovuta alla sua capacità di sfruttare il DOM delle nostre pagine web per la realizzazione di scene, camere, entità e componenti che permettono a qualsiasi sviluppatore frontend di creare il proprio mondo virtuale!

Aspetta un attimo, sto forse correndo troppo?

Non hai mai sentito parlare di realtà virtuale? Pensavi che la realtà virtuale fosse una tecnologia dedicata agli Oculus Rift e alle costose console per videogiocatori accaniti?

Ebbene, se così fosse sappi subito che ti stai sbagliando.

Ad oggi la realtà virtuale è diventata una tecnologia alla portata di tutti e come scoprirai all’interno di questo articolo, basta un semplice browser possibilmente eseguito in uno smartphone o in un visore compatibile e il gioco è fatto!

Concetti generali sulla realtà virtuale e i suoi utilizzi

Facciamo un piccolo passo indietro, soprattutto perché questa è la prima volta che parliamo di realtà virtuale all’interno del nostro portale e mi sembra doveroso introdurla al meglio. Credo che che tu conosca già a che cosa sto facendo riferimento ma allo stesso tempo un piccolo ripasso non farà male a nessuno.

Quello che indossa la ragazza in questa immagine è uno dei moderni visori che permettono di immergersi all’interno della realtà virtuale. Grazie alle cuffie e all’ampio visore veniamo completamente esclusi dal mondo esterno e possiamo catapultarci nel mondo virtuale.

A differenza di una console, dove utilizziamo un joystick per spostare il punto di vista del nostro personaggio nel mondo virtuale all’interno del gioco, grazie a questo strumento possiamo semplicemente ruotare la nostra testa per vedere un angolo che non è incluso nel nostro campo visivo.

Fino ad oggi sviluppare per questa tecnologia è sempre stato un compito arduo perché l’unica possibilità era quella di focalizzare la nostra formazione sullo sviluppo all’interno di determinate piattaforme, con il rischio che se una di queste viene ritirata dal mercato tutto il tempo che avremmo investito in questa attività saranno state sprecate.

Invece oggi, forse grazie anche alla diffusione delle foto e dei video a 360 gradi, basta utilizzare un semplice sostegno anche da stampare tranquillamente a casa per realizzare un rudimentale visore in grado di catapultarci in questa realtà.

Sembra proprio che la tecnologia del futuro sia la realtà virtuale ma il framework che voglio presentarti quest’oggi permette di abbattere qualsiasi limite dato che non sarà necessario scaricare o acquistare nessun particolare programma o visore. Come anticipato anche precedentemente, grazie ad A-Frame tutto quello di cui hai bisogno è un browser.

Come si gestisce un ambiente 3D con A-Frame

Se stai leggendo questo articolo soltanto per vedere il video di Eugenio, non ti preoccupare a breve lo troverai inserito direttamente in questo articolo ma prima di arrivare a quel punto credo che sia opportuno introdurti ad alcuni concetti fondamentali.

Per prima cosa, anche se stiamo sfruttando una tecnologia dedicata al web come il DOM, ci sono diversi concetti che ritengo essenziali per poter iniziare a sviluppare degli applicativi in grado di farci muovere all’interno di un ambiente tridimensionale.

Al posto di gestire una pagina web che si sviluppa in un ambiente in 2D (generalmente) dall’alto verso il basse, grazie ad A-Frame possiamo avere a nostra disposizione un intero ambiente 3D dove il nostro visitatore può spostare il suo punto di vista e osservare l’ambiente circostante.

Oggi Eugenio ci spiegherà come poter creare un pupazzo di neve ma per poterlo fare dobbiamo creare per prima cosa una scena.

Hai capito bene, il punto di partenza di qualsiasi progetto 3D è la creazione di una scena all’interno della quale possiamo posizionare una camera che rappresenterà il punto di vista del nostro visitatore. Da questo punto di vista possiamo iniziare a guardarci intorno osservando il cielo e la terra che ci circondano.

<!-- Creo la scena per il mondo 3D --> 
<a-scene> 

	<!-- Definisco il cielo delle scena --> 
	<a-sky color="#81D4FA"></a-sky> 

	<!-- Definisco il piano della scena --> 
	<a-plane color="#fff" height="20" width="20"></a-plane> 

</a-scene>

Quanto ti ho appena descritto viene riassunto in questo blocco di codice, cerchiamo di capire meglio la funzionalità degli elementi utilizzati:

• a-scene – questo rappresenta l’elemento radice di tutto il progetto, tutti gli altri elementi (o entità) devono essere dei figli di questo in modo tale che sia possibile posizionarli all’interno dello spazio tridimensionale creato.
• a-sky – dal nome molto intuitivo questo elemento (o entità) permette di inserire un colore o un’immagine che circonderà il nostro visitatore.
• a-plane – l’ultimo elemento (o enità) di questo blocco di codice è quello che definisce il piano di appoggio, quello dove il visitatore potrà camminare e muoversi all’interno di questo mondo virtuale.

Ho cercato di enfatizzare un po’ la parola “camminare” perché, anche se possibile muoversi all’interno dello spazio virtuale, raramente lo facciamo con le nostre gambe reali. La cosa sulla quale volevo invece focalizzare la tua attenzione è il continuo ripetersi di “elemento o entità” sul quale si basa lo sviluppo in A-Frame.

Dato che questo framework utilizza lo stesso DOM con il quale siamo abituati a lavorare per costruire le nostre pagine web è molto comune riferirsi ai vari oggetti come a elementi, ma stiamo facendo un errore! All’interno di A-Frame non esistono elementi ma entità che rappresentano l’oggetto minimo dal quale inizia il nostro sviluppo.

Quindi è sembre bene tenere a mente che in A-Frame tutto è un’entità, anche la nostra camera.

<a-entity position="0 0 3.8"> 
  <a-camera></a-camera> 
 </a-entity>

In questo blocco di codice abbiamo anticipato un concetto che per quanto semplice ritengo necessario chiarire: esistono due tipi di entità quelle già definite all’interno del framework (come a-sky, a-plane e a-camera) e quelle che possiamo definire noi grazie agli attributi interni come grazie appunto all’entità a-entity.

Dato che l’entità a-camera non ha a sua disposizione degli attributi che ci permettono di posizionarla all’interno dello spazio 3D, nel nostro esempio abbiamo dovuto aggiungere l’entità contenitore a-entity che ha permesso di posizionare la nostra camera nello spazio.

Sicuramente non è la prima volta che vedi come si utilizza un attributo nel DOM, ma dato che con A-Frame abbiamo la possibilità di creare un mondo virtuale con l’attributo position possiamo definire le coordinate di qualsiasi entità. Per meglio dire possiamo definire le coordinate di qualsiasi entità che possiede questo attributo, abbiamo infatti visto che a-camera non ha nelle sue specifiche questa possibilità.

In uno spazio 3D le coordinate vengono definite dai tre assi cartesiani che conosciamo fin dalle elementari:

• X è l’asse che ci permette di spostare un elemento sull’asse orizzontale
• Y è l’asse che ci permette di spostare un elemento sull’asse verticale
• Z è l’asse che ci permette di spostare un elemento sull’asse della profondità

Questa sequenza viene rispettata anche all’interno dell’attributo position dove, modificando soltanto l’asse Z con un valore positivo, stiamo dicendo ad A-Frame di spostare la nostra camera di 3.8 lontano dal centro della scena. Se avessimo usato un valore negativo avremmo avvicinato l’entità a-entity al centro della scena e di conseguenza anche la camera perché gli elementi che sono contenuti all’interno di un’entità ereditano la posizione definita nel contenitore.

Crea un pupazzo di neve con A-Frame

È tutto l’articolo che te ne parlo, penso che sia proprio giunto il momento di condividere con te il lavoro nel nostro Eugenio e lasciarti scoprire come sia possibile creare un pupazzo di neve all’interno di un ambiente 3D, che ne dici?

All’interno del video che ti ho appena inserito Eugenio ci ha mostrato passo passo come sfruttare A-Frame per creare delle forme geometriche che hanno dato vita al pupazzo di neve ma non mi sento di interrompere qua questo articolo perché come avrai scoperto dal video stesso, ci sono molte altre informazioni che dobbiamo trattare…

Sicuramente potremo riprendere questo argomento in successivi articoli o corsi all’interno del portale ma prima di concludere vorrei togliermi un sassolino dalla scarpa e parlarti meglio delle entità che si possono utilizzare all’interno di A-Frame.

Precedentemente ti ho detto che abbiamo a disposizione due tipi di entità distinti e che la più generale di tutte è rappresentata da a-entity, ma perché con A-Frame abbiamo queste entità?

Tutto deriva dal fatto che il framework A-Frame è stato sviluppato seguendo le linee guida del pattern ECS (Entity-Component-System) che viene strutturato nel seguente modo:

• Entity – come descritta precedentemente, un’entità è un oggetto generale che si può inserire all’interno della scena che inizialmente non mostra assolutamente niente, esiste soltanto.
• Component – un componente non è altro che un modulo riutilizzabile che può essere inserito all’interno delle entità per aggiungere un’immagine, delle funzionalità o uno specifico comportamento.
• System – grazie a questo abbiamo la possibilità di gestire lo spazio, le classi e servizi che vengono utilizzati dalle entità.

Visto in questo modo può sembrare una distinzione un po’ confusionaria dato che questo pattern presenta diversi elementi che collaborano l’un l’altro ma come succede con tutti i framework e linguaggi di programmazione questo primo scoglio iniziale può essere abbattuto grazie alla pratica.

In questo video abbiamo visto come sia possibile sfruttare delle semplici forme geometriche come le sfere e i cilindri per dare vita al nostro pupazzo di neve, ma basta andare a leggere la documentazione di A-Frame per scoprire che esistono molte altre primitive che ci permettono di creare qualsiasi altro tipo di oggetto in un mondo tridimensionale.

Conclusioni

Ebbene abbiamo giunto la fine di questo articolo dove affrontiamo un nuovo argomento che permette a qualsiasi sviluppatore frontend di poter creare i propri mondi 3D e dare libero sfogo alla propria creatività.

Ovviamente questo argomento non può essere affrontato completamente in un singolo articolo e come avrai sentito anche dalla voce del nostro Eugenio la nostra intenzione sarebbe continuare ad affrontare questo argomento all’interno di uno dei nostri corsi in modo da poter organizzare al meglio le informazioni che dobbiamo condividere e permetterti di apprendere questi nuovi concetti nel modo più veloce possibile.

Se anche tu sei interessato a questo argomento non esitare a farcelo sapere nei commenti che non vediamo l’ora di tuffarci assieme in questo nuovo ambito dello sviluppo.