Realtà aumentata con ARjs
Realtà aumentata per il web marker-based, potenziata dal supporto di ARjs e ThreeJS
ARjs è una libreria marker-based che porta la realtà aumentata sul web in maniera snella ed efficiente, sfruttando l’integrazione con three.js e aFrame (un framework entity-component ideato appositamente per il VR); è proprio su quest’ultimo che ci soffermeremo, per la sua facilità di utilizzo e comprensione della documentazione.
# Import delle librerie
Inizializzato un nuovo progetto, il passo successivo è quello di importare le librerie necessarie a far funzionare la nostra scena AR:
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.2.2/aframe/build/aframe-ar.js"></script>
# Inizializzazione della scena
E’ il momento ora di creare una scena in aFrame, dove andranno annidati tutti gli elementi da renderizzare
<a-scene embedded arjs='debugUIEnabled: false'>
<!-- Componenti da utilizzare -->
</a-scene>>
# Marker
I marker sono i componenti principali di ARjs e hanno lo scopo di renderizzare i componenti che abbiamo annidato al loro interno una volta che sono stati inquadrati e scansionati dalla camera. Possono essere fondamentalmente di due tipi barcode e pattern.
Barcode
Rappresentano i numeri come simboli, calcolati su una matrice che, banalmente, ci consente
di identificare più marker al crescere della sua grandezza. La nostra scena andrà modificata nel seguente modo per consentire ad ARjs di riconoscere i marker:
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;
detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
Mentre il tag del marker sarà il seguente:
<a-marker type='barcode' value='1'>
I barcode possono essere generati utilizzando questo tool.
Pattern
Possiamo definirli come dei codici QR semplificati (possono essere generati tramite questo tool) che devono presentare le seguenti caratteristiche:
- Forma quadrata
- Risoluzione massima in pixel di 16x16
- Background in grigio chiaro (#F0F0F0)
- Non devono contenere colori
- Devono contenere simboli semplici come lettere o numeri
Il tag del marker, nel caso ne utilizzassimo uno da noi generato è il seguente:
<a-marker type="pattern" preset="custom" url="...">
# Render e Camera
L’esempio mostrato nella documentazione ufficiale sfrutta come marker un preset di ARjs. Utilizza inoltre anche un componente di aFrame a-box, che ci consente di renderizzare un cubo, basato sul tag generico a-entity che presenta tutte le caratteristiche e le trasformazioni atte al nostro scopo. Infine abbiamo bisogno di una camera, che definisce la prospettiva dalla quale l’utente vede la scena (nel caso di ARjs è quindi una prima persona).
<html>
<script src='https://aframe.io/releases/1.0.0/aframe.min.js'></script>
<script src='https://raw.githack.com/jeromeetienne/AR.js/2.2.2/aframe/build/aframe-ar.js'></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='debugUIEnabled: false'>
<!-- MARKER -->
<a-marker preset='hiro'>
<a-box position='0 0.5 0' material='color: yellow;'></a-box>
</a-marker>
<!-- CAMERA -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Per fare una prima prova possiamo provare a stampare il marker seguente su un comune foglio a4 e inquadrarlo tramite una delle app che ci vengono consigliate dalla documentazione ufficiale.
Articoli suggeriti
ux
La teoria della Gestalt
ux
Le Microinterazioni
