Featured image of post Appunti su WebXR: A-Frame

Appunti su WebXR: A-Frame

Qui trovi tutti gli appunti e le indicazioni che ho scritto sul WebXR realativi ad A-Frame. (In fase di completamento)

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”).

AsseDescrizioneValore Predefinito
XL’asse X negativo si estende a sinistra. L’asse X positivo si estende verso destra.0
YL’asse Y negativo si estende verso il basso. L’asse Y positivo si estende verso l’alto.0
ZL’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">
        [...]

Fonti

Approfondimenti

APPUNTI IN FASE DI STESURA

Grazie ‚ėļ

Condividi:
Licensed under CC BY-NC-SA 4.0
Aggiornato il Oct 27, 2022 21:54 +0200
Create with Hugo, Theme Stack;
Sito creato e gestito da Francesco Garofalo;