Appunti su WebXR: A-Frame

APPUNTI IN FASE DI STESURA

N.B. Questi appunti vengono periodicamente aggiornati. Essendo apputi potrebbero contenere errori, per dettagli accurati far riferimento alle fonti ufficiali disponibili nella sezione fonti.

Introduzione A-Frame

A-Frame è un web framework per sviluppare esperienze di realtà virtuale, mantenuto da Mozilla e Web VR Community, ed è basato sulla libreria web Javascript, three.js. A-Frame offre una piattaforma di sviluppo VR web, senza conoscenze del framework WebGL, che si integra anche con gli occhiali VR più importanti (come HTC VIVE, Oculus, ecc.). A-Frame è basato su codice HTML che rende estremamente accessibile le esperienze di sviluppo per web VR.

Installazione e Strumenti di sviluppo

Per iniziare a sviluppare con A-Frame esistono diverse soluzioni:

Brackets -> integrabile come plug-in browser;
Glitch -> Online Code Editor, possibilità di remix di progetti esistenti (se alcune immagini e progetti a-frame sembrano non raggiungibili, il problema è nel DNS della tua connessione di rete e nell’utilizzo di un ad-block);
Mongoose -> per sviluppare il progetto in locale;
XXAMPP -> come server locale + code editor a scelta;

Quando si pubblica un sito è importante che sia su protocollo di rete sicura SSL quindi in HTTPS, poiché potrebbero esserci problemi con le librerie VR.

Primo Progetto

A partire da un progetto base HTML, il primo passo per sviluppare con A-Frame è includere il JS build, all’interno del tag HTML < script >. Oltre a questo aggiungere all’interno del tag<body> il tag<a-scene></a-scene>, questo servirà per attivare il nostro progetto A-Frame.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>A01 - Installation</title>
        <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    </head>

    <body>
        <a-scene></a-scene>
    </body>
</html>

Questo script è sufficiente per avviare il sistema A-Frame, infatti se tutto è stato fatto correttamente dovresti riuscire a vedere il bottone VR in basso a destra. Se usi un server locale tramite F12 puoi notare le funzionalità aggiunte all’interno dei tag `.

Ad ogni modo questo script è sufficiente per avviare il progetto A-Frame.

HTML & Primitives

a-box, a-cylinder, attributi

Utilizzando semplicemente i tag <a-box></a-box>, nella VR mode vedremo solo uno sfondo nero, la main camera è il Player. Se con il mouse facciamo uno swipe verso il basso, vedremo un cubo bianco sotto di noi.

a-box, white cube

Ed è possibile muovere il Player con i tasti WSAD. Se usciamo dalla VR mode con il cubo in schermata, lo vedremo anche nell’anteprima del browser.

I colori e le dimensioni del cubo sono quelle default del tag ‘’

Per impostare un colore basta modificare il tag a-box: <a-box color="#0000FF">

Per impostare l’altezza, larghezza e profondità aggiungiamo al tag a-box: <a-box color="#0000FF" width="1" height="1.5" depth="0.5">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>A01 - Installation</title>
        <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    </head>
    <body>
      <a-scene>
        <!-- Cube -->
        <a-box color="#0000FF" 
               width="1" 
               height="1.5" 
               depth="0.5">
        </a-box>
        <!-- Cylinder -->
        <a-cylinder color="#00008F" 
                    width="0.5"
                    height="0.7"
                    radius="2"
                    segments-radial="3"
                    open-ended="true"
                    side="double">
        </a-cylinder>
        
      </a-scene>
    </body>
</html>

Esempio del codice

Apprfondimenti sui singoli componenti sono disponibili al seguente URL, sulla documentazione ufficiale: https://aframe.io/docs/1.3.0/primitives/a-box.html

Position

Il componente Position posiziona le entità in determinati punti dello spazio 3D. Position assume un valore di coordinata dato da tre numeri delimitati da spazi (es. position=“2 5 3”).

Tutte le entità hanno di default il componente position (position=“0 0 0”).

Asse	Descrizione	Valore Predefinito
X	L’asse X negativo si estende a sinistra. L’asse X positivo si estende verso destra.	0
Y	L’asse Y negativo si estende verso il basso. L’asse Y positivo si estende verso l’alto.	0
Z	L’asse Z negativo si estende all’interno. L’asse Z positivo si estende verso l’esterno.	0

Relative Position

Le posizioni nello spazio globale delle entità figlio ereditano dalle entità padre. Considerata questa scena:

1
2
3
4
<a-entity id="parent" position="1 2 3">
    <a-entity id="child1"></a-entity>   
    <a-entity id="child2" position="2 3 4"></a-entity>
</a-entity>

In questo caso la posizione del world-space è quella definita all’interno del parent a-entity, quindi anche la posizione del child 1, che di default è 0 0 0, sarà 1 2 3 dato che la sua posizione originale è 0 0 0. La posizione di child 2 invece sarà data dalla sua posizione relativa nello spazio (#child2 2 2 3) più la posizione del parent che child 2 ha ereditato, per cui la sua posizione finale nello spazio sarà #child2 3 5 7.

Aggiornamento della posizione

Per l’aggiornamento della posizione per ragioni di performance ed efficienza è consigliato modificare direttamente la posizione tramite three.js invece del position Vector3.

1
2
3
4
5
// With three.js
el.object3D.position.set(1, 2, 3);

// With .setAttribute (less recommended).
el.setAttribute('position', {x: 1, y: 2, z: 3});

Rotation

La componente rotation definisce l’orientamento di un’entità in gradi. Prende il beccheggio (), l’imbardata () e il rollio () come tre numeri delimitati dallo spazio che indicano gradi di rotazione.x y z

Tutte le entità hanno intrinsecamente il componente rotation.

Rotation Reference

Scale

Il componente scale definisce una trasformazione di restringimento, allungamento o inclinazione di un’entità. Sono necessari tre fattori di scala per gli assi X, Y e Z.

Tutte le entità hanno intrinsecamente il componente scale.

Scale Reference

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>A02 - Example Pos/Rot/Scale</title>
        <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    </head>

    <body>
      <a-scene>
        <!-- Box -->
        <a-box color="#0000FF" 
               width="1" 
               height="1.5" 
               depth="0.5"
               position="0 2 0"
               rotation="0,0,0">
          <!-- Left Eye !-->
          <a-circle color="#0000DF"
                    position="2 0 2">
            <a-circle
                      color="#000000"
                      scale="0.5 0.5 1"
                      position="0 0 0.1">
                <a-circle
                        color="#FFFFFF"
                        scale="0.5 0.5 1"
                        position="-0.2 0 0.1">
              </a-circle>
            </a-circle>
          </a-circle>
          <!-- Right Eye !-->
          <a-circle color="#0000DF"
                    position="-2 0 2">
              <a-circle
                    color="#000000"
                    scale="0.5 0.5 1"
                    position="0 0 0.1">
            </a-circle>
            <a-circle
                    color="#000000"
                    scale="0.5 0.5 1"
                    position="0 0 0.1">
              <a-circle
                        color="#FFFFFF"
                        scale="0.5 0.5 1"
                        position="0.2 0 0.1">
              </a-circle>
            </a-circle>
          </a-circle>
        </a-box>
        <!-- Cylinder -->
        <a-cylinder color="#00008F" 
                    width="0.5"
                    height="0.7"
                    radius="2"
                    segments-radial="3"
                    open-ended="true"
                    side="double"
                    rotation="50, 0, 0">
        </a-cylinder>
      </a-scene>
    </body>
</html>

Face Example

Reflection

Quando i fattori di ridimensionamento (o scale) sono negativi, significa che si ha una riflessione.

Questo avviene soprattutto per le Sky Spheres. Le Sky Spheres contengono l’intera scena e hanno una texture mappata sulla superficie interna. Per fare ciò, possiamo riflettere, o invertire, la sfera nella direzione Z, come nell’esempio sottostante.

La reflection è utile qunando si vogliono creare particolari animazioni.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>A03 - Example Pos/Rot/Scale/Reflection</title>
        <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    </head>

    <body>
      <a-scene>
        <!-- Box -->
        <a-box color="#0000FF" 
               width="1" 
               height="1.5" 
               depth="0.5"
               position="0 2 0"
               rotation="0,0,0">
          <!-- Left Eye !-->
          <a-circle color="#0000DF"
                    position="2 0 2">
            <a-circle
                      color="#000000"
                      scale="0.5 0.5 1"
                      position="0 0 0.1">
                <a-circle
                        color="#FFFFFF"
                        scale="0.5 0.5 1"
                        position="-0.2 0 0.1">
              </a-circle>
            </a-circle>
          </a-circle>
          <!-- Right Eye !-->
          <a-circle color="#0000DF"
                    position="-2 0 2">
              <a-circle
                    color="#000000"
                    scale="0.5 0.5 1"
                    position="0 0 0.1">
            </a-circle>
            <a-circle
                    color="#000000"
                    scale="0.5 0.5 1"
                    position="0 0 0.1">
              <a-circle
                        color="#FFFFFF"
                        scale="0.5 0.5 1"
                        position="0.2 0 0.1">
              </a-circle>
            </a-circle>
          </a-circle>
        </a-box>
        <!-- Cylinder -->
        <a-cylinder color="#00008F" 
                    width="0.5"
                    height="0.7"
                    radius="2"
                    segments-radial="3"
                    open-ended="true"
                    side="double"
                    rotation="50, 0, 0">
        </a-cylinder>
      </a-scene>
    </body>
</html>

Face Example with sphere reflection

Texture & Materials

Material

Il componente Material dà aspetto a un’entità. Possiamo definire proprietà come colore, opacità o texture. Questo è spesso abbinato al geometry component che ne da la forma.

Inoltre la texture può essere associata alla componente colore nel seguente modo:

1
2
3
4
5
6
7
8
<a-box color="#0000FF" 
              src="img/texture.png"
               width="1"
               height="1.5" 
               depth="0.5"
               position="0 2 0"
               rotation="0,0,0">
</a-box>

Il componente color influisce anche sul colore della texture.

Normal Mapping

Tramite il tag normalmap possiamo aggiungere anche la normal map all’oggetto, istanziando l’asset in primo luogo.

Puoi fare una prova, scaricando da qui texture e normal map.

Il primo passo è istanziare la normal map come asset:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    <a-assets>
      <img id="normalpam" src="img/Gravel_001_Normal.jpg">
    </a-assets>
    [...]

            <!-- Box -->
        <a-box color="#0000FF"
              src="img/Gravel_001_BaseColor.jpg"
              normalmap="normalmap"
               width="2"
               height="2" 
               depth="0.5"
               position="0 2.5 0"
               rotation="0,0,0">
        [...]

Creating a Custom Environment

Background & Sky

Ground

Per aggiungere un plane Ground, possiamo usare . Di default, i piani sono orientati parallelamente all’asse XY. Per renderlo parallelo al suolo, dobbiamo orientarlo lungo l’asse XZ. Possiamo farlo ruotando il piano negativo di 90° sull’asse X.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<body>
        <a-scene>
          <!--Asset-->
            <a-assets>
                <img id="floor" src="img/floor.jpg">
                <img id="floor_Normal" src="img/floor_normal.jpg">
            </a-assets>
            
            <!-- Ground -->
            <a-plane material="color: #FFFFFF;
                               src: #floor;
                               repeat: 5 5;
                               normal-map: #floor_Normal;
                               normal-texture-repeat: 5 5"
                     rotation="-90 0 0"
                     scale="10 10 1">
            </a-plane>
        </a-scene>
    </body>

Ground Example

Fonti

Alexandra Etienne](https://www.youtube.com/watch?v=AgemRJZGOXc&)

Normal Mapping

Approfondimenti

Se ti interessa approfondire il mondo A-Frame ti consiglio il seguente corso udemy: https://www.udemy.com/course/learn-a-frame-and-get-ready-for-webvr/learn/lecture/7980376#overview tenuto da Danilo Pasquariello (Twitter:@theDart76).
three.js è una libreria che usa le API WebGL per creare animazioni grafiche 3D per il browser web senza l’ausilio di pluging o altre librerie. Sito Ufficiale: https://threejs.org/

APPUNTI IN FASE DI STESURA

Grazie ☺