Corsi on-line

AFrame: realtà virtuale sul Web con JavaScript

A-Frame è un framework Open Source concepito per semplificare la creazione di soluzioni Web based per la realtà virtuale; progettato e implementato dagli sviluppatori di MozVR (il Mozilla VR Team), esso permette di utilizzare la JavaScript 3D library threeJS e  la tecnologia per l’accelerazione grafica 3D WebGL per realizzare elaborati tridimensionali visualizzabili tramite un comune browser per la navigazione Internet, senza il ricorso a plugin di terze parti.AframeSi tratta di uno strumento di lavoro pensato per Web developer, designer, grafici e artisti che desiderano creare scenari 3D sprovvisti di competenze approfondite riguardo all’impiego delle API (Application Programming Interface) WebGL; quest’ultima gode di un supporto sufficientemente esteso sia su Desktop che sui dispositivi mobili, motivo per il quale AFrame potrà essere utilizzato per creare soluzioni multipiattaforma, fruibili anche su iOS, Android e visori headset come Oculus Rift.

Uno dei vantaggi derivanti dall’adozione di questo framework deriva dal fatto che esso potrà essere sfruttato sia dai principianti che dagli utilizzatori professionali. I neofiti potranno cominciare il loro lavoro basandosi su modelli predefiniti personalizzabili e forme geometriche essenziali, integrando nei propri progetti elementi multimediali come per esempio i video; gli esperti che conoscono approfonditamente JavaScript avranno la possibilità di realizzare scenari interattivi come UI per le proprie applicazioni.

A-Frame offre un pattern progettuale basato sull’utilizzo dei blocchi, questi ultimi potranno essere estesi o raggruppati secondo un numero virtualmente infinito di combinazioni, caratteristica che garantisce la massima libertà creativa. L’utilizzo è particolarmente semplice come evidenziato dallo snippet seguente che permette di ottenere il rendering tridimensionale del classico “Hello World“:

<html>
  <head>
    <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box color="#6173F4" width="4" height="10" depth="2"></a-box>
      <a-collada-model src="monster.dae" position="-1 0.5 1" rotation="0 45 0 "></a-collada-model>
      <a-image src="fox.png"></a-image>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Gli ambiti applicativi di A-Frame sono diversi, si pensi per esempio alla possibilità di creare esperienze videoludiche in 3D, soluzioni per il commercio elettronico altamente interattive, panoramiche e video a 360° navigabili, loghi aziendali e interfacce grafiche animate.

Via A-Frame

Post correlati
I più letti del mese
Tematiche